Пользовательский скрипт смайликов \ гиф \ стикеров

ФорумОффтопик
test-acc
test-acc
38
Уважаемые дамы и господа,

Иногда случается так, что нет ни сил, ни желания искать мемы и реакции, вставлять их через "ссылка на картинку" и настраивать размеры и прочие параметры. Но ради вас я разработал пользовательский скрипт, который позволит вам добавлять мемы и реакции всего одним кликом!

Как выглядит?
413x190




Как это работает?
Обратите внимание на следующий участок кода: 
const imageUrls = [
 'https://cdn3.emoji.gg/emojis/2175-pepefire.gif',
 'https://cdn3.emoji.gg/emojis/2175-pepefire.gif',
 'https://cdn3.emoji.gg/emojis/5441-sadgegon.png',
 'https://cdn3.emoji.gg/emojis/3537-why-pepe.png',
  // Вот таким вот образом  добавляется
];




Здесь вы должны вставить ссылки на заранее подготовленные мемы и реакции, чтобы впоследствии не тратить время на их поиск, а просто добавить их одним кликом.

Конечно, я уже подготовил несколько паков, но если вам этого недостаточно и вы хотите добавить что-то ещё, то вы знаете, как это сделать.
Если у вас возникнут вопросы или проблемы, не стесняйтесь писать мне в лс или же моем клубе.

установить одним кликом
Комментарии
Скрыть 18 комментариев
Показать 18 комментариев
Загрузить ещё 18 комментариев
test-acc
test-acc#
@animeshnik_ALT, а именно? покажи скрин где не работает
@animeshnik_ALT, @animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@test-acc, Ещё раз переустановил, теперь заработало везде
animeshnik_ALT
animeshnik_ALT#
@test-acc, А разве нет автообновления скрипта через greasy fork? Я думал есть
@test-acc
test-acc
test-acc#
@animeshnik_ALT, нет надо каждый раз переустанавливать
@animeshnik_ALT, @animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@test-acc,
animeshnik_ALT
animeshnik_ALT#
@test-acc, Ну ты тогда пиши если будут обновления
@test-acc
test-acc
test-acc#
@animeshnik_ALT, как лучше \ удобнее ?
так 738x67
или так 748x227
@animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@test-acc, Лучше вообще сверху, возле оригинальных смайликов
@test-acc
test-acc
test-acc#
@animeshnik_ALT, переустанови
@animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@test-acc, Я не совсем это имел ввиду, типо прям рядом с оригинальными смайлами ибо в профиле например /Redyska блок обрезается
274x265
Upd. Ну и в мобильной версии тоже.
animeshnik_ALT
animeshnik_ALT#
@test-acc, В shiki-theme из-за
img {
    max-width: 100%;
}
блок выглядит так

Пример /grin3671
@test-acc, @test-acc
test-acc
test-acc#
@animeshnik_ALT, я как раз обновляю.
test-acc
test-acc#
@animeshnik_ALT, обновил
@animeshnik_ALT
animeshnik_ALT
animeshnik_ALT#
@test-acc, во, найс, четко, только зачем предыдущие смайлы то удалил? Из-за того, что они иногда не отображались?
@test-acc
test-acc
test-acc#
@animeshnik_ALT, да, я загрузил другие мемы к себе в гитхаб, те не отображались иногда. если что ты сам можешь добавить у себя какие пожелаешь мемы.
aomame336
aomame336#
поскольку еще нет возможности публиковать пользовательские пакеты со смайликами, то так впишу свои:
спойлер
    'https://cdn.discordapp.com/emojis/1001846475292160053.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/999634426751369246.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1030839578589929532.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1118796173365485638.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1011640404254404708.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1001844999614378014.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1144911009396576288.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1144910985962995722.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1144910996293566496.webp?size=128&quality=lossless'
