structure refacto & file documentation

2026-07-25 17:51:53 +02:00 · 2026-07-25 17:51:53 +02:00 · 895fec2b40
commit 895fec2b40
parent d7871736c8
84 changed files with 2629 additions and 2313 deletions
--- a/website/src/features/toolboxes/modules/ImagesModule.jsx
+++ b/website/src/features/toolboxes/modules/ImagesModule.jsx
@ -0,0 +1,108 @@
+// Rôle : fournit l'outil images avec import, collage, libellés et annotation rapide.
+import { useState } from "react";
+import { Icon } from "../../../components/Icon.jsx";
+
+export function ImagesModule({ toolboxId, moduleId, context, editing }) {
+  const data = context.getModuleData(toolboxId, moduleId, { images: [] });
+  const textContent = context.moduleText?.images || {};
+  const [dragOver, setDragOver] = useState(false);
+  const pastePlaceholder = textContent.pastePlaceholder || "Coller une image ici";
+
+  async function addFiles(files) {
+    if (await context.addImageFiles(toolboxId, moduleId, files)) {
+      setDragOver(false);
+    }
+  }
+
+  function updateImage(imageId, patch) {
+    context.setModuleData(toolboxId, moduleId, {
+      images: data.images.map((image) => image.id === imageId ? { ...image, ...patch } : image)
+    });
+  }
+
+  return (
+    <>
+      {editing && (
+        <div className="module-add-panel">
+          <label
+            className={`dropzone ${dragOver ? "is-drag-over" : ""}`}
+            onDragOver={(event) => {
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "copy";
+              setDragOver(true);
+            }}
+            onDragLeave={() => setDragOver(false)}
+            onDrop={(event) => {
+              event.preventDefault();
+              addFiles(event.dataTransfer.files);
+            }}
+          >
+            <input type="file" accept="image/*" multiple hidden onChange={(event) => addFiles(event.target.files)} />
+            {textContent.addImages || "Ajouter des images"}
+          </label>
+          <div
+            className="paste-target"
+            contentEditable
+            suppressContentEditableWarning
+            role="textbox"
+            aria-label={textContent.pasteAriaLabel || "Coller une image depuis le presse-papiers"}
+            onFocus={(event) => {
+              if (event.currentTarget.textContent.trim() === pastePlaceholder) event.currentTarget.textContent = "";
+            }}
+            onBlur={(event) => {
+              if (!event.currentTarget.textContent.trim()) event.currentTarget.textContent = pastePlaceholder;
+            }}
+            onPaste={(event) => {
+              const files = [...(event.clipboardData?.items || [])]
+                .filter((item) => item.type.startsWith("image/"))
+                .map((item) => item.getAsFile())
+                .filter(Boolean);
+              if (!files.length) return;
+              event.preventDefault();
+              event.currentTarget.textContent = pastePlaceholder;
+              addFiles(files);
+            }}
+          >
+            {pastePlaceholder}
+          </div>
+        </div>
+      )}
+      <div className="images">
+        {data.images.map((image) => (
+          <figure key={image.id}>
+            <button className="image-preview" onClick={() => context.setImage(image)} aria-label={textContent.previewAriaLabel || "Agrandir l'image"}>
+              <img src={image.dataUrl} alt={textContent.imageAlt || "Image"} />
+            </button>
+            {editing ? (
+              <input
+                className="image-label-input"
+                value={image.label || ""}
+                placeholder={textContent.labelPlaceholder || "Libellé de l'image"}
+                onChange={(event) => updateImage(image.id, { label: event.target.value })}
+                aria-label={textContent.labelAriaLabel || "Libellé de l'image"}
+              />
+            ) : image.label ? (
+              <figcaption className="image-label">{image.label}</figcaption>
+            ) : null}
+            <div className="image-actions">
+              <button
+                className="image-annotate-button"
+                type="button"
+                onClick={() => context.createImageAnnotationModule?.(image.dataUrl)}
+                aria-label={textContent.annotateAriaLabel || "Annoter l'image"}
+                title={textContent.annotateTitle || "Annoter"}
+              >
+                <Icon name="map" />
+              </button>
+              <button className="image-delete-button danger" type="button" onClick={() => {
+                context.setModuleData(toolboxId, moduleId, { images: data.images.filter((item) => item.id !== image.id) });
+              }} aria-label={textContent.deleteAriaLabel || "Supprimer l'image"} title={textContent.deleteTitle || "Supprimer"}>
+                <Icon name="trash" />
+              </button>
+            </div>
+          </figure>
+        ))}
+      </div>
+    </>
+  );
+}