293 lines
12 KiB
JavaScript
293 lines
12 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
/**
|
|
* Funkcija za nalaganje HTML komponent (glava, noga).
|
|
*/
|
|
const loadComponent = (componentPath, placeholderId) => {
|
|
return fetch(componentPath)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`Napaka pri nalaganju komponente: ${componentPath}`);
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(data => {
|
|
const placeholder = document.getElementById(placeholderId);
|
|
if (placeholder) {
|
|
placeholder.innerHTML = data;
|
|
}
|
|
})
|
|
.catch(error => console.error(error));
|
|
};
|
|
|
|
/**
|
|
* Funkcija za nastavitev trenutnega leta v nogi.
|
|
*/
|
|
const setCurrentYear = () => {
|
|
const yearSpan = document.getElementById('current-year');
|
|
if (yearSpan) {
|
|
yearSpan.textContent = new Date().getFullYear();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Funkcija, ki nastavi `.active` razred na trenutno aktivno povezavo v navigaciji.
|
|
*/
|
|
const setActiveNavLink = () => {
|
|
const navLinks = document.querySelectorAll('.main-nav a');
|
|
const currentPagePath = window.location.pathname;
|
|
|
|
navLinks.forEach(link => {
|
|
const linkPath = new URL(link.href).pathname.replace(/\/$/, "");
|
|
const currentPath = currentPagePath.replace(/\/$/, "");
|
|
|
|
if (linkPath === "" && currentPath === "") {
|
|
link.classList.add('active');
|
|
} else if (linkPath !== "" && currentPath.startsWith(linkPath)) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Glavna funkcija za inicializacijo vseh interaktivnih elementov spletne strani.
|
|
*/
|
|
const initializeApp = () => {
|
|
|
|
// =================================================================
|
|
// === LOGIKA ZA DRSNIK NA DOMAČI STRANI (NESPREMENJENO) ===
|
|
// =================================================================
|
|
const sliderElement = document.getElementById("slider");
|
|
|
|
if (sliderElement) {
|
|
const slides = sliderElement.querySelectorAll(".slide");
|
|
const prevBtn = document.getElementById("prevBtn");
|
|
const nextBtn = document.getElementById("nextBtn");
|
|
let current = 0;
|
|
const total = slides.length;
|
|
let slideInterval;
|
|
const autoPlayDelay = 5000;
|
|
|
|
const showSlide = (index) => {
|
|
if (slides.length === 0) return;
|
|
slides[current].classList.remove("active");
|
|
current = (index + total) % total;
|
|
slides[current].classList.add("active");
|
|
};
|
|
|
|
const nextSlide = () => showSlide(current + 1);
|
|
const prevSlide = () => showSlide(current - 1);
|
|
const pauseSlider = () => clearInterval(slideInterval);
|
|
|
|
const startSlider = () => {
|
|
pauseSlider();
|
|
if (slides.length > 1) {
|
|
slideInterval = setInterval(nextSlide, autoPlayDelay);
|
|
}
|
|
};
|
|
|
|
if (prevBtn && nextBtn) {
|
|
prevBtn.addEventListener("click", () => {
|
|
prevSlide();
|
|
startSlider();
|
|
});
|
|
|
|
nextBtn.addEventListener("click", () => {
|
|
nextSlide();
|
|
startSlider();
|
|
});
|
|
}
|
|
|
|
sliderElement.addEventListener('mouseenter', pauseSlider);
|
|
sliderElement.addEventListener('mouseleave', startSlider);
|
|
sliderElement.addEventListener('touchstart', pauseSlider, { passive: true });
|
|
|
|
startSlider();
|
|
}
|
|
|
|
// =================================================================
|
|
// === KODA ZA MOBILNI MENI (NESPREMENJENO) ===
|
|
// =================================================================
|
|
const mobileNavToggle = document.querySelector('.mobile-nav-toggle');
|
|
const mainNav = document.querySelector('.main-nav');
|
|
|
|
if (mobileNavToggle && mainNav) {
|
|
mobileNavToggle.addEventListener('click', () => {
|
|
const isExpanded = mobileNavToggle.getAttribute('aria-expanded') === 'true';
|
|
mobileNavToggle.setAttribute('aria-expanded', !isExpanded);
|
|
|
|
mobileNavToggle.classList.toggle('open');
|
|
mainNav.classList.toggle('open');
|
|
});
|
|
|
|
const navLinks = mainNav.querySelectorAll('a');
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
if (mainNav.classList.contains('open')) {
|
|
mainNav.classList.remove('open');
|
|
mobileNavToggle.classList.remove('open');
|
|
mobileNavToggle.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// =================================================================
|
|
// === POPRAVLJENA KODA ZA ANIMACIJE OB POMIKANJU (Intersection Observer) ===
|
|
// =================================================================
|
|
|
|
// Ustvarimo opazovalca (Observer)
|
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
// Če je element v vidnem polju (čeprav samo za 1px)
|
|
if (entry.isIntersecting) {
|
|
// Dodamo razred 'is-visible', kar sproži CSS animacijo
|
|
entry.target.classList.add('is-visible');
|
|
// Ko se je element enkrat prikazal, ga ni več treba opazovati.
|
|
// To izboljša delovanje strani.
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
// SPREMEMBA: Prag smo nastavili na 0.
|
|
// To pomeni, da se bo animacija sprožila takoj, ko bo vsaj en piksel
|
|
// elementa viden, kar reši težavo z zelo visokimi elementi.
|
|
threshold: 0
|
|
});
|
|
|
|
// Poiščemo vse elemente z razredom 'animate-on-scroll' in jih začnemo opazovati.
|
|
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
|
|
// =================================================================
|
|
// === OSTALA KODA (NESPREMENJENO) ===
|
|
// =================================================================
|
|
|
|
// Accordion (Cenik)
|
|
document.querySelectorAll('.accordion-item').forEach(item => {
|
|
const header = item.querySelector('.accordion-header');
|
|
const content = item.querySelector('.accordion-content');
|
|
if(header && content) {
|
|
header.addEventListener('click', () => {
|
|
const isActive = item.classList.toggle('active');
|
|
content.style.maxHeight = isActive ? content.scrollHeight + 'px' : null;
|
|
});
|
|
if (item.classList.contains('active')) {
|
|
content.style.maxHeight = content.scrollHeight + 'px';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Kontaktni obrazec
|
|
const contactForm = document.getElementById('contact-form');
|
|
if (contactForm) {
|
|
let formMessageElement = contactForm.querySelector('.form-message');
|
|
if (!formMessageElement) {
|
|
formMessageElement = document.createElement('div');
|
|
formMessageElement.className = 'form-message';
|
|
formMessageElement.setAttribute('aria-live', 'polite');
|
|
const submitButton = contactForm.querySelector('button[type="submit"]');
|
|
if (submitButton) {
|
|
submitButton.parentElement.insertAdjacentElement('beforebegin', formMessageElement);
|
|
} else {
|
|
contactForm.appendChild(formMessageElement);
|
|
}
|
|
}
|
|
|
|
contactForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const submitButton = contactForm.querySelector('button[type="submit"]');
|
|
const originalButtonText = submitButton.textContent;
|
|
|
|
const formData = {
|
|
name: document.getElementById('name').value,
|
|
email: document.getElementById('email').value,
|
|
message: document.getElementById('message').value
|
|
};
|
|
|
|
if (formData.name.trim() === '' || formData.email.trim() === '' || formData.message.trim() === '') {
|
|
formMessageElement.textContent = 'Prosimo, izpolnite vsa polja.';
|
|
formMessageElement.className = 'form-message error visible';
|
|
return;
|
|
}
|
|
|
|
submitButton.disabled = true;
|
|
submitButton.textContent = 'Pošiljam...';
|
|
formMessageElement.className = 'form-message';
|
|
|
|
fetch('/api/send_mail.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(formData),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
formMessageElement.textContent = data.message;
|
|
if (data.success) {
|
|
formMessageElement.classList.add('success', 'visible');
|
|
contactForm.reset();
|
|
const charCounter = document.getElementById('char-counter');
|
|
if(charCounter) {
|
|
const maxLength = document.getElementById('message').getAttribute('maxlength');
|
|
charCounter.textContent = `${maxLength} znakov na voljo`;
|
|
charCounter.className = 'char-counter';
|
|
}
|
|
} else {
|
|
formMessageElement.classList.add('error', 'visible');
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error('Napaka pri pošiljanju:', error);
|
|
formMessageElement.textContent = 'Prišlo je do napake pri povezavi. Prosimo, poskusite kasneje.';
|
|
formMessageElement.className = 'form-message error visible';
|
|
})
|
|
.finally(() => {
|
|
submitButton.disabled = false;
|
|
submitButton.textContent = originalButtonText;
|
|
});
|
|
});
|
|
|
|
const messageTextarea = document.getElementById('message');
|
|
const charCounter = document.getElementById('char-counter');
|
|
if (messageTextarea && charCounter) {
|
|
const maxLength = messageTextarea.getAttribute('maxlength');
|
|
messageTextarea.addEventListener('input', () => {
|
|
const currentLength = messageTextarea.value.length;
|
|
const remaining = maxLength - currentLength;
|
|
charCounter.textContent = `${remaining} znakov na voljo`;
|
|
charCounter.classList.remove('warning', 'limit');
|
|
if (remaining < 0) {
|
|
charCounter.classList.add('limit');
|
|
} else if (remaining <= 20) {
|
|
charCounter.classList.add('warning');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Gumb za na vrh
|
|
const backToTopButton = document.getElementById('back-to-top-btn');
|
|
if (backToTopButton) {
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 300) {
|
|
backToTopButton.classList.add('visible');
|
|
} else {
|
|
backToTopButton.classList.remove('visible');
|
|
}
|
|
});
|
|
|
|
backToTopButton.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
});
|
|
}
|
|
};
|
|
|
|
// --- Glavni Zagon Aplikacije ---
|
|
setCurrentYear();
|
|
setActiveNavLink();
|
|
initializeApp();
|
|
}); |