wykop emoji

// ==UserScript==
// @name         Wykop-ext emoji
// @namespace    https://github.com/rpbyo
// @version      1.0.3
// @description  More emojis.
// @author       rpbyo (github)
// @match        *://www.wykop.pl/mikroblog/*
// @match        *://www.wykop.pl/tag/*
// @match        *://www.wykop.pl/wpis/*
// @match        *://www.wykop.pl/link/*
// @match        *://www.wykop.pl/wiadomosc-prywatna/*
// @match        *://www.wykop.pl/moj/*
// @grant        none
// @license      n/a
// ==/UserScript==

(function() {
  "use strict";

  //Default emojis.
  const listEmoticons = [
    "( ͡° ʖ̯ ͡°)",
    "( ͡º ͜ʖ͡º)",
    "( ͡°( ͡° ͜ʖ( ͡° ͜ʖ ͡°)ʖ ͡°) ͡°)",
    "(⌐ ͡■ ͜ʖ ͡■)",
    "(╥﹏╥)",
    "(╯︵╰,)",
    "(ʘ‿ʘ)",
    "(｡◕‿‿◕｡)",
    "ᕙ(⇀‸↼‶)ᕗ",
    "ᕦ(òóˇ)ᕤ",
    "(✌ ﾟ ∀ ﾟ)☞",
    "ʕ•ᴥ•ʔ",
    "ᶘᵒᴥᵒᶅ",
    "(⌒(oo)⌒)",
    "ᄽὁȍ ̪ őὀᄿ",
    "( ͡€ ͜ʖ ͡€)",
    "( ͡° ͜ʖ ͡°)",
    "( ͡° ͜ʖ ͡°)ﾉ⌐■-■",
    "(⌐ ͡■ ͜ʖ ͡■)",
    "¯\\\\\\_(ツ)\\_/¯",
    "(ꖘ⏏ꖘ)",
    "(╯°□°）╯︵ ┻━┻",
    "( ͡~ ͜ʖ ͡°)",
    "( ಠ_ಠ)",
    "(・へ・)",
    "(ง✿﹏✿)ง",
    "(づ•﹏•)づ",
    "乁(♥ ʖ̯♥)ㄏ",
    "|૦ઁ෴૦ઁ|",
    "乁(⫑ᴥ⫒)ㄏ",
    "(ꖘ‸ꖘ)",
    "ᕙ(✿ ͟ʖ✿)ᕗ",
    "(งⱺ ͟ل͜ⱺ)ง",
    "(￣෴￣)",
    "ヽ( ͠°෴ °)ﾉ",
    "└[⚆ᴥ⚆]┘",
    "ヽ(☼ᨓ☼)ﾉ",
    "XD",
    "(ⴲ﹏ⴲ)/",
    "(ಠ‸ಠ)",
    "(ง ͠° ͟ل͜ ͡°)ง",
    "_(:3」∠)",
    "(－‸ლ)",
    "( ͡° ͜ʖ ͡° )つ──☆*:・ﾟ",
    "(╭☞σ ͜ʖσ)╭☞",
    "xD",
    "xd",
    "XDDDDD",
    "(ᵔᴥᵔ)",
    "٩(◕‿◕)۶",
    "(✯◡✯)",
    "(◕‿◕)",
    "(*≧ω≦*)",
    "(☆▽☆)",
    "(⌒‿⌒)",
    "＼(≧▽≦)／",
    "ヽ(o＾▽＾o)ノ",
    "☆ ～('▽^人)",
    "(*°▽°*)",
    "٩(｡•́‿•̀｡)۶",
    "(✧ω✧)",
    "ヽ(*⌒▽⌒*)ﾉ",
    "(´｡• ᵕ •｡`)",
    "( ´ ▽ ` )",
    "(￣▽￣)",
    "╰(*´︶`*)╯",
    "ヽ(>∀<☆)ノ",
    "o(≧▽≦)o",
    "(☆ω☆)",
    "(っ˘ω˘ς )",
    "＼(￣▽￣)／",
    "(*¯︶¯*)",
    "＼(＾▽＾)／",
    "(~˘▽˘)~",
    "(o˘◡˘o)",
    "(★ω★)/",
    "/(^ヮ^)/",
    "(〃＾▽＾〃)",
    "(╯✧▽✧)╯",
    "o(>ω<)o",
    "o( ❛ᴗ❛ )o",
    "｡ﾟ(TヮT)ﾟ｡",
    "( ‾́ ◡ ‾́ )",
    "(ﾉ´ヮ`)ﾉ*: ･ﾟ",
    "(b ᵔ▽ᵔ)b",
    "(๑˃ᴗ˂)ﻭ",
    "(๑˘︶˘๑)",
    "( ˙꒳​˙ )",
    "(*꒦ິ꒳꒦ີ)",
    "°˖✧◝(⁰▿⁰)◜✧˖°",
    "(＃＞＜)",
    "(；⌣̀_⌣́)",
    "☆ｏ(＞＜；)○",
    "(￣ ￣|||)",
    "(；￣Д￣)",
    "(￣□￣」)",
    "(＃￣0￣)",
    "(´･ᴗ･ ` )",
    "(ノ_<。)",
    "(-_-)",
    "(´-ω-`)",
    ".･ﾟﾟ･(／ω＼)･ﾟﾟ･.",
    "(μ_μ)",
    "(ﾉД`)",
    "(-ω-、)",
    "。゜゜(´Ｏ`) ゜゜。",
    "o(TヘTo)",
    "( ; ω ; )",
    "(｡╯︵╰｡)",
    "｡･ﾟﾟ*(>д<)*ﾟﾟ･｡",
    "⁽⁽◝( • ω • )◜⁾⁾",
    "(个_个)",
    "｡･ﾟ(ﾟ><ﾟ)ﾟ･｡",
    "( ╥ω╥ )",
    "(╯_╰)",
    "(╥_╥)",
    ".｡･ﾟﾟ･(＞_＜)･ﾟﾟ･｡.",
    "(／ˍ・、)",
    "(ノ_<、)",
    "(╥﹏╥)",
    "｡ﾟ(｡ﾉωヽ｡)ﾟ｡",
    "(つω`｡)",
    "(｡T ω T｡)",
    "(ﾉω･､)",
    "･ﾟ･(｡>ω<｡)･ﾟ･",
    "(T_T)",
    "(>_<)",
    "(っ˘̩╭╮˘̩)っ",
    "｡ﾟ･ (>﹏<) ･ﾟ｡",
    "o(〒﹏〒)o",
    "(｡•́︿•̀｡)",
    "(ಥ﹏ಥ)",
    "( ` ω ´ )",
    "ヽ( `д´*)ノ",
    "(・`ω´・)",
    "~(>_<~)",
    "☆⌒(> _ <)",
    "☆⌒(>。<)",
    "(☆_@)",
    "(×_×)",
    "(x_x)",
    "(×_×)⌒☆",
    "(x_x)⌒☆",
    "(×﹏×)",
    "ʕっ•ᴥ•ʔっ",
    "(＋_＋)",
    "ʕノ•ᴥ•ʔノ ︵ ┻━┻",
    "(`ー´)",
    "ヽ(`⌒´メ)ノ",
    "ʕ·͡ᴥ·ʔ",
    "( `ε´ )",
    "⊂(◉‿◉)つ",
    "ヾ(`ヘ´)ﾉﾞ",
    "ヽ(‵﹏´)ノ",
    "(ﾒ` ﾛ ´)",
    "(•_•)",
    "( •_•)>⌐■-■",
    "(⌐■_■)",
    "Σ(▼□▼メ)",
    "(°ㅂ°╬)",
    "ԅ(≖‿≖ԅ)",
    "( ╥﹏╥) ノシ",
    "(ღ˘⌣˘ღ)",
    "(ง ͠° ͟ʖ ͡°)ง",
    "(* ^ ω ^)",
    "ᕙ(`▽´)ᕗ",
    "ʕᵔᴥᵔʔ",
    "(˵ ͡° ͜ʖ ͡°˵)",
    "＼٩(๑`^´๑)۶／",
    "(´• ω •`)",
    "┬──┬ ノ(ò_óノ)",
    "(ㆆ _ ㆆ)",
    "(っ˘ڡ˘ς)",
    "٩(ఠ益ఠ)۶",
    "(ﾉಥ益ಥ)ﾉ",
    "(^=◕ᴥ◕=^)",
    "( =ω= )",
    "(^˵◕ω◕˵^)",
    "(^◔ᴥ◔^)",
    "(^◕ᴥ◕^)",
    "ヽ(∀° )人( °∀)ノ",
    "∠( ᐛ 」∠)＿",
    "⁽⁽◝( • ω • )◜⁾⁾",
    "ヘ(￣ω￣ヘ)",
    "(〜￣▽￣)〜",
    "〜(￣▽￣〜)",
    "σ( •̀ ω •́ σ)",
    "ლ(́◉◞౪◟◉‵ლ",
    "( =ω=)",
    "(;・ω・)",
    "┬┴┬┴┤( ͡° ͜ʖ├┬┴┬┴",
    "|･ω･)",
    "|･ω･)ﾉ",
    "┬┴┬┴┤･ω･)ﾉ",
    "(￢‿￢ )",
    "(•ิ_•ิ)?",
    "＞_＜",
    "(„ಡωಡ„)",
    "(*^.^*)",
    "(´ ε ` )♡",
    "♡( ◡‿◡ )",
    "( ◡‿◡ )",
    "(´♡‿♡`)",
    "⊂(･ω･*⊂)",
    "(っಠ‿ಠ)っ",
    "(≖ ͜ʖ≖)",
    "(∩ᄑ_ᄑ)⊃━☆ﾟ:・ﾟ",
    "(ฺ◣д◢)ฺ",
    "(∩ᄑ_ᄑ)⊃",
    "(/￣ー￣)/",
    "(∩` ﾛ ´)⊃",
    "(=^･ω･^=)",
    "(=^･ｪ･^=)",
    "₍₍ (ง ˙ω˙)ว ⁾⁾",
    "ʕ*ﾉᴥﾉʔ",
    "(= ; ｪ ; =)",
    "(=`ω´=)",
    "(=^‥^=)",
    "( =ノωヽ=)",
    "(=⌒‿‿⌒=)",
    "(=^ ◡ ^=)",
    "(=^-ω-^=)",
    "ヾ(=`ω´=)ノ”",
    "_(ˇωˇ」∠)",
    "_(°ω°｣ ∠)"
  ];

  //Number emojis per page (default 45).
  const emojiPerPage = 45,
    //Number of columns per page (default 5).
    columnPerPage = 5,
    //Css for menu.
    getHead = document.head,
    emojiStyle = document.createElement("style");
  emojiStyle.setAttribute("type", "text/css");
  emojiStyle.innerHTML = `.dropdown-emoji{border:none !important;box-shadow:none !important;width:auto;}
    ul.menu-emoji{display:block;text-align:center;user-select:none;}
    ul.menu-emoji li{width: 35px;display:inline-block;text-align:center;font-size:1.3em;border-bottom:none;padding:7px 0px;}
    ul.menu-emoji{background-color:#FFF;}
    ul.menu-emoji li:hover{background-color:#F1F4F5;}
    .night ul.menu-emoji{background-color:#2C2C2C;}
    .night ul.menu-emoji li:hover{background-color:#777777;}
    `;
  getHead.append(emojiStyle);

  //Create first page after hovering the mouse.
  document.addEventListener(
    "mouseover",
    function(event) {
      const element = event.target;
      if (
        element.classList.contains("dropdown-show") &&
        element.classList.contains("auto") &&
        element.closest(".button.ddC")
      ) {
        if (
          element.closest("fieldset.row.buttons.dnone") &&
          !element.nextElementSibling.classList.contains("dropdown-emoji")
        ) {
          showNewContent(element.closest(".button.ddC"), 1);
        }
      } else if (
        element.classList.contains("fa-caret-down") &&
        element.closest(".button.ddC")
      ) {
        if (
          element.closest("fieldset.row.buttons.dnone") &&
          !element.closest(".button.ddC").querySelector(".dropdown-emoji")
        ) {
          showNewContent(element.closest(".button.ddC"), 1);
        }
      }
    },
    false
  );
  //Menu pagination; Display page after click.
  document.addEventListener(
    "click",
    function(event) {
      const element = event.target;
      if (element.classList.contains("li-page-emoji")) {
        const findBtn = element.closest("div.button.ddC");
        showNewContent(findBtn, Number(element.dataset.pagenumber));
      }
    },
    false
  );
  //Add emoji to textarea.
  document.addEventListener(
    "click",
    function(event) {
      const element = event.target;
      if (element.classList.contains("newlenny")) {
        //Get closest textarea.
        const findTextarea = element.closest("form").querySelector("textarea"),
          startTxt = findTextarea.selectionStart,
          endTxt = findTextarea.selectionEnd,
          scrollTxt = findTextarea.scrollTop,
          emoji = element.dataset.emoji;
        findTextarea.value =
          findTextarea.value.substring(0, startTxt) +
          emoji +
          findTextarea.value.substring(endTxt, findTextarea.value.length);
        findTextarea.focus();
        findTextarea.selectionStart = startTxt + emoji.length;
        findTextarea.selectionEnd = startTxt + emoji.length;
        findTextarea.scrollTop = scrollTxt;
      }
    },
    false
  );
  //Create new tbody/menu/options(later)/add emoji.
  function showNewContent(place, pagenumber) {
    //Find closest element with .dropdown class; add new class.
    const findDropdown = place.querySelector("div.dropdown");
    if (!findDropdown.classList.contains("dropdown-emoji")) {
      findDropdown.classList.add("dropdown-emoji");
    }
    //If menu doesn't exist, create.
    if (!findDropdown.querySelector("ul.menu-emoji")) {
      const newUl = document.createElement("ul");
      newUl.classList.add("menu-emoji");
      findDropdown.prepend(newUl);
      //Create li.
      const newLi = (function() {
        let newLiList = "";
        for (
          let i = 1;
          i <= Math.ceil(listEmoticons.length / emojiPerPage);
          i++
        ) {
          newLiList += `<li class="li-page-emoji" data-pagenumber="${i}">${i}</li>`;
        }
        return newLiList;
      })();
      newUl.innerHTML = newLi;
    }
    //Menu style.
    const findMenuUl = findDropdown.querySelector("ul.menu-emoji"),
      findMenuLi = findMenuUl.querySelectorAll("li.li-page-emoji");
    //Remove/add background color for clicked li.
    Array.from(findMenuLi).forEach(el =>
      el.setAttribute("style", "background-color")
    );
    const colorThisLi = findMenuUl.querySelector(
      `[data-pagenumber="${pagenumber}"]`
    );
    document.querySelector("body").classList.contains("night")
      ? colorThisLi.setAttribute("style", "background-color:#777777")
      : colorThisLi.setAttribute("style", "background-color:#F1F4F5");
    //Find tbody in .dropdown element and remove.
    const findTable = findDropdown.querySelector("table");
    findTable.querySelector("tbody").remove();
    //Create new tbody with class 'pagenumber' and append to table.
    const createTbody = document.createElement("tbody");
    createTbody.classList.add(`tbody-page-emoji-${pagenumber}`);
    findTable.append(createTbody);
    const findTbody = findTable.querySelector(
      `tbody.tbody-page-emoji-${pagenumber}`
    );
    let rowToEmoji = 0;
    //Add emoji to new tbody.
    //Tbody rows.
    for (
      let p = 0;
      p <
      Math.ceil(
        (pagenumber * emojiPerPage - (pagenumber - 1) * emojiPerPage) /
          columnPerPage
      );
      p++
    ) {
      const newTr = document.createElement("tr");
      newTr.classList.add(`row-emoji-${p}`);
      findTbody.append(newTr);
    }
    //Create Td.
    for (
      let a = (pagenumber - 1) * emojiPerPage;
      a < pagenumber * emojiPerPage;
      a++
    ) {
      if (a % columnPerPage === 0 && a > (pagenumber - 1) * emojiPerPage) {
        rowToEmoji++;
      }
      if (listEmoticons[a] !== undefined) {
        const newTd = document.createElement("td"),
          newA = document.createElement("a");
        newA.classList.add("newlenny");
        newA.setAttribute("data-emoji", `${listEmoticons[a]}`);
        newA.setAttribute("href", "javascript:void(0)");
        newA.innerHTML = `${listEmoticons[a]}`;
        newTd.appendChild(newA);
        const findTr = findTbody.querySelector(`tr.row-emoji-${rowToEmoji}`);
        findTr.appendChild(newTd);
      }
    }
  }
})();