[Tutorial] Create New BBCode Tags

Code:

/*
 *  Application: Create New BBCode Tags
 *  Date: 18/05/2018
 *  Version: 1.321052018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
(function() {
    BBParser = {
        initialize: function() {
            $(function() {
                BBParser.setupBBParser();
            });
        },
        add: [
            /*
            * Note: Add a comma at the end of each new entry
            * '{option}' corresponds to the optional tag title, and '{content}' correspond to the text between the tags
            */
 
            {
                tag: 'success',
                close: true,
                replacement: '<div class="notice notice-success"><h5>{option}</h5><p>{content}</p></div>'
            },
 
            {
                tag: 'warn',
                close: true,
                replacement: '<div class="notice notice-warn"><h5>{option}</h5><p>{content}</p></div>'
            },
 
            {
                tag: 'info',
                close: true,
                replacement: '<div class="notice notice-info"><h5>{option}</h5><p>{content}</p></div>'
            },
 
            {
                tag: 'alert',
                close: true,
                replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'
            },
 
            {
                tag: 'guest',
                close: true,
                replacement: '<div class="guest">{content}</div>',
                replace: function(option, content) {
                    if (_userdata.session_logged_in < 1) {
                        return 'You need to be logged in to view this content';
                        return content;
                    }
                }
            }
 
            // Note: Do not add a comma at the end of the last entry
        ],
        // Do not change anything down
        validateTag: function(a) {
            if (!/^\w+$/.test(a)) throw new RangeError("You added an invalid tag: " + a);
        },
        replacers: function(a, b, c) {
            return (a || "").replace(/{option}/g, b || "").replace(/{content}/g, c || "");
        },
        optionReg: /.*?=("|'|)(.*?)\1\]/,
        parsedContent: function(a, b, c) {
            return a.replace(c ? RegExp("(\\[" + b.tag + "[^\\]]*\\])([\\s\\S]*?)\\[/" + b.tag + "]", "g" + (b.insensitive ? "i" : "")) : RegExp("\\[" + b.tag + "[^\\]]*\\]", "g" + (b.insensitive ? "i" : "")), function(d, e, f) {
                c || (e = d);
                e = BBParser.optionReg.test(e) ? e.replace(BBParser.optionReg, "$2") : b.defaultOption;
                if("undefined" !== typeof b.replace) {
                    d = c ? b.replace(e, f) : b.replace(e);
                    "string" === typeof d ? c ? f = d : e = d : d;
                    "object" === typeof d && (e = d.option || e, f = d.content || f);
                }
                return BBParser.replacers(b.replacement, e, f);
            });
        },
        setupBBParser: function() {
            var postBody = $(".postbody, .blog_message");
            for (var i = 0, e;(e = postBody[i++]);) {
                for (var j in BBParser.add) {
                    var item = BBParser.add[j];
                    // Validating tag
                    BBParser.validateTag(item.tag);
                    e.innerHTML = BBParser.parsedContent(e.innerHTML, item, item.close);
                }
            }
        }
    };
    BBParser.initialize()
})();

Code:

[tagname="Title"]My Content[/tagname]

Can be replaced by

<div class="some-class"><p>Title</p>My Content</div>

Steps:

close
-> close: true <- means the tag needs to be closed. For example:

Code:

[tagname]My Content[/tagname]

defaultOption
-> defaultOption <- will add a default "title" if one is not entered in the first tag. For example... If you add -> defaultOption: 'SOME TEXT' <- See an example:

Code:

[tagname]My Content[/tagname]

Can be replaced by

<div class="some-class"><strong>SOME TEXT</strong>My Content</div>


'SOME TEXT' will be added automatically if you do not have a predefined title

replacement
-> replacement <- will replace the tags with an html structure defined by you. For example:

Code:

replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'

The [alert] tag would be replaced by the html structure defined above.

Code:

{
    tag: 'alert',
    close: true,
    replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'
},

replace
You can use replace to change tag values by creating a function with some kind of predefined condition or something. For example:

Code:

{
    tag: 'daemon',
    close: true,
    replacement: '<div class="daemon-box"><p>{option}</p><hr>{content}</div>',
    replace: function(option, content) {
        if (content.indexOf("shazam") !== -1) {
            return {
                option: 'SHAZAM ALERT',
                content: 'OMG, you entered the magic word :O'
            };
        }
    }
}

See the following image as the effect of this code would be:

Click here to see:

Code:

