Unicode Emoji Adder

UnicodeEmojiAdder.user.js

// ==UserScript==
// @name     UnicodeEmojiAdder
// @version  6
// @include     http://chat.stackoverflow.com/rooms/*
// @include     https://chat.stackoverflow.com/rooms/*
// @grant    none
// ==/UserScript==

var style_template = `
    .boxPositioner{
        position: absolute;
        top: 0; 
        transform: translateY(-100%);
        display: block;
        
    }

    .pickerBox{
        border: 1px solid black;
        display: inline-block;
    }

    .pickerBox:not(.active){
        display: none;
    }

    .emojiListing{
        font-size: xx-large;
        border-top: 1px solid black;
    }

    .tabSelector{
        font-size: xx-large;
    }

    .emojiListing:not(.active){
        display: none;
    }`;

var picker_template = `
    <span class="emojiPicker">
        <span class="toggler">😊︎</span>
        <span class="boxPositioner">
            <span class="pickerBox wmd-prompt-dialog">
                <table class="tabSelector">
                    <tr>
                        <td class="selected wmd-mini-button">😋</td> <td class="wmd-mini-button">🐋</td> <td class="wmd-mini-button">🏆</td> <td class="wmd-mini-button">A</td>
                    </tr>
                </table>

                <table class="emojiListing active">
                    <tr><td>😀</td><td>😁</td><td>😂</td><td>😃</td><td>😄</td><td>😅</td><td>😆</td><td>😇</td><td>😈</td><td>😉</td><td>😊</td><td>😋</td><td>😌</td><td>😍</td><td>😎</td><td>😏</td></tr><tr><td>😐</td><td>😑</td><td>😒</td><td>😓</td><td>😔</td><td>😕</td><td>😖</td><td>😗</td><td>😘</td><td>😙</td><td>😚</td><td>😛</td><td>😜</td><td>😝</td><td>😞</td><td>😟</td></tr><tr><td>😠</td><td>😡</td><td>😢</td><td>😣</td><td>😤</td><td>😥</td><td>😦</td><td>😧</td><td>😨</td><td>😩</td><td>😪</td><td>😫</td><td>😬</td><td>😭</td><td>😮</td><td>😯</td></tr><tr><td>😰</td><td>😱</td><td>😲</td><td>😳</td><td>😴</td><td>😵</td><td>😶</td><td>😷</td><td>😸</td><td>😹</td><td>😺</td><td>😻</td><td>😼</td><td>😽</td><td>😾</td><td>😿</td></tr><tr><td>🙀</td><td>🙁</td><td>🙂</td><td>🙃</td><td>🙄</td><td>🙅</td><td>🙆</td><td>🙇</td><td>🙈</td><td>🙉</td><td>🙊</td><td>🙋</td><td>🙌</td><td>🙍</td><td>🙎</td><td>🙏</td></tr>
                </table>

                <table class="emojiListing">
                    <tr><td>🐵</td><td>🐒</td><td>🦍</td><td>🐶</td><td>🐕</td><td>🐩</td><td>🐺</td><td>🦊</td><td>🦝</td><td>🐱</td><td>🐈</td><td>🦁</td><td>🐯</td><td>🐅</td></tr><tr><td>🐆</td><td>🐴</td><td>🐎</td><td>🦄</td><td>🦓</td><td>🦌</td><td>🐮</td><td>🐂</td><td>🐃</td><td>🐄</td><td>🐷</td><td>🐖</td><td>🐗</td><td>🐽</td></tr><tr><td>🐏</td><td>🐑</td><td>🐐</td><td>🐪</td><td>🐫</td><td>🦙</td><td>🦒</td><td>🐘</td><td>🦏</td><td>🦛</td><td>🐭</td><td>🐁</td><td>🐀</td><td>🐹</td></tr><tr><td>🐰</td><td>🐇</td><td>🐿</td><td>🦔</td><td>🦇</td><td>🐻</td><td>🐨</td><td>🐼</td><td>🦘</td><td>🦡</td><td>🐾</td><td>🦃</td><td>🐔</td><td>🐓</td></tr><tr><td>🐣</td><td>🐤</td><td>🐥</td><td>🐦</td><td>🐧</td><td>🕊</td><td>🦅</td><td>🦆</td><td>🦢</td><td>🦉</td><td>🦚</td><td>🦜</td><td>🐸</td><td>🐊</td></tr><tr><td>🐢</td><td>🦎</td><td>🐍</td><td>🐲</td><td>🐉</td><td>🦕</td><td>🦖</td><td>🐳</td><td>🐋</td><td>🐬</td><td>🐟</td><td>🐠</td><td>🐡</td><td>🦈</td></tr><tr><td>🐙</td><td>🐚</td><td>🐌</td><td>🦋</td><td>🐛</td><td>🐜</td><td>🐝</td><td>🐞</td><td>🦗</td><td>🕷</td><td>🕸</td><td>🦂</td><td>🦟</td><td>🦠</td></tr>
                </table>

                <table class="emojiListing">
                    <tr><td>👆</td> <td>👇</td> <td>👈</td> <td>👉</td> <td>👍</td> <td>👎</td> <td>🔒</td></tr>
                    <tr><td>🔓</td> <td>👁</td> <td>🏆</td> <td>🌎</td> <td>💣</td> <td>📷</td> <td>💰</td></tr>
                    <tr><td>🏠</td> <td>🕶</td> <td>♔</td> <td>♕</td> <td>♖</td> <td>♗</td> <td>♘</td></tr>
                    <tr><td>♙</td> <td>♚</td> <td>♛</td> <td>♜</td> <td>♝</td> <td>♞</td> <td>♟</td></tr>
                    <tr><td>♠</td> <td>♣</td> <td>♥</td> <td>♦</td> <td>♪</td> <td>♫</td> <td>⛄</td></tr>
                </table>
                <table class="emojiListing">
                    <tr><td>(◕‿◕)</td> <td>(╯°□°）╯︵ ┻━┻</td> <td>( ͡° ͜ʖ ͡°)</td></tr><tr><td>ಠ_ಠ</td><td>¯\\\\_(ツ)_/¯</td><td>ಥ_ಥ</td></tr>
                </table>

            </span>
        </span>
    </span>`;

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

