nitro_kit 0.9.0 → 2.0.0.alpha.2

data/app/javascript/controllers/nk/dropzone_controller.js

@@ -0,0 +1,482 @@
+import { Controller } from "@hotwired/stimulus";
+import DirectUploadSession from "controllers/nk/dropzone/direct_upload";
+import {
+  formatBytes,
+  interpolate,
+  rejectionMessage,
+  validateFiles,
+} from "controllers/nk/dropzone/file_rules";
+import {
+  acquireFormSubmitLock,
+  releaseFormSubmitLock,
+} from "controllers/nk/dropzone/form_submit_lock";
+
+// The Dropzone component translates every user-facing string and passes it in
+// as a Stimulus value. These are the shipped English fallbacks for markup that
+// predates a value or was assembled without the component.
+const MESSAGES = {
+  progressFor: "Upload progress for %{name}",
+  removeFile: "Remove %{name}",
+  uploading: "Uploading",
+  uploadingPercent: "Uploading %{percent}%",
+  uploaded: "Uploaded",
+  uploadFailed: "Upload failed",
+  ready: "Ready to submit",
+  statusEmpty: "No files selected.",
+  statusSelectedOne: "%{count} file selected.",
+  statusSelectedOther: "%{count} files selected.",
+  statusUploadingOne: "Uploading %{count} file.",
+  statusUploadingOther: "Uploading %{count} files.",
+  statusAttentionOne: "%{count} file needs attention.",
+  statusAttentionOther: "%{count} files need attention.",
+  statusUploadedOne: "%{count} file uploaded.",
+  statusUploadedOther: "%{count} files uploaded.",
+  statusReadyOne: "%{count} file ready to submit.",
+  statusReadyOther: "%{count} files ready to submit.",
+  errorsUploadFailed: "%{name} could not be uploaded.",
+  errorsUploadFailedDetail: "%{name} could not be uploaded: %{error}",
+  errorsUploadsInProgress:
+    "Wait for uploads to finish before submitting the form.",
+  errorsFailedFiles:
+    "Remove failed files or choose them again before submitting the form.",
+  errorsTooLarge: "%{name} is larger than %{size}.",
+  errorsNotAccepted: "%{name} is not an accepted file type.",
+  errorsMaxFilesOne: "Choose no more than %{count} file.",
+  errorsMaxFilesOther: "Choose no more than %{count} files.",
+};
+
+export default class extends Controller {
+  static targets = [
+    "input",
+    "status",
+    "error",
+    "previewList",
+    "previewTemplate",
+  ];
+  static values = {
+    directUpload: Boolean,
+    maxFiles: Number,
+    maxBytes: Number,
+    accept: String,
+    ...Object.fromEntries(Object.keys(MESSAGES).map((key) => [key, String])),
+  };
+
+  message(key, replacements) {
+    return interpolate(this[`${key}Value`] || MESSAGES[key], replacements);
+  }
+
+  pluralMessage(key, count, replacements = {}) {
+    return this.message(`${key}${count === 1 ? "One" : "Other"}`, {
+      count,
+      ...replacements,
+    });
+  }
+
+  get fileRuleMessages() {
+    return {
+      tooLarge: this.message("errorsTooLarge"),
+      notAccepted: this.message("errorsNotAccepted"),
+      maxFilesOne: this.message("errorsMaxFilesOne"),
+      maxFilesOther: this.message("errorsMaxFilesOther"),
+    };
+  }
+
+  connect() {
+    this.entries = [];
+    this.nextIdentifier = 1;
+    this.dragDepth = 0;
+    this.initialInputDisabled = this.inputTarget.disabled;
+    this.submitLockOwner = {};
+
+    const files = Array.from(this.inputTarget.files);
+    if (files.length > 0) this.replaceFiles(files);
+  }
+
+  disconnect() {
+    this.release({ clearInput: false });
+  }
+
+  select() {
+    this.replaceFiles(Array.from(this.inputTarget.files));
+  }
+
+  dragEnter(event) {
+    if (!this.hasFiles(event)) return;
+
+    event.preventDefault();
+    this.dragDepth += 1;
+    this.element.dataset.state = "drag";
+  }
+
+  dragOver(event) {
+    if (!this.hasFiles(event)) return;
+
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  }
+
+  dragLeave(event) {
+    if (!this.hasFiles(event)) return;
+
+    event.preventDefault();
+    this.dragDepth = Math.max(0, this.dragDepth - 1);
+    if (this.dragDepth === 0) this.reflectState();
+  }
+
+  drop(event) {
+    if (!this.hasFiles(event)) return;
+
+    event.preventDefault();
+    this.dragDepth = 0;
+    this.replaceFiles(Array.from(event.dataTransfer.files));
+  }
+
+  remove(event) {
+    const item = event.currentTarget.closest("[data-slot='dropzone-preview']");
+    const entry = this.entries.find(
+      (candidate) => candidate.id === item?.dataset.fileId,
+    );
+    if (!entry) return;
+
+    this.releaseEntry(entry, { removeElement: true });
+    this.entries = this.entries.filter((candidate) => candidate !== entry);
+    this.syncNativeFiles();
+    this.clearError();
+    if (this.uploadingEntries.length === 0) this.restoreSubmitControls();
+
+    const failed = this.entries.find(
+      (candidate) => candidate.state === "error",
+    );
+    if (failed) {
+      this.showError(
+        this.message("errorsUploadFailed", { name: failed.file.name }),
+      );
+    }
+
+    this.reflectState();
+    this.announceSelection();
+  }
+
+  submit(event) {
+    const form = this.element.closest("form");
+    if (!form || event.target !== form) return;
+
+    if (this.uploadingEntries.length > 0) {
+      event.preventDefault();
+      this.showError(this.message("errorsUploadsInProgress"));
+      return;
+    }
+
+    if (
+      this.directUploadValue &&
+      this.entries.some((entry) => entry.state !== "success")
+    ) {
+      event.preventDefault();
+      this.showError(this.message("errorsFailedFiles"));
+      return;
+    }
+
+    if (this.directUploadValue && this.entries.length > 0) {
+      this.inputTarget.disabled = true;
+    }
+  }
+
+  teardown() {
+    this.release({ clearInput: true });
+  }
+
+  release({ clearInput }) {
+    const input = this.element.querySelector(
+      ':scope > [data-slot="dropzone-input"]',
+    );
+    const previewList = this.element.querySelector(
+      ':scope > [data-slot="dropzone-preview-list"]',
+    );
+    const status = this.element.querySelector(
+      ':scope > [data-slot="dropzone-status"]',
+    );
+    const error = this.element.querySelector(
+      ':scope > [data-slot="dropzone-error"]',
+    );
+
+    this.entries?.forEach((entry) =>
+      this.releaseEntry(entry, { removeElement: true }),
+    );
+    this.entries = [];
+    this.restoreSubmitControls();
+    this.dragDepth = 0;
+
+    if (input) {
+      input.disabled = this.initialInputDisabled;
+      input.setCustomValidity("");
+      input.removeAttribute("aria-invalid");
+      if (clearInput) input.value = "";
+    }
+    if (previewList) {
+      previewList.replaceChildren();
+      previewList.hidden = true;
+    }
+    const selectedCount = input ? input.files.length : 0;
+    if (status) {
+      status.textContent =
+        selectedCount === 0
+          ? this.message("statusEmpty")
+          : this.pluralMessage("statusSelected", selectedCount);
+    }
+    if (error) {
+      error.textContent = "";
+      error.hidden = true;
+    }
+    this.element.dataset.state = this.initialInputDisabled
+      ? "disabled"
+      : selectedCount > 0
+        ? "success"
+        : "idle";
+  }
+
+  replaceFiles(files) {
+    this.entries.forEach((entry) =>
+      this.releaseEntry(entry, { removeElement: true }),
+    );
+    this.entries = [];
+    this.restoreSubmitControls();
+    this.clearError();
+
+    const validation = validateFiles(files, {
+      maxFiles: this.maxFilesValue,
+      maxBytes: this.hasMaxBytesValue ? this.maxBytesValue : null,
+      accept: this.hasAcceptValue ? this.acceptValue : null,
+      messages: this.fileRuleMessages,
+    });
+    validation.accepted.forEach((file) => this.addFile(file));
+    this.syncNativeFiles();
+
+    if (this.directUploadValue) {
+      this.entries.forEach((entry) => this.startUpload(entry));
+    } else {
+      this.entries.forEach((entry) =>
+        this.updateEntry(entry, "success", 0, this.message("ready")),
+      );
+    }
+
+    this.reflectState();
+    this.announceSelection();
+    if (validation.rejected.length > 0) {
+      this.showError(rejectionMessage(validation.rejected), {
+        blocking: this.entries.length === 0,
+      });
+    }
+  }
+
+  addFile(file) {
+    const fragment = this.previewTemplateTarget.content.cloneNode(true);
+    const element = fragment.querySelector("[data-slot='dropzone-preview']");
+    const id = String(this.nextIdentifier++);
+    element.dataset.fileId = id;
+    element.querySelector("[data-slot='dropzone-file-name']").textContent =
+      file.name;
+    element.querySelector("[data-slot='dropzone-file-size']").textContent =
+      formatBytes(file.size);
+
+    const remove = element.querySelector(
+      "[data-slot='dropzone-remove-control']",
+    );
+    remove.setAttribute(
+      "aria-label",
+      this.message("removeFile", { name: file.name }),
+    );
+    const progress = element.querySelector("[data-slot='dropzone-progress']");
+    progress.setAttribute(
+      "aria-label",
+      this.message("progressFor", { name: file.name }),
+    );
+    progress.hidden = !this.directUploadValue;
+
+    const preview = element.querySelector(
+      "[data-slot='dropzone-preview-image']",
+    );
+    let objectUrl = null;
+    if (file.type.startsWith("image/")) {
+      objectUrl = URL.createObjectURL(file);
+      preview.src = objectUrl;
+      preview.hidden = false;
+    }
+
+    this.previewListTarget.append(fragment);
+    this.previewListTarget.hidden = false;
+    this.entries.push({ id, file, element, objectUrl, state: "queued" });
+  }
+
+  startUpload(entry) {
+    entry.state = "uploading";
+    this.updateEntry(entry, "uploading", 0, this.message("uploading"));
+    this.reflectState();
+    this.disableSubmitControls();
+
+    entry.upload = new DirectUploadSession(
+      entry.file,
+      this.inputTarget.dataset.directUploadUrl,
+      {
+        onProgress: (event) => this.progress(entry, event),
+        onComplete: (error, attributes) =>
+          this.completeUpload(entry, error, attributes),
+      },
+    );
+    entry.upload.start();
+  }
+
+  completeUpload(entry, error, attributes) {
+    if (entry.cancelled) return;
+
+    if (error) {
+      this.updateEntry(entry, "error", 0, this.message("uploadFailed"));
+      this.showError(
+        this.message("errorsUploadFailedDetail", {
+          name: entry.file.name,
+          error,
+        }),
+      );
+    } else {
+      entry.hiddenInput = this.createSignedIdInput(attributes.signed_id);
+      this.updateEntry(entry, "success", 100, this.message("uploaded"));
+    }
+
+    this.reflectState();
+    if (this.uploadingEntries.length === 0) this.restoreSubmitControls();
+    this.announceSelection();
+  }
+
+  progress(entry, event) {
+    if (!event.lengthComputable || entry.cancelled) return;
+
+    const percentage = Math.round((event.loaded / event.total) * 100);
+    this.updateEntry(
+      entry,
+      "uploading",
+      percentage,
+      this.message("uploadingPercent", { percent: percentage }),
+    );
+  }
+
+  updateEntry(entry, state, progress, message) {
+    entry.state = state;
+    entry.element.dataset.state = state;
+    entry.element.querySelector("[data-slot='dropzone-progress']").value =
+      progress;
+    entry.element.querySelector(
+      "[data-slot='dropzone-file-status']",
+    ).textContent = message;
+  }
+
+  createSignedIdInput(value) {
+    const input = document.createElement("input");
+    input.type = "hidden";
+    input.name = this.inputTarget.name;
+    input.value = value;
+    input.dataset.slot = "dropzone-signed-id";
+    this.inputTarget.insertAdjacentElement("afterend", input);
+    return input;
+  }
+
+  releaseEntry(entry, { removeElement }) {
+    entry.cancelled = true;
+    entry.upload?.cancel();
+    entry.upload = null;
+    entry.hiddenInput?.remove();
+    if (entry.objectUrl) URL.revokeObjectURL(entry.objectUrl);
+    if (removeElement) entry.element.remove();
+  }
+
+  syncNativeFiles() {
+    const transfer = new DataTransfer();
+    this.entries.forEach((entry) => transfer.items.add(entry.file));
+    this.inputTarget.files = transfer.files;
+    this.previewListTarget.hidden = this.entries.length === 0;
+  }
+
+  reflectState() {
+    if (this.dragDepth > 0) return;
+
+    if (
+      !this.errorTarget.hidden ||
+      this.entries.some((entry) => entry.state === "error")
+    ) {
+      this.element.dataset.state = "error";
+    } else if (this.uploadingEntries.length > 0) {
+      this.element.dataset.state = "uploading";
+    } else if (this.entries.length > 0) {
+      this.element.dataset.state = "success";
+    } else {
+      this.element.dataset.state = "idle";
+    }
+  }
+
+  announceSelection() {
+    const count = this.entries.length;
+    if (count === 0) {
+      this.statusTarget.textContent = this.message("statusEmpty");
+    } else if (this.uploadingEntries.length > 0) {
+      this.statusTarget.textContent = this.pluralMessage(
+        "statusUploading",
+        count,
+      );
+    } else if (this.entries.some((entry) => entry.state === "error")) {
+      this.statusTarget.textContent = this.pluralMessage(
+        "statusAttention",
+        count,
+      );
+    } else if (
+      this.directUploadValue &&
+      this.entries.every((entry) => entry.state === "success")
+    ) {
+      this.statusTarget.textContent = this.pluralMessage(
+        "statusUploaded",
+        count,
+      );
+    } else {
+      this.statusTarget.textContent = this.pluralMessage("statusReady", count);
+    }
+  }
+
+  showError(message, { blocking = true } = {}) {
+    this.errorTarget.textContent = message;
+    this.errorTarget.hidden = false;
+    this.inputTarget.setCustomValidity(blocking ? message : "");
+    if (blocking) {
+      this.inputTarget.setAttribute("aria-invalid", "true");
+    } else {
+      this.inputTarget.removeAttribute("aria-invalid");
+    }
+    this.element.dataset.state = "error";
+  }
+
+  clearError() {
+    this.errorTarget.textContent = "";
+    this.errorTarget.hidden = true;
+    this.inputTarget.setCustomValidity("");
+    this.inputTarget.removeAttribute("aria-invalid");
+  }
+
+  disableSubmitControls() {
+    const form = this.element.closest("form");
+    if (this.lockedForm && this.lockedForm !== form) {
+      releaseFormSubmitLock(this.lockedForm, this.submitLockOwner);
+    }
+
+    this.lockedForm = form;
+    acquireFormSubmitLock(form, this.submitLockOwner);
+  }
+
+  restoreSubmitControls() {
+    releaseFormSubmitLock(this.lockedForm, this.submitLockOwner);
+    this.lockedForm = null;
+  }
+
+  hasFiles(event) {
+    return Array.from(event.dataTransfer?.types || []).includes("Files");
+  }
+
+  get uploadingEntries() {
+    return this.entries.filter((entry) => entry.state === "uploading");
+  }
+}

