☰

Color Favorites for Multiple Sites

Script for multiple sites

// ==UserScript==
// @name         Color Favorites for Multiple Sites
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Script for multiple sites
// @author       Your Name
// @match        *://zelenka.guru/*
// @match        *://lolz.live/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// ==/UserScript==

(function() {
    'use strict';

    // Создание кнопки "Сохранить цвет"
    function createAddToFavoritesButton() {
        const hexInputContainer = document.querySelector('.fr-input-line');
        if (!hexInputContainer) return;

        const addButton = document.createElement('button');
        addButton.type = 'button';
        addButton.textContent = 'Сохранить цвет';
        addButton.style.margin = '10px 0';
        addButton.style.marginLeft = '0'; // Установить отступ слева на 0
        addButton.className = 'fr-command fr-btn custom-save-color-btn';

        // Добавление стилей для кнопки
        addButton.style.backgroundColor = '#007bff'; // Задний фон кнопки
        addButton.style.color = '#fff'; // Цвет текста
        addButton.style.border = 'none'; // Убираем рамку
        addButton.style.padding = '10px 20px'; // Отступы внутри кнопки
        addButton.style.borderRadius = '5px'; // Скругленные углы
        addButton.style.cursor = 'pointer'; // Указатель при наведении

        // Добавление анимации нажатия
        addButton.addEventListener('mousedown', function() {
            addButton.style.transform = 'scale(0.95)';
        });

        addButton.addEventListener('mouseup', function() {
            addButton.style.transform = 'scale(1)';
        });

        hexInputContainer.appendChild(addButton);

        addButton.addEventListener('click', function() {
            const color = document.querySelector('#fr-color-hex-layer-text-1').value;
            if (color) {
                addColorToFavorites(color);
                updateFavoritesSlots();
            }
        });
    }

    // Создание слотов для избранных цветов
    function createFavoritesSlots() {
        const hexInputContainer = document.querySelector('.fr-input-line');
        if (!hexInputContainer) return;

        const slotsContainer = document.createElement('div');
        slotsContainer.className = 'fr-favorites-slots';
        slotsContainer.style.display = 'grid';
        slotsContainer.style.gridTemplateColumns = 'repeat(5, 1fr)'; // Сетка 5 колонок
        slotsContainer.style.gridGap = '5px';
        slotsContainer.style.marginTop = '10px';
        slotsContainer.style.marginBottom = '10px';
        slotsContainer.style.width = '100%';

        for (let i = 0; i < 25; i++) { // 25 слотов
            const slot = document.createElement('div');
            slot.className = 'fr-favorites-slot';
            slot.style.width = '30px';
            slot.style.height = '30px';
            slot.style.border = '1px solid #ccc';
            slot.style.backgroundColor = '#fff';
            slot.style.cursor = 'pointer';
            slot.style.boxSizing = 'border-box';
            slot.dataset.index = i;

            // Добавление эффекта нажатия
            slot.addEventListener('mousedown', function() {
                slot.style.transform = 'scale(0.95)';
            });

            slot.addEventListener('mouseup', function() {
                slot.style.transform = 'scale(1)';
            });

            slot.addEventListener('click', function() {
                const color = slot.style.backgroundColor;
                if (color && color !== 'rgb(255, 255, 255)') {
                    document.querySelector('#fr-color-hex-layer-text-1').value = rgbToHex(color);
                }
            });

            slot.addEventListener('dblclick', function() {
                const color = slot.style.backgroundColor;
                if (color && color !== 'rgb(255, 255, 255)') {
                    removeColorFromFavorites(i);
                    updateFavoritesSlots();
                }
            });

            slotsContainer.appendChild(slot);
        }

        hexInputContainer.appendChild(slotsContainer);
    }

    // Обновление слотов для избранных цветов
    function updateFavoritesSlots() {
        const favoriteColors = GM_getValue('favoriteColors', []);
        const slots = document.querySelectorAll('.fr-favorites-slot');

        slots.forEach((slot, index) => {
            if (favoriteColors[index]) {
                slot.style.backgroundColor = favoriteColors[index];
            } else {
                slot.style.backgroundColor = '#fff';
            }
        });
    }

    // Добавление нового цвета в избранное
    function addColorToFavorites(color) {
        let favoriteColors = GM_getValue('favoriteColors', []);
        if (favoriteColors.length < 25 && !favoriteColors.includes(color)) {
            favoriteColors.push(color);
            GM_setValue('favoriteColors', favoriteColors);
        }
    }

    // Удаление цвета из избранного
    function removeColorFromFavorites(index) {
        let favoriteColors = GM_getValue('favoriteColors', []);
        favoriteColors.splice(index, 1);
        GM_setValue('favoriteColors', favoriteColors);
    }

    // Конвертация RGB в HEX
    function rgbToHex(rgb) {
        const rgbValues = rgb.match(/\d+/g);
        return `#${((1 << 24) + (parseInt(rgbValues[0]) << 16) + (parseInt(rgbValues[1]) << 8) + parseInt(rgbValues[2])).toString(16).slice(1).toUpperCase()}`;
    }

    // Отображение слотов и кнопки при открытии редактора
    document.addEventListener('DOMNodeInserted', function(event) {
        if (event.target.classList && event.target.classList.contains('fr-popup')) {
            createAddToFavoritesButton();
            createFavoritesSlots();
            updateFavoritesSlots();
        }
    });

})();