مدیاویکی:Gadget-TripleTabView

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

   // دریافت تمام عناصر با کلاس "resizable-text" و تنظیم اندازه فونت پیش‌فرض
   var textElements = document.querySelectorAll(".resizable-text");
   for (var i = 0; i < textElements.length; i++) {
       var textElement = textElements[i];
       // بررسی فونت خانواده برای تعیین اندازه مناسب
       var fontFamily = window.getComputedStyle(textElement).fontFamily;

       if (fontFamily.indexOf("AdobeArabic-Regular") !== -1) {
           textElement.style.fontSize = "20px";
       } else {
           textElement.style.fontSize = "14px";
       }
   }

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

}

// تغییر حالت دید در شب function toggleDarkMode() {

   // دریافت عنصر body و دکمه تغییر حالت
   var body = document.body;
   var darkModeButton = document.getElementById("toggle-dark-mode");

   // بررسی وجود دکمه تغییر حالت
   if (!darkModeButton) {
       return;
   }

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

   // بروزرسانی متن دکمه و ذخیره‌سازی وضعیت در localStorage
   if (body.classList.contains("dark-mode")) {
       darkModeButton.textContent = "\uD83C\uDF19"; // نمایش آیکون ماه
       localStorage.setItem("dark-mode", "enabled");
   } else {
       darkModeButton.textContent = "\uD83C\uDF1E"; // نمایش آیکون خورشید
       localStorage.setItem("dark-mode", "disabled");
   }

}

// مقداردهی اولیه حالت دید در شب function initializeDarkMode() {

   // دریافت دکمه تغییر حالت شب
   var darkModeButton = document.getElementById("toggle-dark-mode");

   // بررسی وجود دکمه
   if (!darkModeButton) {
       return;
   }

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

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

}

// مقداردهی اولیه کنترل‌های تب و فونت function initializeTabsAndFontControls() {

   // دریافت تمام تب‌ها و محتوای مرتبط آن‌ها
   var TripleTabView = document.querySelectorAll(".tab");
   var contents = document.querySelectorAll(".tab-content");

   // بررسی وجود تب‌ها و محتواها
   if (TripleTabView.length === 0 || contents.length === 0) {
       return;
   }

   // افزودن رویداد کلیک به تب‌ها
   for (var i = 0; i < TripleTabView.length; i++) {
       TripleTabView[i].addEventListener("click", (function (index) {
           return function () {
               // غیرفعال کردن تب‌ها و محتوای فعلی
               for (var j = 0; j < TripleTabView.length; j++) {
                   TripleTabView[j].classList.remove("active");
               }
               for (var k = 0; k < contents.length; k++) {
                   contents[k].classList.remove("active");
               }

               // فعال کردن تب و محتوای مرتبط با آن
               TripleTabView[index].classList.add("active");
               var targetContent = document.getElementById(TripleTabView[index].getAttribute("data-tab"));
               if (targetContent) {
                   targetContent.classList.add("active");
               }
           };
       })(i));
   }

   // فعال کردن اولین تب و محتوا به صورت پیش‌فرض
   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");

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

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

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

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

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

}

// تنظیم اندازه فونت function adjustFontSize(delta, limit) {

   // دریافت محتوای فعال در تب‌ها
   var activeContent = document.querySelector('.tab-content.active');
   if (activeContent) {
       // دریافت تمام عناصر با کلاس "resizable-text" در محتوای فعال
       var textElements = activeContent.querySelectorAll(".resizable-text");
       for (var i = 0; i < textElements.length; i++) {
           var textElement = textElements[i];
           // محاسبه اندازه جدید فونت با توجه به تغییر دلتا و محدودیت‌ها
           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();
   }

});

// مشاهده تغییرات در DOM برای اطمینان از در دسترس بودن عناصر مورد نیاز observer.observe(document.body, { childList: true, subtree: true });

// مقداردهی اولیه در صورت آماده بودن DOM if (document.readyState === "loading") {

   document.addEventListener("DOMContentLoaded", function () {
       setDefaultFont();
       initializeTabsAndFontControls();
       initializeDarkMode();
   });

} else {

   setDefaultFont();
   initializeTabsAndFontControls();
   initializeDarkMode();

}