Create New BBCodes with new LGBB

http://www.avacweb.com

(all boards and all sites... if you wish to use it on an external site, feel free)

Updated 23/7/13
LGBB has been updated to allow multiple attributes. You can now specify multiple attirubtes in BB tags.
Example: [ div class="mydiv" id="thispost"]
Read the API description below for handling multiple attributes.
All your old BBcodes will still work with the updated LGBB, and you can carry on using the updated version in the same way as the old one. The only thing that may cause issues is replace and validate functions. They now receive an object containing the attributes.


I decided to re-write LGBB after realizing, maybe it isn't getting used as often as it should because people aren't seeing the potential that this brings to their forum, and people aren't seeing the potential, because it isn't as easy to use as it should be. SO I've re-wrote it and re-releasing it, and it's now much easier to use.

For those of you that don't know, LGBB is a BBcode (into HTML) parser with an API for adding as many new BBcodes as you'd like. This means you can add new BBcodes to your board, this has allowed me to add to this board the inline code bbcode, or the @LGforum user tag and more (if you wish to read all the BBcodes I have added by using the power of LGBB, look here: http://www.avacweb.com/t432-bbcodes-available-on-avacweb). For example, it could allow you to add a BBcode such as [staffbox][/staffbox] which changes into a nice staff box when posted.

Here's the LGBB parser and API core, to begin using LGBB, you must put this in a Javascript file and tick 'In All Pages':
Code:Select Theme:

الكود:

(function(){"LGBB, a Javascript BBCode parser and API. Copyright \u00a9 by AvacWeb 2011-2013. All Rights Reserved. Use of this script is not allowed without this entire copyright notice in place. No Distribution without authors consent.";var h={expando:"{LGBB:"+(new Date).getMilliseconds()+"}",bbcodes:{},basics:[],attrReg:/([\w-]+)=("|'|)(.*?)\2(?=[\s\]])/g,parseTag:function(a,b,c){for(var d=b.insensitive?"i":"",e="\\["+b.tag+"[^\\]]*?\\]",k="\\[\\/"+b.tag+"\\]",d=c?RegExp("("+e+")(?!.*"+e+")((?:.|[\\r\\n])*?)"+k,d):RegExp(e,d),l=[];d.test(a);)a=a.replace(d,function(a,d,e){c||(d=a);var f={},g;for(g in b.defaultAttr)f[g]=b.defaultAttr[g];d=h.attrReg.test(d)?d.match(h.attrReg):[];if(d.length)for(var k=0;g=d[k++];)(a=/([\w-]+)=['"]?(.*?)['"]?$/.exec(g))&&a.length&&(a[1]===b.tag&&(a[1]="default"),f[a[1]]=a[2]);if(b.validate&&(c?!b.validate.call(b,e,f):!b.validate.call(b,f)))return l.push(a),h.expando;a=b.replacement;b.replace&&(g=c?b.replace.call(b,e,f):b.replace(f),"string"===typeof g?a=g:g&&"object"===typeof g&&(e=g.content||e,f=g.attr||f,"string"===typeof f&&(f={"default":f})));return h.swapReplacers(a,e,f)});for(d=0;e=l[d++];)a=a.replace(h.expando,e);return a},swapReplacers:function(a,b,c){if(!a)return"";b||(b="");c||(c={});a=a.replace(/{CONTENT}/g,b);for(var d in c)a=a.replace(RegExp("{ATTR-"+d.toUpperCase()+"}","g"),c[d]);c["default"]&&(a=a.replace(/{ATTR}/g,c["default"]));return a.replace(/{ATTR(-[A-Z-]+)?}/g,"")},parse:function(a){var b=h.bbcodes,c=h.basics;h.expando="{LGBB:"+(new Date).getMilliseconds()+"}";for(var d=0,e;e=c[d++];){var k=e[0];if("string"===typeof k&&-1===e[1].indexOf(k))for(;-1!==a.indexOf(k);)a=a.replace(k,e[1]);else a=a.replace(k,e[1])}for(var l in b)if(b.hasOwnProperty(l)&&(c=b[l])&&c.replacement&&c.tag)try{a=h.parseTag(a,c,c.close)}catch(m){console.log("LGBB: Error parsing "+c.tag+" tag.",m)}return a},add:function(a,b){if(!/^\w+$/.test(a))throw new Exception("Invalid LGBB tag name: "+a);b.tag||(b.tag=a);b.defaultAttr?"string"===typeof b.defaultAttr&&(b.defaultAttr={"default":b.defaultAttr}):b.defaultAttr={};"close"in b||(b.close=!1);h.bbcodes[a]=b;return this},addSwap:function(a,b){h.basics.push([a,b]);return this}};window.LGBB=h})();

Ticking 'In All Pages' allows us to be able to use it anywhere, meaning we can even parse new BBcodes in private messages, announcements and more.

Now LGBB is literally just the parser and API, that means it does the turning of a string of text into another string of text with all the BBcodes swapped, it doesn't take care of the posts automatically, for that you'll need this code, which should be a good example of how LGBB can be used, its commented to help. Put it in the same Javascript as core directly below it. This code ensures your custom BBcodes are not parsed in code boxes.
Code:Select Theme:

الكود:

$(function(){   var p = $('.post .content'); //get the posts   for(var i = 0, post; (post = p[ i++ ]); ) {      var codes = post.getElementsByTagName('code'), store = [];      for(var j = 0, c; (c = codes[j++]); ) {         store.push(c.innerHTML);         c.innerHTML = '';      }      post.innerHTML = LGBB.parse( post.innerHTML ); //swap the innerhtml of the post, for the LGBB parsed innerhtml.      for(var s, j = 0; (s = store[j]); ) codes[j++].innerHTML = s;   }});

That code was for phpbb3, if you don't use phpbb3, you need to swap this line: var p = $('.post .content'); for the correct one for your version below:
Invision: var p = $('.post-entry');
PunBB: var p = $('.post .entry-content');
PhpBB2: var p = $('.postbody');

Okay, so now we've installed the LGBB parser, and we've got it parsing our posts (including pm's), but it still won't do anything, because we haven't added any BBcodes yet. So here's some BBcodes to get you started, add these in the same Javascript as you added the LGBB core, right underneath. These should be good examples of how to add your own BBcodes, but there's a full explanation about the API below. There are more custom BBcodes in this topic for you to check out too.
Code:Select Theme:

الكود:

LGBB.add('div', {   close : true,   replacement : '<div class="{ATTR}">{CONTENT}</div>'});LGBB.add('span', {   close : true,   replacement : '<span class="{ATTR}">{CONTENT}</span>'});LGBB.addSwap(/Code:(.*?)\<code\>(?:\<br\>)?\[codetitle=["']?([^\]]+?)["']?]/gi, '$2:$1<code>');for(var LG = 1; LG<7; LG++) {   LGBB.add('h' + LG, {      close : true,      insensitive : true,      replacement : '<h' + LG + '>{CONTENT}</h' + LG + '>'   });}

That will add you a number of BBcodes to your board. (This will not add new buttons to the editors, that's not what LGBB does, LGBB is just the parser, allowing these bbcodes to be turned into html).



Hopefully now you've installed LGBB, have seen how it can be put to use (eg parsing posts), and seen how BBcodes are added. If your not already well on your way making your own BBcodes, then read on to learn about the API and how LGBB is used.

Click to read the LGBB API, so you can add more advanced bbcodes:


I'll be happy to take requests for BBcodes below if you have anything specific you would like.

Last edited by LGforum on Tue 23 Jul - 13:46; edited 12 times in total

LGBB BSpoiler Add-On
Add a new spoiler called the bspoiler (button-spoiler) to your board. The spoiler is very similar to the one displayed in this thread: http://help.forumotion.com/t105431-how-to-change-the-spoiler-like-this

And here is a screenshot:

The tag is 'bspoiler' - meaning button spoiler.
You can use it like so (without the spaces):Code:Select Theme:

الكود:

 [ bspoiler ] the hidden text [/ bspoiler ]

or you can define some text for next to the button like this: [ bspoiler="This is hidden text" ] the hidden text [/ bspoiler ]
The speech marks are optional, and single and double quote marks are interchangeable.

To add this new BBcode to your LGBB add this code into your LGBB JS file:
Code:Select Theme:

الكود:

LGBB.add('bspoiler', {   close: true,   defaultAttr : 'Spoiler',   replacement: '<div style="padding: 3px; text-align:center; border-bottom: 1px solid"><em>{ATTR}: </em><input type="button" onclick="togglebspoiler(this)" value="Show"/></div><div class="bspoiler" style="display:none">{CONTENT}</div>'});function togglebspoiler(elem) {   $(elem.parentNode.nextSibling).toggle();   elem.value = (elem.value === 'Show') ? 'Hide' : 'Show';}

Simple

The hidden box can be styled with the className of '.bspoiler' in the css.
Code:Select Theme:

الكود:

.bspoiler {   styling...}

Try it out here:

NOGUEST LGBB Add-On BBcode
Add a noguest tag, allowing you and users to hide contents from guests.

This has been quite popular ever since I added it on this board ages ago, and somehow it spread like wildfire, anyway, using the LGBB API here's how to add a noguest tag on your board.

Simply add this to your LGBB javascript file:
Code:Select Theme:

الكود:

LGBB.add('noguest', {   close : true,   replacement : '<span class="noguest">{CONTENT}</span>',   replace : function(content) {      if(!document.getElementById('logout')) return 'Please log in or register to view this content. ';      return content;     }});

It uses the FM navigation bar to check if the user is logged in or not, if you have removed it then this will not work.

Off topic tag LGBB Add-On
This will add to your LGBB a tag for off topic notes inside a post. Off topic notes will be smaller, and will be aligned to the right of the post. Sort of seperate from the bulk of the post.

Simply add this code to your LGBB JS file:
Code:Select Theme:

الكود:

LGBB.add('offtopic', {   close: true,   replacement: '<div style="padding: 3px; float: right; border: 1px solid; font-size: 0.8em">Off Topic: {CONTENT}</div>'});