ファイルドロップゾーン

<%# Markup for the file-dropzone (file drag & drop / image preview) demo.
    Click or keyboard launches the native file input, and drag & drop also adds files.
    It validates accept / maxSize / duplicates / count and shows image thumbnails via
    objectURL. The library handles the drop bridge, validation, preview create/revoke,
    focus handoff on removal, mirroring the accepted files back onto the native input,
    and the announcements read by the shared stimeo--announcer your app seats once,
    in its layout (additions, rejections, removals, and the drag affordance are the
    transitions worth reading; the dropzone owns no live region of its own).
    Drag & drop is only an aid — selection is always possible via click / keyboard. %>
<div class="file-dropzone" data-controller="stimeo--file-dropzone"
     data-stimeo--file-dropzone-max-size-value="5242880"
     data-stimeo--file-dropzone-max-files-value="4"
     data-stimeo--file-dropzone-announce-drag-text-value="<%= t(
       'components.file_dropzone.demo.drag_label'
     ) %>"
     data-stimeo--file-dropzone-announce-added-text-value="<%= t(
       'components.file_dropzone.demo.announce_added'
     ) %>"
     data-stimeo--file-dropzone-announce-removed-text-value="<%= t(
       'components.file_dropzone.demo.announce_removed'
     ) %>"
     data-stimeo--file-dropzone-announce-rejected-type-text-value="<%= t(
       'components.file_dropzone.demo.announce_reject_type'
     ) %>"
     data-stimeo--file-dropzone-announce-rejected-size-text-value="<%= t(
       'components.file_dropzone.demo.announce_reject_size'
     ) %>"
     data-stimeo--file-dropzone-announce-rejected-duplicate-text-value="<%= t(
       'components.file_dropzone.demo.announce_reject_duplicate'
     ) %>"
     data-stimeo--file-dropzone-announce-rejected-count-text-value="<%= t(
       'components.file_dropzone.demo.announce_reject_count'
     ) %>">
  <div
    class="file-dropzone__zone"
    data-stimeo--file-dropzone-target="zone"
    data-action="dragover->stimeo--file-dropzone#onDragOver
                 dragleave->stimeo--file-dropzone#onDragLeave
                 drop->stimeo--file-dropzone#onDrop">
    <button
      type="button"
      class="demo-trigger file-dropzone__trigger"
      data-stimeo--file-dropzone-target="trigger"
      data-action="click->stimeo--file-dropzone#openDialog">
      <%= t("components.file_dropzone.demo.trigger") %>
    </button>
    <input
      type="file"
      accept="image/*"
      multiple
      aria-label="<%= t('components.file_dropzone.demo.input_label') %>"
      class="file-dropzone__input visually-hidden"
      data-stimeo--file-dropzone-target="input"
      data-action="change->stimeo--file-dropzone#onChange" />
  </div>

  <ul
    class="file-dropzone__list"
    aria-label="<%= t('components.file_dropzone.demo.list_label') %>"
    data-stimeo--file-dropzone-target="list"></ul>

  <%# Demo-only: the library accepts only unique images within the limits (5 MB / 4 files)
      and fires stimeo--file-dropzone:reject for the rest — accepted images get a thumbnail
      preview. The reason is already spoken by the shared announcer; this repeats it on
      screen so a rejected file (e.g. an over-size photo) is not mistaken for a broken
      preview. demo.js fills this from the reject event; the reason copy is localized here. %>
  <p class="file-dropzone__error"
     data-file-dropzone-error
     hidden
     data-reason-type="<%= t('components.file_dropzone.demo.reject_type') %>"
     data-reason-size="<%= t('components.file_dropzone.demo.reject_size') %>"
     data-reason-duplicate="<%= t('components.file_dropzone.demo.reject_duplicate') %>"
     data-reason-count="<%= t('components.file_dropzone.demo.reject_count') %>"></p>

  <template data-stimeo--file-dropzone-target="itemTemplate">
    <li class="file-dropzone__item" data-stimeo--file-dropzone-target="item">
      <img class="file-dropzone__thumb" data-stimeo--file-dropzone-target="thumb" alt="" hidden />
      <span class="file-dropzone__name" data-stimeo--file-dropzone-target="name"></span>
      <%# Removal is handled by a delegated listener on the list container, so it
          works instantly without waiting on Stimulus wiring a data-action onto the
          dynamically-added button. The library keeps this aria-label and only
          expands {name}, so the accessible name stays in the page's language. %>
      <button
        type="button"
        class="file-dropzone__remove"
        aria-label="<%= t('components.file_dropzone.demo.remove_label') %>"
        data-stimeo--file-dropzone-target="remove">
        <%= t("components.file_dropzone.demo.remove") %>
      </button>
    </li>
  </template>
