`; const initializeAccordion = () => { const accordionHeaders = document.querySelectorAll(".accordion__header"); accordionHeaders.forEach((item) => { item.addEventListener("mouseup", () => { item.classList.toggle("open"); }); }); }; if (newSingleBlogPost != null || newSingleBlogPost != undefined) { // add table of content after first child in base content const firstChild = baseContent.firstElementChild.firstElementChild.firstElementChild; // Convert the table of content HTML string to a DOM element const tempDiv = document.createElement("div"); tempDiv.innerHTML = tableOfContentHTML; const tableOfContentElement = tempDiv.firstElementChild; if (firstChild) { baseContent.firstElementChild.firstElementChild.insertBefore(tableOfContentElement, firstChild.nextElementSibling); } // Set accordion click after table of content add to DOM initializeAccordion(); // Select all h2 and h3 elements const headings = document.querySelectorAll(".base_content h2, .base_content h3"); // Add data-id attribute to each heading headings.forEach((heading) => { const text = heading.textContent.trim(); const id = text .replace(/\s+/g, "_") .replace(/[^\w\u0600-\u06FF_]/g, "") .toLowerCase(); heading.setAttribute("data-id", id); }); // Create dynamic table of contents const tocWrapper = document.querySelector(".tocWrapper"); tocWrapper.innerHTML = ""; // Clear any existing content let currentH2 = null; // Variable to store the current h2 being processed headings.forEach((heading,index) => { if (heading.tagName === "H2") { // Create a link for h2 headings const link = document.createElement("a"); link.href = `#${heading.getAttribute("data-id")}`; link.textContent = heading.textContent; link.classList.add("h2"); link.classList.add("scroll-tag"); // Create a list item for h2 const listItem = document.createElement("div"); listItem.classList.add("item"); listItem.appendChild(link); // Append the list item for the h2 tocWrapper.appendChild(listItem); // Set the current h2 to this heading currentH2 = listItem; } else if (heading.tagName === "H3" && currentH2) { // Create a link for h3 headings as a subitem of the current h2 const link = document.createElement("a"); link.href = `#${heading.getAttribute("data-id")}`; link.textContent = heading.textContent; link.classList.add("h3"); link.classList.add("scroll-tag"); // Create a subitem for h3 and append it to the current h2 item const subItem = document.createElement("div"); subItem.classList.add("sub-item"); subItem.appendChild(link); // Append the subitem to the current h2's list item currentH2.appendChild(subItem); } }); // Scroll to the section when a TOC item is clicked tocWrapper.addEventListener("click", (e) => { e.preventDefault() if (e.target.tagName === "A") { const targetId = e.target.getAttribute("href").substring(1); const targetElement = document.querySelector(`[data-id="${targetId}"]`); if (targetElement) { // Scroll to the element, but adjust for the header height const targetOffset = targetElement.getBoundingClientRect().top + window.scrollY - 84; window.scrollTo({ top: targetOffset, behavior: "smooth" }); e.preventDefault(); } } }); const tableOfcontent = document.querySelector('.table_of_contents'); const tagleOfContentTitle = tableOfcontent.querySelector('.title span') const translateTableOfContent = () => { const language = getLanguageKey(); if (language === "fa") { tagleOfContentTitle.textContent = "فهرست مطالب"; } else if (language === "ar") { tagleOfContentTitle.textContent = "جدول المحتويات"; } else { tagleOfContentTitle.textContent = "Table of Content"; } }; // فراخوانی تابع ترجمه translateTableOfContent(); // Copy logic // Localized messages for different languages const messages = { en: { initial: "Copy link", copied: "Copied!", }, fa: { initial: "کپی لینک", copied: "کپی شد!", }, ar: { initial: "نسخ الرابط", copied: "تم النسخ!", }, }; // Function to detect language and match messages function getLanguageKey () { const lang = document.documentElement.lang.toLowerCase(); if (lang.includes("fa")) return "fa"; if (lang.includes("ar")) return "ar"; return "en"; }; // Function to update button text based on language const updateButtonText = (button, state = "initial") => { const langKey = getLanguageKey(); button.textContent = messages[langKey]?.[state] || messages.en[state]; }; // Function to change button background color const updateButtonBackgroundColor = (button, color) => { button.style.backgroundColor = color; }; // Initialize button text and background color on page load window.addEventListener("load", () => { const copyButton = document.querySelector(".copy_btn"); updateButtonText(copyButton); updateButtonBackgroundColor(copyButton, "#f9c43e"); // Initial color }); // Add click event listener to copy URL and update button text and color document.querySelector(".copy_btn").addEventListener("click", function () { const copyButton = this; const currentUrl = window.location.href; navigator.clipboard .writeText(currentUrl) .then(() => { updateButtonText(copyButton, "copied"); updateButtonBackgroundColor(copyButton, "#cacaca"); // Change color on click setTimeout(() => { updateButtonBackgroundColor(copyButton, "#f9c43e"); // Reset color after 3 seconds updateButtonText(copyButton); // Reset text after 3 seconds }, 3000); // 3-second timeout }) .catch((err) => { console.error("Failed to copy:", err); }); }); // rate popup click function /** * Initialize popup functionality for rate popups. * @param {HTMLElement} trigger - Element that triggers the popup. * @param {HTMLElement} popup - Popup element to display. * @param {HTMLElement} overlay - The overlay element. * @param {HTMLElement} closeButton - Button to close the popup. */ function initRatePopup(trigger, popup, overlay, closeButton) { // Show the popup when the trigger is clicked if (trigger) { trigger.addEventListener("click", () => { setTimeout(()=>{ openModal(popup, overlay); },1000) }); } // Add event listener to the overlay for closing the modal overlay.addEventListener("click", () => closeModal(popup, overlay)); // Hide the popup when the close button is clicked if (closeButton) { closeButton.addEventListener("click", () => { closeModal(popup, overlay); }); } } // Initialize the rate popup const rateStarsWrapper = document.querySelectorAll(".rate_stars_wrapper"); const ratePopup = document.querySelector(".rate_popup"); const closeRatePopupBtn = document.querySelector(".no_thanks"); rateStarsWrapper.forEach((element)=>{ initRatePopup(element, ratePopup, overlay, closeRatePopupBtn); }) window.addEventListener("load", () => { // Bonus popup functions const popup = document.querySelector(".bonus_popup"); if (!popup) return; // Exit if popup doesn't exist let isPopupShown = false; let hasScrolled = false; // Listener for scroll event const handleScroll = () => { if (isPopupShown || hasScrolled) return; // Prevent multiple triggers hasScrolled = true; setTimeout(() => { popup.classList.add("show"); isPopupShown = true; // Remove the event listener after showing the popup window.removeEventListener("scroll", handleScroll); }, 0); }; window.addEventListener("scroll", handleScroll); // Close popup functionality const closeIcon = popup.querySelector(".close_icon"); if (closeIcon) { closeIcon.addEventListener("click", () => { popup.classList.remove("show"); popup.classList.add("hide"); // Remove the hide class after animation completes popup.addEventListener( "transitionend", () => { popup.classList.remove("hide"); }, { once: true } ); }); } // Suggested Article Popup Logic const suggestedPopup = document.querySelector(".suggested_article_popup"); if (suggestedPopup) { const timeout = parseInt(suggestedPopup.getAttribute("data-timeout"), 10) || 0; setTimeout(() => { suggestedPopup.classList.add("show"); const closeSuggestedIcon = suggestedPopup.querySelector(".close_btn_wrapper"); if (closeSuggestedIcon) { closeSuggestedIcon.addEventListener("click", () => { suggestedPopup.classList.remove("show"); suggestedPopup.classList.add("hide"); suggestedPopup.addEventListener( "transitionend", () => { suggestedPopup.classList.remove("hide"); }, { once: true } ); }); } }, timeout); } }); } -->