☰

DTF return like

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

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

  1. // ==UserScript==
  2. // @name         DTF return like
  3. // @version      0.3
  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: 2;
  69.             margin-right: 0px;
  70.             margin-left: 9px;
  71.         }
  72.  
  73.         .content-footer__item:last-child {
  74.             order: 1;
  75.             margin-left: auto;
  76.         }
  77.  
  78.         /* Лайки у комментов */
  79.         .comment .like-button.like-button--action-like {
  80.             order: -1;
  81.             margin-right: 0;
  82.         }
  83.  
  84.         .comment .like-button.like-button--action-dislike {
  85.             order: -2;
  86.             margin-left: auto;
  87.             margin-right: 9px;
  88.         }
  89.  
  90.         /* Количество рейтинга (и у постов, и у комментов) */
  91.         .like-button .like-button__count {
  92.             order: -1;
  93.             margin-right: 9px;
  94.             margin-left: 0px;
  95.         }
  96.  
  97.         /* Кнопка раскрытия комментов */
  98.         .comment__inline-action {
  99.             order: 1;
  100.             width: 100%;
  101.         }
  102.  
  103.         /* Цвета иконок лайка/дизлайка */
  104.         .like-button.like-button--action-like {
  105.             --like-color-text-hover: #2ea83a;
  106.             --like-color-background-hover: #2ea83a;
  107.             --like-color-active: #2ea83a;
  108.         }
  109.  
  110.         .like-button.like-button--action-dislike {
  111.             --like-color-text-hover: #cf4c59;
  112.             --like-color-background-hover: #cf4c59;
  113.             --like-color-active: #cf4c59;
  114.         }
  115.  
  116.         #v_dislike_active path {
  117.             fill: #cf4c59;
  118.         }
  119.  
  120.         #v_like_active path {
  121.             fill: #2ea83a;
  122.         }
  123.  
  124.         /* Отключаем анимацию */
  125.         .like-button--action-like .like-button__icon,
  126.         .like-button--action-dislike .like-button__icon {
  127.             visibility: visible !important;
  128.         }
  129.  
  130.         .like-button__lottie {
  131.             display: none;
  132.         }
  133.  
  134.         /* Переворачиваем иконку лайка */
  135.         .like-button--action-like .like-button__icon {
  136.             transform: rotate(180deg);
  137.         }
  138.  
  139.     `;
  140.  
  141.     document.head.insertAdjacentHTML("beforeend", `<style type="text/css" id="dtfChangeIconStyles">${styles}</style>`)
  142. }