☰

emoji class for DTF-markdown

emoji class

当前为 2022-11-30 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/455678/1123008/emoji%20class%20for%20DTF-markdown.js 

  1. // ==UserScript==
  2. // @name         emoji class for DTF-markdown
  3. // @namespace    https://github.com/TentacleTenticals
  4. // @version      0.0.1
  5. // @description  emoji class
  6. // @author       Tentacle Tenticals
  7. // @license MIT
  8. // @require https://greasyfork.org/scripts/455674-emoji-for-dtf-markdown/code/emoji%20for%20DTF-markdown.js
  9. // ==/UserScript==
  10.  
  11. (function () {
  12. 'use strict';
  13.  
  14. window.Emoji = class Emoji {
  15.   constructor({ path, name, url, type }) {
  16.     // this.m=document.createElement('div');
  17.     // this.m.className='emojiContainer';
  18.     // path.appendChild(this.m);
  19.  
  20.     // this.name=document.createElement('p');
  21.     // this.name.className='emojiName';
  22.     // this.name.textContent='';
  23.     // this.name.textContent=name;
  24.     // this.m.appendChild(this.name);
  25.  
  26.     this.mask = document.createElement('div');
  27.     this.mask.className = 'emojiMask';
  28.     path.appendChild(this.mask);
  29.  
  30.     type === 'animated' ? (this.e = document.createElement('video')) : (this.e = document.createElement('img'));
  31.     this.e.className = 'emoji';
  32.     this.e.src = url;
  33.     this.e.onclick = () => {
  34.       document.querySelector(
  35.         `div[class='writeComment']`
  36.       ).innerHTML += `::${name}::`;
  37.       document.querySelector(`div[class='emojiPicker']`).remove();
  38.     };
  39.     this.e.onmouseenter = () => {
  40.       this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[1].textContent = `:${name}:`;
  41.       type === 'animated' ? (this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[2].children[1].src =
  42.             url)
  43.         : (this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[2].children[0].src =
  44.             url);
  45.     };
  46.     this.e.onmouseleave = () => {
  47.       this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[1].textContent =
  48.         '';
  49.       type === 'animated' ? (this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[2].children[1].src =
  50.             '')
  51.         : (this.e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.children[2].children[0].src =
  52.             '');
  53.     };
  54.     this.mask.appendChild(this.e);
  55.   }
  56. }
  57.  
  58. class EmojiPicker {
  59.   constructor(path) {
  60.     if(document.getElementById('emojiPicker')) return;
  61.     this.d = document.createElement('div');
  62.     this.d.className = 'emojiPicker';
  63.     this.d.id='emojiPicker';
  64.     path.appendChild(this.d);
  65.  
  66.     this.title = document.createElement('div');
  67.     this.title.className = 'title';
  68.     this.title.textContent = 'EMOJI PICKER';
  69.     this.title.onclick=() => {
  70.       this.d.remove();
  71.     }
  72.     this.d.appendChild(this.title);
  73.  
  74.     this.field = document.createElement('div');
  75.     this.field.className = 'emojiPicker-field';
  76.     this.d.appendChild(this.field);
  77.  
  78.     // this.fieldPreviewName=document.createElement('div');
  79.     // this.d.appendChild(this.fieldPreviewName);
  80.     this.fieldPreview = document.createElement('div');
  81.     this.fieldPreview.style = `
  82.     display: flex;
  83.     height: 70px;
  84.     flex-direction: column;
  85.     `;
  86.     this.d.appendChild(this.fieldPreview);
  87.     this.image = document.createElement('img');
  88.     this.image.style = `
  89.     position: relative;
  90.     margin: auto;
  91.     max-width: 70px;
  92.     max-height: 70px;
  93.     `;
  94.     this.fieldPreview.appendChild(this.image);
  95.     this.video = document.createElement('video');
  96.     this.video.style = `
  97.     position: relative;
  98.     margin: auto;
  99.     max-width: 70px;
  100.     max-height: 70px;
  101.     `;
  102.     this.video.setAttribute('autoplay', '');
  103.     this.fieldPreview.appendChild(this.video);
  104.  
  105.     this.na = document.createElement('div');
  106.     this.d.appendChild(this.na);
  107.     this.naLabel = document.createElement('div');
  108.     this.naLabel.textContent = 'Not animated';
  109.     this.naLabel.style = `
  110.     text-align: center;
  111.     color: white;
  112.     margin-top: 5px;
  113.     box-shadow: inset 0px 0px 8px 0px rgb(134 167 185);
  114.     cursor: pointer;`;
  115.     this.naLabel.onclick = () => {
  116.       this.naLabel.nextElementSibling.classList.toggle('hidden');
  117.     };
  118.     this.na.appendChild(this.naLabel);
  119.  
  120.     this.emojiList = document.createElement('div');
  121.     this.emojiList.className = 'groupList';
  122.     this.na.appendChild(this.emojiList);
  123.  
  124.     this.a = document.createElement('div');
  125.     this.d.appendChild(this.a);
  126.     this.aLabel = document.createElement('div');
  127.     this.aLabel.textContent = 'Animated';
  128.     this.aLabel.style = `
  129.     text-align: center;
  130.     color: white;
  131.     box-shadow: inset 0px 0px 8px 0px rgb(134 167 185);
  132.     cursor: pointer;`;
  133.     this.aLabel.onclick = () => {
  134.       this.aLabel.nextElementSibling.classList.toggle('hidden');
  135.     };
  136.     this.a.appendChild(this.aLabel);
  137.  
  138.     this.animatedEmojiList = document.createElement('div');
  139.     this.animatedEmojiList.className = 'groupList';
  140.     this.a.appendChild(this.animatedEmojiList);
  141.  
  142.     // for(let group in emoji){
  143.     //   for(let emj in emoji[group]){
  144.     //     new Emoji({
  145.     //       url: emoji[group][emj],
  146.     //       name: emj,
  147.     //       path : this.emojiList
  148.     //     })
  149.     //   }
  150.     // }
  151.     new EmojiGroup({
  152.       path: this.emojiList,
  153.       type: 'not animated',
  154.     });
  155.     new EmojiGroup({
  156.       path: this.animatedEmojiList,
  157.       type: 'animated',
  158.     });
  159.   }
  160. }
  161.  
  162. class EmojiGroup {
  163.   constructor({ path, type }) {
  164.     // this.eg=document.createElement('div');
  165.     // type === 'animated' ? this.eg.textContent='Animated' : this.eg.textContent='Not animated';
  166.     // this.eg.style=`
  167.     // text-align: center;
  168.     // color: white;`;
  169.     // path.appendChild(this.eg);
  170.  
  171.     for (let group in emoji[type]) {
  172.       this.main = document.createElement('div');
  173.       this.main.className = 'emojiGroup';
  174.       path.appendChild(this.main);
  175.  
  176.       this.name = document.createElement('div');
  177.       this.name.className = 'groupName';
  178.       this.name.textContent = group;
  179.       this.main.appendChild(this.name);
  180.  
  181.       this.g = document.createElement('div');
  182.       this.g.className = 'emojiList';
  183.       this.main.appendChild(this.g);
  184.  
  185.       for (let emj in emoji[type][group]) {
  186.         new Emoji({
  187.           url: emoji[type][group][emj],
  188.           name: emj,
  189.           path: this.g,
  190.           type: type,
  191.         });
  192.       }
  193.     }
  194.   }
  195. }
  196.  
  197.  
  198. })();