Last active
September 26, 2019 19:53
-
-
Save kms70847/38358e86751fa55b3e7e3c90da59eed8 to your computer and use it in GitHub Desktop.
Unicode Emoji Adder
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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