BBInsertBar

Stash · November 2006

There didn't appear to be an official forum thread for BBInsertBar, so I thought I'd start one :) I like the BBInsertBar a lot, but found that it added a LOT of weight to each and every page. Since I only use a handfull of different colours ever, I had a look to see if I could reduce the number of colours that appear in the colour button popup. I thought I'd share this so if anyone else wants to ease up the pages and implement what I like to think of as BBInsertBarLite. I commented out lines 72 to 99 inclusive in the deafult.php and my test page went from 76,943 bytes to 27,785 bytes! Yes, I am that good at PHP, thank you. /me bows then breaks into fits of laughter

Stash · November 2006

I just spotted a small area that can be optimised in BBInsertBar 0.1.5. The styles for the colour picker are inline, so I've put them into the style.css file that comes with the extension

default.php

Change line 81 from

echo '<div onclick="writeColor(\''.$col.'\'); " title="#'.$col.'" style="cursor:pointer; position:absolute; left:'.(10+($spalte-1)*10).'px; top:'.(($zeile-1)*10).'px; width:9px; height:9px; border:1px solid #000000; background-color:#'.$col.'">&nbsp;</div>';

to

echo '<div onclick="writeColor(\''.$col.'\'); " title="#'.$col.'" style="left:'.(10+($spalte-1)*10).'px; top:'.(($zeile-1)*10).'px; background-color:#'.$col.'">&nbsp;</div>';

Change line 95 from

echo '<div onclick="writeColor(\''.$col.'\');" title="#'.$col.'" style="cursor:pointer; position:absolute; left:'.(10+($spalte-1)*10).'px; top:'.(($zeile-1)*10).'px; width:9px; height:9px; border:1px solid #000000; background-color:#'.$col.';">&nbsp;</div>';

to

echo '<div onclick="writeColor(\''.$col.'\');" title="#'.$col.'" style="left:'.(10+($spalte-1)*10).'px; top:'.(($zeile-1)*10).'px; background-color:#'.$col.';">&nbsp;</div>';

Change line 105 from

echo '<div onclick="writeColor(\''.$col.'\');" title="#'.$col.'" style="cursor:pointer; position:absolute; left:0px; top:'.(($zeile-1)*10).'px; width:9px; height:9px; border:1px solid #000000; background-color:#'.$col.';">&nbsp;</div>';

to

echo '<div class="BBBarColorBasic" onclick="writeColor(\''.$col.'\');" title="#'.$col.'" style="top:'.(($zeile-1)*10).'px; background-color:#'.$col.';">&nbsp;</div>';

style.css

After line 29 (the end of #BBBarClorPicker) add the following:

#BBBarColorPicker div {
 border: 1px solid #000;
 cursor: pointer;
 position: absolute;
 width: 9px;
 height: 9px;
}

#BBBarColorPicker div.BBBarColorBasic {
 left: 0px;
}

This took my test page down to 50,860 bytes, and my BBInsertBarLite test page to 22,006 bytes.

Hope this helps someone else.

TomTester · November 2006

Check the forums, there have been several bug reports on this add-on (color & icons do not work). I took out most of the buttons myself. Works peachy.

Stash · November 2006

I did check the forums, and while I've not tried the icons yet, the colours work 100% fine for me. I just hated how much bloat the colour picker added to each page load. I wanted to try and help make this extension better and hadn't noticed anyone else tackling this particular problem. I'm sorry if they already have, perhaps you could post the link to where that happened?

pbear · November 2006

Also you need to remove the quotes it adds for the font tag. They're unnecessary even if the font name is more than one word.

I was looking for a reduced color palette on this. Thanks!

Stash · November 2006

I just tried this in IE7 and there's some REALLY strange stuff going on, but in Firefox 2 this all works fine

Only the following buttons appear to work more-or-less as expected in IE7, for me:

bold
italic
underline
strikeout
code
sub
sup

default.php

I've updated the font formatting in the BBBarFontList by replacing the deprecated <font> tag with a style in the anchor tag. I also removed the bullet points as I didn't really like them...
Line 112 from

echo '<a class="BBarFontList" onclick="writeFont(\''.$value.'\');" title="'.$value.'">&nbsp;&bull;&nbsp;<font face="'.$value.'">'.$value.'</font></a>';

to

echo '<a class="BBarFontList" style="font-family:'.$value.';" onclick="writeFont(\''.$value.'\');" title="'.$value.'">'.$value.'</a>';

functions.js

pbear: this gets rid of the inverted commas that you mentioned and fixes the font button! Thanks

Now the font formatting should work in Firefox (it does for me).
Line 315 from

	if (wert == 'BBCode')   input.value = input.value.substr(0, start) + '[font="'+ font +'"]'+ insText + '[/font]' + input.value.substr(end);

to

	if (wert == 'BBCode')   input.value = input.value.substr(0, start) + '[font='+ font +']'+ insText + '[/font]' + input.value.substr(end);

