`;
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);
}
});
}
-->
