346 lines
15 KiB
JavaScript
346 lines
15 KiB
JavaScript
// Rôle : affiche les pages toolbox, le panneau latéral et leurs contrôles.
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { Icon } from "../../components/Icon.jsx";
|
|
import { ImportButton } from "../../components/ImportButton.jsx";
|
|
import { StorageQuota } from "../../components/StorageQuota.jsx";
|
|
import { ToastPositionSwitch } from "../../components/ToastPositionSwitch.jsx";
|
|
import { usePointerReorder } from "../../hooks/usePointerReorder.js";
|
|
import { compressImage } from "../../utils/imageCompression.js";
|
|
import { getSetting as dbGetSetting, setSetting as dbSetSetting } from "../../utils/indexedDbStorage.js";
|
|
import { getGameCardCover, ToolboxCard, ToolboxGameIcon, ToolboxIconPicker } from "./ToolboxCard.jsx";
|
|
import { AddToolControls, ToolboxModules } from "./modules/index.jsx";
|
|
import {
|
|
clampQty,
|
|
hostnameFromUrl,
|
|
normalizeCalculatorData,
|
|
normalizeChecklistData,
|
|
normalizeCountersData,
|
|
normalizeImageAnnotationData,
|
|
normalizeLinksData,
|
|
normalizeTaskPlannerData,
|
|
normalizeTimerData,
|
|
normalizeUrl,
|
|
uid
|
|
} from "./storage/toolboxStorage.js";
|
|
|
|
const DRAWER_WIDTH_SETTING = "drawerWidth";
|
|
|
|
async function copyText(value) {
|
|
try {
|
|
await navigator.clipboard.writeText(value);
|
|
return true;
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions, storageUsage, toastPosition, setToastPosition }) {
|
|
const content = siteContent.toolboxes;
|
|
const {
|
|
draggingId: draggingToolboxId,
|
|
dropTarget,
|
|
startDrag: startToolboxDrag
|
|
} = usePointerReorder({
|
|
targetSelector: ".toolbox-card",
|
|
getTargetId: (target) => target.dataset.toolboxId,
|
|
getPlacement: (event, target) => {
|
|
const rect = target.getBoundingClientRect();
|
|
return event.clientY > rect.top + rect.height / 2 || event.clientX > rect.left + rect.width / 2 ? "after" : "before";
|
|
},
|
|
onMove: (draggingId, targetId, placement) => {
|
|
const nextIds = toolboxes.map((toolbox) => toolbox.id).filter((id) => id !== draggingId);
|
|
const targetIndex = nextIds.indexOf(targetId);
|
|
nextIds.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, draggingId);
|
|
actions.updateToolboxOrder(nextIds);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="toolbox-page">
|
|
<section className="page-hero">
|
|
<div>
|
|
<p className="eyebrow">{content.eyebrow}</p>
|
|
<h1>{content.title}</h1>
|
|
<p>{content.summary}</p>
|
|
</div>
|
|
</section>
|
|
<section className="toolbar toolbox-actions-row">
|
|
<div>
|
|
<button className="primary" onClick={() => actions.setCreateModal({})}>{content.newButton}</button>
|
|
<ImportButton className="import-button" label={content.importOne} onFile={actions.importToolbox} />
|
|
</div>
|
|
<div>
|
|
<button className="primary" onClick={actions.exportAllToolboxes}>{content.exportAll}</button>
|
|
<ImportButton className="import-button" label={content.importAll} onFile={actions.importAllToolboxes} />
|
|
</div>
|
|
</section>
|
|
<section className="toolbox-preferences-row" aria-label={content.preferencesLabel}>
|
|
<div>
|
|
<p className="eyebrow">{content.preferencesLabel}</p>
|
|
<strong>{content.toastPositionLabel}</strong>
|
|
</div>
|
|
<ToastPositionSwitch
|
|
position={toastPosition}
|
|
onChange={setToastPosition}
|
|
labels={{
|
|
title: content.toastPositionLabel,
|
|
left: content.toastPositionLeft,
|
|
right: content.toastPositionRight
|
|
}}
|
|
/>
|
|
</section>
|
|
<section className="cards">
|
|
<StorageHelpCard help={content.storageHelp} />
|
|
{toolboxes.length ? toolboxes.map((toolbox) => (
|
|
<ToolboxCard
|
|
key={toolbox.id}
|
|
toolbox={toolbox}
|
|
game={getToolboxGame(toolbox)}
|
|
actions={actions}
|
|
draggingToolboxId={draggingToolboxId}
|
|
dropTarget={dropTarget}
|
|
onDragStart={startToolboxDrag}
|
|
/>
|
|
)) : (
|
|
<div className="empty"><h2>{content.emptyTitle}</h2><p>{content.emptyText}</p></div>
|
|
)}
|
|
</section>
|
|
<StorageQuota usage={storageUsage} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StorageHelpCard({ help }) {
|
|
return (
|
|
<article className="card storage-help-card" aria-labelledby="storage-help-title">
|
|
<div className="card-body">
|
|
<div className="storage-help-heading">
|
|
<span className="storage-help-mark" aria-hidden="true" />
|
|
<div><p className="eyebrow">IndexedDB</p><h2 id="storage-help-title">{help.title}</h2></div>
|
|
</div>
|
|
<p className="storage-help-intro">{help.text}</p>
|
|
<ul className="storage-help-list">
|
|
{help.items.map((item, index) => <li key={item}><span>{index + 1}</span><p>{item}</p></li>)}
|
|
</ul>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
export function ToolboxPage(props) {
|
|
const { toolboxId, toolboxes, getToolboxGame } = props;
|
|
const toolbox = toolboxes.find((item) => item.id === toolboxId);
|
|
if (!toolbox) return <div className="empty"><h1>Toolbox introuvable</h1><a className="button" href="#/toolboxes">Retour</a></div>;
|
|
return <ToolboxView {...props} toolbox={toolbox} toolboxGame={getToolboxGame(toolbox)} embedded={false} />;
|
|
}
|
|
|
|
function ToolboxView({ siteContent, toolbox, toolboxGame, embedded, actions, storageUsage, getModuleData, updateToolbox, updateModuleData, addImageFiles }) {
|
|
const moduleColumns = Number(toolbox.moduleColumns) === 1 ? 1 : 2;
|
|
const toolboxGameCover = getGameCardCover(toolboxGame);
|
|
const moduleText = siteContent.toolboxes.modules;
|
|
const moduleContext = {
|
|
getModuleData,
|
|
moduleText,
|
|
normalizeChecklistData,
|
|
normalizeLinksData,
|
|
normalizeCountersData,
|
|
normalizeCalculatorData,
|
|
normalizeImageAnnotationData,
|
|
normalizeTimerData,
|
|
normalizeTaskPlannerData,
|
|
normalizeUrl,
|
|
hostnameFromUrl,
|
|
copyText,
|
|
notify: actions.notify,
|
|
compressImageFile: compressImage,
|
|
clampQty,
|
|
uid,
|
|
setModuleData: updateModuleData,
|
|
addImageFiles,
|
|
createImageAnnotationModule,
|
|
setImage: actions.setImage,
|
|
refresh: () => {}
|
|
};
|
|
|
|
function addModule(type) {
|
|
if (!type) return;
|
|
updateToolbox({ ...toolbox, modules: [...toolbox.modules, { id: uid("mod"), type }] });
|
|
}
|
|
|
|
function createImageAnnotationModule(dataUrl) {
|
|
if (!dataUrl) return;
|
|
const moduleId = uid("mod");
|
|
updateToolbox({ ...toolbox, modules: [...toolbox.modules, { id: moduleId, type: "imageAnnotation" }] });
|
|
updateModuleData(toolbox.id, moduleId, { image: dataUrl, markers: [] }, "imageAnnotation");
|
|
}
|
|
|
|
function moveModule(fromModuleId, toModuleId, placement = "before") {
|
|
if (!fromModuleId || !toModuleId || fromModuleId === toModuleId) return;
|
|
const modules = [...toolbox.modules];
|
|
const fromIndex = modules.findIndex((module) => module.id === fromModuleId);
|
|
const toIndex = modules.findIndex((module) => module.id === toModuleId);
|
|
if (fromIndex < 0 || toIndex < 0) return;
|
|
const [moved] = modules.splice(fromIndex, 1);
|
|
const targetIndex = modules.findIndex((module) => module.id === toModuleId);
|
|
modules.splice(placement === "after" ? targetIndex + 1 : targetIndex, 0, moved);
|
|
updateToolbox({ ...toolbox, modules });
|
|
}
|
|
|
|
return (
|
|
<div className={embedded ? "toolbox-embedded" : "toolbox-page"}>
|
|
<section className={embedded ? "toolbox-head page-hero toolbox-head-embedded" : "toolbox-head page-hero"}>
|
|
<div>
|
|
<p className="eyebrow">Toolbox</p>
|
|
<div className="toolbox-title-row">
|
|
{!embedded && !toolboxGame && <ToolboxIconPicker toolbox={toolbox} onChange={(icon) => updateToolbox({ ...toolbox, icon })} />}
|
|
{!embedded && toolboxGameCover && <ToolboxGameIcon game={toolboxGame} />}
|
|
{embedded ? <h1>{toolbox.name}</h1> : (
|
|
<EditableTitle className="toolbox-title" value={toolbox.name} fallback="Nouvelle toolbox" onSave={(name) => name !== toolbox.name && updateToolbox({ ...toolbox, name })} />
|
|
)}
|
|
</div>
|
|
{toolboxGame && (
|
|
<a
|
|
className="button toolbox-hero-link"
|
|
href={embedded ? `#/toolbox/${toolbox.id}` : `#/games/${toolboxGame.id}`}
|
|
onClick={embedded ? () => actions.setDrawerGameId("") : undefined}
|
|
>
|
|
<Icon name="enter" />
|
|
<span>{embedded ? "Vers la toolbox complète" : "Vers la page de jeu"}</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
<div className="actions">
|
|
<AddToolControls onAdd={addModule} />
|
|
</div>
|
|
</section>
|
|
{!embedded && (
|
|
<section className="modules-toolbar" aria-label="Options d'affichage des outils">
|
|
<div className="layout-switch" role="group" aria-label="Mode d'affichage des outils">
|
|
<button className={moduleColumns === 1 ? "active" : ""} onClick={() => updateToolbox({ ...toolbox, moduleColumns: 1 })} aria-pressed={moduleColumns === 1} aria-label="Afficher en lignes" title="Afficher en lignes"><Icon name="rows" /></button>
|
|
<button className={moduleColumns === 2 ? "active" : ""} onClick={() => updateToolbox({ ...toolbox, moduleColumns: 2 })} aria-pressed={moduleColumns === 2} aria-label="Afficher en colonnes" title="Afficher en colonnes"><Icon name="columns" /></button>
|
|
</div>
|
|
</section>
|
|
)}
|
|
<ToolboxModules
|
|
toolbox={toolbox}
|
|
moduleColumns={moduleColumns}
|
|
context={moduleContext}
|
|
onRename={(moduleId, title) => updateToolbox({ ...toolbox, modules: toolbox.modules.map((module) => module.id === moduleId ? { ...module, title } : module) })}
|
|
onUpdateModule={(moduleId, updater) => updateToolbox({ ...toolbox, modules: toolbox.modules.map((module) => module.id === moduleId ? updater(module) : module) })}
|
|
onDelete={(moduleId) => actions.setConfirmModal({
|
|
title: "Retirer l'outil",
|
|
message: "Retirer cet outil de la toolbox ?",
|
|
confirmLabel: "Retirer",
|
|
danger: true,
|
|
onResolve: (confirmed) => {
|
|
if (!confirmed) return;
|
|
actions.removeModuleData(toolbox.id, moduleId);
|
|
updateToolbox({ ...toolbox, modules: toolbox.modules.filter((module) => module.id !== moduleId) });
|
|
}
|
|
})}
|
|
onMove={moveModule}
|
|
/>
|
|
{!embedded && <StorageQuota usage={storageUsage} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ToolboxDrawer({ gameId, game, siteContent, toolboxes, links, actions, storageUsage, getModuleData, updateToolbox, updateModuleData, addImageFiles }) {
|
|
const selectedId = links[gameId] || "";
|
|
const toolbox = toolboxes.find((item) => item.id === selectedId);
|
|
const [width, setWidth] = useState("");
|
|
const panelRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
dbGetSetting(DRAWER_WIDTH_SETTING, "")
|
|
.then((storedWidth) => {
|
|
if (cancelled) return;
|
|
const value = Number(storedWidth);
|
|
if (Number.isFinite(value) && value > 0) setWidth(Math.min(Math.max(value, 360), Math.floor(window.innerWidth * 0.94)));
|
|
})
|
|
.catch(() => {});
|
|
return () => { cancelled = true; };
|
|
}, []);
|
|
|
|
function startResize(event) {
|
|
const panel = panelRef.current;
|
|
if (!panel) return;
|
|
event.preventDefault();
|
|
const startX = event.clientX;
|
|
const startWidth = panel.getBoundingClientRect().width;
|
|
const minWidth = 360;
|
|
const maxWidth = Math.floor(window.innerWidth * 0.94);
|
|
document.body.classList.add("is-resizing-drawer");
|
|
const onMove = (moveEvent) => {
|
|
const nextWidth = Math.min(Math.max(startWidth + startX - moveEvent.clientX, minWidth), maxWidth);
|
|
setWidth(nextWidth);
|
|
dbSetSetting(DRAWER_WIDTH_SETTING, Math.round(nextWidth)).catch(() => {});
|
|
};
|
|
const stop = () => {
|
|
document.body.classList.remove("is-resizing-drawer");
|
|
window.removeEventListener("pointermove", onMove);
|
|
window.removeEventListener("pointerup", stop);
|
|
window.removeEventListener("pointercancel", stop);
|
|
};
|
|
window.addEventListener("pointermove", onMove);
|
|
window.addEventListener("pointerup", stop);
|
|
window.addEventListener("pointercancel", stop);
|
|
}
|
|
|
|
return (
|
|
<aside className="drawer" id="toolbox-drawer" aria-hidden="false" style={width ? { "--drawer-panel-width": `${width}px` } : undefined}>
|
|
<div className="drawer-backdrop" onClick={() => actions.setDrawerGameId("")} />
|
|
<span className="drawer-resize-handle" aria-hidden="true" onPointerDown={startResize} />
|
|
<section className="drawer-panel legacy-scrollbar" ref={panelRef} style={width ? { width } : undefined}>
|
|
<div className="drawer-content">
|
|
<header>
|
|
<div>
|
|
<p className="eyebrow">Toolbox liée</p>
|
|
<div className="drawer-toolbox-actions" aria-label="Actions toolbox liée">
|
|
<button className="drawer-action-button" onClick={() => actions.setLinkModalGameId(gameId)} aria-label="Lier une toolbox" title="Lier"><Icon name="link" /></button>
|
|
<ImportButton className="drawer-action-button import-icon-button" ariaLabel="Importer une toolbox" title="Importer" icon="import" onFile={(file) => actions.importToolbox(file, gameId)} />
|
|
<button className="drawer-action-button" onClick={() => actions.exportToolbox(selectedId)} disabled={!selectedId} aria-label="Exporter la toolbox liée" title="Exporter"><Icon name="export" /></button>
|
|
</div>
|
|
</div>
|
|
<button className="drawer-close-button" onClick={() => actions.setDrawerGameId("")} aria-label="Fermer" title="Fermer"><Icon name="close" /></button>
|
|
</header>
|
|
{toolbox ? <ToolboxView siteContent={siteContent} toolbox={toolbox} toolboxGame={game} embedded actions={actions} storageUsage={storageUsage} getModuleData={getModuleData} updateToolbox={updateToolbox} updateModuleData={updateModuleData} addImageFiles={addImageFiles} /> : (
|
|
<div className="empty"><p>Aucune toolbox associée à cette page jeu.</p><button className="primary" onClick={() => actions.setCreateModal({ gameId })}>Créer et associer</button></div>
|
|
)}
|
|
<StorageQuota usage={storageUsage} />
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
function EditableTitle({ value, fallback, onSave, className = "module-title" }) {
|
|
const ref = useRef(null);
|
|
useEffect(() => {
|
|
if (ref.current && document.activeElement !== ref.current) ref.current.textContent = value;
|
|
}, [value]);
|
|
return (
|
|
<h1
|
|
ref={ref}
|
|
className={className}
|
|
contentEditable
|
|
suppressContentEditableWarning
|
|
spellCheck="false"
|
|
title="Cliquer pour renommer"
|
|
onFocus={(event) => { event.currentTarget.dataset.previousTitle = event.currentTarget.textContent.trim(); }}
|
|
onBlur={(event) => onSave(event.currentTarget.textContent.trim() || fallback)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
event.currentTarget.blur();
|
|
}
|
|
if (event.key === "Escape") {
|
|
event.preventDefault();
|
|
event.currentTarget.textContent = event.currentTarget.dataset.previousTitle || value;
|
|
event.currentTarget.blur();
|
|
}
|
|
}}
|
|
>{value}</h1>
|
|
);
|
|
}
|