mimouchat/cli/emojiBar.js

var EMOJI_BAR = (function() {
    var dom = document.createElement("div")
        ,unicodeEmojis = document.createElement("ul")
        ,customEmojis = document.createElement("ul")
        ,emojiCache = { unicode: {}, custom: {}}

    /** @type {function():boolean} */
    ,isSupported = function() {
        return ("searchEmojis" in window);
    }

    /** @type {function(Element):{dom:Element,visible:boolean}} */
    ,wrapEmojiLi = function(emojiDom) {
        var dom = document.createElement("li");
        dom.appendChild(emojiDom);
        return {
            visible: false
            ,dom: dom
        };
    }

    /** @type {function(*):{dom:Element,visible:boolean}} */
    ,makeUnicodeEmojiLi = function(emoji) {
        var domEmoji = window['makeEmoji'](emoji)
            ,domParent = document.createElement("span");
        domParent.appendChild(domEmoji);
        domParent.className = R.klass.emoji.medium;
        return wrapEmojiLi(domParent);
    }

    /** @type function(string):number */
    ,search = function(queryString) {
        var emojiCount = 0
            ,toRemove = [];

        if (isSupported()) {
            /** @type {Object.<string, *>} */
            var emojis = window['searchEmojis'](queryString);
            for (var i in emojiCache.unicode) {
                if (emojiCache.unicode[i].visible && !emojis[i]) {
                    emojiCache.unicode[i].visible = false;
                    unicodeEmojis.removeChild(emojiCache.unicode[i].dom);
                }
            }
            for (var i in emojis) {
                var e = emojiCache.unicode[i];

                if (!e)
                    e = emojiCache.unicode[i] = makeUnicodeEmojiLi(emojis[i]);
                if (!e.visible) {
                    e.visible = true;
                    unicodeEmojis.appendChild(e.dom);
                }
                emojiCount++;
            }
        }
        //TODO custom
        return emojiCount;
    }

    /** @type function(Element):boolean */
    ,spawn = function(domParent) {
        if (isSupported()) {
            domParent.appendChild(dom);
            search("");
            return true;
        }
        return false;
    }

    /** @type {function():boolean} */
    ,close = function() {
        if (dom.parentElement) {
            dom.parentElement.removeChild(dom);
            return true;
        }
        return false;
    }

    ;

    dom.appendChild(unicodeEmojis);
    dom.appendChild(customEmojis);

    return {
        isSupported: isSupported
        ,spawn: spawn
        ,search: search
        ,close: close
    };
})();

//EMOJI_BAR.spawn(document.body);