Wykop.pl 3 bajtowe emoji picker

wykop_3bajtowe_emoji.user.js

// ==UserScript==
// @name         Wykop Emojis 3-bajtowe
// @namespace    https://gist.github.com/patrolez/
// @version      0.4.12
// @downloadURL    https://gist.github.com/patrolez/b10d4500451eefdd47504fba987cd8b5/raw/wykop_3bajtowe_emoji.user.js
// @updateURL    https://gist.github.com/patrolez/b10d4500451eefdd47504fba987cd8b5/raw/wykop_3bajtowe_emoji.user.js
// @description  Emojis subset limited to 3-bytes Unicode. It works in misconfigured MySQL databases with wrong `utf8` charset. <https://stackoverflow.com/a/50264108/12755962>
// @match        https://www.wykop.pl/*
// @match        https://wykop.pl/*
// @icon         https://www.google.com/s2/favicons?domain=wykop.pl
// @grant        none
// @author       patrolez
// @run-at       document-end
// ==/UserScript==

var emojis_3bytes = [
    ["⠀", "BRAILLE PATTERN BLANK"]
    , [" ", "NO-BREAK SPACE"]
    , ["☺️", "SMILING FACE ፨ UŚMIECHNIĘTA TWARZ ፨ :D ፨ :)"]
    , ["☹️", "FROWNING FACE ፨ SAD ፨ SMUTNA TWARZ ፨ :C ፨ :("]
    , ["☠️", "SKULL AND CROSSBONES ፨ CZASZKA I KOŚCI KRZYŻOWE"]
    , ["❣️", "HEAVY HEART EXCLAMATION MARK ORNAMENT ፨ CIĘŻKIE SERCE WYKRZYKNIK ORNAMENT ፨ !"]
    , ["❤️", "HEAVY HEART ፨ CIĘŻKIE SERCE"]
    // ", ""
    , ["✋️", "RAISED HAND ፨ PODNIESIONA RĘKA"]
    , ["✌️", "VICTORY HAND ፨ RĘKA ZWYCIĘSTWA"]
    , ["☝️", "UP POINTING INDEX ፨ PALEC WSKAZUJĄCY W GÓRĘ"]
    , ["✊️", "RAISED FIST ፨ PODNIESIONA PIĘŚĆ"]
    , ["✍️", "WRITING HAND ፨ PISZĄCA DŁOŃ"]
    // ", ""
    , ["⛷️", "SKIER ፨ NARCIARZ"]
    , ["⛹️", "PERSON WITH BASKETBALL ፨ OSOBA Z PIŁKĄ DO KOSZYKÓWKI"]
    , ["☘️", "SHAMROCK ፨ TRÓJLISTNA KONICZYNA"]
    , ["☕️", "HOT BEVERAGE ፨ GORĄCY NAPÓJ"]
    , ["⛰️", "MOUNTAIN ፨ GÓRA"]
    , ["⛪️", "CHURCH ፨ KOŚCIÓŁ"]
    , ["⛩️", "SHINTO SHRINE ፨ ŚWIĄTYNIA SHINTO"]
    , ["⛲️", "FOUNTAIN ፨ FONTANNA"]
    , ["⛺️", "TENT ፨ NAMIOT"]
    , ["♨️", "HOT SPRINGS ፨ GORĄCE ŹRÓDŁA"]
    , ["⛽️", "FUEL PUMP ፨ DYSTRYBUTOR PALIWA"]
    , ["⚓️", "ANCHOR ፨ KOTWICA"]
    , ["⛵️", "SAILBOAT ፨ ŁÓDŹ ŻEGLARSKA"]
    , ["⛴️", "FERRY ፨ STATEK/PROM"]
    , ["✈️", "AIRPLANE ፨ SAMOLOT"]
    , ["⌛️", "HOURGLASS ፨ KLEPSYDRA"]
    , ["⏳️", "HOURGLASS NOT DONE ፨ KLEPSYDRA NIE ZROBIONA"]
    , ["⌚️", "WATCH ፨ ZEGAREK"]
    , ["⏰️", "ALARM CLOCK ፨ ZEGAR ALARMOWY"]
    , ["⏱️", "STOPWATCH ፨ STOPER"]
    , ["⏲️", "TIMER CLOCK ፨ MINUTNIK"]
    , ["☀️", "SUN WITH RAYS ፨ CZARNE SŁOŃCE Z PROMIENIAMI ፨ 〈POGODA〉"]
    , ["⭐️", "STAR ፨ GWIAZDA ፨ 〈POGODA〉"]
    , ["☁️", "CLOUD ፨ CHMURA ፨ 〈POGODA〉"]
    , ["⛅️", "SUN BEHIND CLOUD ፨ SŁOŃCE ZA CHMURĄ ፨ 〈POGODA〉"]
    , ["⛈️", "THUNDER CLOUD AND RAIN ፨ CHMURA BURZOWA I DESZCZ ፨ 〈POGODA〉"]
    , ["☂️", "UMBRELLA ፨ PARASOLKA ፨ 〈POGODA〉"]
    , ["☔️", "UMBRELLA WITH RAIN DROPS ፨ PARASOLKA Z KROPLAMI DESZCZU ፨ 〈POGODA〉"]
    , ["⛱️", "UMBRELLA ON GROUND ፨ PARASOLKA NA ZIEMI ፨ BEACH ፨ PLAŻA"]
    , ["⚡️", "HIGH VOLTAGE ፨ WYSOKIE NAPIĘCIE ፨ BŁYSKAWICA ፨ PIORUN"]
    , ["❄️", "SNOWFLAKE ፨ PŁATEK ŚNIEGU ፨ ŚNIEŻYNKA"]
    , ["☃️", "SNOWMAN ፨ BAŁWAN W ŚNIEŻYCY"]
    , ["⛄️", "SNOWMAN WITHOUT SNOW ፨ BAŁWAN"]
    , ["☄️", "COMET ፨ KOMETA"]
    , ["✨️", "SPARKLES ፨ ISKIERKI ፨ ISKRY"]
    , ["⚽️", "SOCCER BALL ፨ PIŁKA DO PIŁKI NOŻNEJ"]
    , ["⚾️", "BASEBALL"]
    , ["⛳️", "FLAG IN HOLE ፨ FLAGA W DZIURCE ፨ GOLF"]
    , ["⛸️", "ICE SKATE ፨ ŁYŻWY NA LODZIE"]
    // ", ""
    , ["♠️", "SPADE SUIT ፨ PIK ፨ PIKI"]
    , ["♥️", "HEART SUIT ፨ KIER ፨ KIERY"]
    , ["♦️", "DIAMOND SUIT ፨ KARO"]
    , ["♣️", "CLUB SUIT ፨ TREFLE"]
    // ", ""
    , ["♟️", "BLACK CHESS PAWN ፨ CZARNY PIONEK SZACHOWY"]
    , ["⛑️", "HELMET WITH WHITE CROSS ፨ HEŁM Z BIAŁYM KRZYŻEM"]
    , ["☎️", "TELEPHONE ፨ TELEFON"]
    , ["⌨️", "KEYBOARD ፨ KLAWIATURA"]
    , ["✉️", "ENVELOPE ፨ KOPERTA"]
    , ["✏️", "PENCIL ፨ OŁÓWEK"]
    , ["✒️", "NIB ፨ NIB"]
    , ["✂️", "SCISSORS ፨ NOŻYCZKI"]
    , ["⛏️", "PICK ፨ KILOF"]
    , ["⚒️", "HAMMER AND PICK ፨ MŁOTEK I KILOF"]
    , ["⚔️", "CROSSED SWORDS ፨ SKRZYŻOWANE MIECZE"]
    , ["⚙️", "GEAR ፨ KOŁO ZĘBATE"]
    , ["⚖️", "SCALES ፨ WAGA SZALKOWA"]
    , ["⛓️", "CHAINS ፨ ŁAŃCUCHY"]
    , ["⚗️", "ALEMBIC ፨ ALEMBIC"]
    , ["⚰️", "COFFIN ፨ TRUMNA POGRZEBOWA"]
    , ["⚱️", "FUNERAL URN ፨ URNA POGRZEBOWA"]
    , ["♿️", "WHEELCHAIR SYMBOL ፨ SYMBOL WÓZKA INWALIDZKIEGO"]
    , ["⚠️", "WARNING SIGN ፨ ZNAK OSTRZEGAWCZY"]
    , ["⛔️", "NO ENTRY ፨ ZAKAZ WSTĘPU"]
    , ["☢️", "RADIOACTIVE SIGN ፨ ZNAK RADIOAKTYWNY"]
    , ["☣️", "BIOHAZARD SIGN ፨ ZNAK ZAGROŻENIA BIOLOGICZNEGO"]
    // ", ""
    , ["⬆️", "UPWARDS ARROW ፨ STRZAŁKA W GÓRĘ"]
    , ["↗️", "NORTH EAST ARROW ፨ STRZAŁKA NA PÓŁNOCNY WSCHÓD"]
    , ["➡️", "RIGHTWARDS ARROW ፨ STRZAŁKA W PRAWO"]
    , ["↘️", "SOUTH EAST ARROW ፨ STRZAŁKA POŁUDNIOWO-WSCHODNIA"]
    , ["⬇️", "DOWNWARDS ARROW ፨ STRZAŁKA W DÓŁ"]
    , ["↙️", "SOUTH WEST ARROW ፨ STRZAŁKA POŁUDNIOWO-ZACHODNIA"]
    , ["⬅️", "LEFTWARDS ARROW ፨ STRZAŁKA W LEWO"]
    , ["↖️", "NORTH WEST ARROW ፨ STRZAŁKA PÓŁNOCNY ZACHÓD"]
    , ["↕️", "UP DOWN ARROW ፨ STRZAŁKA GÓRA DÓŁ"]
    , ["↔️", "LEFT RIGHT ARROW ፨ STRZAŁKA W LEWO STRZAŁKA W PRAWO"]
    , ["↩️", "LEFTWARDS ARROW WITH HOOK ፨ STRZAŁKA W LEWO Z HAKIEM"]
    , ["↪️", "RIGHTWARDS ARROW WITH HOOK ፨ STRZAŁKA W PRAWO Z HAKIEM"]
    , ["⤴️", "ARROW POINTING RIGHTWARDS THEN CURVING UPWARDS ፨ STRZAŁKA SKIEROWANA W PRAWO, A NASTĘPNIE ZAKRZYWIONA DO GÓRY"]
    , ["⤵️", "ARROW POINTING RIGHTWARDS THEN CURVING DOWNWARDS ፨ STRZAŁKA SKIEROWANA W PRAWO I ZAKRZYWIAJĄCA SIĘ W DÓŁ"]
    // ", ""
    , ["⚛️", "ATOM SYMBOL ፨ SYMBOL ATOMU; PIERWIASTEK"]
    , ["✡️", "STAR OF DAVID ፨ GWIAZDA DAWIDA"]
    , ["☸️", "WHEEL OF DHARMA ፨ KOŁO DHARMY"]
    , ["☯️", "YIN YANG ፨ YIN YANG"]
    , ["✝️", "LATIN CROSS ፨ KRZYŻ ŁACIŃSKI"]
    , ["☦️", "ORTHODOX CROSS ፨ KRZYŻ ORTODOKSYJNY"]
    , ["☪️", "STAR AND CRESCENT ፨ GWIAZDA I PÓŁKSIĘŻYC"]
    , ["☮️", "PEACE SYMBOL ፨ SYMBOL POKOJU"]
    // ", ""
    , ["♈️", "ARIES ፨ BARAN 〈ZODIAK〉"]
    , ["♉️", "TAURUS ፨ BYK 〈ZODIAK〉"]
    , ["♊️", "GEMINI ፨ BLIŹNIĘTA 〈ZODIAK〉"]
    , ["♋️", "CANCER ፨ RAK 〈ZODIAK〉"]
    , ["♌️", "LEO ፨ LEW 〈ZODIAK〉"]
    , ["♍️", "VIRGO ፨ PANNA 〈ZODIAK〉"]
    , ["♎️", "LIBRA ፨ WAGA 〈ZODIAK〉"]
    , ["♏️", "SCORPIUS ፨ SKORPION 〈ZODIAK〉"]
    , ["♐️", "SAGITTARIUS ፨ STRZELEC 〈ZODIAK〉"]
    , ["♑️", "CAPRICORN ፨ KOZIOROŻEC 〈ZODIAK〉"]
    , ["♒️", "AQUARIUS ፨ WODNIK 〈ZODIAK〉"]
    , ["♓️", "PISCES ፨ RYBY 〈ZODIAK〉"]
    , ["⛎️", "OPHIUCHUS ፨ WĘŻOWNIK 〈ZODIAK〉"]
    // ", ""
    , ["▶️", "RIGHT-POINTING TRIANGLE ፨ PLAY 〈TRÓJKĄT Z PRAWEJ STRONY〉"]
    , ["⏩️", "FAST-FORWARD BUTTON ፨ PRZYCISK SZYBKIEGO PRZEWIJANIA DO PRZODU"]
    , ["⏭️", "RIGHT-POINTING DOUBLE TRIANGLE WITH VERTICAL BAR ፨ TRÓJKĄT Z PODWÓJNYM PIONOWYM PASKIEM SKIEROWANY W PRAWO"]
    , ["⏯️", "RIGHT-POINTING TRIANGLE WITH DOUBLE VERTICAL BAR ፨ TRÓJKĄT Z PRAWEJ STRONY Z PODWÓJNYM PIONOWYM PASKIEM"]
    , ["◀️", "LEFT-POINTING TRIANGLE ፨ TRÓJKĄT LEWOSTRONNY"]
    , ["⏪️", "LEFT-POINTING DOUBLE TRIANGLE ፨ TRÓJKĄT LEWOSKRĘTNY PODWÓJNY"]
    , ["⏮️", "LEFT-POINTING DOUBLE TRIANGLE WITH VERTICAL BAR ፨ TRÓJKĄT Z LEWEJ STRONY Z PODWÓJNĄ POPRZECZKĄ PIONOWĄ"]
    , ["⏫️", "UP-POINTING DOUBLE TRIANGLE ፨ TRÓJKĄT PODWÓJNY GÓRNOPRZEGUBOWY"]
    , ["⏬️", "DOWN-POINTING DOUBLE TRIANGLE ፨ TRÓJKĄT PODWÓJNY SKIEROWANY W DÓŁ"]
    , ["⏸️", "DOUBLE VERTICAL BAR ፨ PAUZA 〈PODWÓJNA BELKA PIONOWA〉"]
    , ["⏹️", "SQUARE FOR STOP ፨ STOP 〈SYMBOL KWADRATU〉"]
    , ["⏺️", "CIRCLE FOR RECORD ፨ ZAPISU 〈KÓŁKO〉"]
    , ["⏏️", "EJECT SYMBOL ፨ SYMBOL WYSUWANIA"]
    // ", ""
    , ["♀️", "FEMALE SIGN ፨ Kobieta ፨ samica"]
    , ["♂️", "MALE SIGN ፨ Mężczyzna ፨ samiec"]
    , ["⚧️", "MALE WITH STROKE AND MALE AND FEMALE SIGN ፨ Transgender"]
    // ", ""
    , ["✖️", "HEAVY MULTIPLICATION X ፨ *"]
    , ["➕️", "PLUS ፨ +"]
    , ["➖️", "HEAVY MINUS SIGN ፨ -"]
    , ["➗️", "HEAVY DIVISION SIGN ፨ : ፨ DZIELENIE"]
    , ["♾️", "PERMANENT PAPER SIGN ፨ INFINITY ፨ NIESKOŃCZONOŚĆ"]
    , ["‼️", "DOUBLE EXCLAMATION MARK ፨ !!"]
    , ["⁉️", "EXCLAMATION QUESTION MARK ፨ !? ፨ ?!"]
    , ["❓️", "RED QUESTION MARK ፨ ?"]
    , ["❔️", "WHITE QUESTION MARK ORNAMENT ፨ ?"]
    , ["❕️", "WHITE EXCLAMATION MARK ORNAMENT ፨ !"]
    , ["❗️", "RED EXCLAMATION MARK ፨ !"]
    // ", ""
    , ["〰️", "WAVY DASH"]
    , ["⚕️", "STAFF OF AESCULAPIUS"]
    , ["♻️", "UNIVERSAL RECYCLING SYMBOL"]
    , ["⚜️", "FLEUR-DE-LIS"]
    // ", ""
    , ["⭕️", "HOLLOW RED CIRCLE"]
    , ["✅️", "CHECK MARK BUTTON"]
    , ["☑️", "BALLOT BOX WITH CHECK"]
    , ["✔️", "HEAVY CHECK MARK"]
    , ["❌️", "CROSS MARK"]
    , ["❎️", "CROSS MARK BUTTON"]
    // ", ""
    , ["➰️", "CURLY LOOP"]
    , ["➿️", "DOUBLE CURLY LOOP"]
    , ["〽️", "PART ALTERNATION MARK"]
    , ["✳️", "EIGHT SPOKED ASTERISK"]
    , ["✴️", "EIGHT POINTED STAR"]
    , ["❇️", "SPARKLE"]
    // ", ""
    , ["©️", "COPYRIGHT SIGN"]
    , ["®️", "REGISTERED SIGN"]
    , ["™️", "TRADE MARK SIGN"]
    // ", ""
    , ["ℹ️", "INFORMATION SOURCE"]
    , ["Ⓜ️", "CIRCLED LATIN CAPITAL LETTER M ፨ METRO"]
    , ["㊗️", "CIRCLED IDEOGRAPH CONGRATULATION"]
    , ["㊙️", "CIRCLED IDEOGRAPH SECRET"]
    // ", ""
    , ["⚫️", "BLACK MEDIUM CIRCLE ፨ CZARNE KOŁO"]
    , ["⚪️", "WHITE CIRCLE ፨ BIAŁE KOŁO"]
    , ["⬛️", "BLACK LARGE SQUARE ፨ CZARNY KWADRAT"]
    , ["⬜️", "WHITE LARGE SQUARE ፨ BIAŁY KWADRAT"]
    , ["◼️", "BLACK MEDIUM SQUARE ፨ CZARNY KWADRAT"]
    , ["◻️", "WHITE MEDIUM SQUARE ፨ BIAŁY KWADRAT"]
    , ["◾️", "BLACK MEDIUM SMALL SQUARE ፨ CZARNY KWADRAT"]
    , ["◽️", "WHITE MEDIUM-SMALL SQUARE ፨ BIAŁY KWADRAT"]
    , ["▪️", "BLACK SMALL SQUARE ፨ CZARNY KWADRAT"]
    , ["▫️", "WHITE SMALL SQUARE ፨ BIAŁY KWADRAT"]
];
const extra_emojis = [
    ["(✌️ ﾟ ∀ ﾟ)☞", "Do you get it?! xD"],
    ["乁(❤️ ʖ̯❤️)ㄏ", "Whaa? Just lovin It."],
    ["( ͡° ͜ʖ ͡° )つ──⭐️*:・ﾟ", "Magic"],
    ["�", "Replacement!"]
];

