📁 File Manager

Dosya Düzenle: script3.js

/**
 * Mangaldai College — script.js
 * Handles: sticky nav, mobile menu, search modal,
 *          mobile accordion, mega menu, accessibility
 */

'use strict';

/* ── Element references ─────────────────────────────── */
const primaryNav     = document.getElementById('primary-nav');
const mobileMenuBtn  = document.getElementById('mobileMenuBtn');
const closeMobileBtn = document.getElementById('closeMobileMenu');
const mobileMenu     = document.getElementById('mobileMenu');
const mobileOverlay  = document.getElementById('mobileMenuOverlay');
const searchBtn      = document.getElementById('searchBtn');
const searchCloseBtn = document.getElementById('searchCloseBtn');
const searchModal    = document.getElementById('searchModal');
const searchInput    = document.getElementById('searchInput');
const accButtons     = document.querySelectorAll('.mobile-acc-btn');

/* ─────────────────────────────────────────────────────
   STICKY NAV: add shrink class after user scrolls past header
   ───────────────────────────────────────────────────── */
(function initStickyNav() {
  const threshold = 60;

function onScroll() {
    if (window.scrollY > threshold) {
      primaryNav.classList.add('sticky-shrink');
    } else {
      primaryNav.classList.remove('sticky-shrink');
    }
  }

window.addEventListener('scroll', onScroll, { passive: true });
  onScroll(); // run once on load
})();

/* ─────────────────────────────────────────────────────
   MOBILE MENU: open / close
   ───────────────────────────────────────────────────── */
function openMobileMenu() {
  mobileMenu.classList.add('active');
  mobileOverlay.classList.add('active');
  mobileMenuBtn.setAttribute('aria-expanded', 'true');
  mobileMenu.removeAttribute('aria-hidden');
  document.body.style.overflow = 'hidden';
  // Focus first link
  const firstFocusable = mobileMenu.querySelector('a, button');
  if (firstFocusable) firstFocusable.focus();
}

function closeMobileMenu() {
  mobileMenu.classList.remove('active');
  mobileOverlay.classList.remove('active');
  mobileMenuBtn.setAttribute('aria-expanded', 'false');
  mobileMenu.setAttribute('aria-hidden', 'true');
  document.body.style.overflow = '';
  mobileMenuBtn.focus();
}

if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', openMobileMenu);
if (closeMobileBtn) closeMobileBtn.addEventListener('click', closeMobileMenu);
if (mobileOverlay)  mobileOverlay.addEventListener('click', closeMobileMenu);

// Close on Escape
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    if (mobileMenu.classList.contains('active')) closeMobileMenu();
    if (!searchModal.hidden) closeSearch();
  }
});

/* ─────────────────────────────────────────────────────
   MOBILE ACCORDION
   ───────────────────────────────────────────────────── */
accButtons.forEach((btn) => {
  btn.addEventListener('click', () => {
    const body       = btn.nextElementSibling;
    const isOpen     = btn.getAttribute('aria-expanded') === 'true';

// Close all others
    accButtons.forEach((other) => {
      if (other !== btn) {
        other.setAttribute('aria-expanded', 'false');
        const otherBody = other.nextElementSibling;
        if (otherBody) otherBody.classList.remove('open');
      }
    });

// Toggle current
    btn.setAttribute('aria-expanded', String(!isOpen));
    if (body) body.classList.toggle('open', !isOpen);
  });
});

/* ─────────────────────────────────────────────────────
   SEARCH MODAL
   ───────────────────────────────────────────────────── */
function openSearch() {
  searchModal.hidden = false;
  searchModal.removeAttribute('aria-hidden');
  // Wait a frame so display:none→flex transition fires
  requestAnimationFrame(() => {
    searchModal.style.opacity = '1';
    searchInput.focus();
  });
  document.body.style.overflow = 'hidden';
}

function closeSearch() {
  searchModal.hidden = true;
  searchModal.setAttribute('aria-hidden', 'true');
  document.body.style.overflow = '';
  searchBtn.focus();
}

if (searchBtn)      searchBtn.addEventListener('click', openSearch);
if (searchCloseBtn) searchCloseBtn.addEventListener('click', closeSearch);

