Toggle search
Toggle menu
115
248
25
2.7K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

MediaWiki:Common.js: Difference between revisions

MediaWiki interface page
More actions
← Older edit
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
 
Line 17: Line 17:


   // Versioned init guard (allows safe updates without stale blocks)
   // Versioned init guard (allows safe updates without stale blocks)
   var LEVELS_VERSION = 5; // bumped: end-of-bar value + numbered tick/check row
   var LEVELS_VERSION = 6; // neutral hooks + bubble styling owned by CSS + no tick/check row


   if (typeof COMMON.levelsInit === "number" && COMMON.levelsInit >= LEVELS_VERSION) return;
   if (typeof COMMON.levelsInit === "number" && COMMON.levelsInit >= LEVELS_VERSION) return;
   COMMON.levelsInit = LEVELS_VERSION;
   COMMON.levelsInit = LEVELS_VERSION;


   var CARD_SEL = ".sv-gi-card, .sv-skill-card, .sv-passive-card";
  // Prefer neutral shared hooks; keep legacy class fallbacks for compatibility.
   var CARD_SEL =
    "[data-sv-card='1'], .sv-gi-card, .sv-skill-card, .sv-passive-card";


   // Accept the native range input and the custom slider variants.
   // Accept the native range input and the custom slider variants.
Line 28: Line 30:
     "input.sv-level-range[type='range'], .sv-level-range--custom, .sv-level-range[data-sv-slider='1']";
     "input.sv-level-range[type='range'], .sv-level-range--custom, .sv-level-range[data-sv-slider='1']";


   var LEVEL_BOUNDARY_SEL = ".sv-skill-level, .sv-gi-level";
   var LEVEL_BOUNDARY_SEL =
   var LEVEL_SCOPE_SEL = ".sv-gi-bottom, .sv-skill-bottom";
    "[data-sv-level-boundary='1'], .sv-skill-level, .sv-gi-level";
 
   var LEVEL_SCOPE_SEL =
    "[data-sv-level-scope='1'], .sv-gi-bottom, .sv-skill-bottom";
 
   var SERIES_SEL = "[data-series]";
   var SERIES_SEL = "[data-series]";
   var LEVEL_INIT_ATTR = "data-gi-level-init";
   var LEVEL_INIT_ATTR = "data-sv-level-init";


   var _seriesCache = typeof WeakMap !== "undefined" ? new WeakMap() : null;
   var _seriesCache = typeof WeakMap !== "undefined" ? new WeakMap() : null;
Line 117: Line 123:


   function getCardMinLevel(card, slider, maxLevel) {
   function getCardMinLevel(card, slider, maxLevel) {
     // Prefer explicit attributes if ever present (future-proof), then slider attrs.
     // Prefer explicit neutral hooks, then legacy attrs, then slider attrs.
     var raw =
     var raw =
       card.getAttribute("data-min-level") ||
       card.getAttribute("data-min-level") ||
Line 126: Line 132:
       if (slider) {
       if (slider) {
         if (isRangeInput(slider)) raw = slider.getAttribute("min");
         if (isRangeInput(slider)) raw = slider.getAttribute("min");
         else if (isCustomSlider(slider)) raw = slider.getAttribute("aria-valuemin") || slider.getAttribute("data-min");
         else if (isCustomSlider(slider))
          raw = slider.getAttribute("aria-valuemin") || slider.getAttribute("data-min");
       }
       }
     }
     }
Line 272: Line 279:


   /* ================================================================== */
   /* ================================================================== */
   /* Custom slider value bubble (existing behavior; kept)                */
   /* Custom slider value bubble                                           */
  /* - JS owns structure + text/position only                            */
  /* - CSS owns visuals                                                  */
   /* ================================================================== */
   /* ================================================================== */


Line 285: Line 294:
     bubble.setAttribute("hidden", "hidden");
     bubble.setAttribute("hidden", "hidden");
     bubble.setAttribute("aria-hidden", "true");
     bubble.setAttribute("aria-hidden", "true");
    // Minimal layout-only styling (no color system changes here).
    bubble.style.position = "absolute";
    bubble.style.top = "-28px";
    bubble.style.left = "0%";
    bubble.style.transform = "translateX(-50%)";
    bubble.style.whiteSpace = "nowrap";
    bubble.style.fontWeight = "900";
    bubble.style.fontSize = "12px";
    bubble.style.lineHeight = "1";
    bubble.style.pointerEvents = "none";


     slider.appendChild(bubble);
     slider.appendChild(bubble);
Line 384: Line 382:


   /* ================================================================== */
   /* ================================================================== */
   /* NEW: End-of-bar value label (right-side value)                       */
   /* End-of-bar value label (right-side value)                           */
   /* ================================================================== */
   /* ================================================================== */


