382 lines
18 KiB
JavaScript
382 lines
18 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
/**
|
||
* ===================================================================
|
||
* 1. OSNOVNA FUNKCIONALNOST MOBILNE NAVIGACIJE
|
||
* ===================================================================
|
||
*/
|
||
|
||
// === MOBILNI MENI: Preklop vidnosti menija ===
|
||
try {
|
||
const icon = document.querySelector('.mobile-menu-icon');
|
||
const root = document.documentElement;
|
||
|
||
if (!icon) {
|
||
console.error('Mobile menu icon not found.');
|
||
} else {
|
||
icon.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
root.classList.toggle('nav-open');
|
||
});
|
||
|
||
document.addEventListener('click', (e) => {
|
||
if (root.classList.contains('nav-open') && !e.target.closest('.mobile-nav-panel') && !e.target.closest('.mobile-menu-icon')) {
|
||
root.classList.remove('nav-open');
|
||
}
|
||
});
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') {
|
||
root.classList.remove('nav-open');
|
||
}
|
||
});
|
||
}
|
||
} catch (err) {
|
||
console.error('Error in Mobile Menu Toggle:', err);
|
||
}
|
||
|
||
// --- Mobilni Accordion podmeni ---
|
||
try {
|
||
const mobileNav = document.querySelector('.mobile-nav-panel .mobile-nav');
|
||
if (mobileNav) {
|
||
const menuItemsWithChildren = mobileNav.querySelectorAll('.menu-item-has-children');
|
||
|
||
menuItemsWithChildren.forEach(item => {
|
||
const link = item.querySelector('a');
|
||
if (link) {
|
||
link.addEventListener('click', (event) => {
|
||
if (event.currentTarget.parentElement.classList.contains('menu-item-has-children')) {
|
||
event.preventDefault();
|
||
}
|
||
|
||
const parentLi = event.currentTarget.parentElement;
|
||
|
||
menuItemsWithChildren.forEach(otherItem => {
|
||
if (otherItem !== parentLi && otherItem.classList.contains('open')) {
|
||
otherItem.classList.remove('open');
|
||
}
|
||
});
|
||
|
||
parentLi.classList.toggle('open');
|
||
});
|
||
}
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('Error in Mobile Accordion Menu:', error);
|
||
}
|
||
|
||
|
||
/**
|
||
* ===================================================================
|
||
* 2. IZBOLJŠAVE UPORABNIŠKE IZKUŠNJE (UX/UI)
|
||
* ===================================================================
|
||
*/
|
||
|
||
// --- Funkcija za poudarjanje aktivne povezave v navigaciji ---
|
||
function highlightActiveLink() {
|
||
try {
|
||
const currentPath = window.location.pathname;
|
||
const navLinks = document.querySelectorAll('.navigation a');
|
||
let bestMatch = null;
|
||
let longestMatch = 0;
|
||
|
||
navLinks.forEach(link => {
|
||
if (link.closest('.dropdown-menu')) return;
|
||
|
||
const linkPath = new URL(link.href, window.location.origin).pathname;
|
||
|
||
if (currentPath.startsWith(linkPath) && linkPath.length > longestMatch) {
|
||
longestMatch = linkPath.length;
|
||
bestMatch = link;
|
||
}
|
||
});
|
||
|
||
if (bestMatch) {
|
||
const parentMenuItem = bestMatch.closest('.menu-item');
|
||
if (parentMenuItem) {
|
||
parentMenuItem.classList.add('active-page');
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("Error highlighting active link:", error);
|
||
}
|
||
}
|
||
|
||
|
||
// --- Funkcionalnost za preklopnik jezika (Desktop Dropdown + Mobile Modal) ---
|
||
function setupLanguageSwitcher() {
|
||
try {
|
||
const path = window.location.pathname;
|
||
const pathParts = path.split('/').filter(Boolean);
|
||
const validLangs = ['en', 'si', 'mk'];
|
||
let pathWithoutLang = '/';
|
||
|
||
if (pathParts.length > 0 && validLangs.includes(pathParts[0])) {
|
||
pathWithoutLang = '/' + pathParts.slice(1).join('/');
|
||
if (path.endsWith('/') && pathWithoutLang !== '/') {
|
||
pathWithoutLang += '/';
|
||
}
|
||
} else {
|
||
pathWithoutLang = path;
|
||
}
|
||
|
||
document.querySelectorAll('a[data-lang]').forEach(link => {
|
||
const targetLang = link.getAttribute('data-lang');
|
||
const newUrl = `/${targetLang}${pathWithoutLang}`;
|
||
link.setAttribute('href', newUrl.replace(/\/{2,}/g, '/'));
|
||
});
|
||
|
||
const desktopSelectors = document.querySelectorAll('.header-right-wrapper .language-selector');
|
||
desktopSelectors.forEach(selector => {
|
||
const currentLang = selector.querySelector('.current-lang');
|
||
if (currentLang) {
|
||
currentLang.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const isActive = selector.classList.contains('active');
|
||
document.querySelectorAll('.language-selector.active').forEach(s => s.classList.remove('active'));
|
||
if (!isActive) {
|
||
selector.classList.add('active');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
window.addEventListener('click', () => {
|
||
desktopSelectors.forEach(s => s.classList.remove('active'));
|
||
});
|
||
|
||
const mobileLangButton = document.getElementById('mobile-lang-trigger');
|
||
const languageModal = document.getElementById('language-modal-overlay');
|
||
const closeModalButton = document.getElementById('language-modal-close');
|
||
|
||
if (mobileLangButton && languageModal && closeModalButton) {
|
||
mobileLangButton.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
languageModal.classList.add('active');
|
||
});
|
||
|
||
const closeModal = () => {
|
||
languageModal.classList.remove('active');
|
||
};
|
||
|
||
closeModalButton.addEventListener('click', closeModal);
|
||
languageModal.addEventListener('click', (e) => {
|
||
if (e.target === languageModal) closeModal();
|
||
});
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && languageModal.classList.contains('active')) closeModal();
|
||
});
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Error in Language Switcher setup:', error);
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* ===================================================================
|
||
* 3. OSTALE FUNKCIONALNOSTI (FAQ, ACTIVITIES, ITD.)
|
||
* ===================================================================
|
||
*/
|
||
|
||
// --- FAQ Accordion ---
|
||
try {
|
||
document.querySelectorAll('.faq-item h3').forEach(header => {
|
||
header.addEventListener('click', () => {
|
||
const faqItem = header.parentElement;
|
||
faqItem.classList.toggle('open');
|
||
});
|
||
});
|
||
} catch (error) {
|
||
console.error('Error in FAQ Accordion:', error);
|
||
}
|
||
|
||
// --- Activities Tab ---
|
||
try {
|
||
const activityNavItems = document.querySelectorAll('.activities-nav li');
|
||
const activityDetailsText = document.querySelector('.activity-details p');
|
||
const activityDetailsImage = document.querySelector('.activity-details img');
|
||
|
||
if (activityNavItems.length > 0 && activityDetailsText && activityDetailsImage) {
|
||
const activitiesData = {
|
||
'Student Support': {
|
||
text: "We know moving to a new country can feel overwhelming, so we’re here to make it easier. From helping you with university applications to finding your way around student life in Slovenia, you can always count on us. We offer free consultations, answer your questions on Instagram and Facebook (yes, even late at night), and host events where you can meet others and hear real experiences first-hand. With mentorship, info sessions, and a friendly community by your side, you’ll never have to go through the journey alone.",
|
||
imgSrc: "../images/img1-08.09.2025.webp",
|
||
altText: "Students receiving support and guidance"
|
||
},
|
||
'Fun & Social Life': {
|
||
text: "Student life is so much more than lectures and exams — it’s about the moments in between. At MSOS, we create those moments: from parties, concerts, and casual hangouts, to cinema nights, excursions, and team-building trips. We also host talks and events where you can share ideas, meet new people, and feel part of something bigger. Whether you’re connecting with Macedonian students or making friends with Slovenians and internationals, our activities are all about building a community where you can relax, have fun, and create memories that last long after university.",
|
||
imgSrc: "../images/img2-08.09.2025.webp",
|
||
altText: "Students socializing and having fun at an event"
|
||
},
|
||
'Education & Culture': {
|
||
text: "Studying abroad isn’t only about lectures and exams — it’s also about growing as a person. That’s why we mix learning with culture. We run study groups and small workshops where you can share knowledge and pick up new skills. At the same time, we keep our traditions alive with cultural evenings, music, food, and gatherings that remind us of home. It’s a balance: support for your studies, and a space to stay connected to who we are.",
|
||
imgSrc: "../images/img3-08.09.2025.webp",
|
||
altText: "An educational workshop or cultural event"
|
||
},
|
||
'Student Representation': {
|
||
text: "Studying abroad comes with challenges, and sometimes students need a voice that’s heard. At MSOS, we take that role seriously. We organize meetings with government representatives, ministries, embassies, universities, and other key institutions to make sure the interests of Macedonian students in Slovenia are on the table. From campus issues to academic policies and integration, we work to solve problems, push for positive changes, and create a better experience for all of us.",
|
||
imgSrc: "../images/img4-08.09.2025.webp",
|
||
altText: "MSOS members representing students at a formal meeting"
|
||
}
|
||
};
|
||
|
||
activityNavItems.forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
activityNavItems.forEach(navItem => navItem.classList.remove('active'));
|
||
item.classList.add('active');
|
||
|
||
const activityName = item.textContent.trim();
|
||
if (activitiesData[activityName]) {
|
||
activityDetailsText.textContent = activitiesData[activityName].text;
|
||
activityDetailsImage.src = activitiesData[activityName].imgSrc;
|
||
activityDetailsImage.alt = activitiesData[activityName].altText;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('Error in Activities Tab:', error);
|
||
}
|
||
|
||
/**
|
||
* ===================================================================
|
||
* 4. INTERAKTIVNA SEKCIJA "MISSION & VISION"
|
||
* ===================================================================
|
||
*/
|
||
try {
|
||
const missionVisionContainer = document.getElementById('mission-vision-interactive');
|
||
|
||
if (missionVisionContainer) {
|
||
const missionBox = missionVisionContainer.querySelector('.mission-box');
|
||
const visionBox = missionVisionContainer.querySelector('.vision-box');
|
||
|
||
missionBox.addEventListener('mouseenter', () => {
|
||
missionVisionContainer.classList.remove('show-vision');
|
||
});
|
||
|
||
visionBox.addEventListener('mouseenter', () => {
|
||
missionVisionContainer.classList.add('show-vision');
|
||
});
|
||
}
|
||
} catch(error) {
|
||
console.error('Error in Mission/Vision interaction setup:', error);
|
||
}
|
||
|
||
/**
|
||
* ===================================================================
|
||
* 5. SCROLLSPY IN PROGRESS BAR ZA STRANI ČLANKOV (POSODOBLJENO)
|
||
* ===================================================================
|
||
*/
|
||
try {
|
||
const articlePage = document.querySelector('.article-page');
|
||
if (articlePage) {
|
||
const scrollspyNav = document.querySelector('.scrollspy-nav');
|
||
const mobileHeader = document.querySelector('.mobile-article-header');
|
||
const mobileTitle = document.getElementById('mobile-article-title');
|
||
const mobileDropdown = document.querySelector('.mobile-scrollspy-dropdown');
|
||
const mobileLinksContainer = document.getElementById('mobile-scrollspy-links');
|
||
const progressBar = document.querySelector('.progress-bar');
|
||
|
||
const headings = Array.from(articlePage.querySelectorAll('.article-body h2'));
|
||
const desktopNavLinks = scrollspyNav ? Array.from(scrollspyNav.querySelectorAll('a')) : [];
|
||
|
||
// --- Dinamično ustvarjanje mobilnega spustnega seznama ---
|
||
if (headings.length > 0 && mobileLinksContainer) {
|
||
headings.forEach(heading => {
|
||
const listItem = document.createElement('li');
|
||
const link = document.createElement('a');
|
||
link.href = `#${heading.id}`;
|
||
link.textContent = heading.textContent;
|
||
listItem.appendChild(link);
|
||
mobileLinksContainer.appendChild(listItem);
|
||
});
|
||
}
|
||
|
||
// --- Logika za odpiranje/zapiranje mobilnega spustnega seznama ---
|
||
if (mobileHeader && mobileDropdown) {
|
||
mobileHeader.addEventListener('click', (e) => {
|
||
// Preprečimo, da se meni zapre, če kliknemo na povezavo znotraj njega
|
||
if (!e.target.closest('a')) {
|
||
mobileHeader.classList.toggle('open');
|
||
mobileDropdown.classList.toggle('open');
|
||
}
|
||
});
|
||
|
||
// Dodamo dogodek za zapiranje menija ob kliku na povezavo
|
||
mobileDropdown.querySelectorAll('a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
mobileHeader.classList.remove('open');
|
||
mobileDropdown.classList.remove('open');
|
||
});
|
||
});
|
||
}
|
||
|
||
// --- Logika za Progress Bar ---
|
||
function updateProgressBar() {
|
||
if (!progressBar) return;
|
||
const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||
const scrollTop = window.scrollY;
|
||
|
||
if (scrollableHeight > 0) {
|
||
const progress = (scrollTop / scrollableHeight) * 100;
|
||
progressBar.style.width = `${progress}%`;
|
||
} else {
|
||
progressBar.style.width = '0%';
|
||
}
|
||
}
|
||
|
||
// --- Logika za Scrollspy ---
|
||
if (headings.length > 0) {
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
const id = entry.target.getAttribute('id');
|
||
const desktopNavLink = desktopNavLinks.find(link => link.getAttribute('href') === `#${id}`);
|
||
const mobileNavLink = mobileLinksContainer ? mobileLinksContainer.querySelector(`a[href="#${id}"]`) : null;
|
||
|
||
if (entry.isIntersecting) {
|
||
// Posodobi namizno navigacijo
|
||
if (desktopNavLink) {
|
||
desktopNavLinks.forEach(link => link.classList.remove('active'));
|
||
desktopNavLink.classList.add('active');
|
||
}
|
||
// Posodobi mobilni naslov in aktivno povezavo v spustnem seznamu
|
||
if (mobileTitle) {
|
||
mobileTitle.textContent = entry.target.textContent;
|
||
}
|
||
if (mobileNavLink) {
|
||
mobileLinksContainer.querySelectorAll('a').forEach(link => link.classList.remove('active'));
|
||
mobileNavLink.classList.add('active');
|
||
}
|
||
}
|
||
});
|
||
}, {
|
||
rootMargin: "-100px 0px -50% 0px" // Sproži, ko je naslov v zgornjem delu zaslona
|
||
});
|
||
|
||
headings.forEach(heading => {
|
||
observer.observe(heading);
|
||
});
|
||
}
|
||
|
||
// Dodaj poslušalca dogodkov za vrstico napredka
|
||
window.addEventListener('scroll', updateProgressBar);
|
||
updateProgressBar(); // Klic ob nalaganju strani
|
||
}
|
||
} catch (error) {
|
||
console.error('Error in Article Scrollspy/Progress Bar setup:', error);
|
||
}
|
||
|
||
/**
|
||
* ===================================================================
|
||
* 6. ZAGON FUNKCIJ PO NALOŽITVI STRANI
|
||
* ===================================================================
|
||
*/
|
||
highlightActiveLink();
|
||
setupLanguageSwitcher();
|
||
|
||
}); |