// Close on overlay click
if (searchModal) {
  searchModal.addEventListener('click', (e) => {
    if (e.target === searchModal) closeSearch();
  });
}

// Submit search on Enter
if (searchInput) {
  searchInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      const query = searchInput.value.trim();
      if (query) {
        // In production, redirect to search results page
        console.info('[Search]', query);
        closeSearch();
      }
    }
  });
}

/* ─────────────────────────────────────────────────────
   MEGA MENU: now a direct child of #primary-nav.
   Hover on "About Us" li shows/hides it.
   Simple dropdowns remain inside their nav-items.
   ───────────────────────────────────────────────────── */
(function initMegaMenu() {
  const megaMenu   = document.querySelector('.mega-menu');          // standalone in nav
  const aboutUs    = document.querySelector('.nav-item.has-mega');  // About Us li
  const navItems   = document.querySelectorAll('.nav-item.has-dropdown:not(.has-mega)');

let hideTimer = null;

/* ── Mega menu (About Us) ── */
  if (aboutUs && megaMenu) {
    const trigger = aboutUs.querySelector('.nav-link-item');

function showMega() {
      clearTimeout(hideTimer);
      closeAllSimple();
      megaMenu.classList.add('open');
      if (trigger) trigger.setAttribute('aria-expanded', 'true');
    }

function hideMega() {
      hideTimer = setTimeout(() => {
        megaMenu.classList.remove('open');
        if (trigger) trigger.setAttribute('aria-expanded', 'false');
      }, 100);
    }

aboutUs.addEventListener('mouseenter', showMega);
    aboutUs.addEventListener('mouseleave', hideMega);
    megaMenu.addEventListener('mouseenter', () => clearTimeout(hideTimer));
    megaMenu.addEventListener('mouseleave', hideMega);

// Keyboard
    if (trigger) {
      trigger.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          megaMenu.classList.contains('open') ? hideMega() : showMega();
          if (megaMenu.classList.contains('open')) {
            const first = megaMenu.querySelector('a');
            if (first) first.focus();
          }
        }
        if (e.key === 'Escape') { hideMega(); if(trigger) trigger.focus(); }
      });
    }
  }

/* ── Simple dropdowns ── */
  function closeAllSimple() {
    navItems.forEach(n => {
      n.classList.remove('hovered');
      const t = n.querySelector('.nav-link-item');
      if (t) t.setAttribute('aria-expanded', 'false');
    });
  }

navItems.forEach((item) => {
    const trigger = item.querySelector('.nav-link-item');
    const menu    = item.querySelector('.dropdown-simple');
    if (!trigger || !menu) return;

let st = null;

item.addEventListener('mouseenter', show);
    item.addEventListener('mouseleave', hide);
    menu.addEventListener('mouseenter', () => clearTimeout(st));
    menu.addEventListener('mouseleave', hide);

trigger.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        item.classList.contains('hovered') ? hide() : show();
      }
      if (e.key === 'Escape') { hide(); trigger.focus(); }
    });
  });

// Close everything on outside click
  document.addEventListener('click', (e) => {
    const nav = document.getElementById('primary-nav');
    if (nav && !nav.contains(e.target)) {
      if (megaMenu) megaMenu.classList.remove('open');
      closeAllSimple();
    }
  });
})();

/* ─────────────────────────────────────────────────────
   QUICK CARDS: ripple on click
   ───────────────────────────────────────────────────── */
(function initRipple() {
  document.querySelectorAll('.quick-card').forEach((card) => {
    card.addEventListener('click', (e) => {
      const rect   = card.getBoundingClientRect();
      const ripple = document.createElement('span');
      const size   = Math.max(rect.width, rect.height);
      ripple.style.cssText = `
        position:absolute;
        border-radius:50%;
        width:${size}px;height:${size}px;
        left:${e.clientX - rect.left - size/2}px;
        top:${e.clientY - rect.top  - size/2}px;
        background:rgba(244,180,0,0.18);
        pointer-events:none;
        transform:scale(0);
        animation:rippleAnim 0.55s ease-out forwards;
      `;
      // Ensure card is relative
      card.style.position = 'relative';
      card.style.overflow  = 'hidden';
      card.appendChild(ripple);
      ripple.addEventListener('animationend', () => ripple.remove());
    });
  });

// Inject keyframe if not present
  if (!document.querySelector('#rippleStyle')) {
    const style = document.createElement('style');
    style.id = 'rippleStyle';
    style.textContent = `@keyframes rippleAnim {
      to { transform:scale(2.5); opacity:0; }
    }`;
    document.head.appendChild(style);
  }
})();

