katalyst-koi 4.0.0

data/app/assets/images/koi/application/select-arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 13">
+  <path d="M.541 0l11.125 12.573a.5.5 0 00.749 0L23.541 0h-23z" fill="#000" fill-rule="evenodd"/>
+</svg>

data/app/assets/javascripts/koi/admin.js

@@ -0,0 +1,4 @@
+import "koi/controllers";
+
+/** Let GOVUK know that we've got JS enabled */
+document.body.classList.add("js-enabled");

data/app/assets/javascripts/koi/controllers/application.js

@@ -0,0 +1,11 @@
+import { Application } from "@hotwired/stimulus";
+
+// Stimulus controllers. This should ultimately be moved to koi/admin.js
+import "@hotwired/turbo-rails";
+import "@rails/actiontext";
+
+const application = Application.start();
+
+window.Stimulus = application;
+
+export { application };

data/app/assets/javascripts/koi/controllers/document_field_controller.js

@@ -0,0 +1,26 @@
+import FileFieldController from "koi/controllers/file_field_controller";
+
+export default class DocumentFieldController extends FileFieldController {
+  connect() {
+    this.initialPreviewContent = this.filenameTag.text;
+  }
+
+  setPreviewContent(content) {
+    this.filenameTag.innerText = content;
+  }
+
+  showPreview(file) {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      if (this.filenameTag) {
+        this.filenameTag.innerText = file.name;
+      }
+    };
+    reader.readAsDataURL(file);
+  }
+
+  get filenameTag() {
+    return this.previewTarget.querySelector("p.preview-filename");
+  }
+}

data/app/assets/javascripts/koi/controllers/file_field_controller.js

@@ -0,0 +1,143 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class FileFieldController extends Controller {
+  static targets = ["preview", "destroy"];
+  static values = {
+    mimeTypes: Array,
+  };
+
+  connect() {
+    this.counter = 0;
+    this.initialPreviewContent = null;
+    this.onUploadFlag = false;
+  }
+
+  onUpload(event) {
+    this.onUploadFlag = true;
+
+    // Set the file to be destroyed only if it is already persisted
+    if (this.hasDestroyTarget) {
+      this.destroyTarget.value = false;
+    }
+    this.previewTarget.classList.remove("hidden");
+
+    // Show preview only if a file has been selected in the file picker popup. If cancelled, show previous file or do
+    // not show preview at all
+    if (this.hasPreviewTarget) {
+      if (event.currentTarget.files.length > 0) {
+        this.showPreview(event.currentTarget.files[0]);
+      } else {
+        this.setPreviewContent(this.initialPreviewContent);
+      }
+    }
+  }
+
+  setDestroy(event) {
+    event.preventDefault();
+
+    // If the data is already persisted and another image has been picked from the file picker popup, but the new image
+    // is removed, show the original image
+    if (this.initialPreviewContent && this.onUploadFlag) {
+      this.onUploadFlag = false;
+      this.setPreviewContent(this.initialPreviewContent);
+    } else {
+      // Set image to be destroyed, hide preview and remove image url
+      if (this.hasDestroyTarget) {
+        this.destroyTarget.value = true;
+      }
+      if (this.hasPreviewTarget) {
+        this.previewTarget.classList.add("hidden");
+        this.setPreviewContent("");
+      }
+    }
+
+    this.fileInput.value = "";
+  }
+
+  setPreviewContent(content) {
+    if (this.filenameTag) {
+      this.filenameTag.innerText = text;
+    }
+  }
+
+  drop(event) {
+    event.preventDefault();
+
+    const file = this.fileForEvent(event, this.mimeTypesValue);
+    if (file) {
+      const dT = new DataTransfer();
+      dT.items.add(file);
+      this.fileInput.files = dT.files;
+      this.fileInput.dispatchEvent(new Event("change"));
+    }
+
+    this.counter = 0;
+    this.element.classList.remove("droppable");
+  }
+
+  dragover(event) {
+    event.preventDefault();
+  }
+
+  dragenter(event) {
+    event.preventDefault();
+
+    if (this.counter === 0) {
+      this.element.classList.add("droppable");
+    }
+    this.counter++;
+  }
+
+  dragleave(event) {
+    event.preventDefault();
+
+    this.counter--;
+    if (this.counter === 0) {
+      this.element.classList.remove("droppable");
+    }
+  }
+
+  get fileInput() {
+    return this.element.querySelector("input[type='file']");
+  }
+
+  get filenameTag() {
+    if (!this.hasPreviewTarget) return null;
+
+    return this.previewTarget.querySelector("p.preview-filename");
+  }
+
+  showPreview(file) {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      if (this.filenameTag) {
+        this.filenameTag.innerText = file.name;
+      }
+    };
+    reader.readAsDataURL(file);
+  }
+
+  /**
+   * Given a drop event, find the first acceptable file.
+   * @param event {DropEvent}
+   * @param mimeTypes {String[]}
+   * @returns {File}
+   */
+  fileForEvent(event, mimeTypes) {
+    const accept = (file) => mimeTypes.indexOf(file.type) > -1;
+
+    let file;
+
+    if (event.dataTransfer.items) {
+      const item = [...event.dataTransfer.items].find(accept);
+      if (item) {
+        file = item.getAsFile();
+      }
+    } else {
+      file = [...event.dataTransfer.files].find(accept);
+    }
+
+    return file;
+  }
+}

