Skip to content

Instantly share code, notes, and snippets.

@kms70847

kms70847/UnicodeEmojiAdder.user.js

Last active September 26, 2019 19:53
Show Gist options
  • Save kms70847/38358e86751fa55b3e7e3c90da59eed8 to your computer and use it in GitHub Desktop.
Save kms70847/38358e86751fa55b3e7e3c90da59eed8 to your computer and use it in GitHub Desktop.
Download ZIP
Unicode Emoji Adder
Raw
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment