lucas.orth/Skrift-Konfigurator-Neu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload Neu

Browse Source
This commit is contained in:
s4luorth
2026-05-04 09:40:27 +02:00
parent a9c86c6dad
commit 290969f848
6 changed files with 499 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
skrift-configurator/assets/js/configurator-app.js
View File

@@ -4,28 +4,35 @@ import {
deriveContextFromUrl,
reducer,
STEPS,
} from "./configurator-state.js?ver=0.3.0";
import { render, showValidationOverlay, hideValidationOverlay, showOverflowWarning, showValidationError, flushAllTables } from "./configurator-ui.js?ver=0.3.0";
import './configurator-api.js'; // Backend API initialisieren
import PreviewManager from './configurator-preview-manager.js'; // Preview Management
} from "./configurator-state.js?ver=0.3.1";
import {
render,
showValidationOverlay,
hideValidationOverlay,
showOverflowWarning,
showValidationError,
flushAllTables,
} from "./configurator-ui.js?ver=0.3.1";
import "./configurator-api.js"; // Backend API initialisieren
import PreviewManager from "./configurator-preview-manager.js"; // Preview Management
(function boot() {
const root = document.querySelector('[data-skrift-konfigurator="1"]');
if (!root) return;
// Guard: Verhindere doppelte Initialisierung
if (root.dataset.skriftInitialized === '1') {
console.warn('[Konfigurator] Bereits initialisiert, überspringe.');
if (root.dataset.skriftInitialized === "1") {
console.warn("[Konfigurator] Bereits initialisiert, überspringe.");
return;
}
root.dataset.skriftInitialized = '1';
root.dataset.skriftInitialized = "1";
// Cleanup bei Navigation (SPA) oder Seiten-Unload
const cleanupHandlers = [];
const cleanup = () => {
flushAllTables(); // Tabellen-Daten speichern vor Cleanup/Seiten-Unload
cleanupHandlers.forEach(handler => handler());
cleanupHandlers.forEach((handler) => handler());
cleanupHandlers.length = 0;
if (window.envelopePreviewManager) {
window.envelopePreviewManager.destroy();
@@ -36,8 +43,10 @@ import PreviewManager from './configurator-preview-manager.js'; // Preview Manag
};
// Cleanup bei Seiten-Unload
window.addEventListener('beforeunload', cleanup);
cleanupHandlers.push(() => window.removeEventListener('beforeunload', cleanup));
window.addEventListener("beforeunload", cleanup);
cleanupHandlers.push(() =>
window.removeEventListener("beforeunload", cleanup),
);
const ctx = deriveContextFromUrl(window.location.search);
let state = createInitialState(ctx);
@@ -70,7 +79,7 @@ import PreviewManager from './configurator-preview-manager.js'; // Preview Manag
// Scroll-Position NACH dem Render wiederherstellen
// Nur bei Actions die NICHT den Step wechseln (Navigation)
const navigationActions = ['NAV_NEXT', 'NAV_PREV', 'SET_STEP'];
const navigationActions = ["NAV_NEXT", "NAV_PREV", "SET_STEP"];
if (!navigationActions.includes(action.type)) {
// requestAnimationFrame stellt sicher, dass das DOM komplett gerendert ist
requestAnimationFrame(() => {
@@ -89,6 +98,21 @@ import PreviewManager from './configurator-preview-manager.js'; // Preview Manag
const nextClickHandler = async () => {
flushAllTables(); // Tabellen-Daten speichern vor Navigation
// WICHTIG: Globalen State in den Store synchronisieren
// Nötig weil Paste direkt in window.currentGlobalState schreibt (Performance)
const globalState = window.currentGlobalState;
if (globalState) {
// Alle Tabellen-Daten in einem einzigen Dispatch synchronisieren
dispatch({
type: "SYNC_GLOBAL_STATE",
payload: {
recipientRows: globalState.recipientRows,
freeAddressRows: globalState.freeAddressRows,
placeholderValues: globalState.placeholderValues,
},
});
}
// WICHTIG: Aktuellen State verwenden, nicht den gecachten aus dem Closure
const currentState = window.currentGlobalState || state;
@@ -98,12 +122,16 @@ import PreviewManager from './configurator-preview-manager.js'; // Preview Manag
if (previewManager) {
showValidationOverlay();
try {
const validation = await previewManager.validateTextLength(currentState);
const validation =
await previewManager.validateTextLength(currentState);
if (!validation.valid) {
hideValidationOverlay();
// Bei Overflow: Warnung anzeigen
if (validation.overflowFiles && validation.overflowFiles.length > 0) {
if (
validation.overflowFiles &&
validation.overflowFiles.length > 0
) {
showOverflowWarning(validation.overflowFiles, dom.form);
} else if (validation.error) {
// Bei Fehler (z.B. keine Anfragen mehr): Fehlermeldung anzeigen
@@ -117,11 +145,15 @@ import PreviewManager from './configurator-preview-manager.js'; // Preview Manag
const envelopeManager = window.envelopePreviewManager;
if (envelopeManager && currentState.answers?.envelope === true) {
try {
envelopeManager.previewCount = parseInt(currentState.answers?.quantity) || 1;
envelopeManager.previewCount =
parseInt(currentState.answers?.quantity) || 1;
await envelopeManager.loadAllPreviews(currentState, true, true);
console.log('[App] Envelope previews generated for cache');
console.log("[App] Envelope previews generated for cache");
} catch (envError) {
console.error('[App] Envelope preview generation failed:', envError);
console.error(
"[App] Envelope preview generation failed:",
envError,
);
// Nicht blockieren - Umschläge sind nicht kritisch für Navigation
}
}
@@ -129,8 +161,11 @@ import PreviewManager from './configurator-preview-manager.js'; // Preview Manag
hideValidationOverlay();
} catch (error) {
hideValidationOverlay();
console.error('[App] Validation error:', error);
showValidationError(error.message || 'Validierung fehlgeschlagen', dom.form);
console.error("[App] Validation error:", error);
showValidationError(
error.message || "Validierung fehlgeschlagen",
dom.form,
);
return; // Nicht weiter navigieren
}
}
@@ -147,21 +182,39 @@ import PreviewManager from './configurator-preview-manager.js'; // Preview Manag
// Keyboard Navigation für Previews (nur innerhalb des aktuellen Batches)
const keydownHandler = (e) => {
if (window.envelopePreviewManager && window.envelopePreviewManager.currentBatchPreviews.length > 0) {
window.envelopePreviewManager.handleKeyboardNavigation(e, state, dom.preview, true);
if (
window.envelopePreviewManager &&
window.envelopePreviewManager.currentBatchPreviews.length > 0
) {
window.envelopePreviewManager.handleKeyboardNavigation(
e,
state,
dom.preview,
true,
);
}
if (window.contentPreviewManager && window.contentPreviewManager.currentBatchPreviews.length > 0) {
window.contentPreviewManager.handleKeyboardNavigation(e, state, dom.preview, false);
if (
window.contentPreviewManager &&
window.contentPreviewManager.currentBatchPreviews.length > 0
) {
window.contentPreviewManager.handleKeyboardNavigation(
e,
state,
dom.preview,
false,
);
}
};
document.addEventListener('keydown', keydownHandler);
cleanupHandlers.push(() => document.removeEventListener('keydown', keydownHandler));
document.addEventListener("keydown", keydownHandler);
cleanupHandlers.push(() =>
document.removeEventListener("keydown", keydownHandler),
);
render({ state, dom, dispatch });
// Konfigurator sichtbar machen nachdem erster Render abgeschlossen ist
requestAnimationFrame(() => {
root.classList.add('sk-ready');
root.classList.add("sk-ready");
});
})();