453x210
Denmayz
Denmayz#
Мой прессет эмодзи (пример тут)
спойлер
const imageUrls = [
   'https://cdn3.emoji.gg/emojis/5498_catJAM.gif',
   'https://cdn3.emoji.gg/emojis/7529_KEKW.png',
  'https://cdn3.emoji.gg/emojis/PepeHands.png',
  'https://cdn3.emoji.gg/emojis/3124_cry.gif',
  'https://cdn3.emoji.gg/emojis/monkaS.png',
  'https://cdn3.emoji.gg/emojis/8834-laughing-hard.png',
  'https://cdn3.emoji.gg/emojis/9807-pepecringe.png',
  'https://cdn3.emoji.gg/emojis/9881-caught-in-4k.png',
  'https://cdn3.emoji.gg/emojis/1616-simp.png',
  'https://cdn3.emoji.gg/emojis/9588-gigachad.png',
  'https://cdn3.emoji.gg/emojis/6779-cat-whaaa.png',
  'https://cdn3.emoji.gg/emojis/3842_PaimonAngry.png',
  'https://cdn3.emoji.gg/emojis/7346-pepe-hmmm.png',
  'https://cdn3.emoji.gg/emojis/3712-zerotwo-heartlove.png',
  'https://cdn3.emoji.gg/emojis/2194-sasuke-stare.gif',
  'https://cdn3.emoji.gg/emojis/7882-peepo-ban.png',
  'https://cdn3.emoji.gg/emojis/1306-chibi-paimon-smug.png',
  'https://cdn3.emoji.gg/emojis/7754-uno-reverse.png',
  'https://cdn3.emoji.gg/emojis/4993-skull.png',
  'https://cdn3.emoji.gg/emojis/5394_knowledge.png',
  'https://cdn3.emoji.gg/emojis/7285-kekwait.png',
  'https://cdn3.emoji.gg/emojis/3537-my-honest-reaction.png',
  'https://cdn3.emoji.gg/emojis/4632-ayo-what.png',
  'https://cdn3.emoji.gg/emojis/4568-doomed.png',
  'https://cdn3.emoji.gg/emojis/5551-miko-sus.gif',
  'https://cdn3.emoji.gg/emojis/5283-luffylike.png',
  'https://cdn3.emoji.gg/emojis/4852-kekwpain.png',
  'https://cdn3.emoji.gg/emojis/3123-pepenoted.png',
  'https://cdn3.emoji.gg/emojis/3449-pepe-angry-ping.png',
  'https://cdn3.emoji.gg/emojis/2566-clown-pepe.png',
  'https://cdn3.emoji.gg/emojis/7284-pedrolaughcry.gif',
  'https://cdn3.emoji.gg/emojis/7541-sage-shy.png',
  'https://cdn3.emoji.gg/emojis/KannaWhat.png',
  'https://cdn3.emoji.gg/emojis/9078-zerotwo-hypedfast.gif',
  'https://cdn3.emoji.gg/emojis/9248-diesfromcringe.gif',
  'https://cdn3.emoji.gg/emojis/7024_man_of_culture.png',
  'https://cdn3.emoji.gg/emojis/2280-pepesmash.png',
  'https://cdn3.emoji.gg/emojis/5799-pepe-smash.png',
  'https://cdn3.emoji.gg/emojis/7451-pepegunr.png',
  'https://cdn3.emoji.gg/emojis/9756-pepegunl.png',
  'https://cdn3.emoji.gg/emojis/2145-02clown.png',
  'https://cdn3.emoji.gg/emojis/4358-irlpepechill.png',
  'https://cdn.discordapp.com/emojis/1034120127978950666.webp',
  'https://cdn.discordapp.com/emojis/1034136455133528134.webp',
  'https://cdn.discordapp.com/emojis/1034120126498357378.webp',
  'https://cdn.discordapp.com/emojis/1034137213337882694.webp',
  'https://cdn.discordapp.com/emojis/1034120133687390321.webp',
  'https://cdn.discordapp.com/emojis/1034120129769914488.webp',
  'https://cdn.discordapp.com/emojis/1034120135075692645.webp',
  'https://cdn.discordapp.com/emojis/1034137049445445663.webp',
  'https://cdn.discordapp.com/emojis/1034120136245919785.webp',
  'https://cdn.discordapp.com/emojis/1034120139261628436.webp',
  'https://cdn3.emoji.gg/emojis/9380-fuminodepression3.png',
  'https://cdn3.emoji.gg/emojis/4260-venticool.png',
  'https://cdn3.emoji.gg/emojis/5045-luffy-happy.png',
  'https://cdn3.emoji.gg/emojis/2698-pochitacry.png',
  'https://cdn3.emoji.gg/emojis/3613-rikka-wow.png',
  'https://cdn3.emoji.gg/emojis/8058_PaimonNani.png',
  'https://cdn3.emoji.gg/emojis/7175-l-stare.png',
  'https://cdn3.emoji.gg/emojis/3298-tsukasa-blush3.png',
  'https://cdn3.emoji.gg/emojis/5505-zoro-happy.png',
  'https://cdn3.emoji.gg/emojis/3411-quintsmiku.png',
  'https://cdn3.emoji.gg/emojis/2748_SaitamaOK.png',
  'https://cdn3.emoji.gg/emojis/9018-pouting-aqua.png',
  'https://cdn3.emoji.gg/emojis/8403-aquacry.png',
  'https://cdn3.emoji.gg/emojis/7634-yunyundread.png',
  'https://cdn3.emoji.gg/emojis/7267-konosuba-aqua1.gif',
  'https://cdn3.emoji.gg/emojis/4487-konosuba-aqua5.gif',
  'https://cdn3.emoji.gg/emojis/7509-konosuba-aqua.gif',
  'https://cdn3.emoji.gg/emojis/5048-konosuba-1.gif',
  'https://cdn3.emoji.gg/emojis/7475-konosuba-2.gif',
  'https://cdn3.emoji.gg/emojis/3727_intslChisaSipsBeer.png',
  'https://cdn3.emoji.gg/emojis/8158-id-law-coffee.gif',
  'https://cdn3.emoji.gg/emojis/2540-sanji.gif',
  'https://cdn3.emoji.gg/emojis/7493-id-tashigi.gif',
  'https://cdn3.emoji.gg/emojis/8491-sanji-inlove.gif',
  'https://cdn3.emoji.gg/emojis/8714-chopper-wow-cool.gif',
  'https://cdn3.emoji.gg/stickers/3076-laughing.png'
];

