katalyst-koi 5.0.0.alpha.2 → 5.0.0.beta.1

data/app/assets/builds/katalyst/koi.esm.js

@@ -0,0 +1,832 @@
+import '@hotwired/turbo-rails';
+import govuk, { initAll } from '@katalyst/govuk-formbuilder';
+import '@rails/actiontext';
+import 'trix';
+import { Application, Controller } from '@hotwired/stimulus';
+import content from '@katalyst/content';
+import navigation from '@katalyst/navigation';
+import tables from '@katalyst/tables';
+import { get, parseRequestOptionsFromJSON, create, parseCreationOptionsFromJSON } from '@github/webauthn-json/browser-ponyfill';
+import { eagerLoadControllersFrom } from '@hotwired/stimulus-loading';
+
+const application = Application.start();
+
+class ClipboardController extends Controller {
+  static targets = ["source"];
+
+  static classes = ["supported"];
+
+  connect() {
+    if ("clipboard" in navigator) {
+      this.element.classList.add(this.supportedClass);
+    }
+  }
+
+  copy(event) {
+    event.preventDefault();
+    navigator.clipboard.writeText(this.sourceTarget.value);
+
+    this.element.classList.add("copied");
+    setTimeout(() => {
+      this.element.classList.remove("copied");
+    }, 2000);
+  }
+}
+
+class FlashController extends Controller {
+  close(e) {
+    e.target.closest("li").remove();
+
+    // remove the flash container if there are no more flashes
+    if (this.element.children.length === 0) {
+      this.element.remove();
+    }
+  }
+}
+
+/**
+ A stimulus controller to request form submissions.
+ This controller should be attached to a form element.
+ */
+class FormRequestSubmitController extends Controller {
+  requestSubmit() {
+    this.element.requestSubmit();
+  }
+}
+
+class IndexActionsController extends Controller {
+  static targets = ["create", "search", "sort"];
+
+  initialize() {
+    // debounce search
+    this.update = debounce(this, this.update);
+  }
+
+  disconnect() {
+    clearTimeout(this.timer);
+  }
+
+  create() {
+    this.createTarget.click();
+  }
+
+  search() {
+    this.searchTarget.focus();
+  }
+
+  clear() {
+    this.searchTarget.value = "";
+    this.searchTarget.closest("form").requestSubmit();
+  }
+
+  update() {
+    this.searchTarget.closest("form").requestSubmit();
+  }
+
+  submit() {
+    const shouldFocus = document.activeElement === this.searchTarget;
+
+    if (this.searchTarget.value === "") {
+      this.searchTarget.disabled = true;
+    }
+    if (this.sortTarget.value === "") {
+      this.sortTarget.disabled = true;
+    }
+
+    // restore state and focus after submit
+    Promise.resolve().then(() => {
+      this.searchTarget.disabled = false;
+      this.sortTarget.disabled = false;
+      if (shouldFocus) {
+        this.searchTarget.focus();
+      }
+    });
+  }
+}
+
+function debounce(self, f) {
+  return (...args) => {
+    clearTimeout(self.timer);
+    self.timer = setTimeout(() => {
+      f.apply(self, ...args);
+    }, 300);
+  };
+}
+
+class KeyboardController extends Controller {
+  static values = {
+    mapping: String,
+    depth: { type: Number, default: 2 },
+  };
+
+  event(cause) {
+    if (isFormField(cause.target) || this.#ignore(cause)) return;
+
+    const key = this.describeEvent(cause);
+
+    this.buffer = [...(this.buffer || []), key].slice(0 - this.depthValue);
+
+    // test whether the tail of the buffer matches any of the configured chords
+    const action = this.buffer.reduceRight((mapping, key) => {
+      if (typeof mapping === "string" || typeof mapping === "undefined") {
+        return mapping;
+      } else {
+        return mapping[key];
+      }
+    }, this.mappings);
+
+    // if we don't have a string we may have a miss or an incomplete chord
+    if (typeof action !== "string") return;
+
+    // clear the buffer and prevent the key from being consumed elsewhere
+    this.buffer = [];
+    cause.preventDefault();
+
+    // fire the configured event
+    const event = new CustomEvent(action, {
+      detail: { cause: cause },
+      bubbles: true,
+    });
+    cause.target.dispatchEvent(event);
+  }
+
+  /**
+   * @param event KeyboardEvent input event to describe
+   * @return String description of keyboard event, e.g. 'C-KeyV' (CTRL+V)
+   */
+  describeEvent(event) {
+    return [
+      event.ctrlKey && "C",
+      event.metaKey && "M",
+      event.altKey && "A",
+      event.shiftKey && "S",
+      event.code,
+    ]
+      .filter((w) => w)
+      .join("-");
+  }
+
+  /**
+   * Build a tree for efficiently looking up key chords, where the last key in the sequence
+   * is the first key in tree.
+   */
+  get mappings() {
+    const inputs = this.mappingValue
+      .replaceAll(/\s+/g, " ")
+      .split(" ")
+      .filter((f) => f.length > 0);
+    const mappings = {};
+
+    inputs.forEach((mapping) => this.#parse(mappings, mapping));
+
+    // memoize the result
+    Object.defineProperty(this, "mappings", {
+      value: mappings,
+      writable: false,
+    });
+
+    return mappings;
+  }
+
+  /**
+   * Parse a key chord pattern and an event and store it in the inverted tree lookup structure.
+   *
+   * @param mappings inverted tree lookup for key chords
+   * @param mapping input definition, e.g. "C-KeyC+C-KeyV->paste"
+   */
+  #parse(mappings, mapping) {
+    const [pattern, event] = mapping.split("->");
+    const keys = pattern.split("+");
+    const first = keys.shift();
+
+    mappings = keys.reduceRight(
+      (mappings, key) => (mappings[key] ||= {}),
+      mappings,
+    );
+    mappings[first] = event;
+  }
+
+  /**
+   * Ignore modifier keys, as they will be captured in normal key presses.
+   *
+   * @param event KeyboardEvent
+   * @returns {boolean} true if key event should be ignored
+   */
+  #ignore(event) {
+    switch (event.code) {
+      case "ControlLeft":
+      case "ControlRight":
+      case "MetaLeft":
+      case "MetaRight":
+      case "ShiftLeft":
+      case "ShiftRight":
+      case "AltLeft":
+      case "AltRight":
+        return true;
+      default:
+        return false;
+    }
+  }
+}
+
+/**
+ * Detect input nodes where we should not listen for events.
+ *
+ * Credit: github.com
+ */
+function isFormField(element) {
+  if (!(element instanceof HTMLElement)) {
+    return false;
+  }
+
+  const name = element.nodeName.toLowerCase();
+  const type = (element.getAttribute("type") || "").toLowerCase();
+  return (
+    name === "select" ||
+    name === "textarea" ||
+    name === "trix-editor" ||
+    (name === "input" &&
+      type !== "submit" &&
+      type !== "reset" &&
+      type !== "checkbox" &&
+      type !== "radio" &&
+      type !== "file") ||
+    element.isContentEditable
+  );
+}
+
+class ModalController extends Controller {
+  static targets = ["dialog"];
+
+  connect() {
+    this.element.addEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  outside(e) {
+    if (e.target.tagName === "DIALOG") this.dismiss();
+  }
+
+  dismiss() {
+    if (!this.dialogTarget) return;
+    if (!this.dialogTarget.open) this.dialogTarget.close();
+
+    this.element.removeAttribute("src");
+    this.dialogTarget.remove();
+  }
+
+  dialogTargetConnected(dialog) {
+    dialog.showModal();
+  }
+
+  onSubmit = (event) => {
+    if (
+      event.detail.success &&
+      "closeDialog" in event.detail.formSubmission?.submitter?.dataset
+    ) {
+      this.dialogTarget.close();
+      this.element.removeAttribute("src");
+      this.dialogTarget.remove();
+    }
+  };
+}
+
+class NavigationController extends Controller {
+  static targets = ["filter"];
+
+  filter() {
+    const filter = this.filterTarget.value;
+    this.clearFilter(filter);
+
+    if (filter.length > 0) {
+      this.applyFilter(filter);
+    }
+  }
+
+  go() {
+    this.element.querySelector("li:not([hidden]) > a").click();
+  }
+
+  clear() {
+    if (this.filterTarget.value.length === 0) this.filterTarget.blur();
+  }
+
+  applyFilter(filter) {
+    // hide items that don't match the search filter
+    this.links
+      .filter(
+        (li) =>
+          !this.prefixSearch(filter.toLowerCase(), li.innerText.toLowerCase()),
+      )
+      .forEach((li) => {
+        li.toggleAttribute("hidden", true);
+      });
+
+    this.menus
+      .filter((li) => !li.matches("li:has(li:not([hidden]) > a)"))
+      .forEach((li) => {
+        li.toggleAttribute("hidden", true);
+      });
+  }
+
+  clearFilter(filter) {
+    this.element.querySelectorAll("li").forEach((li) => {
+      li.toggleAttribute("hidden", false);
+    });
+  }
+
+  prefixSearch(needle, haystack) {
+    const haystackLength = haystack.length;
+    const needleLength = needle.length;
+    if (needleLength > haystackLength) {
+      return false;
+    }
+    if (needleLength === haystackLength) {
+      return needle === haystack;
+    }
+    outer: for (let i = 0, j = 0; i < needleLength; i++) {
+      const needleChar = needle.charCodeAt(i);
+      if (needleChar === 32) {
+        // skip ahead to next space in the haystack
+        while (j < haystackLength && haystack.charCodeAt(j++) !== 32) {}
+        continue;
+      }
+      while (j < haystackLength) {
+        if (haystack.charCodeAt(j++) === needleChar) continue outer;
+        // skip ahead to the next space in the haystack
+        while (j < haystackLength && haystack.charCodeAt(j++) !== 32) {}
+      }
+      return false;
+    }
+    return true;
+  }
+
+  toggle() {
+    this.element.open ? this.close() : this.open();
+  }
+
+  open() {
+    if (!this.element.open) this.element.showModal();
+  }
+
+  close() {
+    if (this.element.open) this.element.close();
+  }
+
+  click(e) {
+    if (e.target === this.element) this.close();
+  }
+
+  onMorphAttribute = (e) => {
+    if (e.target !== this.element) return;
+
+    switch (e.detail.attributeName) {
+      case "open":
+        e.preventDefault();
+    }
+  };
+
+  get links() {
+    return Array.from(this.element.querySelectorAll("li:has(> a)"));
+  }
+
+  get menus() {
+    return Array.from(this.element.querySelectorAll("li:has(> ul)"));
+  }
+}
+
+class NavigationToggleController extends Controller {
+  trigger() {
+    this.dispatch("toggle", { prefix: "navigation", bubbles: true });
+  }
+}
+
+class PagyNavController extends Controller {
+  connect() {
+    document.addEventListener("shortcut:page-prev", this.prevPage);
+    document.addEventListener("shortcut:page-next", this.nextPage);
+  }
+
+  disconnect() {
+    document.removeEventListener("shortcut:page-prev", this.prevPage);
+    document.removeEventListener("shortcut:page-next", this.nextPage);
+  }
+
+  nextPage = () => {
+    this.element.querySelector("a:last-child").click();
+  };
+
+  prevPage = () => {
+    this.element.querySelector("a:first-child").click();
+  };
+}
+
+const DEFAULT_DELAY = 250;
+
+/**
+ * A utility class for managing CSS transition animations.
+ *
+ * Transition uses Javascript timers to track state instead of relying on
+ * CSS transition events, which is a more complicated API. Please call `cancel`
+ * when the node being animated is detached from the DOM to avoid unexpected
+ * errors or animation glitches.
+ *
+ * Transition assumes that CSS already specifies styles to achieve the expected
+ * start and end states. Transition adds temporary overrides and then animates
+ * between those values using CSS transitions. For example, to use the collapse
+ * transition:
+ *
+ * @example
+ *   // CSS:
+ *   target {
+ *     max-height: unset;
+ *     overflow: 0;
+ *   }
+ *   target.hidden {
+ *     max-height: 0;
+ *   }
+ *
+ * @example
+ *   // Javascript
+ *   target.addClass("hidden");
+ *   new Transition(target).collapse().start();
+ */
+class Transition {
+  constructor(target, options) {
+    const { delay } = this._setDefaults(options);
+
+    this.target = target;
+    this.runner = new Runner(this, delay);
+    this.properties = [];
+
+    this.startingCallbacks = [];
+    this.startedCallbacks = [];
+    this.completeCallbacks = [];
+  }
+
+  add(property) {
+    this.properties.push(property);
+    return this;
+  }
+
+  /** Adds callback for transition events */
+  addCallback(type, callback) {
+    switch (type) {
+      case "starting":
+        this.startingCallbacks.push(callback);
+        break;
+      case "started":
+        this.startedCallbacks.push(callback);
+        break;
+      case "complete":
+        this.completeCallbacks.push(callback);
+        break;
+    }
+    return this;
+  }
+
+  /** Collapse an element in place, assumes overflow is set appropriately, margin is not collapsed */
+  collapse() {
+    return this.add(
+      new PropertyTransition(
+        "max-height",
+        `${this.target.scrollHeight}px`,
+        "0px",
+      ),
+    );
+  }
+
+  /** Restore a collapsed element */
+  expand() {
+    return this.add(
+      new PropertyTransition(
+        "max-height",
+        "0px",
+        `${this.target.scrollHeight}px`,
+      ),
+    );
+  }
+
+  /** Slide an element left or right by its scroll width, assumes position relative */
+  slideOut(direction) {
+    return this.add(
+      new PropertyTransition(direction, "0px", `-${this.target.scrollWidth}px`),
+    );
+  }
+
+  /** Restore an element that has been slid */
+  slideIn(direction) {
+    return this.add(
+      new PropertyTransition(direction, `-${this.target.scrollWidth}px`, "0px"),
+    );
+  }
+
+  /** Cause an element to become transparent by transforming opacity */
+  fadeOut() {
+    return this.add(new PropertyTransition("opacity", "100%", "0%"));
+  }
+
+  /** Cause a transparent element to become visible again */
+  fadeIn() {
+    return this.add(new PropertyTransition("opacity", "0%", "100%"));
+  }
+
+  start(callback = null) {
+    // start the runner on next tick so that any side-effects of the current execution can occur first
+    requestAnimationFrame(() => {
+      this.runner.start(this.target);
+      if (callback) callback();
+    });
+    return this;
+  }
+
+  cancel() {
+    this.runner.stop(this.target);
+    return this;
+  }
+
+  _starting() {
+    const event = new Event("transition:starting");
+    this.startingCallbacks.forEach((cb) => cb(event));
+    this.target.dispatchEvent(event);
+  }
+
+  _started() {
+    const event = new Event("transition:started");
+    this.startedCallbacks.forEach((cb) => cb(event));
+    this.target.dispatchEvent(event);
+  }
+
+  _complete() {
+    const event = new Event("transition:complete");
+    this.completeCallbacks.forEach((cb) => cb(event));
+    this.target.dispatchEvent(event);
+  }
+
+  _setDefaults(options) {
+    return Object.assign({ delay: DEFAULT_DELAY }, options);
+  }
+}
+
+/**
+ * Encapsulates internal execution and timing functionality for `Transition`
+ */
+class Runner {
+  constructor(transition, delay) {
+    this.transition = transition;
+    this.running = null;
+    this.delay = delay;
+  }
+
+  start(target) {
+    // 1. Set the initial state(s)
+    this.transition.properties.forEach((t) => t.onStarting(target));
+
+    // 2. On next update, set transition and final state(s)
+    requestAnimationFrame(() => this.onStarted(target));
+
+    // 3. After transition has finished, clean up
+    this.running = setTimeout(() => this.stop(target, true), this.delay);
+
+    this.transition._starting();
+  }
+
+  onStarted(target) {
+    target.style.transitionProperty = this.transition.properties
+      .map((t) => t.property)
+      .join(",");
+    target.style.transitionDuration = `${this.delay}ms`;
+    this.transition.properties.forEach((t) => t.onStarted(target));
+
+    this.transition._started();
+  }
+
+  stop(target, timeout = false) {
+    if (!this.running) return;
+    if (!timeout) clearTimeout(this.running);
+
+    this.running = null;
+
+    target.style.removeProperty("transition-property");
+    target.style.removeProperty("transition-duration");
+    this.transition.properties.forEach((t) => t.onComplete(target));
+
+    this.transition._complete();
+  }
+}
+
+/**
+ * Represents animation of a single CSS property. Currently only CSS animations
+ * are supported, but this could be a natural extension point for Javascript
+ * animations in the future.
+ */
+class PropertyTransition {
+  constructor(property, from, to) {
+    this.property = property;
+    this.from = from;
+    this.to = to;
+  }
+
+  onStarting(target) {
+    target.style.setProperty(this.property, this.from);
+  }
+
+  onStarted(target) {
+    target.style.setProperty(this.property, this.to);
+  }
+
+  onComplete(target) {
+    target.style.removeProperty(this.property);
+  }
+}
+
+class ShowHideController extends Controller {
+  static targets = ["content"];
+
+  toggle() {
+    const element = this.contentTarget;
+    const hide = element.toggleAttribute("data-collapsed");
+
+    // cancel previous animation, if any
+    if (this.transition) this.transition.cancel();
+
+    const transition = (this.transition = new Transition(element)
+      .addCallback("starting", function () {
+        element.setAttribute("data-collapsed-transitioning", "true");
+      })
+      .addCallback("complete", function () {
+        element.removeAttribute("data-collapsed-transitioning");
+      }));
+    hide ? transition.collapse() : transition.expand();
+
+    transition.start();
+  }
+}
+
+/**
+ * Connect an input (e.g. title) to slug.
+ */
+class SluggableController extends Controller {
+  static targets = ["source", "slug"];
+  static values = {
+    slug: String,
+  };
+
+  sourceChanged(e) {
+    if (this.slugValue === "") {
+      this.slugTarget.value = parameterize(this.sourceTarget.value);
+    }
+  }
+
+  slugChanged(e) {
+    this.slugValue = this.slugTarget.value;
+  }
+}
+
+function parameterize(input) {
+  return input
+    .toLowerCase()
+    .replace(/'/g, "-")
+    .replace(/[^-\w\s]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "");
+}
+
+class WebauthnAuthenticationController extends Controller {
+  static targets = ["response"];
+  static values = { options: Object };
+
+  authenticate() {
+    get(this.options).then((response) => {
+      this.responseTarget.value = JSON.stringify(response);
+
+      this.element.requestSubmit();
+    });
+  }
+
+  get options() {
+    return parseRequestOptionsFromJSON(this.optionsValue);
+  }
+}
+
+class WebauthnRegistrationController extends Controller {
+  static values = {
+    options: Object,
+    response: String,
+  };
+  static targets = ["intro", "nickname", "response"];
+
+  submit(e) {
+    if (
+      this.responseTarget.value === "" &&
+      e.submitter.formMethod !== "dialog"
+    ) {
+      e.preventDefault();
+      this.createCredential();
+    }
+  }
+
+  async createCredential() {
+    const response = await create(this.options);
+
+    this.responseValue = JSON.stringify(response);
+    this.responseTarget.value = JSON.stringify(response);
+  }
+
+  responseValueChanged(response) {
+    const responsePresent = response !== "";
+    this.introTarget.toggleAttribute("hidden", responsePresent);
+    this.nicknameTarget.toggleAttribute("hidden", !responsePresent);
+  }
+
+  get options() {
+    return parseCreationOptionsFromJSON(this.optionsValue);
+  }
+}
+
+application.load(content);
+application.load(govuk);
+application.load(navigation);
+application.load(tables);
+
+const Definitions = [
+  {
+    identifier: "clipboard",
+    controllerConstructor: ClipboardController,
+  },
+  {
+    identifier: "flash",
+    controllerConstructor: FlashController,
+  },
+  {
+    identifier: "form-request-submit",
+    controllerConstructor: FormRequestSubmitController,
+  },
+  {
+    identifier: "index-actions",
+    controllerConstructor: IndexActionsController,
+  },
+  {
+    identifier: "keyboard",
+    controllerConstructor: KeyboardController,
+  },
+  {
+    identifier: "modal",
+    controllerConstructor: ModalController,
+  },
+  {
+    identifier: "navigation",
+    controllerConstructor: NavigationController,
+  },
+  {
+    identifier: "navigation-toggle",
+    controllerConstructor: NavigationToggleController,
+  },
+  {
+    identifier: "pagy-nav",
+    controllerConstructor: PagyNavController,
+  },
+  {
+    identifier: "show-hide",
+    controllerConstructor: ShowHideController,
+  },
+  {
+    identifier: "sluggable",
+    controllerConstructor: SluggableController,
+  },
+  {
+    identifier: "webauthn-authentication",
+    controllerConstructor: WebauthnAuthenticationController,
+  },
+  {
+    identifier: "webauthn-registration",
+    controllerConstructor: WebauthnRegistrationController,
+  },
+];
+
+application.load(Definitions);
+
+eagerLoadControllersFrom("admin/controllers", application);
+
+class KoiToolbarElement extends HTMLElement {
+  constructor() {
+    super();
+
+    this.setAttribute("role", "toolbar");
+  }
+}
+
+customElements.define("koi-toolbar", KoiToolbarElement);
+
+/** Let GOVUK know that we've got JS enabled */
+window.addEventListener("turbo:load", () => {
+  document.body.classList.toggle("js-enabled", true);
+  document.body.classList.toggle(
+    "govuk-frontend-supported",
+    "noModule" in HTMLScriptElement.prototype,
+  );
+  initAll();
+});