This commit is contained in:
Mark Poljanšek committed
1 parent
b0279a1ec7
commit
651915e0f6
48 files changed
+614
-6121
No files matched your search
+1
-561
@@ -1,561 +1 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// --- Mobile Menu Toggle ---
|
||||
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
let closeMobileMenu = () => {};
|
||||
let resetMobileSubmenus = () => {};
|
||||
|
||||
const normalizePath = (value) => {
|
||||
if (!value) {
|
||||
return '/';
|
||||
}
|
||||
let clean = value.split('?')[0].split('#')[0];
|
||||
clean = clean.replace(/index\.html$/i, '');
|
||||
clean = clean.replace(/\/+$/, '');
|
||||
if (clean === '') {
|
||||
clean = '/';
|
||||
}
|
||||
return clean;
|
||||
};
|
||||
|
||||
const applyActiveNavState = () => {
|
||||
const navRoot = document.querySelector('.nav-links');
|
||||
if (!navRoot) {
|
||||
return;
|
||||
}
|
||||
|
||||
navRoot.querySelectorAll('a.active, .dropbtn.active').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
const currentPath = normalizePath(window.location.pathname);
|
||||
const navAnchors = navRoot.querySelectorAll('a[href]');
|
||||
let matchedLink = null;
|
||||
|
||||
navAnchors.forEach(anchor => {
|
||||
const href = anchor.getAttribute('href');
|
||||
if (!href || href.startsWith('http') || href.startsWith('mailto:') || href.startsWith('tel:') || href.startsWith('#')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const linkPath = normalizePath(href);
|
||||
if (linkPath === currentPath) {
|
||||
matchedLink = anchor;
|
||||
}
|
||||
});
|
||||
|
||||
if (!matchedLink) {
|
||||
return;
|
||||
}
|
||||
|
||||
matchedLink.classList.add('active');
|
||||
|
||||
const highlightDropdownParents = (element) => {
|
||||
let parentContent = element.closest('.dropdown-submenu-content, .dropdown-content');
|
||||
while (parentContent) {
|
||||
const trigger = parentContent.previousElementSibling;
|
||||
if (trigger && (trigger.tagName === 'A' || trigger.classList.contains('dropbtn'))) {
|
||||
trigger.classList.add('active');
|
||||
}
|
||||
parentContent = parentContent.parentElement ? parentContent.parentElement.closest('.dropdown-submenu-content, .dropdown-content') : null;
|
||||
}
|
||||
};
|
||||
|
||||
highlightDropdownParents(matchedLink);
|
||||
|
||||
const topLevelDropdown = matchedLink.closest('.dropdown');
|
||||
if (topLevelDropdown) {
|
||||
const trigger = topLevelDropdown.querySelector('.dropbtn');
|
||||
if (trigger) {
|
||||
trigger.classList.add('active');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (mobileMenuBtn && navLinks) {
|
||||
resetMobileSubmenus = () => {
|
||||
navLinks.querySelectorAll('.dropdown-content, .dropdown-submenu-content').forEach(submenu => {
|
||||
submenu.style.display = 'none';
|
||||
});
|
||||
navLinks.querySelectorAll('.dropbtn, .dropdown-submenu > a').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
applyActiveNavState();
|
||||
};
|
||||
|
||||
closeMobileMenu = () => {
|
||||
mobileMenuBtn.classList.remove('active');
|
||||
navLinks.classList.remove('active');
|
||||
document.body.classList.remove('no-scroll');
|
||||
resetMobileSubmenus();
|
||||
};
|
||||
|
||||
mobileMenuBtn.addEventListener('click', (event) => {
|
||||
event.stopPropagation(); // Prepreči, da bi se dogodek takoj prenesel na 'document'
|
||||
const willOpen = !navLinks.classList.contains('active');
|
||||
if (willOpen) {
|
||||
mobileMenuBtn.classList.add('active');
|
||||
navLinks.classList.add('active');
|
||||
document.body.classList.add('no-scroll');
|
||||
resetMobileSubmenus();
|
||||
} else {
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Active Navigation Highlight ---
|
||||
applyActiveNavState();
|
||||
|
||||
// --- Mobile Dropdown Logic ---
|
||||
// Logika za odpiranje podmenijev na klik na mobilnih napravah
|
||||
const dropdowns = document.querySelectorAll('.nav-links .dropdown-submenu > a, .nav-links .dropdown > .dropbtn');
|
||||
|
||||
dropdowns.forEach(item => {
|
||||
item.addEventListener('click', function(event) {
|
||||
// Preveri, ali smo na mobilni napravi (ujema se z CSS @media query)
|
||||
if (window.innerWidth <= 768) {
|
||||
// Prepreči navigacijo, če je to link, saj želimo samo odpreti podmeni
|
||||
if (item.tagName === 'A') {
|
||||
event.preventDefault();
|
||||
}
|
||||
event.stopPropagation();
|
||||
|
||||
const submenu = item.nextElementSibling;
|
||||
if (!submenu) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isTopLevelTrigger = item.classList.contains('dropbtn');
|
||||
|
||||
if (isTopLevelTrigger) {
|
||||
navLinks.querySelectorAll('.dropdown-content').forEach(panel => {
|
||||
if (panel !== submenu) {
|
||||
panel.style.display = 'none';
|
||||
const trigger = panel.parentElement.querySelector('.dropbtn');
|
||||
if (trigger) {
|
||||
trigger.classList.remove('active');
|
||||
}
|
||||
panel.querySelectorAll('.dropdown-submenu-content').forEach(child => {
|
||||
child.style.display = 'none';
|
||||
const childTrigger = child.parentElement.querySelector(':scope > a');
|
||||
if (childTrigger) {
|
||||
childTrigger.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const siblingsWrapper = item.parentElement && item.parentElement.parentElement;
|
||||
if (siblingsWrapper) {
|
||||
siblingsWrapper.querySelectorAll(':scope > .dropdown-submenu > .dropdown-submenu-content').forEach(panel => {
|
||||
if (panel !== submenu) {
|
||||
panel.style.display = 'none';
|
||||
const trigger = panel.parentElement.querySelector(':scope > a');
|
||||
if (trigger) {
|
||||
trigger.classList.remove('active');
|
||||
}
|
||||
panel.querySelectorAll('.dropdown-submenu-content').forEach(child => {
|
||||
child.style.display = 'none';
|
||||
const childTrigger = child.parentElement.querySelector(':scope > a');
|
||||
if (childTrigger) {
|
||||
childTrigger.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const shouldOpen = submenu.style.display !== 'block';
|
||||
|
||||
if (shouldOpen) {
|
||||
submenu.style.display = 'block';
|
||||
item.classList.add('active');
|
||||
submenu.querySelectorAll('.dropdown-submenu-content').forEach(child => {
|
||||
child.style.display = 'none';
|
||||
const childTrigger = child.parentElement.querySelector(':scope > a');
|
||||
if (childTrigger) {
|
||||
childTrigger.classList.remove('active');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
submenu.style.display = 'none';
|
||||
item.classList.remove('active');
|
||||
submenu.querySelectorAll('.dropdown-submenu-content').forEach(child => {
|
||||
child.style.display = 'none';
|
||||
const childTrigger = child.parentElement.querySelector(':scope > a');
|
||||
if (childTrigger) {
|
||||
childTrigger.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- Close mobile menu when clicking outside ---
|
||||
document.addEventListener('click', function(event) {
|
||||
if (window.innerWidth <= 768 && navLinks && navLinks.classList.contains('active')) {
|
||||
// Preveri, ali klik ni bil znotraj navigacije ali na gumb za meni
|
||||
const isClickInsideNav = navLinks.contains(event.target);
|
||||
const isClickOnBtn = mobileMenuBtn && mobileMenuBtn.contains(event.target);
|
||||
|
||||
if (!isClickInsideNav && !isClickOnBtn) {
|
||||
closeMobileMenu();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// --- Close mobile menu when a link is clicked ---
|
||||
const navLinkItems = document.querySelectorAll('.nav-links a');
|
||||
navLinkItems.forEach(link => {
|
||||
link.addEventListener('click', (event) => {
|
||||
// Preprečimo zapiranje, če ima link podmeni in smo na mobilni napravi
|
||||
const hasSubmenu = link.parentElement.classList.contains('dropdown-submenu') || link.classList.contains('dropbtn');
|
||||
if (window.innerWidth <= 768) {
|
||||
if (hasSubmenu) {
|
||||
// To je že obdelano v zgornji logiki, tukaj samo preprečimo, da bi se meni takoj zaprl
|
||||
return;
|
||||
}
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- Accordion Logic for "Več" buttons ---
|
||||
const accordions = document.querySelectorAll('.accordion-toggle');
|
||||
accordions.forEach(accordion => {
|
||||
accordion.addEventListener('click', function() {
|
||||
const accordionItem = this.closest('.mediation-accordion-item');
|
||||
const content = accordionItem ? accordionItem.querySelector('.accordion-content') : null;
|
||||
|
||||
if (!content) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.classList.toggle('active');
|
||||
const isOpen = this.classList.contains('active');
|
||||
this.setAttribute('aria-expanded', String(isOpen));
|
||||
content.setAttribute('aria-hidden', String(!isOpen));
|
||||
|
||||
if (isOpen) {
|
||||
content.style.maxHeight = content.scrollHeight + "px";
|
||||
this.textContent = 'Manj';
|
||||
} else {
|
||||
content.style.maxHeight = null;
|
||||
this.textContent = 'Več';
|
||||
}
|
||||
});
|
||||
accordion.textContent = 'Več';
|
||||
accordion.setAttribute('aria-expanded', 'false');
|
||||
const initialContent = accordion.closest('.mediation-accordion-item')?.querySelector('.accordion-content');
|
||||
if (initialContent) {
|
||||
initialContent.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
// --- Header Scroll Effect ---
|
||||
const header = document.querySelector('.main-header');
|
||||
if (header) {
|
||||
let lastScroll = 0;
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll <= 0) {
|
||||
header.classList.remove('scroll-up');
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) {
|
||||
// Scroll Down
|
||||
header.classList.remove('scroll-up');
|
||||
header.classList.add('scroll-down');
|
||||
} else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) {
|
||||
// Scroll Up
|
||||
header.classList.remove('scroll-down');
|
||||
header.classList.add('scroll-up');
|
||||
}
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
}
|
||||
|
||||
// --- Accordion Logic for Mediation Page ---
|
||||
const mediationSections = document.querySelectorAll('.mediation-section');
|
||||
if (mediationSections.length) {
|
||||
const mediationTitles = document.querySelectorAll('.mediation-section h2');
|
||||
|
||||
const closeAllSections = () => {
|
||||
mediationSections.forEach(section => {
|
||||
section.classList.remove('active');
|
||||
});
|
||||
};
|
||||
|
||||
mediationTitles.forEach(title => {
|
||||
title.addEventListener('click', () => {
|
||||
const parentSection = title.parentElement;
|
||||
const isAlreadyActive = parentSection.classList.contains('active');
|
||||
|
||||
closeAllSections();
|
||||
|
||||
if (!isAlreadyActive) {
|
||||
parentSection.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const openSectionFromHash = () => {
|
||||
const hash = window.location.hash;
|
||||
if (hash) {
|
||||
const targetSection = document.querySelector(hash);
|
||||
if (targetSection && targetSection.classList.contains('mediation-section')) {
|
||||
closeAllSections();
|
||||
targetSection.classList.add('active');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', openSectionFromHash);
|
||||
openSectionFromHash();
|
||||
|
||||
if (!document.querySelector('.mediation-section.active') && mediationSections[0]) {
|
||||
mediationSections[0].classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// --- POPRAVLJENA in ZANESLJIVA logika za meni ---
|
||||
const dropdownContainers = document.querySelectorAll('.nav-links .dropdown');
|
||||
if (dropdownContainers.length) {
|
||||
const closeAllDropdowns = () => {
|
||||
dropdownContainers.forEach(container => {
|
||||
const dropdownContent = container.querySelector('.dropdown-content');
|
||||
if (!dropdownContent) {
|
||||
return;
|
||||
}
|
||||
container.classList.remove('is-open');
|
||||
dropdownContent.style.display = 'none';
|
||||
dropdownContent.querySelectorAll('.dropdown-submenu-content').forEach(submenu => {
|
||||
submenu.style.display = 'none';
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
dropdownContainers.forEach(container => {
|
||||
const dropBtn = container.querySelector('.dropbtn');
|
||||
const dropdownContent = container.querySelector('.dropdown-content');
|
||||
if (!dropBtn || !dropdownContent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const closeDropdown = () => {
|
||||
container.classList.remove('is-open');
|
||||
dropdownContent.style.display = 'none';
|
||||
dropdownContent.querySelectorAll('.dropdown-submenu-content').forEach(submenu => {
|
||||
submenu.style.display = 'none';
|
||||
});
|
||||
};
|
||||
|
||||
const openDropdown = () => {
|
||||
container.classList.add('is-open');
|
||||
dropdownContent.style.display = 'block';
|
||||
};
|
||||
|
||||
dropBtn.addEventListener('click', (event) => {
|
||||
if (window.innerWidth <= 768) {
|
||||
return; // mobilna logika že upravlja
|
||||
}
|
||||
event.preventDefault();
|
||||
const isOpen = container.classList.contains('is-open');
|
||||
closeAllDropdowns();
|
||||
if (!isOpen) {
|
||||
openDropdown();
|
||||
}
|
||||
});
|
||||
|
||||
const submenuLinks = container.querySelectorAll('.dropdown-submenu > a');
|
||||
submenuLinks.forEach(link => {
|
||||
const submenu = link.nextElementSibling;
|
||||
if (!submenu) {
|
||||
return;
|
||||
}
|
||||
|
||||
link.addEventListener('click', (event) => {
|
||||
if (window.innerWidth <= 768) {
|
||||
return; // mobilna logika že upravlja
|
||||
}
|
||||
|
||||
const parentList = link.parentElement.parentElement;
|
||||
parentList.querySelectorAll(':scope > .dropdown-submenu > .dropdown-submenu-content').forEach(sm => {
|
||||
if (sm !== submenu) {
|
||||
sm.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
const isOpen = submenu.style.display === 'block';
|
||||
const href = link.getAttribute('href') || '';
|
||||
|
||||
if (href === '#' || href.trim() === '') {
|
||||
event.preventDefault();
|
||||
submenu.style.display = isOpen ? 'none' : 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isOpen) {
|
||||
event.preventDefault();
|
||||
submenu.style.display = 'block';
|
||||
} else {
|
||||
closeDropdown();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
container.querySelectorAll('.dropdown-submenu-content a').forEach(link => {
|
||||
if (link.nextElementSibling) {
|
||||
return;
|
||||
}
|
||||
link.addEventListener('click', () => {
|
||||
if (window.innerWidth <= 768) {
|
||||
return;
|
||||
}
|
||||
closeAllDropdowns();
|
||||
closeMobileMenu();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (window.innerWidth <= 768) {
|
||||
return;
|
||||
}
|
||||
const clickedInside = Array.from(dropdownContainers).some(container => container.contains(event.target));
|
||||
if (!clickedInside) {
|
||||
closeAllDropdowns();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth <= 768) {
|
||||
closeAllDropdowns();
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth > 768) {
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// --- Initialize AOS (Animate on Scroll) ---
|
||||
if (typeof AOS !== 'undefined') {
|
||||
AOS.init({
|
||||
duration: 600,
|
||||
easing: 'ease-out',
|
||||
once: true, // Animacija se zgodi samo enkrat
|
||||
offset: 50,
|
||||
delay: 100,
|
||||
disable: 'mobile'
|
||||
});
|
||||
}
|
||||
|
||||
// --- "Read More" Button Logic for Kdo Sem Page ---
|
||||
const readMoreBtn = document.querySelector('.read-more-btn');
|
||||
const moreStoryContent = document.querySelector('.more-story-content');
|
||||
|
||||
if (readMoreBtn && moreStoryContent) {
|
||||
if (moreStoryContent.id) {
|
||||
readMoreBtn.setAttribute('aria-controls', moreStoryContent.id);
|
||||
}
|
||||
|
||||
const applyStoryState = (isVisible) => {
|
||||
readMoreBtn.textContent = isVisible ? 'Skrij zgodbo' : 'Moja zgodba';
|
||||
readMoreBtn.setAttribute('aria-expanded', isVisible ? 'true' : 'false');
|
||||
moreStoryContent.setAttribute('aria-hidden', isVisible ? 'false' : 'true');
|
||||
};
|
||||
|
||||
let isExpanded = moreStoryContent.classList.contains('visible');
|
||||
applyStoryState(isExpanded);
|
||||
moreStoryContent.style.height = isExpanded ? 'auto' : '0px';
|
||||
|
||||
const openStory = () => {
|
||||
moreStoryContent.classList.add('visible');
|
||||
const targetHeight = moreStoryContent.scrollHeight;
|
||||
moreStoryContent.classList.add('is-animating');
|
||||
moreStoryContent.style.height = '0px';
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
moreStoryContent.style.height = `${targetHeight}px`;
|
||||
});
|
||||
};
|
||||
|
||||
const closeStory = () => {
|
||||
const currentHeight = moreStoryContent.scrollHeight;
|
||||
moreStoryContent.style.height = `${currentHeight}px`;
|
||||
moreStoryContent.classList.add('is-animating');
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
moreStoryContent.style.height = '0px';
|
||||
});
|
||||
};
|
||||
|
||||
moreStoryContent.addEventListener('transitionend', (event) => {
|
||||
if (event.propertyName !== 'height') {
|
||||
return;
|
||||
}
|
||||
|
||||
moreStoryContent.classList.remove('is-animating');
|
||||
|
||||
if (isExpanded) {
|
||||
moreStoryContent.style.height = 'auto';
|
||||
} else {
|
||||
moreStoryContent.classList.remove('visible');
|
||||
moreStoryContent.style.height = '';
|
||||
}
|
||||
});
|
||||
|
||||
readMoreBtn.addEventListener('click', () => {
|
||||
if (moreStoryContent.classList.contains('is-animating')) {
|
||||
return;
|
||||
}
|
||||
|
||||
isExpanded = !isExpanded;
|
||||
applyStoryState(isExpanded);
|
||||
|
||||
if (isExpanded) {
|
||||
openStory();
|
||||
} else {
|
||||
closeStory();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// --- Legacy form validation functions (can be kept for potential future use) ---
|
||||
// Note: The main form submission logic is now handled via fetch in kontakt/index.html
|
||||
|
||||
function showError(input, message) {
|
||||
const formControl = input.parentElement;
|
||||
const errorDiv = formControl.querySelector('.error-message') || document.createElement('div');
|
||||
errorDiv.className = 'error-message';
|
||||
errorDiv.textContent = message;
|
||||
if (!formControl.querySelector('.error-message')) {
|
||||
formControl.appendChild(errorDiv);
|
||||
}
|
||||
formControl.classList.add('error');
|
||||
}
|
||||
|
||||
function removeError(input) {
|
||||
const formControl = input.parentElement;
|
||||
const errorDiv = formControl.querySelector('.error-message');
|
||||
if (errorDiv) {
|
||||
formControl.removeChild(errorDiv);
|
||||
}
|
||||
formControl.classList.remove('error');
|
||||
}
|
||||
|
||||
function isValidEmail(email) {
|
||||
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return re.test(String(email).toLowerCase());
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() { const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navLinks = document.querySelector('.nav-links'); let closeMobileMenu = () => {}; let resetMobileSubmenus = () => {}; const normalizePath = (value) => { if (!value) { return '/'; } let clean = value.split('?')[0].split('#')[0]; clean = clean.replace(/index\.html$/i, ''); clean = clean.replace(/\/+$/, ''); if (clean === '') { clean = '/'; } return clean; }; const applyActiveNavState = () => { const navRoot = document.querySelector('.nav-links'); if (!navRoot) { return; } navRoot.querySelectorAll('a.active, .dropbtn.active').forEach(el => { el.classList.remove('active'); }); const currentPath = normalizePath(window.location.pathname); const navAnchors = navRoot.querySelectorAll('a[href]'); let matchedLink = null; navAnchors.forEach(anchor => { const href = anchor.getAttribute('href'); if (!href || href.startsWith('http') || href.startsWith('mailto:') || href.startsWith('tel:') || href.startsWith('#')) { return; } const linkPath = normalizePath(href); if (linkPath === currentPath) { matchedLink = anchor; } }); if (!matchedLink) { return; } matchedLink.classList.add('active'); const highlightDropdownParents = (element) => { let parentContent = element.closest('.dropdown-submenu-content, .dropdown-content'); while (parentContent) { const trigger = parentContent.previousElementSibling; if (trigger && (trigger.tagName === 'A' || trigger.classList.contains('dropbtn'))) { trigger.classList.add('active'); } parentContent = parentContent.parentElement ? parentContent.parentElement.closest('.dropdown-submenu-content, .dropdown-content') : null; } }; highlightDropdownParents(matchedLink); const topLevelDropdown = matchedLink.closest('.dropdown'); if (topLevelDropdown) { const trigger = topLevelDropdown.querySelector('.dropbtn'); if (trigger) { trigger.classList.add('active'); } } }; if (mobileMenuBtn && navLinks) { resetMobileSubmenus = () => { navLinks.querySelectorAll('.dropdown-content, .dropdown-submenu-content').forEach(submenu => { submenu.style.display = 'none'; }); navLinks.querySelectorAll('.dropbtn, .dropdown-submenu > a').forEach(link => { link.classList.remove('active'); }); applyActiveNavState(); }; closeMobileMenu = () => { mobileMenuBtn.classList.remove('active'); navLinks.classList.remove('active'); document.body.classList.remove('no-scroll'); resetMobileSubmenus(); }; mobileMenuBtn.addEventListener('click', (event) => { event.stopPropagation(); const willOpen = !navLinks.classList.contains('active'); if (willOpen) { mobileMenuBtn.classList.add('active'); navLinks.classList.add('active'); document.body.classList.add('no-scroll'); resetMobileSubmenus(); } else { closeMobileMenu(); } }); } applyActiveNavState(); const dropdowns = document.querySelectorAll('.nav-links .dropdown-submenu > a, .nav-links .dropdown > .dropbtn'); dropdowns.forEach(item => { item.addEventListener('click', function(event) { if (window.innerWidth <= 768) { if (item.tagName === 'A') { event.preventDefault(); } event.stopPropagation(); const submenu = item.nextElementSibling; if (!submenu) { return; } const isTopLevelTrigger = item.classList.contains('dropbtn'); if (isTopLevelTrigger) { navLinks.querySelectorAll('.dropdown-content').forEach(panel => { if (panel !== submenu) { panel.style.display = 'none'; const trigger = panel.parentElement.querySelector('.dropbtn'); if (trigger) { trigger.classList.remove('active'); } panel.querySelectorAll('.dropdown-submenu-content').forEach(child => { child.style.display = 'none'; const childTrigger = child.parentElement.querySelector(':scope > a'); if (childTrigger) { childTrigger.classList.remove('active'); } }); } }); } else { const siblingsWrapper = item.parentElement && item.parentElement.parentElement; if (siblingsWrapper) { siblingsWrapper.querySelectorAll(':scope > .dropdown-submenu > .dropdown-submenu-content').forEach(panel => { if (panel !== submenu) { panel.style.display = 'none'; const trigger = panel.parentElement.querySelector(':scope > a'); if (trigger) { trigger.classList.remove('active'); } panel.querySelectorAll('.dropdown-submenu-content').forEach(child => { child.style.display = 'none'; const childTrigger = child.parentElement.querySelector(':scope > a'); if (childTrigger) { childTrigger.classList.remove('active'); } }); } }); } } const shouldOpen = submenu.style.display !== 'block'; if (shouldOpen) { submenu.style.display = 'block'; item.classList.add('active'); submenu.querySelectorAll('.dropdown-submenu-content').forEach(child => { child.style.display = 'none'; const childTrigger = child.parentElement.querySelector(':scope > a'); if (childTrigger) { childTrigger.classList.remove('active'); } }); } else { submenu.style.display = 'none'; item.classList.remove('active'); submenu.querySelectorAll('.dropdown-submenu-content').forEach(child => { child.style.display = 'none'; const childTrigger = child.parentElement.querySelector(':scope > a'); if (chLine truncated
|
||||
Reference in new issue
Block a user