User:Fngplg/wikia.js

(function ($, options) {   var me = {version: '0.1b'};    if (options.version && options.version >= me.version) return;    $.extend(true, me, options);    me.size = me.size || 4;    me.debug = 1 || $.getUrlVar('debug') || me.debug;    me.project = 'ncsse';    me.cclass = function (c, noDot) {        // class constructor helper        return (noDot ?  : '.') + me.project + '-' + c.split(' ').join((noDot ? ' ' : ' .') + me.project + '-');   };// cclass    me.log = function  {        if (!me.debug) return;        me.log.meth = console.log;        //console methods        me.log.logs = me.log.logs || {                'debug': 'debug',                'error': 'error',                'info': 'info',                'log': 'log',                'warn': 'warn'            };        me.log.a = [].slice.call(arguments);        me.log.method = me.log.logs[(log.a[0] || ).toString.toLowerCase];        if (me.log.method) {            me.log.a.splice(0, 1);            me.log.meth = console[me.log.method];        }        me.log.a.unshift(me.project);        me.log.meth.apply(this, me.log.a);    };// log

me.modal = $(' ', {       class: me.cclass('modal', 1),        style: 'z-index:10000;position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);'    }); me.gui = $(' ', {       class: me.cclass('gui', 1) + ' WikiaArticle mw-content-text',        style: 'position:relative;left:10%;top:70px;width:80%;height:auto;min-width:400px;min-height:400px;max-width:1200px;max-height:600px;',    }); me.lheader = $(' ', {       class: me.cclass('lheader label', 1),        text: 'header',    }); me.dheader = $(' ', {       class: me.cclass('dheader data', 1),    }); me.lblocks = $(' ', {       class: me.cclass('lblocks label', 1),        text: 'blocks',    }); me.dblocks = $(' ', {       class: me.cclass('dblocks data', 1),    }).attr('size', me.size); me.lclasses = $(' ', {       class: me.cclass('lclasses label', 1),        text: 'classes',    }); me.dclasses = $(' ', {       class: me.cclass('dclasses data', 1),    }).attr('size', me.size); me.lrules = $(' ', {       class: me.cclass('lrules label', 1),        text: 'rules',    }); me.drules = $(' ', {       class: me.cclass('drules data', 1),    }).attr('size', me.size); me.mbutton = $('') .append(       $('', { id: me.project + '-mbutton', href: '#', text: me.project, })   );    me.preview = $(' ', {        class: me.cclass('preview', 1),        text: me.project + ' preview\n2nd line',    }); me.gbuttons = $(' ', {       class: me.cclass('buttons', 1),    }).attr('style', 'position:absolute;height:50px;bottom:0;width:100%;'); me.bcopy = $(' ', {       class: me.cclass('bcopy button', 1),        text: 'copy to clipboard'    }); me.getData = function (src) { var d = $.Deferred; $.get(src || '/load.php?debug=1&mode=articles&only=styles&articles=u:dev:MediaWiki:Nord.css').done(function (data) {           log('gd', {data: data});            //data.header = string            //data.blocks = array of classes            //classes = array of rules            //rules = array of key-value pairs            /*            data:                header: string,     /\/\*[\s\S]*?\*\/\n\n/                blocks: [{                    name: string,                    classes: [{                        name: string,                        rules: [{                            name: string,                            value: string                        }]                    }]                }]            */            me.data = {};            me.data.header = data.match(/\/\*[\s\S]*?\*\/\n\n/)[0].trim;            data = data.replace(/\/\*[\s\S]*?\*\/\n\n/, '');// strip header // blocks var m, blocks = {}, re = /(\/\*[\s\S]*?\*\/)\n([\s\S]*?}\n)\n|$/g; m = re.exec(data); while (m && m[0]) { //classes var m1, classes = {}, re1 = /([\s\S]*?)\{([\s\S]*?)\}/g; m1 = re1.exec(m[2]); while (m1 && m1[0]) { //rules var m2, rules = {}, re2 = /([\s\S]*?)\:([\s\S]*?);\s*(\/\*.*?\*\/)*/g; m2 = re2.exec(m1[2]); while (m2 && m2[0]) { //rules.push({name: m2[1].trim, value: m2[2].trim, comment: (m2[3] || '').trim}); rules[m2[1].trim] = {name: m2[1].trim, value: m2[2].trim, comment: (m2[3] || '').trim}; m2 = re2.exec(m1[2]); }// while rules //classes.push({name: m1[1].trim, rules: rules}); classes[m1[1].trim] = {name: m1[1].trim, rules: rules}; m1 = re1.exec(m[2]); }// while classes //blocks.push({name: m[1].trim, classes: classes}); blocks[m[1].trim] = {name: m[1].trim, classes: classes}; m = re.exec(data); }// while blocks //log('gd blocks', blocks); me.data.blocks = blocks; d.resolve(me.data); })// get done       .fail(function (data) { log('gd fail', {data: data}); });// get fail       return d.promise;    };// getData    me.mbuttonClick = function (e) {        if (e.shiftKey || e.ctrlKey || e.altKey) delete(me.data);        if (me.data) {            me.modalShow(me.data);            return;        }        me.getData.done(me.modalShow);    };// mbuttonClick    me.modalShow = function (data) {        log('ms', data);        $('body').append(me.modal);        // enlarge modal: *book fix        if (me.modal.width < window.innerWidth) me.modal.width(window.innerWidth);        if (me.modal.height < window.innerHeight) me.modal.height(window.innerHeight);        var left = (window.innerWidth > me.gui.width ? window.innerWidth / 2 - me.gui.width / 2 : 0) + $('body').scrollLeft,           top = (window.innerHeight > me.gui.height ? window.innerHeight / 2 - me.gui.height / 2 : 100) + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);       if (top < 70) top = 70;        me.gui.css({ left: left, top: top });       // fill blocks        me.dheader.val(data.header);        me.dclasses.html();        me.drules.html();        me.dblocks.html(me.buildSelect(data.blocks));    };// modalShow

me.buildSelect = function (data, isrules) { log('debug', 'bs', isrules, data); var a = []; if (isrules) { $.each(data, function (k, v) {               var rule = k + ':' + v.value + ';' + (v.comment || '');                //a.push($(' ', {value: k, text: rule}));                a.push(rule);            });// each return a.join('\n'); }// if isrules $.each(data, function (k, v) {           a.push($(' ', {value: k, text: k}));        });// each return a;   };// buildSelect

me.getClass = function (classes) { var a = [me.cclass('dheader', 1), me.cclass('dblocks', 1), me.cclass('dclasses', 1), me.cclass('drules', 1)]; return a.map(function(v){return classes.contains(v) ? v : null}).filter(Boolean)[0]; };// getClass me.fill = function (e) { //log('fill e', e); var myclass = me.getClass(e.currentTarget.classList); log('fill mc', myclass); switch (myclass) { case me.cclass('dblocks', 1): me.dclasses.html(me.buildSelect(me.data.blocks[me.dblocks.val].classes)); break; case me.cclass('dclasses', 1): //me.drules.html(me.buildSelect(me.data.blocks[me.dblocks.val].classes[me.dclasses.val].rules, 1)); me.drules.val(me.buildSelect(me.data.blocks[me.dblocks.val].classes[me.dclasses.val].rules, 1)); me.updatePreview; break; case me.cclass('drules', 1): break; default: return; }// switch myclass };// fill me.modalHide = function (e) { me.modal.remove; };// modalHide

me.keybEvent = function (e) { if ($(e.target).parents(me.cclass('gui')).length && e.keyCode !== 27) return; if (e.keyCode === 27 || e.button !== undefined) me.modalHide(e); };// keybEvent

me.focusEvent = function (e) { log('fe', e); switch (e.type) { case 'focusin': clearInterval(me.focusTimer); me.focusTimer = setInterval(me.updatePreview, 1000); break; case 'focusout': clearInterval(me.focusTimer); break; }// switch e.type };// focusEvent

me.updatePreview = function (style) { style = style || me.drules.val; if (me.prevStyle === style) return; me.prevStyle = style; try { me.preview.attr('style', me.prevStyle); }       catch (ex) { log('up ex', ex); }   };// updatePreview

me.megaJoin = function { var s = ''; if (!me.data) return s;       s = s + me.data.header + '\n\n'; $.each(me.data.blocks, function (i, block) {           //log('mj b', block);            s = s + block.name + '\n';            $.each(block.classes, function (i, clas) { //log('mj c', clas); s = s + clas.name + ' {\n'; $.each(clas.rules, function (i, rule) {                   //log('mj r', rule);                    s = s + rule.name + ':' + rule.value + ';' + (rule.comment || '') + '\n';                });// each rules s = s + '}\n' });// each classes           s = s + '\n';        });// each blocks log('mj s', {s: s}); return s;   };// megaJoin

me.bcopyClick = function (e) { log('bcc', e); var $t = $(' ').attr('style', 'height:1px;width:1px;'); me.gui.append($t); $t.val(me.megaJoin); $t.focus; $t.select document.execCommand('copy'); $t.remove; };// bcopyClick

me.init = function { me.modal.append(           me.gui            .append(me.preview)            .append($(' ') .append(me.lheader) .append(me.dheader))           .append($(' ') .append(me.lblocks) .append(me.dblocks))           .append($(' ') .append(me.lclasses) .append(me.dclasses))           .append($(' ') .append(me.lrules) .append(me.drules))           .append(me.gbuttons .append(me.bcopy))       ); mw.util.addCSS(me.cclass('data') + ' {display:block;min-width:600px;min-height:50px;max-width:80%;width:auto;vertical-align:top}' +           me.cclass('preview') + '{float:right;min-width:100px;min-height:100px;margin:10px;}'); $('.page-header__contribution-buttons .wds-button-group .wds-list').append(me.mbutton); me.mbutton.click(me.mbuttonClick); $(document).on('keypress click', me.cclass('modal'), me.keybEvent); $('body').on('change', me.cclass('dblocks, dclasses, drules'), me.fill); $('body').on('focusin focusout', me.cclass('drules'), me.focusEvent); $('body').on('click', me.cclass('bcopy'), me.bcopyClick); mw.hook(me.project + '.ready').fire(me); };// init var log = me.log;

//$.extend(true, window.dev = (window.dev || {}), {[me.project]: me}); window.dev = window.dev || {}; window.dev[me.project] = me; $(me.init); }(jQuery, (window.dev || {}).ncsse || {})); //mw.hook('ncsse.ready').add(a=>a.mbuttonClick({}));