@geekity/cms 0.34.0 → 0.36.1

package/admin/static/copy.js

@@ -1,4 +1,4 @@
-/* The media screen's copy buttons, and nothing else.
+/* The copy buttons beside readonly fields, and nothing else.
 
    Every URL and every ready-made Markdown line is already a readonly text
    input, which selects and copies like any other text, so the screen is
@@ -17,30 +17,37 @@
      button appears. */
   if (!navigator.clipboard) return;
 
-  var buttons = document.querySelectorAll('button[data-copy]');
-  if (!buttons.length) return;
-
-  Array.prototype.forEach.call(buttons, function (button) {
-    var field = document.getElementById(button.getAttribute('data-copy'));
-    if (!field) return;
-
-    button.hidden = false;
-    button.addEventListener('click', function () {
-      navigator.clipboard.writeText(field.value).then(
-        function () {
-          said(button, 'Copied');
-        },
-        function () {
-          /* Refused, usually because the document was not focused. Selecting
-             the text is then the useful thing to do: the keyboard shortcut
-             everybody already knows takes it from there. */
-          field.select();
-          said(button, 'Press ⌘C');
-        },
-      );
-    });
+  enhance(document);
+
+  /* media.js shows a details screen in a dialog after this has run, and
+     announces the content it inserted. */
+  document.addEventListener('geekity:inserted', function (event) {
+    enhance(event.target);
   });
 
+  function enhance(root) {
+    Array.prototype.forEach.call(root.querySelectorAll('button[data-copy]'), function (button) {
+      var field = document.getElementById(button.getAttribute('data-copy'));
+      if (!field) return;
+
+      button.hidden = false;
+      button.addEventListener('click', function () {
+        navigator.clipboard.writeText(field.value).then(
+          function () {
+            said(button, 'Copied');
+          },
+          function () {
+            /* Refused, usually because the document was not focused. Selecting
+               the text is then the useful thing to do: the keyboard shortcut
+               everybody already knows takes it from there. */
+            field.select();
+            said(button, 'Press ⌘C');
+          },
+        );
+      });
+    });
+  }
+
   /* Say something on the button for a moment, then put its label back. */
   function said(button, message) {
     if (button.dataset.label === undefined) button.dataset.label = button.textContent;

package/admin/static/item-lookup.js

@@ -0,0 +1,179 @@
+(function () {
+  var press = document.querySelector('button[data-item-lookup]');
+  var status = document.getElementById('editor-item-lookup-status');
+  if (!press || !status || !press.form) return;
+  var form = press.form;
+  var url = press.getAttribute('data-item-lookup');
+
+  function plainForm() {
+    var fields = new URLSearchParams();
+    new FormData(form).forEach(function (value, name) {
+      if (typeof value === 'string') fields.append(name, value);
+    });
+    return fields;
+  }
+
+  function tell(line, message, failed) {
+    line.textContent = message;
+    line.classList.toggle('text-error', failed === true);
+    line.classList.toggle('text-base-content', failed !== true);
+  }
+
+  function say(message, failed) {
+    tell(status, message, failed);
+  }
+
+  function answerOf(response) {
+    var type = response.headers.get('content-type') || '';
+    if (type.indexOf('application/json') === -1) {
+      throw new Error(
+        response.status === 403
+          ? 'The site refused the request because this page is out of date. Copy your changes somewhere safe, then reload the page.'
+          : response.redirected
+            ? 'You are signed out. Sign in again in another tab, then try again.'
+            : 'The site answered ' + response.status + ' instead of JSON.',
+      );
+    }
+    return response.json();
+  }
+
+  function lookUp(pick) {
+    var fields = plainForm();
+    if (pick) fields.set('item-pick', pick);
+    press.disabled = true;
+    say('Looking it up…');
+
+    return fetch(url, {
+      method: 'POST',
+      body: fields,
+      credentials: 'same-origin',
+      headers: { accept: 'application/json' },
+    })
+      .then(answerOf)
+      .then(function (answer) {
+        var filled = answer.fields || {};
+        Object.keys(filled).forEach(function (name) {
+          var box = form.elements.namedItem(name);
+          if (box && box.value === '') box.value = String(filled[name]);
+        });
+        var preview = document.getElementById('editor-item-photo-preview');
+        if (preview && answer.thumbnail && filled['item-photo']) {
+          preview.src = answer.thumbnail;
+          preview.hidden = false;
+        }
+        say(String(answer.message || ''), !answer.ok);
+      })
+      .catch(function (error) {
+        say(error.message || 'The lookup failed.', true);
+      })
+      .then(function () {
+        press.disabled = false;
+      });
+  }
+
+  press.addEventListener('click', function (event) {
+    event.preventDefault();
+    lookUp('');
+  });
+
+  var find = document.getElementById('editor-item-find');
+  var query = document.getElementById('editor-item-find-query');
+  var search = document.getElementById('editor-item-find-button');
+  var said = document.getElementById('editor-item-find-status');
+  var list = document.getElementById('editor-item-find-matches');
+  var credit = document.getElementById('editor-item-find-credit');
+  var shape = document.getElementById('editor-item-find-match');
+  if (!find || !query || !search || !said || !list || !credit || !shape) return;
+  find.hidden = false;
+  var searching = false;
+
+  function chosenKind() {
+    var ticked = form.querySelector('input[name="item-kind"]:checked');
+    return ticked ? ticked.value : '';
+  }
+
+  function clear() {
+    Array.prototype.slice.call(list.querySelectorAll('li[data-match]')).forEach(function (row) {
+      row.remove();
+    });
+    credit.hidden = true;
+    list.hidden = true;
+  }
+
+  function show(matches) {
+    clear();
+    matches.forEach(function (match) {
+      var row = shape.content.firstElementChild.cloneNode(true);
+      row.setAttribute('data-match', '');
+      var picture = row.querySelector('img');
+      if (match.thumbnail) {
+        picture.src = match.thumbnail;
+        picture.hidden = false;
+        row.querySelector('[data-no-picture]').hidden = true;
+      }
+      row.querySelector('[data-name]').textContent = match.name;
+      row.querySelector('[data-detail]').textContent = match.detail;
+      row.querySelector('[data-source]').textContent = match.source;
+      row.querySelector('button').addEventListener('click', function () {
+        clear();
+        tell(said, '');
+        lookUp(match.id);
+      });
+      list.insertBefore(row, credit);
+    });
+  }
+
+  function run() {
+    if (searching) return;
+    searching = true;
+    search.disabled = true;
+    tell(said, 'Searching…');
+    var address =
+      find.getAttribute('data-item-search') +
+      '?' +
+      new URLSearchParams({ kind: chosenKind(), q: query.value }).toString();
+
+    fetch(address, { credentials: 'same-origin', headers: { accept: 'application/json' } })
+      .then(answerOf)
+      .then(function (answer) {
+        var matches = answer.matches || [];
+        show(matches);
+        if (answer.credit) {
+          credit.textContent = answer.credit;
+          credit.hidden = false;
+        }
+        list.hidden = !answer.ok;
+        tell(
+          said,
+          answer.ok
+            ? matches.length === 0
+              ? 'Nothing matches “' + query.value.trim() + '”.'
+              : matches.length === 1
+                ? 'One match. Pick it to fill in the item.'
+                : matches.length + ' matches. Pick one to fill in the item.'
+            : String(answer.message || ''),
+          !answer.ok,
+        );
+      })
+      .catch(function (error) {
+        clear();
+        tell(said, error.message || 'The search failed.', true);
+      })
+      .then(function () {
+        searching = false;
+        search.disabled = false;
+      });
+  }
+
+  search.addEventListener('click', run);
+  query.addEventListener('keydown', function (event) {
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    run();
+  });
+  form.addEventListener('change', function (event) {
+    if (event.target.name !== 'item-kind') return;
+    clear();
+    tell(said, '');
+  });
+})();

package/admin/static/job-status.js

@@ -0,0 +1,158 @@
+/* Redraws a queued or running job's status box until the job ends.
+
+   A box carries the job's name in data-job-status and, while the job is
+   active, the page to fetch in data-job-refresh. A box that also names
+   data-job-redraw is redrawn from that page only when the job's state
+   changes on the data-job-refresh page.
+
+   Plain ES5-shaped browser JavaScript, like copy.js: it is served as it is
+   written. */
+(function () {
+  var EVERY = 3000;
+  var AFTER_FAILURE = 15000;
+  var ANNOUNCE_PROGRESS_EVERY = 15000;
+
+  var boxes = document.querySelectorAll('[data-job-status][data-job-refresh]');
+  if (!boxes.length) return;
+
+  /* Made before any update, so screen readers are watching it when the
+     first one arrives. */
+  var live = document.createElement('div');
+  live.className = 'sr-only';
+  live.setAttribute('role', 'status');
+  document.body.appendChild(live);
+  var said = { text: '', at: 0 };
+
+  Array.prototype.forEach.call(boxes, watch);
+
+  function watch(box) {
+    var selector = '[data-job-status="' + CSS.escape(box.getAttribute('data-job-status')) + '"]';
+    var region = regionOf(box);
+    var drawn = region.outerHTML;
+    var waiting = false;
+    checkAgain(region, false);
+    later(EVERY);
+
+    document.addEventListener('visibilitychange', function () {
+      if (document.hidden || !waiting) return;
+      waiting = false;
+      poll();
+    });
+
+    function later(delay) {
+      setTimeout(function () {
+        if (document.hidden) waiting = true;
+        else poll();
+      }, delay);
+    }
+
+    function poll() {
+      var redraw = box.getAttribute('data-job-redraw');
+      var polled;
+      find(box.getAttribute('data-job-refresh'))
+        .then(function (found) {
+          polled = found;
+          if (!redraw) return polled;
+          if (
+            polled &&
+            polled.getAttribute('data-job-state') === box.getAttribute('data-job-state')
+          ) {
+            return box;
+          }
+          return find(redraw);
+        })
+        .then(function (next) {
+          if (!next) {
+            drop(region);
+            if (polled) announce(polled, true);
+            return;
+          }
+          var nextRegion = regionOf(next);
+          if (next !== box && nextRegion.outerHTML !== drawn) {
+            drawn = nextRegion.outerHTML;
+            var changed =
+              next.getAttribute('data-job-state') !== box.getAttribute('data-job-state');
+            var replacement = document.importNode(nextRegion, true);
+            swapKeepingFocus(region, replacement);
+            region = replacement;
+            box = region.matches(selector) ? region : region.querySelector(selector);
+            announce(box, changed);
+          }
+          if (!box.hasAttribute('data-job-refresh')) return;
+          checkAgain(region, false);
+          later(EVERY);
+        })
+        .catch(function () {
+          checkAgain(region, true);
+          later(AFTER_FAILURE);
+        });
+    }
+
+    function find(url) {
+      return fetch(url, { credentials: 'same-origin' })
+        .then(function (response) {
+          if (!response.ok || response.redirected) throw new Error(String(response.status));
+          return response.text();
+        })
+        .then(function (html) {
+          /* A template's content is inert: the other page's nonced <style>
+             elements are neither applied nor checked against this page's CSP. */
+          var parsed = document.createElement('template');
+          parsed.innerHTML = html;
+          return parsed.content.querySelector(selector);
+        });
+    }
+  }
+
+  function regionOf(box) {
+    return box.closest('[data-job-region]') || box;
+  }
+
+  function checkAgain(region, shown) {
+    Array.prototype.forEach.call(
+      region.querySelectorAll('[data-job-check-again]'),
+      function (link) {
+        link.hidden = !shown;
+      },
+    );
+  }
+
+  function swapKeepingFocus(old, replacement) {
+    var focused = document.activeElement;
+    var inside = old.contains(focused);
+    old.replaceWith(replacement);
+    if (!inside) return;
+    var same = Array.prototype.filter.call(
+      replacement.querySelectorAll(focused.tagName),
+      function (candidate) {
+        return candidate.textContent.trim() === focused.textContent.trim();
+      },
+    )[0];
+    if (!same) {
+      replacement.tabIndex = -1;
+      same = replacement;
+    }
+    same.focus({ preventScroll: true });
+  }
+
+  function drop(region) {
+    var inside = region.contains(document.activeElement);
+    region.remove();
+    if (!inside) return;
+    var main = document.getElementById('main');
+    main.tabIndex = -1;
+    main.focus({ preventScroll: true });
+  }
+
+  function announce(box, changed) {
+    var message = box.querySelector('[data-job-message]');
+    var text =
+      box.getAttribute('data-job-label') +
+      '.' +
+      (message ? ' ' + message.textContent.replace(/\s+/g, ' ').trim() : '');
+    var now = Date.now();
+    if (text === said.text || (!changed && now - said.at < ANNOUNCE_PROGRESS_EVERY)) return;
+    said = { text: text, at: now };
+    live.textContent = text;
+  }
+})();

package/admin/static/media.js

@@ -0,0 +1,82 @@
+/* The media library's details dialog (TASK-429).
+
+   Every tile is already a link to its file's details screen, so the library
+   is complete before this file loads. This opens that screen in a dialog
+   instead: it fetches the page the link names, takes its
+   [data-media-details], and shows it over the grid. Previous and Next inside
+   the dialog, and the left and right arrow keys, fetch the neighbouring file
+   the same way. Anything that goes wrong falls back to following the link.
+
+   Forms inside the dialog post as they would on the details screen, which is
+   where their answers land.
+
+   Plain ES5-shaped browser JavaScript, like copy.js: it is served as it is
+   written. */
+(function () {
+  var tiles = document.querySelectorAll('a[data-media-tile]');
+  if (!tiles.length || !window.fetch) return;
+
+  var dialog = document.createElement('dialog');
+  dialog.className = 'modal';
+  dialog.setAttribute('aria-label', 'File details');
+  dialog.innerHTML =
+    '<div class="modal-box max-w-6xl">' +
+    '<form method="dialog" class="mb-2 text-right"><button class="btn btn-sm btn-ghost">Close</button></form>' +
+    '<div data-media-dialog-body></div>' +
+    '</div>' +
+    '<form method="dialog" class="modal-backdrop"><button>Close</button></form>';
+  document.body.appendChild(dialog);
+  dialog.tabIndex = -1;
+  var body = dialog.querySelector('[data-media-dialog-body]');
+
+  Array.prototype.forEach.call(tiles, function (tile) {
+    tile.addEventListener('click', function (event) {
+      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      show(tile.href);
+    });
+  });
+
+  body.addEventListener('click', function (event) {
+    var link = event.target.closest('a[data-media-step], a[data-media-library]');
+    if (!link) return;
+    event.preventDefault();
+    if (link.hasAttribute('data-media-library')) dialog.close();
+    else show(link.href);
+  });
+
+  dialog.addEventListener('keydown', function (event) {
+    if (event.target.closest('input, textarea, select')) return;
+    var rel = event.key === 'ArrowLeft' ? 'prev' : event.key === 'ArrowRight' ? 'next' : '';
+    if (!rel) return;
+    var link = body.querySelector('a[rel="' + rel + '"]');
+    if (!link) return;
+    event.preventDefault();
+    show(link.href);
+  });
+
+  function show(url) {
+    fetch(url, { credentials: 'same-origin' })
+      .then(function (response) {
+        if (!response.ok) throw new Error(String(response.status));
+        return response.text();
+      })
+      .then(function (html) {
+        /* A template's content is inert: the other page's nonced <style>
+           elements are neither applied nor checked against this page's CSP. */
+        var parsed = document.createElement('template');
+        parsed.innerHTML = html;
+        var details = parsed.content.querySelector('[data-media-details]');
+        if (!details) throw new Error('no details');
+        body.replaceChildren(document.importNode(details, true));
+        body.dispatchEvent(new CustomEvent('geekity:inserted', { bubbles: true }));
+        if (!dialog.open) dialog.showModal();
+        dialog.focus();
+      })
+      .catch(function () {
+        window.location.href = url;
+      });
+  }
+})();