daw/js/studio.js

// Studio page — vanilla fade-carousel + tab sync + per-slide choreography.
// Replaces Bootstrap Carousel/Tab, jQuery, and backstretch. Keeps DrawFillSVG
// (window.DrawFillSVG, self-exposed from the v4-script bundle).

// --- shared chrome: navbar hide/show on scroll (ported from jQuery dw_hidenav) ---
(function () {
  const navbar = document.querySelector('.navbar');
  if (!navbar) return;
  const title = document.querySelector('.site-title a');
  const headerHeight = navbar.offsetHeight;
  let previousTop = 0;
  window.addEventListener('scroll', function () {
    const currentTop = window.scrollY;
    if (currentTop < previousTop) {
      if (currentTop > 0 && navbar.classList.contains('fixed')) {
        navbar.classList.add('visible');
        if (title) title.classList.remove('light');
      } else {
        navbar.classList.remove('visible', 'fixed');
        if (title) title.classList.add('light');
      }
    } else {
      navbar.classList.remove('visible');
      if (currentTop > headerHeight && !navbar.classList.contains('fixed')) {
        navbar.classList.add('fixed');
      }
    }
    previousTop = currentTop;
  }, { passive: true });
})();

document.querySelectorAll('.nav-toggle').forEach(function (el) {
  el.addEventListener('click', function (e) {
    e.preventDefault();
    el.classList.toggle('active');
  });
});

// --- studio fade-carousel ---
(function () {
  const stage = document.getElementById('studio-caro');
  const caro = document.getElementById('caro');
  if (!stage || !caro) return;

  const slides = Array.from(caro.querySelectorAll('.dw-fade-slide'));
  const tabs = Array.from(document.querySelectorAll('.dw-studio-tab'));
  const panes = Array.from(document.querySelectorAll('#studio-tab .tab-pane'));
  const bg = stage.querySelector('.dw-studio-bg');
  const video = stage.querySelector('.dw-studio-video'); // camera → Media slide
  const tv = stage.querySelector('.dw-studio-tv');       // grayscale → fact intro
  const title = document.querySelector('.site-title a');

  const GRADS = ['caro-grad', 'caro-grad2', 'caro-grad3', 'caro-grad5'];
  // per slide: gradient class · background image · show video · navbar-title light
  // Slides 0-2 are the fact intro (from About); 3-8 are the tabbed sections.
  const CONFIG = [
    { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 0 fact: web sites
    { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 1 fact: stars
    { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 2 fact: brain
    { grad: 'caro-grad5', img: stage.dataset.bg0 || null, video: false, light: true  }, // 3 Studio
    { grad: 'caro-grad',  img: null,                      video: false, light: true  }, // 4 Web
    { grad: 'caro-grad2', img: null,                      video: false, light: true  }, // 5 UX
    { grad: 'caro-grad3', img: null,                      video: false, light: false }, // 6 Graphic
    { grad: 'caro-grad5', img: null,                      video: true,  light: true  }, // 7 Media
    { grad: 'caro-grad5', img: stage.dataset.bg5 || null, video: false, light: true  }, // 8 Art
  ];
  const INTERVAL = 5000;

  let index = 0;
  let timer = null;

  function drawSVGs(slide) {
    if (!window.DrawFillSVG) return;
    slide.querySelectorAll('svg[id]').forEach(function (svg) {
      try {
        new window.DrawFillSVG({ elementId: svg.id }).replay();
      } catch (e) {
        /* svg not animatable — skip */
      }
    });
  }

  function activate(i) {
    i = (i + slides.length) % slides.length;
    index = i;
    const cfg = CONFIG[i];

    slides.forEach((s, n) => {
      const on = n === i;
      s.classList.toggle('active', on);
      // reveal the active slide's hidden content (.animac.hide-svg, #brain.hide-svg …)
      if (on) s.querySelectorAll('.hide-svg').forEach((el) => el.classList.remove('hide-svg'));
    });
    // activate the tab (+ its panel) that targets this slide, if any.
    // The fact intro slides (0-2) have no tab → leave the panels as they were.
    const tabIndex = tabs.findIndex((t) => parseInt(t.dataset.slide, 10) === i);
    if (tabIndex >= 0) {
      tabs.forEach((t, n) => t.classList.toggle('active', n === tabIndex));
      panes.forEach((p, n) => p.classList.toggle('active', n === tabIndex));
    }

    GRADS.forEach((g) => stage.classList.remove(g));
    stage.classList.add(cfg.grad);

    if (bg) bg.style.backgroundImage = cfg.img ? 'url("' + cfg.img + '")' : '';
    if (video) {
      if (cfg.video) {
        video.style.display = 'block';
        video.play().catch(function () {});
      } else {
        video.pause();
        video.style.display = 'none';
      }
    }
    if (tv) {
      if (cfg.tv) {
        tv.style.display = 'block';
        tv.play().catch(function () {});
      } else {
        tv.pause();
        tv.style.display = 'none';
      }
    }

    if (title) title.classList.toggle('light', cfg.light);

    drawSVGs(slides[i]);
  }

  function next() { activate(index + 1); }
  function start() { stop(); timer = window.setInterval(next, INTERVAL); }
  function stop() { if (timer) { window.clearInterval(timer); timer = null; } }

  tabs.forEach(function (t) {
    t.addEventListener('click', function (e) {
      e.preventDefault();
      activate(parseInt(t.dataset.slide, 10) || 0);
      start(); // restart the autoplay clock after manual navigation
    });
  });

  // pause autoplay while the pointer is over the hero
  stage.addEventListener('mouseenter', stop);
  stage.addEventListener('mouseleave', start);

  activate(0);
  start();
})();