eHázi - Mosolygó beszúró gomb

// ==UserScript==
// @name        eHázi - Mosolygó beszúró gomb
// @namespace   VF@eHazi
// @description Eszköztárról beszúrható mosolygókat ad a szerkesztés űrlapokhoz
// @match       https://ehazi.hu/*
// @version     0.0
// @grant       none
// ==/UserScript==

let stilus = document.createElement('style')
stilus.textContent = `
  div.us-mosoly-tar img { padding: 5px; margin-right: 10px; cursor: pointer; }
  div.us-mosoly-tar img.us-elerhetetlen { opacity: 25%; border-left-style: solid; border-right-style: solid; border-width: 2px; border-color: red; border-radius: 10px; cursor: not-allowed; }
`
document.head.appendChild(stilus)

let mosolyLista = [
  {nev: 'angry'    , erzes: 'dühös'     , szoveg: ':@'  },
  {nev: 'confused' , erzes: 'zavarodott', szoveg: ':|'  },
  {nev: 'cool'     , erzes: 'menő'      , szoveg: 'B-)' },
  {nev: 'crying'   , erzes: 'sírós'     , szoveg: ":'(" },
  {nev: 'cute'     , erzes: 'aranyos'   , szoveg: ':3', megjegyzes: 'ez csak előtte utána szóközzel működik'},
  {nev: 'happy-1'  , erzes: 'boldog'    ,               megjegyzes: 'elérhetősége ismeretlen'},
  {nev: 'happy'    , erzes: 'boldog'    , szoveg: ':)'  },
  {nev: 'in-love'  , erzes: 'szerelmes' ,               megjegyzes: 'elérhetősége ismeretlen'},
  {nev: 'laughing' , erzes: 'nevető'    , szoveg: ':D'  },
  {nev: 'sad'      , erzes: 'szomorú'   , szoveg: ':(', megjegyzes: 'ez csak előtte utána szóközzel működik'},
  {nev: 'sick'     , erzes: 'beteg'     ,               megjegyzes: 'elérhetősége ismeretlen'},
  {nev: 'surprised', erzes: 'meglepett' , szoveg: [':O', ':o']},
  {nev: 'tongue'   , erzes: 'nyelv'     , szoveg: [':P', ':p']},
  {nev: 'wink'     , erzes: 'kacsint'   , szoveg: ';)'  },
]

