MediaViki:Gadget-TripleTabView.js

Qeyd: Dəyişiklikləri yayımladıqdan sonra etdiyiniz dəyişikliklərin görünməsi üçün brauzerinizin keşinin təmizlənməsi lazım ola bilər.
Firefox / Safari: Reload düyməsinə basılı tutarkən Shift düyməsinə basın, və ya Ctrl+F5 və ya Ctrl+R (Mac üçün ⌘-R )
Google Chrome: Ctrl-Shift-R (Mac üçün ⌘-Shift-R)
Edge: Ctrl düyməsini basılı tutarkən Refresh düyməsinə basın, və ya sadəcə Ctrl+F5.
// تنظیم فونت و اندازه پیش‌فرض
function setDefaultFont() {
    const textElements = document.querySelectorAll(".resizable-text"); // متن‌های هدف با کلاس resizable-text
    textElements.forEach(function (textElement) {
        const fontFamily = window.getComputedStyle(textElement).fontFamily;

        // اعمال اندازه پیش‌فرض برای AdobeArabic-Regular
        if (fontFamily.includes("AdobeArabic-Regular")) {
            textElement.style.fontSize = "20px"; // تنظیم اندازه برای AdobeArabic-Regular
        } else {
            textElement.style.fontSize = "14px"; // تنظیم اندازه پیش‌فرض برای سایر متن‌ها
        }
    });

    // تنظیم فونت برای آی‌دی #text
    const textElement = document.querySelector("#text");
    if (textElement) {
        textElement.style.fontFamily = "'AdobeArabic-Regular', sans-serif";
        textElement.style.fontSize = "20px";
    }
}

// تغییر حالت دید در شب
function toggleDarkMode() {
    const body = document.body;
    const darkModeButton = document.getElementById("toggle-dark-mode");

    // تغییر کلاس حالت شب
    body.classList.toggle("dark-mode");

    // تغییر متن دکمه بر اساس حالت
    if (body.classList.contains("dark-mode")) {
        darkModeButton.textContent = "🌙"; // نماد ماه برای حالت شب
        localStorage.setItem("dark-mode", "enabled"); // ذخیره وضعیت در حالت شب
    } else {
        darkModeButton.textContent = "🌞"; // نماد خورشید برای حالت روز
        localStorage.setItem("dark-mode", "disabled"); // ذخیره وضعیت در حالت روز
    }
}

// مقداردهی اولیه حالت دید در شب
function initializeDarkMode() {
    const darkModeButton = document.getElementById("toggle-dark-mode");

    // بررسی وضعیت ذخیره‌شده در localStorage
    if (localStorage.getItem("dark-mode") === "enabled") {
        document.body.classList.add("dark-mode"); // اعمال کلاس dark-mode اگر فعال باشد
        darkModeButton.textContent = "🌙"; // تنظیم نماد دکمه به ماه
    } else {
        document.body.classList.remove("dark-mode"); // حذف کلاس dark-mode اگر غیرفعال باشد
        darkModeButton.textContent = "🌞"; // تنظیم نماد دکمه به خورشید
    }

    // اضافه کردن رویداد کلیک به دکمه
    darkModeButton.addEventListener("click", toggleDarkMode);
}

// مقداردهی اولیه کنترل‌های تب و فونت
function initializeTabsAndFontControls() {
    var TripleTabView = document.querySelectorAll(".tab"); // انتخاب همه تب‌ها
    var contents = document.querySelectorAll(".tab-content"); // انتخاب محتوای همه تب‌ها

    // بررسی اینکه آیا تب‌ها و محتواها وجود دارند
    if (TripleTabView.length === 0 || contents.length === 0) {
        console.warn("No tabs or tab contents found.");
        return;
    }

    // تنظیم رویداد کلیک برای هر تب
    TripleTabView.forEach(function (tab) {
        tab.addEventListener("click", function () {
            TripleTabView.forEach(function (t) {
                t.classList.remove("active"); // حذف کلاس active از همه تب‌ها
            });
            contents.forEach(function (content) {
                content.classList.remove("active"); // حذف کلاس active از همه محتواها
            });

            tab.classList.add("active"); // اضافه کردن کلاس active به تب فعلی
            var targetContent = document.getElementById(tab.getAttribute("data-tab")); // پیدا کردن محتوای هدف
            if (targetContent) {
                targetContent.classList.add("active"); // اضافه کردن کلاس active به محتوای هدف
            }
        });
    });

    // تنظیم تب و محتوای اولیه به عنوان active
    TripleTabView[0].classList.add("active");
    contents[0].classList.add("active");

    // انتخاب دکمه‌های تنظیم فونت
    var increaseButton = document.getElementById("increase-font");
    var decreaseButton = document.getElementById("decrease-font");
    var resetButton = document.getElementById("reset-font");

    // بررسی وجود دکمه‌ها
    if (!increaseButton || !decreaseButton || !resetButton) {
        console.error("Font control buttons not found!");
        return;
    }

    var MIN_FONT_SIZE = 10; // حداقل اندازه فونت
    var MAX_FONT_SIZE = 23; // حداکثر اندازه فونت

    // تنظیم اندازه پیش‌فرض فونت
    setDefaultFont();

    // رویداد کلیک برای افزایش اندازه فونت
    increaseButton.addEventListener("click", function () {
        adjustFontSize(0.5, MAX_FONT_SIZE); // دلتا به 0.5 پیکسل
    });

    // رویداد کلیک برای کاهش اندازه فونت
    decreaseButton.addEventListener("click", function () {
        adjustFontSize(-0.5, MIN_FONT_SIZE); // دلتا به -0.5 پیکسل
    });

    // رویداد کلیک برای بازنشانی اندازه فونت
    resetButton.addEventListener("click", function () {
        setDefaultFont(); // بازنشانی به حالت اولیه
    });
}

// تنظیم اندازه فونت
function adjustFontSize(delta, limit) {
    var activeContent = document.querySelector('.tab-content.active'); // پیدا کردن محتوای فعال
    if (activeContent) {
        var textElements = activeContent.querySelectorAll(".resizable-text"); // انتخاب متن‌های قابل تغییر اندازه
        textElements.forEach(function (textElement) {
            var currentSize = parseFloat(window.getComputedStyle(textElement).fontSize); // اندازه فعلی فونت
            var newSize = currentSize + delta; // محاسبه اندازه جدید
            if ((delta > 0 && newSize <= limit) || (delta < 0 && newSize >= limit)) {
                textElement.style.fontSize = newSize + "px"; // اعمال اندازه جدید
            }
        });
    }
}

// مشاهده تغییرات در DOM و مقداردهی اولیه
var observer = new MutationObserver(function () {
    if (
        document.getElementById("increase-font") &&
        document.getElementById("decrease-font") &&
        document.getElementById("reset-font") &&
        document.getElementById("toggle-dark-mode")
    ) {
        observer.disconnect(); // متوقف کردن مشاهده تغییرات
        initializeTabsAndFontControls(); // مقداردهی اولیه تب‌ها و کنترل‌های فونت
        initializeDarkMode(); // مقداردهی اولیه حالت شب
    }
});

observer.observe(document.body, { childList: true, subtree: true }); // مشاهده تغییرات DOM

// مقداردهی اولیه در صورت آماده بودن صفحه
if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", function () {
        setDefaultFont();
        initializeTabsAndFontControls();
        initializeDarkMode();
    });
} else {
    setDefaultFont();
    initializeTabsAndFontControls();
    initializeDarkMode();
}