☰

DTF return like

Скрипт для замены иконки лайка (сердечка) на стрелку

目前为 2022-12-15 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         DTF return like
  3. // @version      0.2
  4. // @description  Скрипт для замены иконки лайка (сердечка) на стрелку
  5. // @author       geuarg1y
  6. // @match        *://dtf.ru/*
  7. // @grant        none
  8. // @license      MIT
  9. // @namespace    https://greasyfork.org/users/998190
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     injectStyles();
  14.     void swapIcons();
  15. })();
  16.  
  17. async function swapIcons() {
  18.     const like = await getDomElementAsync('#v_like'); // Ждем, когда появится спрайт с svg иконками на странице и получаем икоку лайка
  19.     const likeCopy = createIconCopy('v_dislike', 'v_like'); // Делаем копию дизлайка, но с id лайка
  20.     like.replaceWith(likeCopy); // Заменяем сердечко на иконку дизлайка (стрелку)
  21.  
  22.     const likeActive = document.querySelector('#v_like_active');
  23.     const likeActiveCopy = createIconCopy('v_dislike_active', 'v_like_active');
  24.     likeActive.replaceWith(likeActiveCopy);
  25. }
  26.  
  27. function getDomElementAsync(selector, timerLimit = 10000) {
  28.     return new Promise((resolve, reject) => {
  29.         try {
  30.             setTimeout(
  31.                 () => reject(`Время ожидания DOM элемента истекло (${timerLimit / 1000}s)`),
  32.                 timerLimit
  33.             );
  34.  
  35.             let timerId;
  36.  
  37.             const tick = () => {
  38.                 const element = document.querySelector(selector);
  39.  
  40.                 if (element) {
  41.                     clearTimeout(timerId);
  42.                     resolve(element);
  43.                 } else {
  44.                     timerId = setTimeout(tick, 100);
  45.                 }
  46.             };
  47.  
  48.             tick();
  49.         } catch (e) {
  50.             reject(e);
  51.         }
  52.     });
  53. }
  54.  
  55. function createIconCopy(fromIconId, toIconId) {
  56.     const source = document.querySelector(`#${fromIconId}`);
  57.     const copy = source.cloneNode(true);
  58.  
  59.     copy.setAttribute('id', toIconId);
  60.  
  61.     return copy;
  62. }
  63.  
  64. function injectStyles() {
  65.     const styles = `
  66.         /* Лайки у постов */
  67.         .content-footer__item:first-child {
  68.             order: 1;
  69.             margin-left: auto;
  70.             margin-right: 7px !important;
  71.         }
  72.  
  73.         .content-footer__item:last-child {
  74.             order: 2;
  75.             margin-left: 9px;
  76.         }
  77.  
  78.         /* Лайки у комментов */
  79.         .comment .like-button.like-button--action-like {
  80.             order: -2;
  81.             margin-left: auto;
  82.             margin-right: 9px;
  83.             z-index: 1;
  84.         }
  85.  
  86.         .comment .like-button.like-button--action-dislike {
  87.             order: -1;
  88.             margin-left: 0;
  89.         }
  90.  
  91.         /* Кнопка раскрытия комментов */
  92.         .comment__inline-action {
  93.             order: 1;
  94.             width: 100%;
  95.         }
  96.  
  97.         /* Цвета иконок лайка/дизлайка */
  98.         .like-button.like-button--action-like {
  99.             --like-color-text-hover: #2ea83a;
  100.             --like-color-background-hover: #2ea83a;
  101.             --like-color-active: #2ea83a;
  102.         }
  103.  
  104.         .like-button.like-button--action-dislike {
  105.             --like-color-text-hover: #cf4c59;
  106.             --like-color-background-hover: #cf4c59;
  107.             --like-color-active: #cf4c59;
  108.         }
  109.  
  110.         #v_dislike_active path {
  111.             fill: #cf4c59;
  112.         }
  113.  
  114.         #v_like_active path {
  115.             fill: #2ea83a;
  116.         }
  117.  
  118.         /* Отключаем анимацию */
  119.         .like-button--action-like .like-button__icon,
  120.         .like-button--action-dislike .like-button__icon {
  121.             visibility: visible !important;
  122.         }
  123.  
  124.         .like-button__lottie {
  125.             display: none;
  126.         }
  127.  
  128.         /* Переворачиваем иконку лайка */
  129.         .like-button--action-like .like-button__icon {
  130.             transform: rotate(180deg);
  131.         }
  132.  
  133.     `;
  134.  
  135.     document.head.insertAdjacentHTML("beforeend", `<style type="text/css" id="dtfChangeIconStyles">${styles}</style>`)
  136. }