MediaWiki:EmoticonsWindow/code.js

/** * Name:       EmoticonsWindow * Version:    v1.6 * Author:     KockaAdmiralac <1405223@gmail.com> * Description: Shows a window with all available emoticons */ (function {   'use strict';    var config = mw.config.get([ 'wgCanonicalSpecialPageName', 'wgChatEmoticons', 'wgSassParams' ]);   if ( config.wgCanonicalSpecialPageName !== 'Chat' || window.EmoticonsWindowLoaded ) {       return;    }    window.EmoticonsWindowLoaded = true;    if (!window.dev || !window.dev.i18n || !window.dev.ui) {        importArticles({ type: 'script', articles: [ 'u:dev:MediaWiki:I18n-js/code.js', 'u:dev:MediaWiki:Colors/code.js', 'u:dev:MediaWiki:UI-js/code.js' ]       });    }    importArticle({ type: 'style', article: 'u:dev:MediaWiki:EmoticonsWindow/code.css' });   /**     * Main object     * @class EmoticonsWindow     */    var EmoticonsWindow = {        // List of emoticons        emoticons: {},        /**         * Initialize and parse emoticons         */        init: function(i18n) {            i18n.useUserLang;            this.i18n = i18n;            this.ui = window.dev.ui;            this.parseEmoticons;            this.insertUI;        },        /**         * Parse emoticons         * EmoticonMapping is used because that's a way Wikia parses         * emoticons in the default system.         */        parseEmoticons: function {            var mapping = new EmoticonMapping;            mapping.loadFromWikiText(config.wgChatEmoticons);            $.each(mapping._settings, $.proxy(function(k, v) {                this.emoticons[v[0]] = k;            }, this));        },        /**         * Initialize UI elements         */ insertUI: function { var color = config.wgSassParams['color-buttons']; mw.util.addCSS(               '.EmoticonsWindowIcon {' +                    'background-color: ' + color + ';' +                '}' +                '.EmoticonsWindowIcon:hover {' +                    'background-color: ' +                        window.dev.colors                            .parse(color)                            .lighten(20)                            .hex +                            ';' +                '}'            ); this.insertElements; this.insertButton; },       /**         * Create elements to be displayed in the modal */       insertElements: function { this.mainElement = this.ui({               type: 'div',                attr: {                    id: 'EmoticonsWindowModalMain'                },                children: [                    {                        type: 'span',                        attr: {                            'class': 'EmoticonsWindowHelp'                        },                        text: this.i18n.msg('help').plain                    },                    {                        type: 'div',                        attr: {                            id: 'EmoticonsWindowList'                        },                        children: $.map(this.emoticons, function(k, v) { return { type: 'img', attr: { 'class': 'EmoticonsWindowIcon', src: k,                                   title: v                                } };                       })                    }                ]            });        },        /**         * Insert the Emoticons button */       insertButton: function { $('.public.wordmark').first.append(this.ui({ type: 'a', attr: { 'class': 'wikia-button EmoticonsWindowButton' },               text: this.i18n.msg('emoticons').plain, events: { click: $.proxy(function {                       this.showModal;                        this.setHandlers;                    }, this) }           }));        },        /**         * Show the emoticons window */       showModal: function { $.showCustomModal(this.i18n.msg('emoticons').escape, this.mainElement.outerHTML, {               id: 'EmoticonsWindowModal',                buttons: [{                    id: 'EmoticonsWindowClose',                    defaultButton: true,                    message: this.i18n.msg('close').escape,                    handler: function{ $('#EmoticonsWindowModal').closeModal; }                }]            }); },       /**         * Set the handlers for clicking on the emoticon in the list */       setHandlers: function { $('.EmoticonsWindowIcon').click(function {               var $this = $(this),                    ap = $('.message textarea').last;                ap.val(ap.attr('value') + ' ' + $this.attr('title'));                $('#EmoticonsWindowModal').closeModal;            }); }   };    mw.hook('dev.ui').add(function {        window.dev.i18n.loadMessages('EmoticonsWindow')            .done($.proxy(EmoticonsWindow.init, EmoticonsWindow));    }); });