@deeeed/metamask-harness 0.28.0 → 0.29.0

package/site/assets/progress.mjs

@@ -0,0 +1,272 @@
+/*
+ * Shared behaviour for the getting-started site: checklist progress, copy
+ * buttons, platform filters, and the layer diagram. No dependencies, no
+ * network, no tracking. Progress lives in localStorage under
+ * `mmh.progress.<page>`, where <page> comes from body[data-progress-page].
+ * Pages that share a namespace share their state (Start Here and the V1
+ * tutorial are deliberately the same checklist).
+ */
+(function () {
+  'use strict';
+
+  var KEY_PREFIX = 'mmh.progress.';
+
+  /* ---------- storage (degrades to in-memory if localStorage is blocked) ---------- */
+
+  var memory = {};
+
+  function read(key) {
+    try {
+      var raw = window.localStorage.getItem(key);
+      return raw ? JSON.parse(raw) : [];
+    } catch (_err) {
+      return memory[key] || [];
+    }
+  }
+
+  function write(key, ids) {
+    memory[key] = ids;
+    try {
+      window.localStorage.setItem(key, JSON.stringify(ids));
+    } catch (_err) {
+      /* Private mode or blocked storage: the page still works, just forgets. */
+    }
+  }
+
+  /* ---------- checklist ---------- */
+
+  function initChecklist() {
+    var page = document.body.getAttribute('data-progress-page');
+    var steps = [].slice.call(document.querySelectorAll('.step[data-step]'));
+    if (!page || !steps.length) return;
+
+    var key = KEY_PREFIX + page;
+    var fill = document.querySelector('.progress-fill');
+    var label = document.querySelector('.progress-label');
+    var reset = document.querySelector('.progress-reset');
+
+    function done() {
+      return steps.filter(function (s) { return s.getAttribute('data-done') === '1'; });
+    }
+
+    function render() {
+      var n = done().length;
+      var pct = steps.length ? Math.round((n / steps.length) * 100) : 0;
+      if (fill) {
+        fill.style.width = pct + '%';
+        fill.parentNode.setAttribute('aria-valuenow', String(pct));
+      }
+      if (label) {
+        label.textContent = n === steps.length
+          ? n + '/' + steps.length + ' — done'
+          : n + '/' + steps.length + ' steps';
+      }
+    }
+
+    function apply(ids) {
+      steps.forEach(function (step) {
+        var on = ids.indexOf(step.getAttribute('data-step')) !== -1;
+        step.setAttribute('data-done', on ? '1' : '0');
+        var box = step.querySelector('.step-check');
+        if (box) box.checked = on;
+      });
+      render();
+    }
+
+    steps.forEach(function (step) {
+      var box = step.querySelector('.step-check');
+      if (!box) return;
+      box.addEventListener('change', function () {
+        var ids = read(key);
+        var id = step.getAttribute('data-step');
+        var at = ids.indexOf(id);
+        if (box.checked && at === -1) ids.push(id);
+        if (!box.checked && at !== -1) ids.splice(at, 1);
+        write(key, ids);
+        apply(ids);
+      });
+    });
+
+    if (reset) {
+      reset.addEventListener('click', function () {
+        write(key, []);
+        apply([]);
+      });
+    }
+
+    /* Reflect edits made in another tab on the same namespace. */
+    window.addEventListener('storage', function (e) {
+      if (e.key === key) apply(read(key));
+    });
+
+    apply(read(key));
+  }
+
+  /* ---------- copy buttons ---------- */
+
+  function textOf(block) {
+    var pre = block.querySelector('pre');
+    if (!pre) return '';
+    var clone = pre.cloneNode(true);
+    /* Shell prompt markers are decoration, never part of the command. */
+    [].slice.call(clone.querySelectorAll('.p')).forEach(function (n) {
+      n.parentNode.removeChild(n);
+    });
+    return clone.textContent.replace(/[ \t]+$/gm, '').trim();
+  }
+
+  function legacyCopy(text) {
+    return new Promise(function (resolve, reject) {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      var ok = false;
+      try { ok = document.execCommand('copy'); } catch (_err) { ok = false; }
+      document.body.removeChild(ta);
+      ok ? resolve() : reject(new Error('copy unavailable'));
+    });
+  }
+
+  /*
+   * The async clipboard needs a secure context AND permission; it rejects when
+   * the document lacks focus. Fall through to the legacy path rather than
+   * telling the reader to give up.
+   */
+  function copy(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+      return navigator.clipboard.writeText(text).catch(function () {
+        return legacyCopy(text);
+      });
+    }
+    return legacyCopy(text);
+  }
+
+  function initCopy() {
+    [].slice.call(document.querySelectorAll('.cmd')).forEach(function (block) {
+      if (block.querySelector('.copy')) return;
+      var btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'copy';
+      btn.textContent = 'Copy';
+      btn.setAttribute('aria-label', 'Copy to clipboard');
+      btn.addEventListener('click', function () {
+        copy(textOf(block)).then(function () {
+          btn.textContent = 'Copied';
+          btn.setAttribute('data-copied', '1');
+        }, function () {
+          btn.textContent = 'Press ⌘C';
+        });
+        setTimeout(function () {
+          btn.textContent = 'Copy';
+          btn.removeAttribute('data-copied');
+        }, 1600);
+      });
+      block.appendChild(btn);
+    });
+  }
+
+  /* ---------- click-to-copy table cells ---------- */
+
+  /*
+   * Reference tables put one command per cell, where a hovering copy button
+   * would crowd the row. The cell itself is the button instead.
+   */
+  function initCellCopy() {
+    var cells = [].slice.call(document.querySelectorAll('[data-copy-cells] td code'));
+    cells.forEach(function (cell) {
+      var original = cell.textContent;
+      cell.tabIndex = 0;
+      cell.setAttribute('role', 'button');
+      cell.setAttribute('title', 'Click to copy');
+      cell.classList.add('copyable');
+
+      function run() {
+        copy(original).then(function () {
+          cell.textContent = 'Copied';
+          cell.classList.add('copied');
+        }, function () {
+          cell.textContent = 'Press ⌘C';
+        });
+        setTimeout(function () {
+          cell.textContent = original;
+          cell.classList.remove('copied');
+        }, 1200);
+      }
+
+      cell.addEventListener('click', run);
+      cell.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); run(); }
+      });
+    });
+  }
+
+  /* ---------- platform filter ---------- */
+
+  function initFilters() {
+    var chips = [].slice.call(document.querySelectorAll('.chip[data-platform]'));
+    if (!chips.length) return;
+    var rows = [].slice.call(document.querySelectorAll('[data-platforms]'));
+
+    function select(want) {
+      chips.forEach(function (c) {
+        c.setAttribute('aria-pressed', String(c.getAttribute('data-platform') === want));
+      });
+      rows.forEach(function (row) {
+        var list = row.getAttribute('data-platforms').split(/\s+/);
+        var show = want === 'all' || list.indexOf('all') !== -1 || list.indexOf(want) !== -1;
+        row.hidden = !show;
+      });
+      /* A section whose rows are all hidden says so instead of looking broken. */
+      [].slice.call(document.querySelectorAll('[data-filter-section]')).forEach(function (sec) {
+        var visible = [].slice.call(sec.querySelectorAll('[data-platforms]')).some(function (r) {
+          return !r.hidden;
+        });
+        sec.classList.toggle('filter-hidden', !visible);
+      });
+    }
+
+    chips.forEach(function (c) {
+      c.addEventListener('click', function () { select(c.getAttribute('data-platform')); });
+    });
+    select('all');
+  }
+
+  /* ---------- layer diagram ---------- */
+
+  function initLayers() {
+    var layers = [].slice.call(document.querySelectorAll('.layer[aria-controls]'));
+    layers.forEach(function (layer) {
+      layer.addEventListener('click', function () {
+        var open = layer.getAttribute('aria-expanded') === 'true';
+        layers.forEach(function (other) {
+          other.setAttribute('aria-expanded', 'false');
+          var d = document.getElementById(other.getAttribute('aria-controls'));
+          if (d) d.hidden = true;
+        });
+        if (!open) {
+          layer.setAttribute('aria-expanded', 'true');
+          var detail = document.getElementById(layer.getAttribute('aria-controls'));
+          if (detail) detail.hidden = false;
+        }
+      });
+    });
+  }
+
+  function init() {
+    initChecklist();
+    initCopy();
+    initCellCopy();
+    initFilters();
+    initLayers();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();