`public/hero-4grid.js`

113 lines
/**
 * hero-4grid.js — universal 2×2 rotating hero for DW-family sites.
 *
 * What it does:
 *   - Fetches /data/hero-4grid.json on load
 *   - Switches the hero to 4-square mode (data-hero-mode="four-square")
 *   - Paints 4 cells with the configured images
 *   - Auto-cycles each cell every N seconds, rotating through the pool
 *   - Applies object-fit: cover; object-position: center 12% to ENFORCE
 *     the "never show image with header" rule
 *
 * Drop-in:  <script src="/hero-4grid.js" defer></script>
 *
 * Per-site override: set window.Hero4GridConfig = { url, autocycle } before load.
 */
(function () {
  'use strict';
  if (window.__hero4GridLoaded) return;
  window.__hero4GridLoaded = true;

  var CFG = window.Hero4GridConfig || {};
  var URL = CFG.url || '/hero-4grid.json';

  function inject(cellEls, grid) {
    // Switch hero mode
    document.documentElement.dataset.heroMode = 'four-square';
    var cinema = document.querySelector('.cinema');
    if (!cinema) return;
    // Build .cinema-grid if absent
    var gridEl = cinema.querySelector('.cinema-grid');
    if (!gridEl) {
      gridEl = document.createElement('div');
      gridEl.className = 'cinema-grid';
      cinema.appendChild(gridEl);
    }
    gridEl.innerHTML = '';
    for (var i = 0; i < 4; i++) {
      var cell = document.createElement('div');
      cell.className = 'cell hero4-cell';
      cell.dataset.idx = i;
      gridEl.appendChild(cell);
    }
    // Anti-header crop CSS — applied via inline so it ALWAYS wins
    var style = document.createElement('style');
    style.id = 'hero4-crop';
    // Self-contained: inject the 2×2 LAYOUT too (not just the crop), so the grid
    // works on any site that has the <script> tag even if its index.html never
    // shipped .cinema-grid CSS. Hides the single .cinema-bg only once four-square
    // mode is actually active (set in inject()), so a fetch failure keeps the
    // static hero. Appended last → wins over any per-site .cinema-grid at equal
    // specificity; identical values so sites that DO define it are unaffected.
    style.textContent =
      '.cinema-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;z-index:0;}' +
      '.hero4-cell{width:100%;height:100%;background-size:cover !important;background-position:center 12% !important;background-repeat:no-repeat;transition:opacity 600ms ease;}' +
      '.hero4-cell.swap-out{opacity:0;}' +
      '[data-hero-mode="four-square"] .cinema-bg{display:none !important;}';
    document.head.appendChild(style);

    paint(grid);
    if (grid.rotation_pool && grid.rotation_pool.length > 4) {
      startRotation(grid);
    }
  }

  function paint(grid) {
    var cells = document.querySelectorAll('.hero4-cell');
    for (var i = 0; i < cells.length; i++) {
      var c = grid.cells[i];
      if (c && c.image_url) {
        cells[i].style.backgroundImage = "url('" + c.image_url + "')";
        cells[i].title = c.title || '';
      }
    }
  }

  function startRotation(grid) {
    var sec = Number(grid.autocycle_seconds) || 6;
    var pool = grid.rotation_pool.slice();
    // Index per cell — start with the next image after the initial 4
    var nextIdx = [4 % pool.length, 5 % pool.length, 6 % pool.length, 7 % pool.length];
    var cellIdx = 0;
    setInterval(function () {
      if (document.hidden) return; // pause when tab hidden
      var cells = document.querySelectorAll('.hero4-cell');
      var cell = cells[cellIdx];
      if (!cell) return;
      var next = pool[nextIdx[cellIdx] % pool.length];
      if (!next || !next.image_url) { cellIdx = (cellIdx + 1) % 4; return; }
      // Preload then swap
      var pre = new Image();
      pre.onload = function () {
        cell.classList.add('swap-out');
        setTimeout(function () {
          cell.style.backgroundImage = "url('" + next.image_url + "')";
          cell.title = next.title || '';
          cell.classList.remove('swap-out');
        }, 600);
      };
      pre.src = next.image_url;
      nextIdx[cellIdx] = (nextIdx[cellIdx] + 4) % pool.length;
      cellIdx = (cellIdx + 1) % 4;
    }, sec * 1000);
  }

  fetch(URL, { credentials: 'same-origin' })
    .then(function (r) { return r.ok ? r.json() : null; })
    .then(function (grid) {
      if (!grid || !grid.cells || !Array.isArray(grid.cells)) return;
      inject(null, grid);
    })
    .catch(function (e) { console.warn('[hero-4grid] fetch failed:', e); });
})();