303 lines
13 KiB
JavaScript
303 lines
13 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
/**
|
|
* Funkcija za nalaganje HTML komponent (glava, noga).
|
|
* Ta funkcija je bila v originalni kodi, a se na koncu ne uporablja,
|
|
* ker so glave in noge vgrajene neposredno v HTML datoteke. Pustimo jo za morebitno kasnejšo rabo.
|
|
*/
|
|
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 => {
|
|
// Normaliziramo poti, da se izognemo težavam z zadnjimi poševnicami
|
|
const linkPath = new URL(link.href).pathname.replace(/\/$/, "");
|
|
const currentPath = currentPagePath.replace(/\/$/, "");
|
|
|
|
// Korenska stran (/) se mora ujemati samo z linkom, ki kaže na "/"
|
|
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; // 5 sekund
|
|
|
|
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');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// =================================================================
|
|
// === OSTALA OBSTOJEČA KODA (NESPREMENJENO) ===
|
|
// =================================================================
|
|
|
|
// Animacije ob pomikanju (Intersection Observer)
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
|
|
|
|
// 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';
|
|
}
|
|
}
|
|
});
|
|
|
|
// =================================================================
|
|
// === KODA ZA KONTAKTNI OBRAZEC (NADGRAJENO IN SPREMENJENO) ===
|
|
// =================================================================
|
|
const contactForm = document.getElementById('contact-form');
|
|
if (contactForm) {
|
|
// Poiščemo element za sporočila. Če ne obstaja, ga ustvarimo in dodamo.
|
|
let formMessageElement = contactForm.querySelector('.form-message');
|
|
if (!formMessageElement) {
|
|
formMessageElement = document.createElement('div');
|
|
formMessageElement.className = 'form-message';
|
|
formMessageElement.setAttribute('aria-live', 'polite');
|
|
// Vstavimo ga pred gumbom za pošiljanje
|
|
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(); // Preprečimo privzeto pošiljanje obrazca
|
|
|
|
const submitButton = contactForm.querySelector('button[type="submit"]');
|
|
const originalButtonText = submitButton.textContent;
|
|
|
|
// Zberemo podatke iz obrazca
|
|
const formData = {
|
|
name: document.getElementById('name').value,
|
|
email: document.getElementById('email').value,
|
|
message: document.getElementById('message').value
|
|
};
|
|
|
|
// Osnovna validacija na strani klienta (dopolnitev strežniške)
|
|
if (formData.name.trim() === '' || formData.email.trim() === '' || formData.message.trim() === '') {
|
|
formMessageElement.textContent = 'Prosimo, izpolnite vsa polja.';
|
|
formMessageElement.className = 'form-message error visible';
|
|
return;
|
|
}
|
|
|
|
// Vizualna povratna informacija, da se je pošiljanje začelo
|
|
submitButton.disabled = true;
|
|
submitButton.textContent = 'Pošiljam...';
|
|
formMessageElement.className = 'form-message'; // Skrijemo prejšnja sporočila
|
|
|
|
// Pošljemo podatke na PHP skripto z uporabo Fetch API
|
|
fetch('/api/send_mail.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Ko prejmemo odgovor od strežnika, ga prikažemo
|
|
formMessageElement.textContent = data.message;
|
|
if (data.success) {
|
|
formMessageElement.classList.add('success', 'visible');
|
|
contactForm.reset(); // Počistimo obrazec ob uspehu
|
|
// Resetiramo števec znakov
|
|
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) => {
|
|
// V primeru mrežne napake ali če strežnik ni dosegljiv
|
|
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(() => {
|
|
// Ne glede na rezultat, gumbu povrnemo prvotno stanje
|
|
submitButton.disabled = false;
|
|
submitButton.textContent = originalButtonText;
|
|
});
|
|
});
|
|
|
|
// Logika za števec znakov (ohranjeno in nespremenjeno)
|
|
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 (NESPREMENJENO) ===
|
|
// =================================================================
|
|
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 ---
|
|
// Poenostavljen zagon, saj nalaganje komponent ni potrebno.
|
|
setCurrentYear();
|
|
setActiveNavLink();
|
|
initializeApp();
|
|
}); |