Greasy Fork is available in English.

emoji class for DTF-markdown

emoji class

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/455678/1123020/emoji%20class%20for%20DTF-markdown.js 

// ==UserScript==
// @name         emoji class for DTF-markdown
// @namespace    https://github.com/TentacleTenticals
// @version      0.0.1
// @description  emoji class
// @author       Tentacle Tenticals
// @license MIT
// @require https://greasyfork.org/scripts/455674-emoji-for-dtf-markdown/code/emoji%20for%20DTF-markdown.js?version=1123016
// ==/UserScript==
 
(function () {
'use strict';

class Emoji {
  constructor({ path, name, url, type }) {
    // this.m=document.createElement('div');
    // this.m.className='emojiContainer';
    // path.appendChild(this.m);

    // this.name=document.createElement('p');
    // this.name.className='emojiName';
    // this.name.textContent='';
    // this.name.textContent=name;
    // this.m.appendChild(this.name);

    this.mask = document.createElement('div');
    this.mask.className = 'emojiMask';
    path.appendChild(this.mask);

    type === 'animated' ? (this.e = document.createElement('video')) : (this.e = document.createElement('img'));
    this.e.className = 'emoji';
    this.e.src = url;
    this.e.onclick = () => {
      document.querySelector(
        `div[class='writeComment']`
      ).innerHTML += `::${name}::`;
      document.querySelector(`div[class='emojiPicker']`).remove();
    };
    this.e.onmouseenter = () => {
      this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[1].textContent = `:${name}:`;
      type === 'animated' ? (this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[2].children[1].src =
            url)
        : (this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[2].children[0].src =
            url);
    };
    this.e.onmouseleave = () => {
      this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[1].textContent =
        '';
      type === 'animated' ? (this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[2].children[1].src =
            '')
        : (this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[2].children[0].src =
            '');
    };
    this.mask.appendChild(this.e);
  }
}

window.EmojiPicker = class EmojiPicker {
  constructor(path) {
    if(document.getElementById('emojiPicker')) return;
    this.d = document.createElement('div');
    this.d.className = 'emojiPicker';
    this.d.id='emojiPicker';
    path.appendChild(this.d);

    this.title = document.createElement('div');
    this.title.className = 'title';
    this.title.textContent = 'EMOJI PICKER';
    this.title.onclick=() => {
      this.d.remove();
    }
    this.d.appendChild(this.title);

    this.field = document.createElement('div');
    this.field.className = 'emojiPicker-field';
    this.d.appendChild(this.field);

    // this.fieldPreviewName=document.createElement('div');
    // this.d.appendChild(this.fieldPreviewName);
    this.fieldPreview = document.createElement('div');
    this.fieldPreview.style = `
    display: flex;
    height: 70px;
    flex-direction: column;
    `;
    this.d.appendChild(this.fieldPreview);
    this.image = document.createElement('img');
    this.image.style = `
    position: relative;
    margin: auto;
    max-width: 70px;
    max-height: 70px;
    `;
    this.fieldPreview.appendChild(this.image);
    this.video = document.createElement('video');
    this.video.style = `
    position: relative;
    margin: auto;
    max-width: 70px;
    max-height: 70px;
    `;
    this.video.setAttribute('autoplay', '');
    this.fieldPreview.appendChild(this.video);

    this.na = document.createElement('div');
    this.d.appendChild(this.na);
    this.naLabel = document.createElement('div');
    this.naLabel.textContent = 'Not animated';
    this.naLabel.style = `
    text-align: center;
    color: white;
    margin-top: 5px;
    box-shadow: inset 0px 0px 8px 0px rgb(134 167 185);
    cursor: pointer;`;
    this.naLabel.onclick = () => {
      this.naLabel.nextElementSibling.classList.toggle('hidden');
    };
    this.na.appendChild(this.naLabel);

    this.emojiList = document.createElement('div');
    this.emojiList.className = 'groupList';
    this.na.appendChild(this.emojiList);

    this.a = document.createElement('div');
    this.d.appendChild(this.a);
    this.aLabel = document.createElement('div');
    this.aLabel.textContent = 'Animated';
    this.aLabel.style = `
    text-align: center;
    color: white;
    box-shadow: inset 0px 0px 8px 0px rgb(134 167 185);
    cursor: pointer;`;
    this.aLabel.onclick = () => {
      this.aLabel.nextElementSibling.classList.toggle('hidden');
    };
    this.a.appendChild(this.aLabel);

    this.animatedEmojiList = document.createElement('div');
    this.animatedEmojiList.className = 'groupList';
    this.a.appendChild(this.animatedEmojiList);

    // for(let group in emoji){
    //   for(let emj in emoji[group]){
    //     new Emoji({
    //       url: emoji[group][emj],
    //       name: emj,
    //       path : this.emojiList
    //     })
    //   }
    // }
    new EmojiGroup({
      path: this.emojiList,
      type: 'not animated',
    });
    new EmojiGroup({
      path: this.animatedEmojiList,
      type: 'animated',
    });
  }
}

class EmojiGroup {
  constructor({ path, type }) {
    // this.eg=document.createElement('div');
    // type === 'animated' ? this.eg.textContent='Animated' : this.eg.textContent='Not animated';
    // this.eg.style=`
    // text-align: center;
    // color: white;`;
    // path.appendChild(this.eg);

    for (let group in emoji[type]) {
      this.main = document.createElement('div');
      this.main.className = 'emojiGroup';
      path.appendChild(this.main);

      this.name = document.createElement('div');
      this.name.className = 'groupName';
      this.name.textContent = group;
      this.main.appendChild(this.name);

      this.g = document.createElement('div');
      this.g.className = 'emojiList';
      this.main.appendChild(this.g);

      for (let emj in emoji[type][group]) {
        new Emoji({
          url: emoji[type][group][emj],
          name: emj,
          path: this.g,
          type: type,
        });
      }
    }
  }
}

 
})();