UserTags.js

var UserTags = function () {
        return this;
};

/**
 * __renderTemplate
 *     renderTemplate invokes a small template engine that turns an HTML string
 *     into an HTML string with the templates substituted with the escaped values
 *     of the template data.
 *
 * @param {string}          template - template string to render
 * @param {object<key, val} data     - a key-val dictionary of template names and their data
 * 
 * @return {string} the rendered template
 */
UserTags.prototype.__renderTemplate = function (template, data) {
        if (typeof template !== 'string') return null;
        if (typeof data     !== 'object') return null;

        for (var key in data) {
                template = template.replace(
                        new RegExp('\\{' + key + '\\}', 'g'),
                        (data[key] !== null)
                                ? mw.html.escape(data[key])
                                : ''
                );
        }

        return template;
};

/**
 * __generateCSSStyleString
 *     generateCSSStyleString, when given a key-val dictionary of style attributes
 *     and their values, returns a formatted inline style string for use in HTML
 *     interpollation.
 * 
 * @param {object <key, val} style - object containing style information
 * 
 * @return {string} rendered inline style string
 */
UserTags.prototype.__generateCSSStyleString = function (style) {
        var _style = '',
            _key   = '';

        if (str === null) return _style;

        for (var key in style) {
                // backgroundColor -> background-color
                _key = key.replace(/([A-Z]{1})/g, '-$1').toLowerCase();

                _style += mw.html.escape(_key) + ':' + mw.html.escape(style[key]) + ';';
        }

        return _style;
};

/**
 * __generateTag
 *     generateTag literally just pieces together a profile tags from the data you give it...
 * 
 * @param {string}          text   - the thing the tag says when rendered
 * @param {object<key, val} styles - the style information for __generateCSSStyleString
 * 
 * @return {string} rendered HTML tag
 */
UserTags.prototype.__generateTag = function (text, styles) {
        var _template = [
                '<span style="{outerStyle}" class="tag tag-{type}">',
                        '\t<span style="{textStyle}" class="tag-text">{text}</span>',
                '</span>'
        ].join('\n');

        var _textStyle  = (typeof styles.text  === 'object') ? styles.text  : null,
            _outerStyle = (typeof styles.outer === 'object') ? styles.outer : null,
            _text       = (typeof text         === 'string') ? text         : '';
        
        _textStyle  = this.__generateCSSStyleString(_textStyle);
        _outerStyle = this.__generateCSSStyleString(_outerStyle);

        
        _template = this.__renderTemplate(_template, {
                textStyle:  _textStyle,
                outerStyle: _outerStyle,
                type:       _text.toLowerCase().replace(' ', '-'),
                text:       _text.toUpperCase()
        });

        if (_template === null)
                return '';
        else
                return _template;
};

/**
 * __generateTags
 *     generateTags generates the tags...
 * 
 * @param {object<idfk>} tags - the tags data
 * 
 * @return {string} rendered HTML of the tags
 */
UserTags.prototype.__generateTags = function (tags) {
        var _html = [];
        
        for (var i = 0; i < tags.length; i++) {
                _html.push(this.__generateTag(tags[i].text, tags[i].style));
        }

        return _html.join('\n');
};

/**
 * __establishProminence
 *     establishProminence sorts the tags in the structure based on their prominence values
 * 
 * @param {object<idfk>} schema - schema to sort
 * 
 * @return {object<idfk>} sorted schema
 */
UserTags.prototype.__establishProminence = function (schema) {
        var _schema = schema.slice(0);
        
        _schema.sort(function(current, next) {
                return current.params.prominence - next.params.prominence;
        });
        
        return _schema;
};

/**
 * IGNOIRE PLS NOT PRODUCTION CODE
 */
UserTags.prototype.__test = function (tags) {
        var _html,
            _tags = [];
        
        tags = this.__establishProminence(tags);
        
        for (var i = 0; i < tags.length; i++) {
                _tags.push(tags[i].attributes);
        }

        _html = this.__generateTags(_tags)

        document.querySelector('.masthead-info hgroup')
                .insertAdjacentHTML(
                        'beforeend',
                        _html
                );
};

var userTags = new UserTags();
userTags.__test(
        [
                {
                        params: {
                                rights: ['user'],
                                edits: 500,
                                blocked: false, 
                                newUser: false,
                                prominence: 2
                        },
                        attributes: {
                                text: '500 Club',
                                href: 'Project:500 Club',
                                style: {
                                        text: {
                                                color: '#F00',
                                                fontWeight: 'bold'
                                        },
                                        outer: {
                                                backgroundColor: '#00F'
                                        }
                                }
                        }
                },
                {
                        params: {
                                rights: ['sysop', 'rollback', 'patroller', 'vcroc'],
                                edits: 0,
                                blocked: false, 
                                newUser: false,
                                prominence: 1
                        },
                        attributes: {
                                text: 'Staff',
                                href: 'Project:Staff',
                                style: {
                                        text: {
                                                color: '#00F',
                                                fontWeight: 'bold'
                                        },
                                        outer: {
                                                backgroundColor: '#F00'
                                        }
                                }
                        }
                },
        ]
);