xtu_mall/public/assets/xtu/show-product.js

(function () {
  var modal = document.getElementById('showProductVideoModal');
  if (modal) {
    var player = modal.querySelector('.show-product-video-modal__player');
    var openButton = document.querySelector('.js-product-video-open');
    var closeTriggers = modal.querySelectorAll('[data-product-modal-close]');

    function closeModal() {
      modal.hidden = true;
      if (player) {
        player.pause();
        player.removeAttribute('src');
        player.load();
      }
      document.body.classList.remove('is-product-video-open');
    }

    if (openButton && player) {
      openButton.addEventListener('click', function () {
        var src = openButton.getAttribute('data-video');
        if (!src) return;
        player.setAttribute('src', src);
        modal.hidden = false;
        document.body.classList.add('is-product-video-open');
        player.play().catch(function () {});
      });
    }

    closeTriggers.forEach(function (node) {
      node.addEventListener('click', closeModal);
    });

    document.addEventListener('keydown', function (event) {
      if (event.key === 'Escape' && !modal.hidden) {
        closeModal();
      }
    });
  }

  var stageThreeSections = document.querySelectorAll('.js-spx-stage-three');
  var stageNineSections = document.querySelectorAll('.js-stage-nine');
  var stageSixSliders = document.querySelectorAll('.js-stage-six-slider');
  var stageEightTabs = document.querySelectorAll('.js-stage-eight-tabs');
  var stageTenSections = document.querySelectorAll('.js-stage-ten');

  function clamp(value, min, max) {
    return Math.min(Math.max(value, min), max);
  }

  function updateStageThreeState() {
    stageThreeSections.forEach(function (section) {
      var rect = section.getBoundingClientRect();
      var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
      var stickyBlock = section.querySelector('.spx-stage-three-copy-switch');
      var titleLayer = section.querySelector('.spx-stage-three-title-layer');
      var stickyHeight = stickyBlock ? stickyBlock.offsetHeight : 116;
      var titleHeight = titleLayer ? titleLayer.offsetHeight : stickyHeight;
      var titleCenterOffset = Math.max((stickyHeight - titleHeight) / 2, 0);
      var stickyTop = viewportHeight / 2 - stickyHeight / 2;
      var titleCenterY = rect.top + stickyTop + titleCenterOffset + titleHeight / 2;
      var startY = viewportHeight * 0.8;
      var availableDistance = Math.max(section.offsetHeight - stickyTop - stickyHeight - viewportHeight * 0.12, 1);
      var progress = clamp((startY - titleCenterY) / availableDistance, 0, 1);
      var fadeProgress = clamp((progress - 0.005) / 0.14, 0, 1);

      section.classList.toggle('is-text-visible', fadeProgress > 0.5);
      section.style.setProperty('--spx-stage-three-title-opacity', String(1 - fadeProgress));
      section.style.setProperty('--spx-stage-three-title-shift', (fadeProgress * -18).toFixed(2) + 'px');
      section.style.setProperty('--spx-stage-three-text-opacity', String(fadeProgress));
      section.style.setProperty('--spx-stage-three-text-shift', ((1 - fadeProgress) * 18).toFixed(2) + 'px');
    });
  }

  function updateStageNineState() {
    stageNineSections.forEach(function (section) {
      var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
      var nextStage = section.nextElementSibling;
      var fadeProgress = 0;

      if (nextStage) {
        var nextRect = nextStage.getBoundingClientRect();
        fadeProgress = clamp((viewportHeight - nextRect.top) / Math.max(viewportHeight * 0.72, 1), 0, 1);
      }

      section.style.setProperty('--spx-nine-media-opacity', (1 - fadeProgress).toFixed(4));

      var media = section.querySelector('.spx-stage-nine-media');
      if (!media) return;
      var video = media.querySelector('video');
      if (!video || video.hasAttribute('data-played')) return;

      var rect = section.getBoundingClientRect();
      var isInViewport = rect.top < viewportHeight && rect.bottom > 0;
      if (!isInViewport) return;

      video.play().then(function () {
        video.setAttribute('data-played', 'true');
        video.addEventListener('ended', function () {
          video.pause();
        }, { once: true });
      }).catch(function () {});
    });
  }

  function initStageTen() {
    stageTenSections.forEach(function (section) {
      var tabs = section.querySelectorAll('[data-stage-ten-tab]');
      var panels = section.querySelectorAll('[data-stage-ten-panel]');
      var soundEnabled = false;
      if (!tabs.length || !panels.length) return;

      function syncSoundButton(video, soundButton) {
        if (!video || !soundButton) return;
        var active = !video.muted;
        soundButton.classList.toggle('is-active', active);
        soundButton.setAttribute('aria-label', active ? '关闭声音' : '开启声音');
        soundButton.innerHTML = active
          ? '<i class="bi bi-volume-up-fill" aria-hidden="true"></i>'
          : '<i class="bi bi-volume-mute-fill" aria-hidden="true"></i>';
      }

      function syncVideo(panel, active) {
        var video = panel.querySelector('.spx-stage-ten-video');
        var soundButton = panel.querySelector('[data-stage-ten-sound]');
        if (!video) return;
        if (active) {
          video.muted = !soundEnabled;
          syncSoundButton(video, soundButton);
          video.play().catch(function () {});
        } else {
          video.pause();
          video.currentTime = 0;
          video.muted = true;
          syncSoundButton(video, soundButton);
        }
      }

      function setActive(index) {
        tabs.forEach(function (tab, i) {
          var active = i === index;
          tab.classList.toggle('is-active', active);
          tab.setAttribute('aria-selected', active ? 'true' : 'false');
        });

        panels.forEach(function (panel, i) {
          var active = i === index;
          panel.classList.toggle('is-active', active);
          syncVideo(panel, active);
        });
      }

      tabs.forEach(function (tab, index) {
        tab.addEventListener('click', function () {
          setActive(index);
        });
      });

      panels.forEach(function (panel) {
        var soundButton = panel.querySelector('[data-stage-ten-sound]');
        var video = panel.querySelector('.spx-stage-ten-video');
        if (!soundButton || !video) return;

        syncSoundButton(video, soundButton);

        soundButton.addEventListener('click', function () {
          soundEnabled = video.muted;
          video.muted = !soundEnabled;
          syncSoundButton(video, soundButton);
          if (video.paused) {
            video.play().catch(function () {});
          }
        });
      });

      setActive(0);
    });
  }

  function initRevealAnimations() {
    var revealNodes = document.querySelectorAll('.spx-reveal');
    if (!revealNodes.length) return;

    function revealInViewNodes() {
      var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
      revealNodes.forEach(function (node) {
        if (node.classList.contains('is-visible')) return;
        var rect = node.getBoundingClientRect();
        if (rect.top <= viewportHeight * 0.92 && rect.bottom >= viewportHeight * 0.08) {
          node.classList.add('is-visible');
        }
      });
    }

    if (!('IntersectionObserver' in window)) {
      revealNodes.forEach(function (node) {
        node.classList.add('is-visible');
      });
      return;
    }

    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      });
    }, {
      threshold: 0.12,
      rootMargin: '0px 0px -6% 0px'
    });

    revealNodes.forEach(function (node) {
      observer.observe(node);
    });

    revealInViewNodes();
    window.addEventListener('load', revealInViewNodes, { once: true });
    window.addEventListener('resize', revealInViewNodes);
    window.addEventListener('scroll', revealInViewNodes, { passive: true });
  }

  function initStageEighteenModal() {
    var modal = document.getElementById('stageEighteenModal');
    if (!modal) return;

    var triggers = document.querySelectorAll('[data-stage-eighteen-trigger]');
    var panels = modal.querySelectorAll('[data-stage-eighteen-panel]');
    var closeTriggers = modal.querySelectorAll('[data-stage-eighteen-close]');
    if (!triggers.length || !panels.length) return;

    function setActivePanel(id) {
      panels.forEach(function (panel) {
        panel.classList.toggle('is-active', panel.getAttribute('data-stage-eighteen-panel') === id);
      });
    }

    function openModal(id) {
      setActivePanel(id);
      modal.hidden = false;
      document.body.classList.add('is-product-video-open');
    }

    function closeModal() {
      modal.hidden = true;
      document.body.classList.remove('is-product-video-open');
    }

    triggers.forEach(function (trigger) {
      trigger.addEventListener('click', function () {
        var id = trigger.getAttribute('data-stage-eighteen-trigger');
        if (!id) return;
        openModal(id);
      });
    });

    closeTriggers.forEach(function (node) {
      node.addEventListener('click', closeModal);
    });

    document.addEventListener('keydown', function (event) {
      if (event.key === 'Escape' && !modal.hidden) {
        closeModal();
      }
    });
  }

  if (stageThreeSections.length) {
    updateStageThreeState();
  }
  updateStageNineState();
  initStageTen();
  initRevealAnimations();
  initStageEighteenModal();
  window.addEventListener('scroll', function () {
    if (stageThreeSections.length) {
      updateStageThreeState();
    }
    updateStageNineState();
  }, { passive: true });
  window.addEventListener('resize', function () {
    if (stageThreeSections.length) {
      updateStageThreeState();
    }
    updateStageNineState();
  });

  stageSixSliders.forEach(function (slider) {
    var slides = slider.querySelectorAll('.spx-stage-six-slide');
    var dots = slider.querySelectorAll('[data-stage-six-dot]');
    var prevButton = slider.querySelector('[data-stage-six-prev]');
    var nextButton = slider.querySelector('[data-stage-six-next]');
    if (!slides.length) return;

    var activeIndex = 0;
    var timer = null;

    function setActive(index) {
      activeIndex = (index + slides.length) % slides.length;
      slides.forEach(function (slide, i) {
        slide.classList.toggle('is-active', i === activeIndex);
        slide.setAttribute('aria-hidden', i === activeIndex ? 'false' : 'true');
      });
      dots.forEach(function (dot, i) {
        var active = i === activeIndex;
        dot.classList.toggle('is-active', active);
        dot.setAttribute('aria-current', active ? 'true' : 'false');
      });
    }

    function start() {
      if (slides.length < 2) return;
      stop();
      timer = window.setInterval(function () {
        setActive(activeIndex + 1);
      }, 4200);
    }

    function stop() {
      if (timer) {
        window.clearInterval(timer);
        timer = null;
      }
    }

    dots.forEach(function (dot) {
      dot.addEventListener('click', function () {
        var index = Number(dot.getAttribute('data-stage-six-dot') || 0);
        setActive(index);
        start();
      });
    });

    if (prevButton) {
      prevButton.addEventListener('click', function () {
        setActive(activeIndex - 1);
        start();
      });
    }

    if (nextButton) {
      nextButton.addEventListener('click', function () {
        setActive(activeIndex + 1);
        start();
      });
    }

    slider.addEventListener('mouseenter', stop);
    slider.addEventListener('mouseleave', start);
    slider.addEventListener('focusin', stop);
    slider.addEventListener('focusout', start);

    setActive(0);
    start();
  });

  stageEightTabs.forEach(function (block) {
    var tabs = block.querySelectorAll('[data-stage-eight-tab]');
    var panels = block.querySelectorAll('[data-stage-eight-panel]');
    var contents = block.querySelectorAll('[data-stage-eight-content]');
    if (!tabs.length) return;

    function setActive(index) {
      tabs.forEach(function (tab, i) {
        var active = i === index;
        tab.classList.toggle('is-active', active);
        tab.setAttribute('aria-selected', active ? 'true' : 'false');
      });
      panels.forEach(function (panel, i) {
        panel.classList.toggle('is-active', i === index);
      });
      contents.forEach(function (content, i) {
        content.classList.toggle('is-active', i === index);
      });
    }

    tabs.forEach(function (tab, index) {
      tab.addEventListener('click', function () {
        setActive(index);
      });
    });

    setActive(0);
  });

  document.querySelectorAll('.js-stage-eleven').forEach(function (section) {
    var tabs = section.querySelectorAll('[data-stage-eleven-tab]');
    var panels = section.querySelectorAll('[data-stage-eleven-panel]');
    if (!tabs.length || !panels.length) return;

    function syncPanelMedia(panel, active) {
      var video = panel.querySelector('.spx-stage-eleven-video');
      if (!video) return;
      if (active) {
        video.play().catch(function () {});
      } else {
        video.pause();
        video.currentTime = 0;
      }
    }

    function setActive(index) {
      tabs.forEach(function (tab, i) {
        var active = i === index;
        tab.classList.toggle('is-active', active);
        tab.setAttribute('aria-selected', active ? 'true' : 'false');
      });

      panels.forEach(function (panel, i) {
        var active = i === index;
        panel.classList.toggle('is-active', active);
        syncPanelMedia(panel, active);
      });
    }

    tabs.forEach(function (tab, index) {
      tab.addEventListener('click', function () {
        setActive(index);
      });
    });

    setActive(0);
  });
})();