</div>

/*
 * Presentation-only styles for the file-dropzone demo.
 * The library toggles the zone's data-dragover for drag state and
 * data-stimeo--file-dropzone-invalid for a rejected validation (both are also
 * spoken through the shared announcer, never signalled via color alone).
 * Creating/revoking previews and moving focus on removal are also the library's
 * responsibility.
 */

.file-dropzone {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 30rem;
}

.file-dropzone__zone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 2px dashed var(--border-strong);
  border-radius: 0.625rem;
  background: var(--surface-subtle);
  text-align: center;
}

.file-dropzone__zone[data-dragover] {
  border-color: var(--accent, var(--color-primary));
  background: var(--color-primary-soft);
}

.file-dropzone__zone[data-stimeo--file-dropzone-invalid] {
  border-color: var(--danger-500);
  background: var(--danger-50);
}

/* Weightier than a plain launcher: it is the zone's own call to action. */
.file-dropzone__trigger {
  font-weight: 600;
}

.file-dropzone__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.file-dropzone__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-default);
  border-radius: 0.375rem;
}

.file-dropzone__thumb {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 0.25rem;
}

.file-dropzone__name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--fg, var(--color-text));
  word-break: break-all;
}

.file-dropzone__remove {
  border: 0;
  background: transparent;
  color: var(--danger-500);
  font: inherit;
  cursor: pointer;
}

.file-dropzone__remove:focus-visible {
  outline: 2px solid var(--accent, var(--color-primary));
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Visible reason for a rejected file (filled by demo.js from the reject event). */
.file-dropzone__error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--danger-500);
}

// Demo: the library validates every file against accept / maxSize / duplicates / maxFiles
// and fires stimeo--file-dropzone:reject for the ones it turns away — accepted images get a
// thumbnail preview. The reason is already spoken through the shared announcer (the
// announce-rejected-*-text values on the root); this repeats it on screen so a rejected file
// (e.g. an image over the 5 MB limit) is not mistaken for a broken preview. The reason copy
// is localized in the view; reason is one of type / size / duplicate / count and is read
// straight off data-reason-<reason> (no dataset camelCase round-trip). A drop that
// mixes accepted and rejected files reports the accepted set first, so clearing on
// change never wipes the notice raised by that same drop.
document.querySelectorAll('[data-controller~="stimeo--file-dropzone"]').forEach((root) => {
  const error = root.querySelector("[data-file-dropzone-error]");
  if (!error) return;

  root.addEventListener("stimeo--file-dropzone:reject", (event) => {
    const { file, reason } = event.detail;
    const detail = error.getAttribute(`data-reason-${reason}`);
    if (!detail) return;
    error.textContent = `${file.name}: ${detail}`;
    error.hidden = false;
  });

  const clear = () => {
    error.hidden = true;
    error.textContent = "";
  };
  // A successful add clears the last rejection notice. So does the cache rewind:
  // it reports the selection it discards as reconcile, and a notice about a file
  // that is no longer listed must not ride into the Turbo snapshot.
  root.addEventListener("stimeo--file-dropzone:change", clear);
  root.addEventListener("stimeo--file-dropzone:reconcile", clear);
});