89 lines
2.8 KiB
JavaScript
89 lines
2.8 KiB
JavaScript
////views/productPages/productMain/productMain.js
|
|
|
|
// Product page specific JavaScript
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Tab functionality for product categories
|
|
const categoryTabs = document.querySelectorAll(".category-tab");
|
|
const categoryContents = document.querySelectorAll(".category-content");
|
|
|
|
categoryTabs.forEach((tab) => {
|
|
tab.addEventListener("click", function () {
|
|
// Remove active class from all tabs and contents
|
|
categoryTabs.forEach((t) => t.classList.remove("active"));
|
|
categoryContents.forEach((c) => c.classList.remove("active"));
|
|
|
|
// Add active class to clicked tab
|
|
this.classList.add("active");
|
|
|
|
// Show corresponding content
|
|
const categoryId = this.getAttribute("data-category");
|
|
document.getElementById(categoryId).classList.add("active");
|
|
|
|
// Update URL hash without jumping
|
|
history.pushState(null, null, `#${categoryId}`);
|
|
});
|
|
});
|
|
|
|
// Handle hash navigation from footer or direct links
|
|
function activateTabByHash() {
|
|
const hash = window.location.hash.substring(1); // Remove the #
|
|
if (hash) {
|
|
// Find the tab with matching data-category
|
|
const tab = document.querySelector(
|
|
`.category-tab[data-category="${hash}"]`,
|
|
);
|
|
if (tab) {
|
|
// Remove active class from all tabs and contents
|
|
categoryTabs.forEach((t) => t.classList.remove("active"));
|
|
categoryContents.forEach((c) => c.classList.remove("active"));
|
|
|
|
// Add active class to the appropriate tab and content
|
|
tab.classList.add("active");
|
|
document.getElementById(hash).classList.add("active");
|
|
}
|
|
}
|
|
}
|
|
|
|
// Check hash on page load
|
|
activateTabByHash();
|
|
|
|
// Listen for hash changes
|
|
window.addEventListener("hashchange", activateTabByHash);
|
|
|
|
// Set products nav item as active
|
|
if (document.getElementById("products")) {
|
|
document.getElementById("products").classList.add("active");
|
|
}
|
|
});
|
|
|
|
// SIDEBAR
|
|
document.addEventListener("click", function (e) {
|
|
const sidebar = document.getElementById("sidebar");
|
|
const overlay = document.getElementById("sidebarOverlay");
|
|
const floatingMenuBtn = document.getElementById("floatingMenuBtn");
|
|
|
|
if (!sidebar) return;
|
|
|
|
const isOpenTrigger =
|
|
e.target.closest("#floatingMenuBtn") ||
|
|
e.target.closest(".mobile-menu-btn");
|
|
const isCloseTrigger =
|
|
e.target.closest(".close-sidebar") ||
|
|
e.target.closest("#sidebarOverlay") ||
|
|
e.target.closest(".sidebar-nav .nav-link");
|
|
|
|
if (isOpenTrigger) {
|
|
sidebar.classList.add("open");
|
|
overlay.style.display = "block";
|
|
document.body.style.overflow = "hidden";
|
|
floatingMenuBtn.style.display = "none";
|
|
}
|
|
|
|
if (isCloseTrigger) {
|
|
sidebar.classList.remove("open");
|
|
overlay.style.display = "none";
|
|
document.body.style.overflow = "";
|
|
floatingMenuBtn.style.display = "flex";
|
|
}
|
|
});
|