xtu_mall/public/assets/xtu/about.js

document.body.classList.add('about-nav-light');
(function () {
  var siteHeader = document.getElementById('siteHeader');
  var siteLogoImg = document.getElementById('siteLogoImg');
  var links = Array.prototype.slice.call(document.querySelectorAll('.about-side-link'));
  var panels = Array.prototype.slice.call(document.querySelectorAll('.about-panel[data-panel]'));
  var accordions = Array.prototype.slice.call(document.querySelectorAll('.about-inline-accordion'));

  function syncAboutHeader() {
    if (!siteHeader) return;
    siteHeader.classList.remove('hero-theme-light');
    siteHeader.classList.add('hero-theme-dark', 'page-navbar-solid');
  }

  if (siteHeader) {
    syncAboutHeader();
    if (siteLogoImg) {
      var darkLogo = siteLogoImg.getAttribute('data-logo-dark');
      if (darkLogo) siteLogoImg.src = darkLogo;
    }
    window.addEventListener('scroll', syncAboutHeader, { passive: true });
    document.addEventListener('DOMContentLoaded', syncAboutHeader);
  }

  function setActiveLink(id) {
    links.forEach(function (link) {
      var active = link.getAttribute('data-target') === id;
      link.classList.toggle('is-active', active);
      if (active) link.setAttribute('aria-current', 'true');
      else link.removeAttribute('aria-current');
    });
    panels.forEach(function (panel) {
      panel.classList.toggle('is-active', panel.getAttribute('data-panel') === id);
    });
  }

  links.forEach(function (link) {
    link.addEventListener('click', function (event) {
      event.preventDefault();
      var targetId = link.getAttribute('data-target');
      var targetEl = targetId ? document.getElementById(targetId) : null;
      if (targetEl) {
        targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
        setActiveLink(targetId);
      }
    });
  });

  if ('IntersectionObserver' in window && panels.length) {
    var observer = new IntersectionObserver(function (entries) {
      var visible = entries.filter(function (entry) { return entry.isIntersecting; }).sort(function (a, b) { return b.intersectionRatio - a.intersectionRatio; });
      if (visible.length) setActiveLink(visible[0].target.getAttribute('data-panel'));
    }, { threshold: [0.35, 0.5, 0.68, 0.85], rootMargin: '-16% 0px -22% 0px' });
    panels.forEach(function (panel) { observer.observe(panel); });
  } else if (panels.length) {
    var onScroll = function () {
      var current = panels[0];
      var marker = window.innerHeight * 0.42;
      panels.forEach(function (panel) {
        var rect = panel.getBoundingClientRect();
        if (rect.top <= marker && rect.bottom >= marker) current = panel;
      });
      if (current) setActiveLink(current.getAttribute('data-panel'));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  }

  function initAccordion(accordion) {
    var stageButtons = Array.prototype.slice.call(accordion.querySelectorAll('.about-accordion-year'));
    var stagePanels = Array.prototype.slice.call(accordion.querySelectorAll('.about-stage-panel[data-stage-panel]'));
    var stageItems = Array.prototype.slice.call(accordion.querySelectorAll('.about-inline-accordion-item[data-accordion-item], .about-inline-accordion-item'));

    function setActiveStage(targetId) {
      if (!targetId) return;
      stageButtons.forEach(function (button) {
        button.classList.toggle('is-active', button.getAttribute('data-stage-target') === targetId);
      });
      stagePanels.forEach(function (panel) {
        panel.classList.toggle('is-active', panel.id === targetId);
      });
      stageItems.forEach(function (item) {
        var button = item.querySelector('.about-accordion-year');
        var active = button && button.getAttribute('data-stage-target') === targetId;
        item.classList.toggle('is-active', !!active);
      });
    }

    stageButtons.forEach(function (button) {
      button.addEventListener('click', function () {
        setActiveStage(button.getAttribute('data-stage-target'));
      });
    });

    if (stageButtons.length) {
      setActiveStage(stageButtons[0].getAttribute('data-stage-target'));
    }
  }

  accordions.forEach(initAccordion);

  Array.prototype.slice.call(document.querySelectorAll('[data-stage-slider]')).forEach(function (slider) {
    var slides = Array.prototype.slice.call(slider.querySelectorAll('[data-stage-slide]'));
    var prevBtn = slider.querySelector('.about-stage-arrow-prev');
    var nextBtn = slider.querySelector('.about-stage-arrow-next');
    var index = 0;

    slides.forEach(function (slide, i) {
      slide.hidden = false;
      slide.classList.toggle('is-active', i === 0);
    });

    function render(direction) {
      slides.forEach(function (slide, slideIndex) {
        slide.classList.remove('is-active', 'is-leaving-left', 'is-leaving-right', 'is-entering-left', 'is-entering-right');
        if (slideIndex === index) {
          if (direction === 'prev') slide.classList.add('is-entering-left');
          if (direction === 'next') slide.classList.add('is-entering-right');
          requestAnimationFrame(function () {
            slide.classList.add('is-active');
            slide.classList.remove('is-entering-left', 'is-entering-right');
          });
        }
      });
      var single = slides.length <= 1;
      prevBtn.disabled = single;
      nextBtn.disabled = single;
      prevBtn.style.display = single ? 'none' : 'flex';
      nextBtn.style.display = single ? 'none' : 'flex';
    }

    prevBtn.addEventListener('click', function () {
      if (slides.length <= 1) return;
      slides[index].classList.add('is-leaving-right');
      index = (index - 1 + slides.length) % slides.length;
      render('prev');
    });

    nextBtn.addEventListener('click', function () {
      if (slides.length <= 1) return;
      slides[index].classList.add('is-leaving-left');
      index = (index + 1) % slides.length;
      render('next');
    });

    render();
  });

  if (panels.length) {
    setActiveLink(panels[0].getAttribute('data-panel'));
  }
})();