[cXF] Widget Tabs [Paid] 1.1.4

[BassMan]

You can add any widget you want to the tab. Even more widgets to the same tab.

 

[findozor]

hello ive added swipe functionality to your addon and it seems working fine

<script>
document.addEventListener('DOMContentLoaded', function () {
    const tabContainer = document.querySelector('.wt.block-container');
    if (!tabContainer) return;

    let touchStartX = 0;
    let touchEndX = 0;
    const threshold = 50; // Минимальная длина свайпа

    tabContainer.addEventListener('touchstart', function (e) {
        touchStartX = e.changedTouches[0].screenX;
    });

    tabContainer.addEventListener('touchend', function (e) {
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
    });

    function handleSwipe() {
        const activeTab = tabContainer.querySelector('.tabs-tab.is-active');
        if (!activeTab) return;

        const tabs = [...tabContainer.querySelectorAll('.tabs-tab')];
        const panes = [...tabContainer.querySelectorAll('.tabPanes > li')];
        const currentIndex = tabs.indexOf(activeTab);

        let targetIndex = null;
        if (touchStartX - touchEndX > threshold) {
            // Свайп влево — следующая вкладка
            targetIndex = currentIndex + 1 < tabs.length ? currentIndex + 1 : 0;
        } else if (touchEndX - touchStartX > threshold) {
            // Свайп вправо — предыдущая вкладка
            targetIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : tabs.length - 1;
        }

        if (targetIndex !== null && targetIndex !== currentIndex) {
            tabs.forEach(tab => tab.classList.remove('is-active'));
            panes.forEach(pane => pane.classList.remove('is-active'));

            const targetTab = tabs[targetIndex];
            const targetPane = panes[targetIndex];

            targetTab.classList.add('is-active');
            targetPane.classList.add('is-active');
            targetTab.click();

            scrollTabIntoView(targetTab);
        }
    }

    function scrollTabIntoView(tabElement) {
        const scroller = tabContainer.querySelector('.hScroller-scroll');
        if (!scroller) return;

        const tabRect = tabElement.getBoundingClientRect();
        const scrollRect = scroller.getBoundingClientRect();
        const offset = 30; // Отступ слева и справа

        // Проверяем видимость с учётом отступов
        if (tabRect.left < scrollRect.left + offset) {
            // Прокрутка влево
            scroller.scrollBy({
                left: tabRect.left - scrollRect.left - offset,
                behavior: 'smooth'
            });
        } else if (tabRect.right > scrollRect.right - offset) {
            // Прокрутка вправо
            scroller.scrollBy({
                left: tabRect.right - scrollRect.right + offset,
                behavior: 'smooth'
            });
        }
    }
});
</script>

demo is here https://findozor.net/forum/