let ikon = 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9Ti0UqDnYQcchQnSyIinTUKhShQqgVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIjx4Lgf7+497t4BQrPKNKtnAtB028ykkmIuvyr2viKCMIJIICQzy5iTpDR8x9c9Any9i/Ms/3N/jn61YDEgIBLPMsO0iTeIZzZtg/M+cZSVZZX4nHjcpAsSP3Jd8fiNc8llgWdGzWxmnjhKLJa6WOliVjY14mnimKrplC/kPFY5b3HWqnXWvid/YaSgryxzneYIUljEEiSIUFBHBVXYiNOqk2IhQ/tJH/+w65fIpZCrAkaOBdSgQXb94H/wu1urODXpJUWSQOjFcT5Ggd5doNVwnO9jx2mdAMFn4Erv+GtNIPFJeqOjxY6AgW3g4rqjKXvA5Q4w9GTIpuxKQZpCsQi8n9E35YHBW6BvzeutvY/TByBLXaVvgINDYKxE2es+7w539/bvmXZ/P0E9cpOIMM0aAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gwIBAIDoLsMNQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAJqSURBVEjHrZZLTxpRFMd/zDCD2KnKKzA1PuKG0PU08QMU1l1346pfgI0hYdWkrrruwoWLJm3aVPeCfAhiZVPEWF1o8JUCbbEOni6mKCBMfXCSk9zc/O//PO6551xwEa+XJdPkOBaj5fcj4KiqIqEQl4kEZ9Eob10olL67us67SIQ/gKTTyPo6Uqkg9bqjlYqzl047BoNBWrrOZ24joRDfFQXJZpFiERFx12LRwQLi93PqSh6JcALI2prj6f/I21qvO2cA0XWaAz0HJJe7PXGv5nJXRmpd5JrGe4/H8eL6QExse15EYi6kNzHtSBSFDwAqgM/H6uIinoUF0HVoNF6yvf2Kra0XNJvP8Psfoetfu5wahJmaAlWFzU2eNpu8RlVZhs4LjUmptCKZzKFY1oVkModSKq30ROKOKRavynkJw+BnOn0dtm3PS6GwIZZ1ISBiWRdSKGz8S8XtMek0Eg5zrJyfM5pKXYeuqruY5j7J5AmWZZNMnmCa+6jq7p0wqRTYNkEPIJUKzM1153dv7zkHB1OY5j7T0wUM4+ONO3DD7OxAPO6sB9T8/aqo820A4vF4kFoNDIOhSqMBY2Og6DpUqwxdqlXw+UBRFKRcHr6Bchk0DRRV5Xc+P3wD+TwEAvzq89Aeru2HNjvLMgB+P61s9m4d1K2zZrNIIECrc3J9abfphxpoN7vJSVa7cjY+TnVY7XpigrNObrW9mJnh6KEDZ2SE896Z3DWYEwm+BYP3G5mjo/zoKSZf3xKLRnkTj1O77dA3DGxN41MfqseutaxpLEYiHAUCXKpq97clEOAyHObU6x34bfEAT/4CEWNVATdiU30AAAAASUVORK5CYII='
;[
  {urlap: 'newQuestionForm', mezo: 'new_question_description'},
  {urlap: 'newAnswerForm'  , mezo: 'new_answer_description'  },
  {urlap: 'editAnswerForm' , mezo: 'edit_answer_description' },
].forEach(szerkeszto => {
  let eszkozTar = document.querySelector(`form#${ szerkeszto.urlap } div.w3-light-grey:not([id])>div:first-child`)
  if (! eszkozTar)
    return

  let gomb = document.createElement('img')
  gomb.src = 'data:image/png;base64,' + ikon
  gomb.alt = 'Mosoly'
  gomb.title = 'Mosolygó beszúrása'
  gomb.className = 'w3-margin-right w3-hover-grey w3-round-large'
  gomb.style.cursor = 'pointer'
  gomb.style.padding = '2px'
  gomb.dataset.toggle = 'tooltip'
  gomb.addEventListener('click', () => mosolyBeszuras(szerkeszto.urlap + 'Mosoly'))

  eszkozTar.appendChild(gomb)

  let mosolyTar = document.createElement('div')
  mosolyTar.id = szerkeszto.urlap + 'Mosoly'
  mosolyTar.className = 'w3-light-grey w3-padding us-mosoly-tar'
  mosolyTar.style.display = 'none'
  mosolyTar.style.marginTop = '8px'

  mosolyLista.forEach(mosoly => {
    let gomb = document.createElement('img')
    gomb.src = `https://ehazi.hu/images/smiley/${ mosoly.nev }.png`
    gomb.title = `${ mosoly.erzes } (${ mosoly.nev })`

    if (mosoly.szoveg)
      gomb.title += '\n' + [].concat(mosoly.szoveg).join(' vagy ')
    else
        gomb.className = 'us-elerhetetlen'

    if (mosoly.megjegyzes)
      gomb.title += `\n(${ mosoly.megjegyzes })`

    gomb.dataset.szoveg = (mosoly.megjegyzes ? ' ' : '') + (Array.isArray(mosoly.szoveg) ? mosoly.szoveg[0] : mosoly.szoveg) + (mosoly.megjegyzes ? ' ' : '')

    if (mosoly.szoveg)
      gomb.addEventListener('click', esemeny => insertTextAtCursor(document.getElementById(szerkeszto.mezo), esemeny.target.dataset.szoveg))

    mosolyTar.appendChild(gomb)
  })

  eszkozTar.parentNode.parentNode.insertBefore(mosolyTar, eszkozTar.parentNode.nextSibling)
})

function mosolyBeszuras(tar)
{
  let mosolyTar = document.getElementById(tar)
  if (! mosolyTar)
    return

  mosolyTar.style.display = mosolyTar.style.display == 'none' ? 'block' : 'none'
}

// átvéve az eHázi kódjából, csak hogy ne kelljen megint beszúrni az oldalba
function insertTextAtCursor(el, text) {
  var val = el.value, endIndex, range;
  if (typeof el.selectionStart != "undefined" && typeof el.selectionEnd != "undefined") {
    endIndex = el.selectionEnd;
    el.value = val.slice(0, el.selectionStart) + text + val.slice(endIndex);
    el.selectionStart = el.selectionEnd = endIndex + text.length;
  } else if (typeof document.selection != "undefined" && typeof document.selection.createRange != "undefined") {
    el.focus();
    range = document.selection.createRange();
    range.collapse(false);
    range.text = text;
    range.select();
  }
}