data/app/assets/javascripts/koi/controllers/flash_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default 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();
+    }
+  }
+}

data/app/assets/javascripts/koi/controllers/form_request_submit_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ A stimulus controller to request form submissions.
+ This controller should be attached to a form element.
+ */
+export default class extends Controller {
+  requestSubmit() {
+    this.element.requestSubmit();
+  }
+}

data/app/assets/javascripts/koi/controllers/image_field_controller.js

@@ -0,0 +1,24 @@
+import FileFieldController from "koi/controllers/file_field_controller";
+
+export default class ImageFieldController extends FileFieldController {
+  connect() {
+    this.initialPreviewContent = this.imageTag.getAttribute("src");
+  }
+
+  setPreviewContent(content) {
+    this.imageTag.src = content;
+  }
+
+  showPreview(file) {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      this.imageTag.src = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  }
+
+  get imageTag() {
+    return this.previewTarget.querySelector("img");
+  }
+}

data/app/assets/javascripts/koi/controllers/index.js

@@ -0,0 +1,6 @@
+import { application } from "koi/controllers/application";
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading";
+eagerLoadControllersFrom("controllers", application);
+eagerLoadControllersFrom("koi/controllers", application);

data/app/assets/javascripts/koi/controllers/index_actions_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default 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() {
+    if (this.searchTarget.value === "") {
+      this.searchTarget.disabled = true;
+    }
+    if (this.sortTarget.value === "") {
+      this.sortTarget.disabled = true;
+    }
+    setTimeout(() => {
+      this.searchTarget.disabled = false;
+      this.sortTarget.disabled = false;
+    });
+  }
+
+  nextPage() {
+    this.element.parentElement.querySelector(".pagination .next a").click();
+  }
+
+  prevPage() {
+    this.element.parentElement.querySelector(".pagination .prev a").click();
+  }
+}
+
+function debounce(self, f) {
+  return (...args) => {
+    clearTimeout(self.timer);
+    self.timer = setTimeout(() => {
+      f.apply(self, ...args);
+    }, 300);
+  };
+}

data/app/assets/javascripts/koi/controllers/keyboard_controller.js

@@ -0,0 +1,149 @@
+import { Controller } from "@hotwired/stimulus";
+
+const DEBUG = false;
+
+export default 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);
+
+    if (DEBUG) console.debug("[keyboard] buffer:", ...this.buffer);
+
+    // 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();
+
+    if (DEBUG) console.debug("[keyboard] event: %s", action);
+
+    // 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
+  );
+}

data/app/assets/javascripts/koi/controllers/navigation_controller.js

@@ -0,0 +1,84 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class NavigationController extends Controller {
+  static targets = ["filter"];
+
+  focus() {
+    this.filterTarget.focus();
+  }
+
+  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();
+  }
+
+  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.toggleAttribute("aria-expanded");
+  }
+
+  get links() {
+    return Array.from(this.element.querySelectorAll("li:has(> a)"));
+  }
+
+  get menus() {
+    return Array.from(this.element.querySelectorAll("li:has(> ul)"));
+  }
+}

data/app/assets/javascripts/koi/controllers/navigation_toggle_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class NavigationToggleController extends Controller {
+  trigger() {
+    this.dispatch("toggle", { prefix: "navigation", bubbles: true });
+  }
+}

data/app/assets/javascripts/koi/controllers/show_hide_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus";
+import { Transition } from "koi/utils/transition";
+
+export default 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();
+  }
+}

data/app/assets/javascripts/koi/controllers/sluggable_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Connect an input (e.g. title) to slug.
+ */
+export default 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, "");
+}