MediaWiki:LanguageSearch.js

/** *  * @module                  LanguageSearch.js * @description             Language search filter for FANDOM. * @author                 Speedit * @version                0.1.0 * @license                CC-BY-SA 3.0 * @notes                  Experimental. * */ require(['wikia.window', 'jquery', 'mw'], function(window, $, mw) {

// Scope limiting & double-run protection. window.dev = window.dev || {}; if (       !$('.page-header__languages').exists ||        window.dev.langSearch    ) { return; }   window.dev.langSearch = {};

/**    * Script initialiser. * @function           langSearchInit */   function langSearchInit { if (++this.loaded === 4) { window.dev.langSearch = new LangSearch; }   }    langSearchInit.loaded = 0;

/**    * Main LanguagesSearch class. * @class */   function LangSearch { this.api = new mw.Api({ ajax: {           url: 'https://dev.wikia.com/api.php',            dataType: 'jsonp'        }}); // Caching. var c;       try { c = JSON.parse(localStorage.langSearchCache || '{}'); } catch(e) { delete localStorage.langSearchCache; return new this.constructor; }       var t = Date.now, a = Number(c.cb || +t-21600000), s = (!c.d || !c.cb); // API or cache query. if (s || +t >= +a+21600000) { this.api.get({               action: 'query',                format: 'json',                prop: 'revisions',                rvprop: 'content',                titles: 'MediaWiki:Custom-LanguageSearch/registry.json',                indexpageids: 1            }).always($.proxy(this.store, this)); } else { $.proxy(this.render, this)(c.d); }   }    /**     * Script data storage. * @method             store * @param              d     */ LangSearch.prototype.store = function(d) { d = d.query.pages[d.query.pageids[0]].revisions[0]['*'] .replace(/\/\*[\s\S]*?\*\//g, '') .trim; localStorage.langSearchCache = JSON.stringify({ 'd': d, 'cb': Date.now }); $.proxy(this.render, this)(d); };   /**     * Searchbar renderer. * @method             render */   LangSearch.prototype.render = function(d) { this.data = JSON.parse(d); $('.page-header__languages .wds-list') .children.each($.proxy(this.attr, this)) .parent.prepend($.proxy(this.ui, this)); this.$content.find('textarea') .on('input', $.proxy(this.view, this)); };   /**     * Language attribute handler for search filter. * @method             attr */   LangSearch.prototype.attr = function(i, li) { var l = li.firstElementChild .getAttribute('data-tracking').match('[^-]+$')[0], d = this.data; $(li).attr({            'data-code': l,             'data-latn': (d[l].latn || ).normalize.toLowerCase,             'data-name': (d[l].name || ).normalize.toLowerCase,             'data-alt': (d[l].alt || []).join('|').normalize.toLowerCase        }); }   /**     * Script user interface. * @method             ui     * @returns {jQuery} searchbar element */   LangSearch.prototype.ui = function { return (this.$content = $(window.dev.ui({           type: 'li',            classes: [                'page-header__languages-search',                'wds-button',                'wds-is-text'            ],            children: [                {                    type: 'a',                    children: [                        {                            type: 'svg',                            attr: {                                xmlns: 'http://www.w3.org/2000/svg',                                id: 'wds-icons-magnifying-glass-tiny',                                viewBox: '0 0 12 12',                                width: '12',                                height: '12'                            },                            classes: [                                'wds-icon',                                'wds-icon-tiny'                            ],                            children: [ {                                   type: 'use', attr: { 'xlink:href': '#wds-icons-magnifying-glass-tiny' }                               }                            ]                        },                        {                            type: 'textarea' }                   ]                }            ]        })));    };    /**     * Searchbar view cotroller.     * @method              view     */    LangSearch.prototype.view = function {        var search = this.$content.find('textarea').val.trim;        this.$style.text(function { return !search.length ? ''           : (function(s) {                var ret = '.page-header__languages-search ~ li';                ret += $.map(['name', 'code', 'latn', 'alt'], function(v) { return ':not([data-' + v + '*="' + s + '"])'; }).join('');               ret += '{ display: none !important; }';                return ret;            }(search)); });   };    /**     * Inline style node.     * @member {jQuery}     $style     */    LangSearch.prototype.$style = $(' ', { type: 'text/css', id: 'languageSearchStyles' }).appendTo(document.head);

// Library dependencies (w:c:dev). mw.hook('dev.ui').add($.proxy(langSearchInit, langSearchInit)); mw.hook('dev.wds').add($.proxy(langSearchInit, langSearchInit)); ['UI-js/code', 'WDSIcons/code'].forEach(function(s) {       importArticle({ type: 'script', article: 'u:dev:' + s + '.js' })   });

// Script styling. $(importArticle({ type: 'style', article: 'u:dev:MediaWiki:LanguageSearch.css' })).load($.proxy(langSearchInit, langSearchInit));

// MediaWiki API module. mw.loader.using('mediawiki.api').then($.proxy(langSearchInit, langSearchInit));

});