MediaWiki:Common.js: Difference between revisions

Revision as of 17:59, 19 February 2026

/* GameInfo JS (Phase 4.1)
   Shared, reusable behaviors for all GameInfo modules. */

(function () {
  if (window.SV_GAMEINFO_41_INIT) return;
  window.SV_GAMEINFO_41_INIT = 1;

  /* ------------------------------------------------------------------ */
  /* Selectors                                                          */
  /* ------------------------------------------------------------------ */

  var CARD_SEL = ".sv-gi-card, .sv-skill-card, .sv-passive-card";

  // Level
  var LEVEL_RANGE_SEL = "input.sv-level-range[type='range']";
  var LEVEL_BOUNDARY_SEL = ".sv-skill-level, .sv-gi-level";
  var LEVEL_SCOPE_SEL = ".sv-gi-bottom, .sv-skill-bottom";
  var SERIES_SEL = "[data-series]";

  // Popups (Phase 4.1 markup: span toggles + div popovers)
  var POPUP_WRAP_SEL = ".sv-tip, .sv-disclose";
  var POPUP_BTN_SEL =
    ".sv-tip-btn[data-sv-toggle='1'], .sv-disclose-btn[data-sv-toggle='1']";
  var POPUP_POP_SEL = ".sv-tip-pop, .sv-disclose-pop";
  var POPUP_HEAD_SEL = ".sv-tip-pop-head, .sv-disclose-pop-head";
  var POPUP_HIDDEN_CLASS = "sv-hidden";

  // Tabs
  var TABS_ROOT_SEL = ".sv-tabs[data-tabs='1']";
  var TAB_SEL = ".sv-tab";
  var PANEL_SEL = ".sv-tabpanel";

  /* ------------------------------------------------------------------ */
  /* Internals                                                          */
  /* ------------------------------------------------------------------ */

  var _seriesCache = typeof WeakMap !== "undefined" ? new WeakMap() : null;
  var _tabsUidCounter = 0;

  /* ------------------------------------------------------------------ */
  /* Utilities                                                          */
  /* ------------------------------------------------------------------ */

  function clampInt(value, min, max, fallback) {
    var n = parseInt(value, 10);
    if (isNaN(n)) n = fallback != null ? fallback : min;
    if (n < min) return min;
    if (n > max) return max;
    return n;
  }

  function closest(el, sel) {
    if (!el || el.nodeType !== 1) return null;
    if (el.closest) return el.closest(sel);
    while (el && el.nodeType === 1) {
      if (el.matches && el.matches(sel)) return el;
      el = el.parentElement;
    }
    return null;
  }

  function hasClass(el, cls) {
    return !!(el && el.classList && el.classList.contains(cls));
  }

  function parseSeries(el) {
    if (!el) return null;

    if (_seriesCache) {
      if (_seriesCache.has(el)) return _seriesCache.get(el);
    } else if (el._svSeries !== undefined) {
      return el._svSeries;
    }

    var raw = el.getAttribute("data-series");
    var parsed = null;

    if (raw != null && raw !== "") {
      try {
        parsed = JSON.parse(raw);
        if (!Array.isArray(parsed)) parsed = null;
      } catch (e) {
        parsed = null;
      }
    }

    if (_seriesCache) _seriesCache.set(el, parsed);
    else el._svSeries = parsed;

    return parsed;
  }

  function isAfter(boundaryNode, el) {
    if (!boundaryNode || !el) return true;
    if (boundaryNode === el) return false;
    if (!boundaryNode.compareDocumentPosition) return true;
    return (boundaryNode.compareDocumentPosition(el) & 4) !== 0; // following
  }

  /* ------------------------------------------------------------------ */
  /* Level Selector                                                     */
  /* ------------------------------------------------------------------ */

  function getCardMaxLevel(card) {
    return clampInt(card.getAttribute("data-max-level"), 1, 999, 1);
  }

  function getCardLevel(card, maxLevel) {
    return clampInt(card.getAttribute("data-level"), 1, maxLevel, 1);
  }

  function getLevelSlider(card) {
    return card.querySelector(LEVEL_RANGE_SEL);
  }

  function getLevelBoundary(slider) {
    return closest(slider, LEVEL_BOUNDARY_SEL) || slider;
  }

  function getLevelScopeContainer(card, boundary) {
    var scope = card.querySelector(LEVEL_SCOPE_SEL) || card;
    if (boundary && scope !== card && !scope.contains(boundary)) return card;
    return scope;
  }

  function setLevelNumber(card, level) {
    var span = card.querySelector(".sv-level-num");
    if (span) span.textContent = String(level);
  }

  function applySeriesToScope(scope, boundary, level) {
    var index = level - 1;
    var nodes = scope.querySelectorAll(SERIES_SEL);

    for (var i = 0; i < nodes.length; i++) {
      var el = nodes[i];

      // Phase 4.1 rule: only update fields below the level boundary.
      if (!isAfter(boundary, el)) continue;

      var series = parseSeries(el);
      if (!series || series.length === 0) continue;

      // Clamp if series shorter than expected.
      var safeIndex = index;
      if (safeIndex >= series.length) safeIndex = series.length - 1;
      if (safeIndex < 0) safeIndex = 0;

      var value = series[safeIndex];
      if (value == null) value = "";

      // Text-only (no HTML mode).
      el.textContent = String(value);
    }
  }

  function applyLevelToCard(card, rawLevel) {
    if (!card) return;

    var maxLevel = getCardMaxLevel(card);
    if (maxLevel <= 1) {
      card.setAttribute("data-level", "1");
      setLevelNumber(card, 1);
      return;
    }

    var slider = getLevelSlider(card);
    var level = clampInt(rawLevel, 1, maxLevel, getCardLevel(card, maxLevel));

    // Store on card for other systems / debugging.
    card.setAttribute("data-level", String(level));

    // Keep slider in sync.
    if (slider) {
      slider.setAttribute("min", "1");
      slider.setAttribute("max", String(maxLevel));
      if (String(slider.value) !== String(level)) slider.value = String(level);
    }

    setLevelNumber(card, level);

    // Apply dynamic series values (scoped below boundary).
    if (slider) {
      var boundary = getLevelBoundary(slider);
      var scope = getLevelScopeContainer(card, boundary);
      applySeriesToScope(scope, boundary, level);
    }
  }

  function initLevels(root) {
    var container = root || document;
    var cards = container.querySelectorAll(CARD_SEL);

    for (var i = 0; i < cards.length; i++) {
      var card = cards[i];
      if (card.getAttribute("data-gi-level-init") === "1") continue;

      var maxLevel = getCardMaxLevel(card);
      var slider = getLevelSlider(card);

      // No slider (or max <= 1) => this card doesn't participate.
      if (!slider || maxLevel <= 1) {
        card.setAttribute("data-gi-level-init", "1");
        continue;
      }

      var start = slider.value;
      if (start == null || start === "") start = getCardLevel(card, maxLevel);

      applyLevelToCard(card, start);
      card.setAttribute("data-gi-level-init", "1");
    }
  }

  // Slider input (delegated)
  document.addEventListener(
    "input",
    function (e) {
      var t = e.target;
      if (!t || t.nodeType !== 1) return;
      if (!t.matches || !t.matches(LEVEL_RANGE_SEL)) return;

      var card = closest(t, CARD_SEL);
      if (!card) return;

      applyLevelToCard(card, t.value);
    },
    true
  );

  /* ------------------------------------------------------------------ */
  /* Popup (Phase 4.1: span toggles + div popovers)                      */
  /* ------------------------------------------------------------------ */

  function hidePop(pop) {
    if (!pop) return;
    if (pop.classList) pop.classList.add(POPUP_HIDDEN_CLASS);
    pop.setAttribute("hidden", "hidden");
  }

  function showPop(pop) {
    if (!pop) return;
    if (pop.classList) pop.classList.remove(POPUP_HIDDEN_CLASS);
    pop.removeAttribute("hidden");
  }

  function getPopFromBtn(btn) {
    if (!btn) return null;
    var id = btn.getAttribute("aria-controls");
    if (!id) return null;

    var pop = document.getElementById(id);
    if (!pop) return null;

    // Prefer scoping to wrapper; prevents collisions if IDs ever repeat.
    var wrap = closest(btn, POPUP_WRAP_SEL);
    if (wrap && !wrap.contains(pop)) return null;

    return pop;
  }

  function isBtnExpanded(btn) {
    return btn && btn.getAttribute("aria-expanded") === "true";
  }

  function setBtnExpanded(btn, expanded) {
    if (!btn) return;
    btn.setAttribute("aria-expanded", expanded ? "true" : "false");
  }

  function closeBtnPopup(btn) {
    var pop = getPopFromBtn(btn);
    hidePop(pop);
    setBtnExpanded(btn, false);
  }

  function openBtnPopup(btn) {
    var pop = getPopFromBtn(btn);
    showPop(pop);
    setBtnExpanded(btn, true);
  }

  function closeAllBtnPopups(scope) {
    var root = scope || document;
    var openBtns = root.querySelectorAll(
      POPUP_BTN_SEL + "[aria-expanded='true']"
    );
    for (var i = 0; i < openBtns.length; i++) closeBtnPopup(openBtns[i]);
  }

  function closeOtherBtnPopupsWithinCard(btn) {
    var card = closest(btn, CARD_SEL);
    var scope = card || document;
    var openBtns = scope.querySelectorAll(
      POPUP_BTN_SEL + "[aria-expanded='true']"
    );
    for (var i = 0; i < openBtns.length; i++) {
      if (openBtns[i] !== btn) closeBtnPopup(openBtns[i]);
    }
  }

  function normalizeBtnPopups(container) {
    var root = container || document;

    // Ensure pop divs with sv-hidden are also [hidden] so they start hidden.
    var pops = root.querySelectorAll(POPUP_POP_SEL);
    for (var i = 0; i < pops.length; i++) {
      var p = pops[i];
      if (hasClass(p, POPUP_HIDDEN_CLASS) && !p.hasAttribute("hidden")) {
        p.setAttribute("hidden", "hidden");
      }
    }

    // Ensure aria-expanded matches actual visibility.
    var btns = root.querySelectorAll(POPUP_BTN_SEL);
    for (var j = 0; j < btns.length; j++) {
      var b = btns[j];
      var pop = getPopFromBtn(b);
      var expanded = pop
        ? !hasClass(pop, POPUP_HIDDEN_CLASS) && !pop.hasAttribute("hidden")
        : false;
      setBtnExpanded(b, expanded);
    }
  }

  // Click handling (delegated):
  // - clicking popup header closes
  // - clicking toggle button toggles
  // - clicking outside any wrapper closes all
  document.addEventListener(
    "click",
    function (e) {
      var t = e.target;
      if (!t) return;

      // 1) Header click closes its popup
      var head = t.closest ? t.closest(POPUP_HEAD_SEL) : null;
      if (head) {
        var wrap = closest(head, POPUP_WRAP_SEL);
        if (wrap) {
          var btn = wrap.querySelector(POPUP_BTN_SEL);
          if (btn) closeBtnPopup(btn);
        }
        e.preventDefault();
        return;
      }

      // 2) Button click toggles
      var btn =
        t.closest && t.closest(POPUP_BTN_SEL) ? t.closest(POPUP_BTN_SEL) : null;
      if (btn) {
        e.preventDefault();

        if (isBtnExpanded(btn)) {
          closeBtnPopup(btn);
          return;
        }

        closeOtherBtnPopupsWithinCard(btn);
        openBtnPopup(btn);
        return;
      }

      // 3) Click outside wrappers closes all
      if (!closest(t, POPUP_WRAP_SEL)) {
        closeAllBtnPopups(document);
      }
    },
    true
  );

  // Keyboard toggle (Enter/Space) + Escape closes all
  document.addEventListener(
    "keydown",
    function (e) {
      if (e.key === "Escape") {
        closeAllBtnPopups(document);
        return;
      }

      if (!(e.key === "Enter" || e.key === " " || e.key === "Spacebar"))
        return;

      var btn =
        document.activeElement && document.activeElement.closest
          ? document.activeElement.closest(POPUP_BTN_SEL)
          : null;
      if (!btn) return;

      e.preventDefault();

      if (isBtnExpanded(btn)) closeBtnPopup(btn);
      else {
        closeOtherBtnPopupsWithinCard(btn);
        openBtnPopup(btn);
      }
    },
    true
  );

  /* ------------------------------------------------------------------ */
  /* Tabs (Phase 4.1: key-based, uses .sv-hidden + [hidden])             */
  /* ------------------------------------------------------------------ */

  function getTabs(root) {
    return root.querySelectorAll(TAB_SEL);
  }

  function getPanels(root) {
    return root.querySelectorAll(PANEL_SEL);
  }

  function getPanelByKey(root, key) {
    var panels = getPanels(root);
    for (var i = 0; i < panels.length; i++) {
      if (panels[i].getAttribute("data-panel") === key) return panels[i];
    }
    return null;
  }

  function ensureUniqueTabIds(root) {
    // Per-root uid so multiple transclusions don't collide.
    var uid = root.getAttribute("data-tabs-uid");
    if (!uid) {
      _tabsUidCounter++;
      uid =
        (root.getAttribute("data-tabs-root") || "svgi-tabs") +
        "-" +
        _tabsUidCounter;
      root.setAttribute("data-tabs-uid", uid);
    }

    // Pair by key (stable for generated markup).
    var tabs = getTabs(root);
    for (var i = 0; i < tabs.length; i++) {
      var tab = tabs[i];
      var key = tab.getAttribute("data-tab") || String(i + 1);
      var panel = getPanelByKey(root, key);

      var tabId = uid + "-tab-" + key;
      tab.id = tabId;

      if (panel) {
        var panelId = uid + "-panel-" + key;
        panel.id = panelId;
        tab.setAttribute("aria-controls", panelId);
        panel.setAttribute("aria-labelledby", tabId);
      }
    }
  }

  function showPanel(panel) {
    if (!panel) return;
    panel.setAttribute("data-active", "1");
    if (panel.classList) panel.classList.remove("sv-hidden");
    panel.removeAttribute("hidden");
  }

  function hidePanel(panel) {
    if (!panel) return;
    panel.setAttribute("data-active", "0");
    if (panel.classList) panel.classList.add("sv-hidden");
    panel.setAttribute("hidden", "hidden");
  }

  function activateTab(root, btn) {
    if (!root || !btn) return;

    var tabs = getTabs(root);
    var key = btn.getAttribute("data-tab") || "";

    // Tabs
    for (var i = 0; i < tabs.length; i++) {
      var t = tabs[i];
      var active = t === btn;
      t.setAttribute("aria-selected", active ? "true" : "false");
      t.setAttribute("tabindex", active ? "0" : "-1");
      if (t.classList) t.classList.toggle("sv-tab--active", active);
    }

    // Panels
    var panels = getPanels(root);
    for (var j = 0; j < panels.length; j++) {
      var p = panels[j];
      var isTarget = p.getAttribute("data-panel") === key;
      if (isTarget) showPanel(p);
      else hidePanel(p);
    }

    root.setAttribute("data-active-tab", key);
  }

  function focusTab(tabs, idx) {
    if (idx < 0) idx = 0;
    if (idx >= tabs.length) idx = tabs.length - 1;
    var t = tabs[idx];
    if (t && t.focus) t.focus();
    return t;
  }

  function indexOfTab(tabs, btn) {
    for (var i = 0; i < tabs.length; i++) {
      if (tabs[i] === btn) return i;
    }
    return -1;
  }

  function normalizeTabsRoot(root) {
    if (!root) return;
    if (root.getAttribute("data-gi-tabs-init") === "1") return;

    ensureUniqueTabIds(root);

    var tabs = getTabs(root);
    var panels = getPanels(root);
    if (!tabs.length || !panels.length) {
      root.setAttribute("data-gi-tabs-init", "1");
      return;
    }

    // Determine active tab
    var activeBtn = null;
    for (var i = 0; i < tabs.length; i++) {
      if (tabs[i].getAttribute("aria-selected") === "true") {
        activeBtn = tabs[i];
        break;
      }
    }
    if (!activeBtn) activeBtn = tabs[0];

    activateTab(root, activeBtn);
    root.setAttribute("data-gi-tabs-init", "1");
  }

  function initTabs(root) {
    var container = root || document;
    var roots = container.querySelectorAll(TABS_ROOT_SEL);
    for (var i = 0; i < roots.length; i++) normalizeTabsRoot(roots[i]);
  }

  // Click to activate (delegated)
  document.addEventListener("click", function (e) {
    var btn = e.target && e.target.closest ? e.target.closest(TAB_SEL) : null;
    if (!btn) return;

    var root = closest(btn, ".sv-tabs");
    if (!root || root.getAttribute("data-tabs") !== "1") return;

    activateTab(root, btn);
  });

  // Keyboard navigation (delegated)
  document.addEventListener("keydown", function (e) {
    var btn =
      document.activeElement && document.activeElement.closest
        ? document.activeElement.closest(TAB_SEL)
        : null;
    if (!btn) return;

    var root = closest(btn, ".sv-tabs");
    if (!root || root.getAttribute("data-tabs") !== "1") return;

    var tabs = getTabs(root);
    if (!tabs || !tabs.length) return;

    var idx = indexOfTab(tabs, btn);
    if (idx < 0) return;

    if (e.key === "ArrowLeft" || e.key === "Left") {
      e.preventDefault();
      activateTab(root, focusTab(tabs, idx - 1));
      return;
    }
    if (e.key === "ArrowRight" || e.key === "Right") {
      e.preventDefault();
      activateTab(root, focusTab(tabs, idx + 1));
      return;
    }
    if (e.key === "Home") {
      e.preventDefault();
      activateTab(root, focusTab(tabs, 0));
      return;
    }
    if (e.key === "End") {
      e.preventDefault();
      activateTab(root, focusTab(tabs, tabs.length - 1));
      return;
    }
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      activateTab(root, btn);
      return;
    }
  });

  /* ------------------------------------------------------------------ */
  /* Init                                                               */
  /* ------------------------------------------------------------------ */

  function initAll(root) {
    initLevels(root);
    initTabs(root);

    // Normalize Phase 4.1 span-popups
    normalizeBtnPopups(root || document);
  }

  if (window.mw && mw.hook) {
    mw.hook("wikipage.content").add(function ($content) {
      initAll($content && $content[0]);
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", function () {
      initAll(document);
    });
  } else {
    initAll(document);
  }
})();