data/app/javascript/controllers/nk/overlay_position.js

@@ -0,0 +1,37 @@
+export function positionOverlay(trigger, overlay, placement) {
+  const triggerRect = trigger.getBoundingClientRect();
+  overlay.style.setProperty("--_nk-combobox-width", `${triggerRect.width}px`);
+  const overlayRect = overlay.getBoundingClientRect();
+  const gap = 4;
+  const inset = 16;
+  const [side, alignment] = placement.split("-");
+  const preferredTop =
+    side === "top"
+      ? triggerRect.top - overlayRect.height - gap
+      : triggerRect.bottom + gap;
+  const preferredLeft =
+    alignment === "end"
+      ? triggerRect.right - overlayRect.width
+      : triggerRect.left;
+  const top = Math.min(
+    Math.max(preferredTop, inset),
+    window.innerHeight - overlayRect.height - inset,
+  );
+  const left = Math.min(
+    Math.max(preferredLeft, inset),
+    window.innerWidth - overlayRect.width - inset,
+  );
+
+  overlay.style.setProperty("--_nk-overlay-top", `${top}px`);
+  overlay.style.setProperty("--_nk-overlay-left", `${left}px`);
+}
+
+export function observeOverlayPosition(callback) {
+  document.addEventListener("scroll", callback, true);
+  window.addEventListener("resize", callback);
+
+  return () => {
+    document.removeEventListener("scroll", callback, true);
+    window.removeEventListener("resize", callback);
+  };
+}

