prosberry/js/main.js

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 (childTrigger) { childTrigger.classList.remove('active'); } }); } } }); }); document.addEventListener('click', function(event) { if (window.innerWidth <= 768 && navLinks && navLinks.classList.contains('active')) { const isClickInsideNav = navLinks.contains(event.target); const isClickOnBtn = mobileMenuBtn && mobileMenuBtn.contains(event.target); if (!isClickInsideNav && !isClickOnBtn) { closeMobileMenu(); } } }); const navLinkItems = document.querySelectorAll('.nav-links a'); navLinkItems.forEach(link => { link.addEventListener('click', (event) => { const hasSubmenu = link.parentElement.classList.contains('dropdown-submenu') || link.classList.contains('dropbtn'); if (window.innerWidth <= 768) { if (hasSubmenu) { return; } closeMobileMenu(); } }); }); 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'); } }); 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')) { header.classList.remove('scroll-up'); header.classList.add('scroll-down'); } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) { header.classList.remove('scroll-down'); header.classList.add('scroll-up'); } lastScroll = currentScroll; }); } 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'); } } 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; } 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; } 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(); } }); if (typeof AOS !== 'undefined') { AOS.init({ duration: 600, easing: 'ease-out', once: true, offset: 50, delay: 100, disable: 'mobile' }); } 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(); } }); } }); 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()); }