function insert_text_at_cursor(text){
    var input = document.getElementById("input");
    var left = input.value.slice(0, input.selectionStart);
    var middle = text;
    var right = input.value.slice(input.selectionEnd);
    input.value = left + middle + right;
    input.setSelectionRange(left.length + middle.length, left.length + middle.length);
    input.focus();
}

function register_td(td){
    //putting this in a function to avoid the "late name binding" problem
    td.onclick = function(){
        insert_text_at_cursor(td.innerHTML);
    }
}

function register_tab(tab, tabs, idx){
    tab.onclick = function(){
        set_classname_exclusive(tab, tabs, "selected");

        var listings = document.querySelectorAll(".emojiListing");
        if (idx >= listings.length){
            console.log("Warning: no listing found for tab " + tab.innerHTML);
            return;
        }
        set_classname_exclusive(listings[idx], listings, "active");
    }
}

function set_classname_exclusive(target, elements, className){
    //adds the className to the target element, and remove it from each other element
    for(var element of elements){
        if(element.classList.contains(className)){
            element.classList.remove(className);
        }
    }
    target.classList.add(className);
}

function set_up_picker(picker){
    console.log("Setting up picker " + picker);
    //picker.onblur = function(){toggle(picker);} //todo: figure out why this doesn't work
    picker.querySelector(".toggler").onclick = function(){toggle(picker);}
    on_click_elsewhere(picker, function(){
        var pickerBox = picker.querySelector(".pickerBox");
        if (pickerBox.classList.contains("active")){
            pickerBox.classList.remove("active");
        }
    });
  
    for(var td of picker.querySelectorAll(".emojiListing td")){
        register_td(td);
    }

    var tabSelector = picker.querySelector(".tabSelector");
    var tabs = tabSelector.querySelectorAll("td");
    var idx = 0; //todo: find the JS equivalent of `enumerate`
    for(var tab of tabs){
        register_tab(tab, tabs, idx);
        idx += 1;
    }
}

function toggle(picker){
    var pickerBox = picker.querySelector(".pickerBox");
    if (pickerBox.classList.contains("active")){
        pickerBox.classList.remove("active");
    }
    else{
        pickerBox.classList.add("active");
    }
}

function on_click_elsewhere(element, callback){
    //whenever the user clicks anywhere that _isn't_ element, execute the callback
    document.addEventListener('click', function(event){
        if (event.target != element && !element.contains(event.target)){
            callback();
        }
    }, true);
}

var buttonArea = document.getElementById("chat-buttons");
buttonArea.insertAdjacentHTML('beforeend', picker_template);

addGlobalStyle(style_template);

for(var picker of document.querySelectorAll(".emojiPicker")){
    set_up_picker(picker);
}