.notice {
    background: url(http://i.imgur.com/VWRy0Mc.png) repeat-x 0 0;
    color: #FFF;
    width: 83%;
    font-weight: normal;
    padding: 13px 15px;
    margin-bottom: 2.5em;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    position: relative;
    left: 34px;
}
 .notice p {
    margin-bottom: 1.5em;
}
 .notice p:last-child {
    margin-bottom: 0;
}
 .notice h5 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: .65em;
}
 .notice:before {
    content: "";
    background: url(http://i.imgur.com/PcLYd52.png) no-repeat 100% 0;
    width: 33px;
    height: 40px;
    position: absolute;
    left: -34px;
    top: 9px;
}
 .notice-success {
    background-color: #EEF4D4;
    color: #596C26;
    border: 1px solid #8FAD3D;
}
 .notice-success:before {
    background-position: 100% 0;
}
 .notice-warn {
    background-color: #FFEA97;
    color: #796100;
    border: 1px solid #E1B500;
}
 .notice-warn:before {
    background-position: 100% -800px;
}
 .notice-alert {
    background-color: #EFCEC9;
    color: #933628;
    border: 1px solid #AE3F2F;
}
 .notice-alert:before {
    background-position: 100% -400px;
}
 .notice-info {
    background-color: #C6D8F0;
    color: #285797;
    border: 1px solid #4381CD;
}
 .notice-info:before {
    background-position: 100% -1200px;
}

Suggestions:

Youtube thumbnail

READ: https://help.forumotion.com/t153342-tutorial-create-new-bbcode-tags#1068806

Download button

READ: https://help.forumotion.com/t153342-tutorial-create-new-bbcode-tags#1068818

@Draxion wrote:Sorry, @Daemon, I don't know if I am clueless when it comes to this code, but I tested it on my testing site (phpbb3) and I couldn't get it to work. Can you explain exactly how to get these tags to show? Thanks.

Code:

[successo="abc"]abc[/successo]

Code:

[warn="abc"]abc[/warn]

Code:

[info="abc"]abc[/info]

Code:

[alert="abc"]abc[/alert]

Code:

[guest="abc"]abc[/guest]

Code:

SyntaxError: expected expression, got ')'

Code:

re = value.close ? new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]", "gi");

@Draxion wrote:Still, says "Syntax Error"

I'm getting it here.

Code:

re = value.close ? new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]", "gi");

@Draxion wrote:Sorry, still getting the same error.

EDIT: My bad. I didn't refresh the page and therefore I took the same code. ;P hahah

Code:

{
    tag: 'ytscreen',
    replacement: '<a href="https://youtube.com/watch?v={ATTR}"><img src="http://i.ytimg.com/vi/{ATTR}/mqdefault.jpg" width="320px" height="180px" alt="Click to Watch" title="Click to Watch"></a><br>Click on the image to watch'
}

Code:

[ytscreen="0RyInjfgNc4"]

Code:

{
    tag: 'download',
    replacement: '<a href="{ATTR}"><img src="https://i.imgur.com/WW2efTS.png"></a><br>Download Link: <a href="{ATTR}">{ATTR}</a>'
}

Code:

[download="http://somelink.com"]

@Daemon wrote:Another suggestion:

Code:

download: {
    close: false,
    replacement: '<a href="{ATTR}"><img src="https://i.imgur.com/WW2efTS.png"></a><br>Download Link: <a href="{ATTR}">{ATTR}</a>'
}

Code:

[download="http://somelink.com"]

Code:

/*
 *  Application: Create New BBcode Tags
 *  Date: 22/08/2016
 *  Version: 1.222112016
 *  Copyright (c) 2016 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
*/
jQuery(document).ready(function($) {
 
    var bbCodes = {
 
        // Note: Add a comma at the end of each new entry
        // '{ATTR}' matches the 'title' of the tag, and '{CONTENT}' matches 'text' between tags
 
      download: {
            close: false,
            replacement: '<a href="{ATTR}"><img src="https://i.imgur.com/WW2efTS.png"></a><br>Download Link: <a href="{ATTR}">{ATTR}</a>'
          },
        guest: {
            close: true,
            replacement: '<div class="guest">{CONTENT}</div>',
            replace: function(content) {
                if (_userdata.session_logged_in < 1) {
                    return "You need to be logged in to view this content";
                    return content;
                }
            }
        }
 
        // Note: Do not add a comma at the end of the last entry
 
    };
 
    // Do not change anything down
 
    var getPost = $(".postbody, .blog_message");
    var entry;
    for (var i = 0, e;(e = getPost[i++]);) {
        entry = $(e);
        var re, match;
        $.each(bbCodes, function(tag, value) {
 
            re = value.close ? new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]", "gi");
            match = entry.html().match(re);
 
            if (match) {
                var content, b, c, as_string, as_func, replacement;
                for (var tag in match) {
                    content = match[tag];
                    b = "$3";
                    if(typeof value.replace != "undefined") {
                        as_string = value.replace.toString();
                        as_func = eval('(' + as_string + ')');
                        if (as_func(content)) b = as_func(content);
                    }
                    replacement = value.replacement.replace(/{ATTR}/g, "$2").replace(/{CONTENT}/g, b);
                    c = content.replace(re, replacement);
                    entry.html(entry.html().replace(content, c));
                }
            }
        });
    }
});