data/app/javascript/controllers/nk/progressive_image_controller.js

@@ -0,0 +1,116 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["image", "fallback"];
+
+  connect() {
+    this.connected = true;
+    this.onLoad ||= this.loaded.bind(this);
+    this.onError ||= this.failed.bind(this);
+    this.element.dataset.enhanced = "true";
+
+    if (this.hasImageTarget) {
+      this.bindImage(this.imageTarget);
+    } else {
+      this.setState("empty");
+    }
+  }
+
+  disconnect() {
+    this.connected = false;
+    this.releaseImage();
+    delete this.element.dataset.enhanced;
+
+    if (this.hasFallbackTarget) this.fallbackTarget.hidden = true;
+  }
+
+  imageTargetConnected(image) {
+    if (this.connected) this.bindImage(image);
+  }
+
+  imageTargetDisconnected(image) {
+    if (this.boundImage !== image) return;
+
+    this.releaseImage();
+    if (this.connected && !this.hasImageTarget) this.setState("empty");
+  }
+
+  fallbackTargetConnected(fallback) {
+    if (!this.connected) return;
+
+    fallback.hidden = !["empty", "error"].includes(this.element.dataset.state);
+  }
+
+  bindImage(image) {
+    if (this.boundImage === image) return;
+
+    this.releaseImage();
+    this.boundImage = image;
+    this.revision = (this.revision || 0) + 1;
+    this.setState("loading");
+    image.addEventListener("load", this.onLoad);
+    image.addEventListener("error", this.onError);
+
+    if (image.complete) this.reflectComplete(image);
+  }
+
+  releaseImage() {
+    if (this.boundImage) {
+      this.boundImage.removeEventListener("load", this.onLoad);
+      this.boundImage.removeEventListener("error", this.onError);
+    }
+
+    this.boundImage = null;
+    this.revision = (this.revision || 0) + 1;
+  }
+
+  async loaded(event) {
+    const image = event?.currentTarget || this.boundImage;
+    if (!image || image !== this.boundImage) return;
+
+    const revision = ++this.revision;
+
+    if (typeof image.decode === "function") {
+      try {
+        await image.decode();
+      } catch {
+        // naturalWidth below remains the source of truth for cached and SVG images.
+      }
+    }
+
+    if (
+      !this.connected ||
+      image !== this.boundImage ||
+      revision !== this.revision
+    ) {
+      return;
+    }
+
+    this.setState(image.naturalWidth > 0 ? "loaded" : "error");
+  }
+
+  failed(event) {
+    const image = event?.currentTarget || this.boundImage;
+    if (!image || image !== this.boundImage) return;
+
+    this.revision = (this.revision || 0) + 1;
+    this.setState("error");
+  }
+
+  reflectComplete(image) {
+    if (image.naturalWidth > 0) {
+      this.loaded();
+    } else {
+      this.failed();
+    }
+  }
+
+  setState(state) {
+    this.element.dataset.state = state;
+    this.element.setAttribute("aria-busy", String(state === "loading"));
+
+    if (this.hasFallbackTarget) {
+      this.fallbackTarget.hidden = !["empty", "error"].includes(state);
+    }
+  }
+}