FFZ Panel Resize 1.2.25

Расширение и перемещение панели эмодзи FFZ

// ==UserScript==
// @name         FFZ   Panel Resize 1.2.25
// @namespace    http://tampermonkey.net/
// @version      1.2.25
// @description  Расширение и перемещение панели эмодзи FFZ
// @author       gullampis810
// @match        https://www.twitch.tv/*
// @license      MIT
// @icon         https://png.pngtree.com/png-vector/20220703/ourmid/pngtree-send-dark-mode-glyph-icon-png-image_5561369.png
// @grant        GM_addStyle
// @updateURL
// @downloadURL
// ==/UserScript==



(function() {
    'use strict';
  //  кнопка Chat Paused Due to Scroll   //
        const observer = new MutationObserver(() => {
    const buttonContainer = document.querySelector('.tw-absolute.tw-border-radius-medium.tw-bottom-0.tw-c-background-overlay.tw-c-text-overlay.tw-mg-b-1');
    if (buttonContainer) {
        buttonContainer.style.height = '34px';
        buttonContainer.style.minHeight = '34px';
        buttonContainer.style.maxHeight = '34px';
        console.log('Высота контейнера кнопки установлена на 34px');
    }
});

observer.observe(document.body, { childList: true, subtree: true });



        // Добавляем стили для изменения размеров контейнера эмодзи
    GM_addStyle(`

     .emote-picker__controls-container.tw-relative {
         bottom: 3px !important;
     }

        .emote-picker {
               width: 107rem !important; /* Увеличенная ширина */
              height: 100rem !important; /* Увеличенная высота */
              left: 24px !important;;               /* Сдвиг влево */
              position: relative !important;

        }

         .ffz--emote-picker {
          position: relative !important;
         height: 785px !important;
         width: 1097px !important;
         left: -243px !important;
        }


         .ffz--emote-picker.ffz--emote-picker__tall .emote-picker__nav-content-overflow, .ffz--emote-picker.ffz--emote-picker__tall .emote-picker__tab-content {
         height: unset !important;
         max-height: 73rem !important;
}

         .tw-absolute.ffz-attached.ffz-attached--right.ffz-attached--up {
           width: 857px !important;
    right: 368px !important;
    bottom: 533px !important;
    }


/* fix ballon when clicked ffz emote picke in chat input */
.ffz-balloon.ffz-balloon--auto.tw-inline-block.tw-border-radius-large.tw-c-background-base.tw-c-text-inherit.tw-elevation-2.ffz--emote-picker.ffz--emote-picker__tall {
    top: 290px !important;
}

       .ffz-attached--up {
           bottom: 510% !important;
       }


       .tw-border-b.tw-border-l.tw-border-r.tw-border-t.tw-border-radius-medium.tw-c-background-base.tw-elevation-1 {
           width: 63px; !important;
           height: 216px; !important;
       }

        .tw-absolute {
            position: absolute !important;
            height: 570px !important;
        }

.tw-border-b.tw-border-l.tw-border-r.tw-border-t.tw-border-radius-medium.tw-c-background-base.tw-elevation-1 {
    width: 60px !important;
    height: 200px !important;
    bottom: 6px !important;
    position: absolute !important;
    right: 5px !important;
}      /* emoji standard color choice mini panel */


    `);

    console.log("[FFZ Emote Panel] Контейнер .emote-picker изменен: шире, выше, сдвинут влево.");

})();

