☰

DTF return like

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

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

// ==UserScript==
// @name         DTF return like
// @version      0.2
// @description  Скрипт для замены иконки лайка (сердечка) на стрелку
// @author       geuarg1y
// @match        *://dtf.ru/*
// @grant        none
// @license      MIT
// @namespace    https://greasyfork.org/users/998190
// ==/UserScript==

(function () {
    injectStyles();
    void swapIcons();
})();

async function swapIcons() {
    const like = await getDomElementAsync('#v_like'); // Ждем, когда появится спрайт с svg иконками на странице и получаем икоку лайка
    const likeCopy = createIconCopy('v_dislike', 'v_like'); // Делаем копию дизлайка, но с id лайка
    like.replaceWith(likeCopy); // Заменяем сердечко на иконку дизлайка (стрелку)

    const likeActive = document.querySelector('#v_like_active');
    const likeActiveCopy = createIconCopy('v_dislike_active', 'v_like_active');
    likeActive.replaceWith(likeActiveCopy);
}

function getDomElementAsync(selector, timerLimit = 10000) {
    return new Promise((resolve, reject) => {
        try {
            setTimeout(
                () => reject(`Время ожидания DOM элемента истекло (${timerLimit / 1000}s)`),
                timerLimit
            );

            let timerId;

            const tick = () => {
                const element = document.querySelector(selector);

                if (element) {
                    clearTimeout(timerId);
                    resolve(element);
                } else {
                    timerId = setTimeout(tick, 100);
                }
            };

            tick();
        } catch (e) {
            reject(e);
        }
    });
}

function createIconCopy(fromIconId, toIconId) {
    const source = document.querySelector(`#${fromIconId}`);
    const copy = source.cloneNode(true);

    copy.setAttribute('id', toIconId);

    return copy;
}

function injectStyles() {
    const styles = `
        /* Лайки у постов */
        .content-footer__item:first-child {
            order: 1;
            margin-left: auto;
            margin-right: 7px !important;
        }

        .content-footer__item:last-child {
            order: 2;
            margin-left: 9px;
        }

        /* Лайки у комментов */
        .comment .like-button.like-button--action-like {
            order: -2;
            margin-left: auto;
            margin-right: 9px;
            z-index: 1;
        }

        .comment .like-button.like-button--action-dislike {
            order: -1;
            margin-left: 0;
        }

        /* Кнопка раскрытия комментов */
        .comment__inline-action {
            order: 1;
            width: 100%;
        }

        /* Цвета иконок лайка/дизлайка */
        .like-button.like-button--action-like {
            --like-color-text-hover: #2ea83a;
            --like-color-background-hover: #2ea83a;
            --like-color-active: #2ea83a;
        }

        .like-button.like-button--action-dislike {
            --like-color-text-hover: #cf4c59;
            --like-color-background-hover: #cf4c59;
            --like-color-active: #cf4c59;
        }

        #v_dislike_active path {
            fill: #cf4c59;
        }

        #v_like_active path {
            fill: #2ea83a;
        }

        /* Отключаем анимацию */
        .like-button--action-like .like-button__icon,
        .like-button--action-dislike .like-button__icon {
            visibility: visible !important;
        }

        .like-button__lottie {
            display: none;
        }

        /* Переворачиваем иконку лайка */
        .like-button--action-like .like-button__icon {
            transform: rotate(180deg);
        }

    `;

    document.head.insertAdjacentHTML("beforeend", `<style type="text/css" id="dtfChangeIconStyles">${styles}</style>`)
}