emojis_3bytes = emojis_3bytes.concat(extra_emojis);

const numbers_description = ["#", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "*"];
const numbers_emojis = ["#️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "0️️⃣", "*️⃣"];

emojis_3bytes = emojis_3bytes.concat(
    numbers_emojis.map((em, idx) => [em, numbers_description[idx] + "e"])
);

(function () {
    'use strict';

    function create_click_handling_to_input(elem_with_cursor) {
        return (event) => {
            event.preventDefault();
            var pos = elem_with_cursor.selectionStart;
            const val = elem_with_cursor.value;
            let prefix = val.substring(0, pos);
            if ("clear_last_colon" in event)
                prefix = prefix.substring(0, prefix.lastIndexOf(":"));
            const inserted = event.target.textContent;
            const suffix = val.substring(pos);
            elem_with_cursor.value =
                prefix +
                inserted +
                suffix;
            elem_with_cursor.focus();
            elem_with_cursor.selectionEnd = pos + inserted.length;
            elem_with_cursor.dispatchEvent(new Event('input', { bubbles: true, cancelable: true, }));
        };
    }

    function process_elems(elms) {
        setTimeout(() => { elms.forEach((el) => el.setAttribute('spellcheck', 'true')); _process_elems(elms); }, 0);
    }

    function _process_elems(elms) {
        elms.forEach((el) => {
            el.is_in_picker_mode = false;
            el.picker_mode_selection_idx = -1;
            el.parentNode.querySelector(".pickerExt")?.remove();
            function create_picker() {
                const div = document.createElement("div");
                div.classList.add("pickerExt")
                div.innerHTML = `
  <style>
  .pickerItems li.sel
  {
      display: inline-block;
      font-size: 1.3em;
      cursor: pointer;
      margin: 1px;
      padding: 2px;
      border-radius: 3px;
      box-shadow: 0px 0px 3px 0px rgba(127, 127, 127, 0.3);
  }
  .hidden
  {
      display: none;
  }
  </style>
  <div class="pickerItems">
  <ul class="unicodeEmojis"></ul>
  <ul class="numbers2"><li>NumEmojis:</li></ul>
  </div>`;
                const cnt = div.querySelector(".unicodeEmojis");
                emojis_3bytes.forEach((em_pair) => {
                    const holder = document.createElement("li");
                    holder.classList.add("sel")
                    holder.innerHTML = em_pair[0];
                    holder.title = em_pair[1];
                    holder.addEventListener('click', create_click_handling_to_input(el));
                    cnt.appendChild(holder);
                });
                const simple_items = (arr, cnt) =>
                    arr.forEach((em) => {
                        const holder = document.createElement("li");
                        holder.classList.add("sel")
                        holder.innerHTML = em;
                        holder.addEventListener('click', create_click_handling_to_input(el));
                        cnt.appendChild(holder);
                    });
                simple_items(numbers_emojis, div.querySelector(".numbers2"));
                return div;
            }
            const picker = create_picker();
            el.parentNode.appendChild(picker);
            el.addEventListener('focus', (event) => {
            });
            el.addEventListener('blur', (event) => {
            });
        });
    }

    function get_elms_to_watch(el) {
        if(el instanceof HTMLElement || el instanceof Document)
        {
            return [...el.querySelectorAll("textarea")];
        }
        return [];
    }


    var dom_observer = new MutationObserver(function (mutationRecords) {
        for (const mut of mutationRecords) {
            const nds = [...mut.addedNodes];
            nds.forEach((el) => {
                window.input_element_to_watch = process_elems(get_elms_to_watch(el))
            });
            nds.forEach((el) => {
                if (el.nodeName == "TEXTAREA") {
                    process_elems([el,]);
                }
            });
        }
    });
    var container = document.body;
    var config = { subtree: true, childList: true };

    process_elems(get_elms_to_watch(document));
    dom_observer.observe(container, config);
})();