//  FFZ Dialog Unconstrained Dragging свободное перемещение Панели ffz Settings main-menu vue js css //
(function() {
    'use strict';

    console.log('[FFZ Dialog Unconstrained Dragging v1.2] Script started');

    // Функция для инициализации перетаскивания
    function initDragging(dialog) {
        if (!dialog) {
            console.log('[FFZ Dialog Unconstrained Dragging] Dialog not found');
            return;
        }

        const header = dialog.querySelector('header');
        if (!header) {
            console.log('[FFZ Dialog Unconstrained Dragging] Header not found');
            return;
        }

        // Проверяем, не инициализировано ли уже
        if (dialog.dataset.draggingInitialized) {
            console.log('[FFZ Dialog Unconstrained Dragging] Dragging already initialized, skipping');
            return;
        }
        dialog.dataset.draggingInitialized = 'true';

        console.log('[FFZ Dialog Unconstrained Dragging] Initializing dragging for dialog');

        // Переменные для перетаскивания
        let isDragging = false;
        let startX, startY;

        // Обработчик начала перетаскивания
        header.addEventListener('mousedown', (e) => {
            // Игнорируем клики по кнопкам
            if (e.target.closest('button')) {
                console.log('[FFZ Dialog Unconstrained Dragging] Ignoring button click');
                return;
            }

            isDragging = true;
            startX = e.clientX - (parseFloat(dialog.style.left) || dialog.offsetLeft);
            startY = e.clientY - (parseFloat(dialog.style.top) || dialog.offsetTop);

            // Повышаем z-index
            dialog.style.zIndex = Math.max(parseInt(dialog.style.zIndex) || 9000, 9000) + 1;

            console.log('[FFZ Dialog Unconstrained Dragging] Drag started at', e.clientX, e.clientY);
            e.preventDefault();
            e.stopPropagation(); // Останавливаем оригинальные обработчики
        }, { capture: true, passive: false });

        // Обработчик движения мыши
        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;

            requestAnimationFrame(() => {
                const newLeft = e.clientX - startX;
                const newTop = e.clientY - startY;

                dialog.style.left = `${newLeft}px`;
                dialog.style.top = `${newTop}px`;

                console.log('[FFZ Dialog Unconstrained Dragging] Moved to', newLeft, newTop);
            });
        }, { capture: true, passive: true });

        // Обработчик окончания перетаскивания
        document.addEventListener('mouseup', () => {
            if (isDragging) {
                console.log('[FFZ Dialog Unconstrained Dragging] Drag ended');
                isDragging = false;
            }
        }, { capture: true, passive: true });

        // Поддержка сенсорных устройств
        header.addEventListener('touchstart', (e) => {
            if (e.target.closest('button')) {
                console.log('[FFZ Dialog Unconstrained Dragging] Ignoring button touch');
                return;
            }

            isDragging = true;
            const touch = e.touches[0];
            startX = touch.clientX - (parseFloat(dialog.style.left) || dialog.offsetLeft);
            startY = touch.clientY - (parseFloat(dialog.style.top) || dialog.offsetTop);

            dialog.style.zIndex = Math.max(parseInt(dialog.style.zIndex) || 9000, 9000) + 1;

            console.log('[FFZ Dialog Unconstrained Dragging] Touch drag started at', touch.clientX, touch.clientY);
            e.preventDefault();
            e.stopPropagation();
        }, { capture: true, passive: false });

        document.addEventListener('touchmove', (e) => {
            if (!isDragging) return;

            const touch = e.touches[0];
            requestAnimationFrame(() => {
                const newLeft = touch.clientX - startX;
                const newTop = touch.clientY - startY;

                dialog.style.left = `${newLeft}px`;
                dialog.style.top = `${newTop}px`;

                console.log('[FFZ Dialog Unconstrained Dragging] Touch moved to', newLeft, newTop);
            });
        }, { capture: true, passive: true });

        document.addEventListener('touchend', () => {
            if (isDragging) {
                console.log('[FFZ Dialog Unconstrained Dragging] Touch drag ended');
                isDragging = false;
            }
        }, { capture: true, passive: true });

        // Добавляем кнопку для сброса позиции
        const resetButton = document.createElement('button');
        resetButton.textContent = 'Reset Position';
        resetButton.style.position = 'absolute';
        resetButton.style.top = '625px';
        resetButton.style.right = ' 5px';
        resetButton.style.zIndex = '10000';
        resetButton.style.padding = '5px';
        resetButton.style.background = '#34767c';
        resetButton.style.borderRadius = '12px';
        resetButton.style.border = '1px solid #ffffff';
        resetButton.addEventListener('click', () => {
            dialog.style.left = '25%';
            dialog.style.top = '25%';
            console.log('[FFZ Dialog Unconstrained Dragging] Position reset to 25%, 25%');
        });
        dialog.appendChild(resetButton);

        console.log('[FFZ Dialog Unconstrained Dragging] Dragging initialized successfully');
    }

    // Наблюдатель за появлением диалога
    const observer = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            if (mutation.addedNodes.length) {
                const dialog = document.querySelector('.ffz-dialog.ffz-main-menu:not([data-dragging-initialized])');
                if (dialog) {
                    console.log('[FFZ Dialog Unconstrained Dragging] Dialog detected via observer');
                    initDragging(dialog);
                }
            }
        }
    });

    // Запускаем наблюдатель
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // Проверяем, если диалог уже существует
    const initialDialog = document.querySelector('.ffz-dialog.ffz-main-menu:not([data-dragging-initialized])');
    if (initialDialog) {
        console.log('[FFZ Dialog Unconstrained Dragging] Initial dialog found');
        initDragging(initialDialog);
    }

    console.log('[FFZ Dialog Unconstrained Dragging] Setup complete');
})();