Line 406: Line 404:
     var out = ensureEndValueLabel(card, slider);
     var out = ensureEndValueLabel(card, slider);
     if (out) out.textContent = String(value);
     if (out) out.textContent = String(value);
  }
  /* ================================================================== */
  /* Tick/check row (numbered checkmarks)                                */
  /* ================================================================== */
  function buildTickNode(level, extraClass) {
    var tick = document.createElement("span");
    tick.className = "sv-level-tick" + (extraClass ? " " + extraClass : "");
    tick.setAttribute("data-level", String(level));
    var mark = document.createElement("span");
    mark.className = "sv-level-tickmark";
    mark.textContent = "✓";
    var num = document.createElement("span");
    num.className = "sv-level-ticknum";
    num.textContent = String(level);
    tick.appendChild(mark);
    tick.appendChild(num);
    return tick;
  }
  function setTickLabels(boundary, min, max, value, step) {
    if (!boundary || !boundary.querySelector) return;
    var ticks = boundary.querySelector(".sv-level-ticklabels");
    if (!ticks) return;
    step = step && step > 0 ? step : 1;
    var count = Math.floor((max - min) / step) + 1;
    if (count < 2) count = 2;
    // Full ticks for small ranges; min/max only for large ranges.
    var mode = count <= 25 ? "full" : "minmax";
    var nextKey = String(min) + "/" + String(max) + "/" + String(step) + "/" + mode;
    var curKey = ticks.getAttribute("data-sv-ticks") || "";
    if (curKey !== nextKey) {
      ticks.setAttribute("data-sv-ticks", nextKey);
      while (ticks.firstChild) ticks.removeChild(ticks.firstChild);
      if (mode === "full") {
        for (var lv = min; lv <= max; lv += step) {
          var cls = "";
          if (lv === min) cls = "sv-level-tick--min";
          else if (lv === max) cls = "sv-level-tick--max";
          ticks.appendChild(buildTickNode(lv, cls));
        }
      } else {
        ticks.appendChild(buildTickNode(min, "sv-level-tick--min"));
        ticks.appendChild(buildTickNode(max, "sv-level-tick--max"));
      }
    }
    // Update checked/current state every time the level changes.
    var children = ticks.children;
    for (var i = 0; i < children.length; i++) {
      var node = children[i];
      if (!node || !node.getAttribute) continue;
      var lvStr = node.getAttribute("data-level");
      var lvNum = parseInt(lvStr, 10);
      if (node.classList) {
        node.classList.remove("sv-level-tick--checked");
        node.classList.remove("sv-level-tick--current");
      }
      if (!isNaN(lvNum)) {
        if (lvNum <= value && node.classList) node.classList.add("sv-level-tick--checked");
        if (lvNum === value && node.classList) node.classList.add("sv-level-tick--current");
      }
    }
   }
   }


Line 494: Line 416:
     if (card._svLevelRaf) return;
     if (card._svLevelRaf) return;


     card._svLevelRaf = window.requestAnimationFrame
     if (window.requestAnimationFrame) {
       ? requestAnimationFrame(function () {
       card._svLevelRaf = requestAnimationFrame(function () {
          card._svLevelRaf = null;
        card._svLevelRaf = null;
          var v = card._svLevelNext;
        var v = card._svLevelNext;
          card._svLevelNext = null;
        card._svLevelNext = null;
          applyLevelToCard(card, v);
        applyLevelToCard(card, v);
        })
      });
       : (function () {
       return;
          card._svLevelRaf = null;
    }
          var v = card._svLevelNext;
 
          card._svLevelNext = null;
    card._svLevelRaf = setTimeout(function () {
          applyLevelToCard(card, v);
      card._svLevelRaf = null;
        })();
      var v = card._svLevelNext;
      card._svLevelNext = null;
      applyLevelToCard(card, v);
    }, 0);
   }
   }


Line 541: Line 466:
     }
     }


    // NEW: value readout at the end/right of the slider bar
     setEndValueLabel(card, slider, level);
     setEndValueLabel(card, slider, level);


     var boundary = getLevelBoundary(slider);
     var boundary = getLevelBoundary(slider);
    setTickLabels(boundary, minLevel, maxLevel, level, getStep(slider));
     var scope = getLevelScopeContainer(card, boundary);
     var scope = getLevelScopeContainer(card, boundary);
     applySeriesToScope(scope, boundary, level);
     applySeriesToScope(scope, boundary, level);
Line 623: Line 545:
       }
       }


      // Show value bubble while interacting (existing behavior)
       showValueLabel(slider);
       showValueLabel(slider);
       scheduleApply(card, valueFromClientX(slider, e.clientX));
       scheduleApply(card, valueFromClientX(slider, e.clientX));
     },
     },
Line 654: Line 574:
     }
     }


    // Let the value label linger briefly, then hide.
     hideValueLabelSoon(_drag.slider, 650);
     hideValueLabelSoon(_drag.slider, 650);
     _drag = null;
     _drag = null;
   }
   }
Line 678: Line 596:
     End: 1,
     End: 1,
     PageUp: 1,
     PageUp: 1,
     PageDown: 1,
     PageDown: 1
   };
   };


Line 1,067: Line 985:
       var vh = window.innerHeight || document.documentElement.clientHeight || 0;
       var vh = window.innerHeight || document.documentElement.clientHeight || 0;


      // CHANGE (safe): stricter edge padding on small screens
       var tight = vw <= 520;
       var tight = vw <= 520;
       var margin = tight ? 18 : 10;
       var margin = tight ? 18 : 10;
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.js"