Для замены ширины эмодзи на свою, поменяйте значение как на картинке
534x69
aomame336
aomame336#
aomame336
aomame336#
1039x271 съехало немного но ладно потом еще поделаю
немного изменил код под новый редактор, чтобы выглядело стилево. оставил комментарии где менял что-то.
// ==UserScript==
// @name         New smileys
// @namespace    http://shikimori.me/
// @version      1.0
// @description  Smileys button
// @author       Fujitawa
// @match        https://shikimori.one/*
// @match        https://shikimori.me/*
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

function addEmojisAndSmileys(container) {
  if (container.querySelector('.new-smileys')) {
    return;
  }

  const smileysStyle = document.createElement('style');
  smileysStyle.textContent = `
    .new-smileys {
      position: relative;
    }

.new-smileys-content {
    position: absolute;
    padding: 5px;
    width: auto;
    background: white;
    border: 1px solid lightgrey;
    display: none;
    border-radius: 4px;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    height: 150px;
    place-content: start;
    overflow: scroll;
    inset: auto auto 20px 50%;
    z-index: 99;
}

.b-shiki_editor  .controls .new-smileys-content {
  transform: translatex(-50%);
}

.b-shiki_editor-v2 .new-smileys-content {
transform: translatex(50%);
}
   .b-shiki_editor .controls .new-smiley-button {
      margin-left: 15px;
    }

    .new-smileys-content > img {
      min-width:30px;
      min-height:30px;
      max-width:30px;
      max-height:30px;
      width: 30px;
      height: 30px;
      object-fit: cover;
      border-radius:0;
    }


.menubar .icons .new-smileys {
    position: absolute;
    bottom: 20px;
    left: 0;
}
/*изменен ксс чтобы новая иконка была больше и не занимала все пространство*/
.icon.new-smiley-button {
  font-size: 20px;
  border-radius: 50%;
  margin: 0 5px 0 10px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  height: 23px !important;
  bottom: 6px !important;
}

.new-smiley-button:hover {
    background: 0 !important;
}
  `;

  document.head.appendChild(smileysStyle);

const imageUrls = [
    'https://cdn.discordapp.com/emojis/1001846475292160053.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/999634426751369246.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1030839578589929532.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1118796173365485638.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1011640404254404708.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1001844999614378014.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1144911009396576288.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1144910985962995722.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1144910996293566496.webp?size=128&quality=lossless'
];

  const imageContainer = document.createElement('div');
  imageContainer.className = 'new-smileys';

  const contentContainer = document.createElement('div');
  contentContainer.className = 'new-smileys-content';

  imageUrls.forEach((imageUrl) => {
    const imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    imageElement.style.cursor = 'pointer';

// изменен размер смайликов на более подходящий к обычным шикиморивским
imageElement.addEventListener('click', () => {
  const textareas = document.querySelectorAll('.editor-area');
  const imageTag = `[img no-zoom w=36]${imageUrl}[/img]`;

  textareas.forEach((textarea) => {
    textarea.value += imageTag;
  });

  const proseMirrorContainers = document.querySelectorAll('.ProseMirror');
  proseMirrorContainers.forEach((proseMirrorContainer) => {
    const divElement = document.createElement('div');
    divElement.innerHTML = imageTag;
    proseMirrorContainer.appendChild(divElement);
  });
});


    contentContainer.appendChild(imageElement);
  });
// заменен кружок на ромб, добавлен класс icon чтобы адаптироваться хоть чуток под чужие стили
  const toggleButton = document.createElement('button');
  toggleButton.className = 'icon new-smiley-button';
   toggleButton.textContent = '◇';

  toggleButton.type = 'button';

const markersElement = container.querySelector('.b-shiki_editor aside.markers');
const smileyIconElement = container.querySelector('.menu_group.menu_group-item .icon-smiley');

if (smileyIconElement) {
  container.insertBefore(imageContainer, smileyIconElement);
  container.insertBefore(toggleButton, smileyIconElement);
} else if (markersElement) {
  container.insertBefore(imageContainer, markersElement);
  container.insertBefore(toggleButton, markersElement);
}





  imageContainer.appendChild(contentContainer);

  let isContainerOpen = false;

  toggleButton.addEventListener('click', () => {
    if (!isContainerOpen) {
      contentContainer.style.display = 'grid';
      toggleButton.textContent = '◈';
    } else {
      contentContainer.style.display = 'none';
      toggleButton.textContent = '◇';
    }

    isContainerOpen = !isContainerOpen;
  });
}

function checkAndAddEmojisAndSmileys() {
  if (document.readyState === 'complete') {
    const controlsBlock = document.querySelector('.b-shiki_editor.shiki_editor-selector > .controls, .b-shiki_editor-v2 .vue-node .menubar .icons .menu_group.menu_group-item ');
    addEmojisAndSmileys(controlsBlock);
  }
}

checkAndAddEmojisAndSmileys();



setInterval(checkAndAddEmojisAndSmileys, 1000);
})();

@test-acc надеюсь ты не против что я тут в топике написал и тебя тэгнул еще
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode