479 lines
18 KiB
JavaScript
479 lines
18 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// --- Mobile Menu Toggle ---
|
|
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
|
const navLinks = document.querySelector('.nav-links');
|
|
let closeMobileMenu = () => {};
|
|
let resetMobileSubmenus = () => {};
|
|
|
|
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');
|
|
});
|
|
};
|
|
|
|
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();
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- 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() {
|
|
this.classList.toggle('active');
|
|
const content = this.nextElementSibling;
|
|
|
|
if (content.style.maxHeight) {
|
|
// Če je odprto, zapri
|
|
content.style.maxHeight = null;
|
|
this.textContent = 'Več';
|
|
} else {
|
|
// Če je zaprto, odpri
|
|
content.style.maxHeight = content.scrollHeight + "px";
|
|
this.textContent = 'Manj';
|
|
}
|
|
});
|
|
accordion.textContent = 'Več';
|
|
});
|
|
|
|
// --- 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());
|
|
}
|