/* ─────────────────────────────────────────────────────
   HERO: Parallax scroll on hero BG (subtle)
   ───────────────────────────────────────────────────── */
(function initParallax() {
  const heroBg = document.querySelector('.hero-bg');
  if (!heroBg) return;

function onScroll() {
    const offset = window.scrollY * 0.25;
    heroBg.style.transform = `translateY(${offset}px) scale(1.06)`;
  }

window.addEventListener('scroll', onScroll, { passive: true });
})();

/* ─────────────────────────────────────────────────────
   ACTIVE NAV LINK highlight
   ───────────────────────────────────────────────────── */
(function initActiveNav() {
  const links = document.querySelectorAll('.nav-link-item');
  links.forEach((link) => {
    link.addEventListener('click', () => {
      document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
      link.closest('.nav-item')?.classList.add('active');
    });
  });
})();

/* ─────────────────────────────────────────────────────
   RESIZE: close mobile menu if viewport grows
   ───────────────────────────────────────────────────── */
window.addEventListener('resize', () => {
  if (window.innerWidth >= 1024) {
    closeMobileMenu();
  }
});

/* ─────────────────────────────────────────────────────
   NOTICE TICKER (optional — placeholder data)
   ───────────────────────────────────────────────────── */
(function initNoticeBar() {
  // Could be populated from an API call; currently no-op
})();

/* ─────────────────────────────────────────────────────
   FLASH NEWS TICKER
   - Duplicates track content for seamless infinite loop
   - Pause / play button toggles animation
   ───────────────────────────────────────────────────── */
(function initFlashTicker() {
  const track    = document.getElementById('flashTrack');
  const pauseBtn = document.getElementById('flashPauseBtn');
  const pauseIcon = document.getElementById('flashPauseIcon');

if (!track) return;

// Duplicate inner HTML so the scroll loops seamlessly
  track.innerHTML += track.innerHTML;

let paused = false;

if (pauseBtn) {
    pauseBtn.addEventListener('click', () => {
      paused = !paused;
      track.style.animationPlayState = paused ? 'paused' : 'running';
      pauseIcon.className = paused ? 'bi bi-play-fill' : 'bi bi-pause-fill';
      pauseBtn.setAttribute('aria-label', paused ? 'Play ticker' : 'Pause ticker');
    });
  }

// Pause on hover (already handled by CSS :hover, this is belt-and-suspenders)
  track.addEventListener('mouseenter', () => {
    if (!paused) track.style.animationPlayState = 'paused';
  });
  track.addEventListener('mouseleave', () => {
    if (!paused) track.style.animationPlayState = 'running';
  });
})();

// Hero text carousel — right to left
(function () {
  const slides = document.querySelectorAll('.hero-slide');
  const dots   = document.querySelectorAll('.hero-slide-dot');
  if (!slides.length) return;

let current = 0;
  let timer   = null;
  let animating = false;

function goTo(i) {
    if (animating || i === current) return;
    animating = true;

const prev = current;
    current = i % slides.length;

// Exit: slide current out to the left
    slides[prev].classList.add('exit');
    slides[prev].classList.remove('active');

// Enter: slide next in from the right
    slides[current].classList.add('active');

dots.forEach((d, idx) => d.classList.toggle('active', idx === current));

// Clean up exit class after transition ends
    setTimeout(() => {
      slides[prev].classList.remove('exit');
      animating = false;
    }, 680);
  }

function next() { goTo((current + 1) % slides.length); }
  function start() { timer = setInterval(next, 4500); }
  function stop()  { clearInterval(timer); }

dots.forEach((dot, i) => {
    dot.addEventListener('click', () => { goTo(i); stop(); start(); });
  });

const heroText = document.querySelector('.hero-text');
  if (heroText) {
    heroText.addEventListener('mouseenter', stop);
    heroText.addEventListener('mouseleave', start);
  }

start();
})();

İptal