I changed this to replace the deprecated <font> tag with a styled <span>.
Line 316 from

	if (wert == 'Html')   input.value = input.value.substr(0, start) + '<font face="'+ font + '">'+insText+'</font>' + input.value.substr(end);

to

	if (wert == 'Html')   input.value = input.value.substr(0, start) + '<span style="font-family:'+ font + ';">'+insText+'</span>' + input.value.substr(end);

I changed this to remove some line returns. I don't like the extra lines that vanilla puts between list items, if I want a blank line, I'll hit enter again myself. The BBCode works wonderfully, but the HTML you end up having to have in one big line, which is sucky, but hey...
Lines 216-217 from

		if (wert == 'BBCode')   input.value = input.value.substr(0, start) + '[ulist]\n[*]'+ insText + '\n[/ulist]' + input.value.substr(end);
		if (wert == 'Html')   input.value = input.value.substr(0, start) + '<ul>\n<li>'+insText+'</li>\n</ul>' + input.value.substr(end);

to

		if (wert == 'BBCode')   input.value = input.value.substr(0, start) + '[ulist][*]'+ insText + '\n[*]\n[*][/ulist]' + input.value.substr(end);
		if (wert == 'Html')   input.value = input.value.substr(0, start) + '<ul><li>'+insText+'</li><li></li><li></li></ul>' + input.value.substr(end);

Line 221-222 from

		if (wert == 'BBCode')   input.value = input.value.substr(0, start) + '[list]\n[*]'+ insText + '\n[/list]' + input.value.substr(end);
		if (wert == 'Html')   input.value = input.value.substr(0, start) + '<ol>\n<li>'+insText+'</li>\n</ol>' + input.value.substr(end);

to

		if (wert == 'BBCode')   input.value = input.value.substr(0, start) + '[list][*]'+ insText + '\n[*]\n[*][/list]' + input.value.substr(end);
		if (wert == 'Html')   input.value = input.value.substr(0, start) + '<ol><li>'+insText+'</li><li></li><li></li></ol>' + input.value.substr(end);

style.css

This makes the BBBarFontList a little tighter fitting.
Line 50 from

width:150px;

to

width:10em;

And this fixes the mouseover effect for the font list.
Line 62-66 from

{
a.BBBarFontList:hover {
 color:#000000;
 background-color:#FFF4CF;

to

{

#BBBarFontPicker a:hover {
	color:#000;
	background-color:#fff4cf;
}

pbear · November 2006

Dude. Rock on! :)

kimonostereo · November 2006

Has this stuff already been added to the extension or is this something we need to do on our own?

Minisweeper · November 2006

It hasnt been added yet. I'll let hutstein take a look at it and check it over (since it's his extension) to decide if he wants to add it.. I think he's still active so it should be alright.

Stash · November 2006

I'm embarrassed to say that this is the first time I've contributed anything to open source and it really is nice to help out other people while helping yourself. Now to just get IE7 working. If any JS gurus out there want to take a look then that would be great, as with both PHP and JS I'm just bumbling around in the dark modifying stuff that seems to make sense.

My hat comes off to hutstein as there is absolutely no way I could have created this excellent extension from scratch, I'm just happy to help improve it if I can

Edit: Here's a link to an archive for hutstein. Feel free to moderate this link out if you think it shouldn't be publicly available.

kimonostereo · December 2006

any word on when this will be added to the extension instead of "hacking" it :-) ?
Feeling lazy!

---------
Take a break with a webcomic!
Read nemu-nemu.com.

Apreche · December 2006

I'm having a problem with BBInsert Bar and IE7 as well. If you try to make a link, it copies and pastes any text already in the text box after the link. If it isn't updated, maybe I will switch to a different toolbar.

Stash · December 2006

Regarding IE7, see http://lussumo.com/community/discussion/4418/bbinsertbar/#Item_6

If it isn't updated, maybe I will switch to a different toolbar.

Is that a threat? LOL
Perhaps you could take a look and fix the problem?

chuyskywalker · December 2006

I'm going to be addressing this too, since I've been getting some of the same "wow it's broken" reports for IE6/7 when using it in ForcedBBCode.

Also, I'll see about moving the div code generation from php to JS so that it can be cached with the other functions. I noted the CSS optimization too, but it could all be moved out. (To be perfectly honest, you could move the entire toolbar creation process to JS. Maybe I'll just do that...)

kimonostereo · December 2006

Has anyone gotten this to work well in the dreaded IE6/ or 7 yet?

Also does this work with Vanillacons? I can't even get Vanillacons to work on their own for some reason... selecting a different set of vanillacons makes the emoticons disappear.

------
Take a break and enjoy a webcomic!
nemu*nemu

Stash · March 2007

Can we get this discussion closed so that new stuff goes in the Official BBInsertBar discussion?

BBInsertBar

Comments

default.php

style.css

default.php

functions.js

style.css