diff --git a/README.md b/README.md index 432dc28..31c2679 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,14 @@ Downloads landen direkt in `~/Downloads`, ohne Browser-Dialog. | Post 2 · Die Geschichte | `post2.html` | Carousel, 6 Slides, erscheint 12.08. | [`POST-2.md`](./POST-2.md) | | Post 2 · Alternative | `post2-alt.html` | Derselbe Beitrag im Theme `modern` | | +**Alle Streifen nebeneinander** zeigt `uebersicht.html`, erreichbar über +*Projekt → Alle Projekte im Streifen*. Die Seite baut die Slides nicht selbst +nach: jedes Projekt kommt als `iframe` mit `?nur=streifen`, und in diesem Modus +blendet die Post-Seite ihre Bedienoberfläche aus, zeigt den Streifen in +natürlicher Größe und **speichert nichts** — drei Kacheln, die beim Schließen +ihren Stand zurückschreiben, wären genau die Falle aus [`POST-2.md`](./POST-2.md) §6. +Skaliert wird außen; ziehen schiebt, das Rad zoomt, `Fit` passt ein. + **Post 2 gibt es zweimal, in zwei Themes.** Projekt und Theme sind zwei verschiedene Dinge: das Projekt sagt, welcher Beitrag, das Theme, wie er aussieht. `notebook` ist die Zeichenblock-Optik mit Raster und Marker, diff --git a/post1.html b/post1.html index 4f4c0e0..c038b57 100644 --- a/post1.html +++ b/post1.html @@ -1,6 +1,13 @@ + PostGrid Post 1 · Lösung @@ -753,6 +760,26 @@ --guide-axis: rgba(48,49,61,.45); --guide-mid: rgba(200,144,26,.75); } + + /* ─── Uebersichts-Modus ────────────────────────────────────────────────── + Die Seite zeigt dann nur den Streifen, in natuerlicher Groesse und ohne + eigenen Rahmen: die Uebersicht setzt sie als iframe ein und skaliert + selbst. Alles Bedienbare faellt weg, auch die Hilfslinien. */ + html[data-nur="streifen"] { overflow: hidden; } + html[data-nur="streifen"] .menubar, + html[data-nur="streifen"] .panel, + html[data-nur="streifen"] .hud, + html[data-nur="streifen"] .guides { display: none !important; } + /* Der Auswahlrahmen ist eine Bedienhilfe und hat in der Uebersicht nichts + verloren -- dort ist keine Slide "die aktuelle". */ + html[data-nur="streifen"] .holder.sel::after { display: none; } + html[data-nur="streifen"] .stage { background: none; height: auto; } + html[data-nur="streifen"] .scroller { position: static; overflow: visible; } + html[data-nur="streifen"] .canvas { padding: 0; display: block; + width: max-content; min-width: 0; height: max-content; min-height: 0; } + html[data-nur="streifen"] body, html[data-nur="streifen"] .app { + height: auto; min-height: 0; background: none; overflow: visible; + } @@ -767,6 +794,8 @@
+ +
@@ -1296,7 +1325,12 @@ Voreinstellung an und schreibt die beim ersten Klick ueber genau die Datei, die gerade nicht verstanden wurde. Solange die Sperre steht, geht nichts mehr raus, weder in die Datei noch in den localStorage. */ - let stateLocked = false; + /* Im Uebersichts-Modus wird nichts gespeichert: drei Kacheln, die beim + Schliessen ihren Stand zurueckschreiben, waeren genau die Falle aus + POST-2.md 6. Die Konstante steht hier oben, weil stateLocked sie + braucht -- weiter unten waere sie noch nicht initialisiert. */ + const NUR_STREIFEN = document.documentElement.dataset.nur === "streifen"; + let stateLocked = NUR_STREIFEN; function lockState(grund) { stateLocked = true; clearTimeout(pushTimer); pushTimer = null; @@ -1487,7 +1521,10 @@ variant = d.variant || variant; tilt = d.tilt || tilt; superSample = d.superSample || superSample; - view = d.view || view; + /* Der Uebersichts-Modus zeigt immer den Streifen. Steht im Stand + "einzeln", waere sonst nur die zuletzt gewaehlte Slide zu sehen -- + und stripWidth() meldete 1080 statt der vollen Breite. */ + view = NUR_STREIFEN ? "streifen" : (d.view || view); tagOut = d.tagOut || tagOut; frameStyle = d.frameStyle || frameStyle; current = Number.isInteger(d.current) ? Math.min(d.current, SLIDES.length - 1) : 0; @@ -1526,7 +1563,8 @@ springt. */ /* zoom === null bedeutet: automatisch einpassen. Sobald der Nutzer zoomt, hält der Wert, bis er auf "Fit" zurückgeht. */ - let zoom = null; + // Im Uebersichts-Modus steht der Streifen fest auf 100 % -- skaliert wird aussen. + let zoom = NUR_STREIFEN ? 1 : null; function stripWidth() { return view === "streifen" ? 1080 * SLIDES.length : 1080; } @@ -1537,6 +1575,16 @@ return Math.min(availW / stripWidth(), availH / 1350, 0.45); } + /* Die Uebersicht muss wissen, wie breit dieser Streifen ist -- die Zahl + der Slides ist je Projekt anders. Sie kommt per postMessage statt ueber + einen Griff ins iframe-Dokument: so bleibt die Uebersicht von den + Interna der Post-Seite unabhaengig. */ + function groesseMelden() { + if (!NUR_STREIFEN || parent === window) return; + parent.postMessage({ hg: "streifen", w: stripWidth(), h: 1350, + titel: document.title }, "*"); + } + function fitStrip() { const wrap = document.getElementById("strip-wrap"); const k = zoom || autoFit(); @@ -1545,6 +1593,7 @@ wrap.style.height = Math.round(1350 * k) + "px"; const lvl = document.getElementById("zoom-fit"); if (lvl) lvl.textContent = zoom ? Math.round(k * 100) + " %" : "Fit"; + groesseMelden(); } function setZoom(k, anchor) { diff --git a/post2-alt.html b/post2-alt.html index cdfabbf..5769ca2 100644 --- a/post2-alt.html +++ b/post2-alt.html @@ -1,6 +1,13 @@ + PostGrid Post 2 · Alternative @@ -951,6 +958,26 @@ --guide-axis: rgba(48,49,61,.45); --guide-mid: rgba(200,144,26,.75); } + + /* ─── Uebersichts-Modus ────────────────────────────────────────────────── + Die Seite zeigt dann nur den Streifen, in natuerlicher Groesse und ohne + eigenen Rahmen: die Uebersicht setzt sie als iframe ein und skaliert + selbst. Alles Bedienbare faellt weg, auch die Hilfslinien. */ + html[data-nur="streifen"] { overflow: hidden; } + html[data-nur="streifen"] .menubar, + html[data-nur="streifen"] .panel, + html[data-nur="streifen"] .hud, + html[data-nur="streifen"] .guides { display: none !important; } + /* Der Auswahlrahmen ist eine Bedienhilfe und hat in der Uebersicht nichts + verloren -- dort ist keine Slide "die aktuelle". */ + html[data-nur="streifen"] .holder.sel::after { display: none; } + html[data-nur="streifen"] .stage { background: none; height: auto; } + html[data-nur="streifen"] .scroller { position: static; overflow: visible; } + html[data-nur="streifen"] .canvas { padding: 0; display: block; + width: max-content; min-width: 0; height: max-content; min-height: 0; } + html[data-nur="streifen"] body, html[data-nur="streifen"] .app { + height: auto; min-height: 0; background: none; overflow: visible; + } @@ -965,6 +992,8 @@
+ +
@@ -2699,7 +2728,12 @@ Voreinstellung an und schreibt die beim ersten Klick ueber genau die Datei, die gerade nicht verstanden wurde. Solange die Sperre steht, geht nichts mehr raus, weder in die Datei noch in den localStorage. */ - let stateLocked = false; + /* Im Uebersichts-Modus wird nichts gespeichert: drei Kacheln, die beim + Schliessen ihren Stand zurueckschreiben, waeren genau die Falle aus + POST-2.md 6. Die Konstante steht hier oben, weil stateLocked sie + braucht -- weiter unten waere sie noch nicht initialisiert. */ + const NUR_STREIFEN = document.documentElement.dataset.nur === "streifen"; + let stateLocked = NUR_STREIFEN; function lockState(grund) { stateLocked = true; clearTimeout(pushTimer); pushTimer = null; @@ -2893,7 +2927,10 @@ variant = d.variant || variant; tilt = d.tilt || tilt; superSample = d.superSample || superSample; - view = d.view || view; + /* Der Uebersichts-Modus zeigt immer den Streifen. Steht im Stand + "einzeln", waere sonst nur die zuletzt gewaehlte Slide zu sehen -- + und stripWidth() meldete 1080 statt der vollen Breite. */ + view = NUR_STREIFEN ? "streifen" : (d.view || view); tagOut = d.tagOut || tagOut; frameStyle = d.frameStyle || frameStyle; bandTon = d.bandTon || bandTon; @@ -2935,7 +2972,8 @@ springt. */ /* zoom === null bedeutet: automatisch einpassen. Sobald der Nutzer zoomt, hält der Wert, bis er auf "Fit" zurückgeht. */ - let zoom = null; + // Im Uebersichts-Modus steht der Streifen fest auf 100 % -- skaliert wird aussen. + let zoom = NUR_STREIFEN ? 1 : null; function stripWidth() { return view === "streifen" ? 1080 * SLIDES.length : 1080; } @@ -2946,6 +2984,16 @@ return Math.min(availW / stripWidth(), availH / 1350, 0.45); } + /* Die Uebersicht muss wissen, wie breit dieser Streifen ist -- die Zahl + der Slides ist je Projekt anders. Sie kommt per postMessage statt ueber + einen Griff ins iframe-Dokument: so bleibt die Uebersicht von den + Interna der Post-Seite unabhaengig. */ + function groesseMelden() { + if (!NUR_STREIFEN || parent === window) return; + parent.postMessage({ hg: "streifen", w: stripWidth(), h: 1350, + titel: document.title }, "*"); + } + function fitStrip() { const wrap = document.getElementById("strip-wrap"); const k = zoom || autoFit(); @@ -2954,6 +3002,7 @@ wrap.style.height = Math.round(1350 * k) + "px"; const lvl = document.getElementById("zoom-fit"); if (lvl) lvl.textContent = zoom ? Math.round(k * 100) + " %" : "Fit"; + groesseMelden(); } function setZoom(k, anchor) { diff --git a/post2.html b/post2.html index 6b57794..b3fab09 100644 --- a/post2.html +++ b/post2.html @@ -1,6 +1,13 @@ + PostGrid Post 2 @@ -844,6 +851,26 @@ --guide-axis: rgba(48,49,61,.45); --guide-mid: rgba(200,144,26,.75); } + + /* ─── Uebersichts-Modus ────────────────────────────────────────────────── + Die Seite zeigt dann nur den Streifen, in natuerlicher Groesse und ohne + eigenen Rahmen: die Uebersicht setzt sie als iframe ein und skaliert + selbst. Alles Bedienbare faellt weg, auch die Hilfslinien. */ + html[data-nur="streifen"] { overflow: hidden; } + html[data-nur="streifen"] .menubar, + html[data-nur="streifen"] .panel, + html[data-nur="streifen"] .hud, + html[data-nur="streifen"] .guides { display: none !important; } + /* Der Auswahlrahmen ist eine Bedienhilfe und hat in der Uebersicht nichts + verloren -- dort ist keine Slide "die aktuelle". */ + html[data-nur="streifen"] .holder.sel::after { display: none; } + html[data-nur="streifen"] .stage { background: none; height: auto; } + html[data-nur="streifen"] .scroller { position: static; overflow: visible; } + html[data-nur="streifen"] .canvas { padding: 0; display: block; + width: max-content; min-width: 0; height: max-content; min-height: 0; } + html[data-nur="streifen"] body, html[data-nur="streifen"] .app { + height: auto; min-height: 0; background: none; overflow: visible; + } @@ -858,6 +885,8 @@
+ +
@@ -2454,7 +2483,12 @@ Voreinstellung an und schreibt die beim ersten Klick ueber genau die Datei, die gerade nicht verstanden wurde. Solange die Sperre steht, geht nichts mehr raus, weder in die Datei noch in den localStorage. */ - let stateLocked = false; + /* Im Uebersichts-Modus wird nichts gespeichert: drei Kacheln, die beim + Schliessen ihren Stand zurueckschreiben, waeren genau die Falle aus + POST-2.md 6. Die Konstante steht hier oben, weil stateLocked sie + braucht -- weiter unten waere sie noch nicht initialisiert. */ + const NUR_STREIFEN = document.documentElement.dataset.nur === "streifen"; + let stateLocked = NUR_STREIFEN; function lockState(grund) { stateLocked = true; clearTimeout(pushTimer); pushTimer = null; @@ -2645,7 +2679,10 @@ variant = d.variant || variant; tilt = d.tilt || tilt; superSample = d.superSample || superSample; - view = d.view || view; + /* Der Uebersichts-Modus zeigt immer den Streifen. Steht im Stand + "einzeln", waere sonst nur die zuletzt gewaehlte Slide zu sehen -- + und stripWidth() meldete 1080 statt der vollen Breite. */ + view = NUR_STREIFEN ? "streifen" : (d.view || view); tagOut = d.tagOut || tagOut; frameStyle = d.frameStyle || frameStyle; current = Number.isInteger(d.current) ? Math.min(d.current, SLIDES.length - 1) : 0; @@ -2684,7 +2721,8 @@ springt. */ /* zoom === null bedeutet: automatisch einpassen. Sobald der Nutzer zoomt, hält der Wert, bis er auf "Fit" zurückgeht. */ - let zoom = null; + // Im Uebersichts-Modus steht der Streifen fest auf 100 % -- skaliert wird aussen. + let zoom = NUR_STREIFEN ? 1 : null; function stripWidth() { return view === "streifen" ? 1080 * SLIDES.length : 1080; } @@ -2695,6 +2733,16 @@ return Math.min(availW / stripWidth(), availH / 1350, 0.45); } + /* Die Uebersicht muss wissen, wie breit dieser Streifen ist -- die Zahl + der Slides ist je Projekt anders. Sie kommt per postMessage statt ueber + einen Griff ins iframe-Dokument: so bleibt die Uebersicht von den + Interna der Post-Seite unabhaengig. */ + function groesseMelden() { + if (!NUR_STREIFEN || parent === window) return; + parent.postMessage({ hg: "streifen", w: stripWidth(), h: 1350, + titel: document.title }, "*"); + } + function fitStrip() { const wrap = document.getElementById("strip-wrap"); const k = zoom || autoFit(); @@ -2703,6 +2751,7 @@ wrap.style.height = Math.round(1350 * k) + "px"; const lvl = document.getElementById("zoom-fit"); if (lvl) lvl.textContent = zoom ? Math.round(k * 100) + " %" : "Fit"; + groesseMelden(); } function setZoom(k, anchor) { diff --git a/state/post2-alt-merk.json b/state/post2-alt-merk.json new file mode 100644 index 0000000..71da2b7 --- /dev/null +++ b/state/post2-alt-merk.json @@ -0,0 +1,158 @@ +{ + "bandTon": "teal", + "bgState": [ + { + "bg": "raster", + "int": "kraeftig" + }, + { + "bg": "raster", + "int": "dezent" + }, + { + "bg": "raster", + "int": "dezent" + }, + { + "bg": "raster", + "int": "dezent" + }, + { + "bg": "raster", + "int": "dezent" + }, + { + "bg": "raster", + "int": "dezent" + } + ], + "current": 4, + "deck": [ + { + "ref": "titel", + "werte": { + "body": "
" + } + }, + { + "ref": "prozesse", + "werte": {} + }, + { + "ref": "wechseln", + "werte": {} + }, + { + "ref": "mehr", + "werte": {} + }, + { + "ref": "verbinden", + "werte": {} + }, + { + "ref": "warteliste", + "werte": { + "body": "Setz dich auf die Warteliste, dann melden wir uns." + } + } + ], + "edits": [ + { + "body": { + "dx": 102, + "dy": 0 + }, + "headline": { + "dx": 37, + "dy": 3, + "size": 88 + }, + "vis": { + "dx": 3, + "dy": -9 + } + }, + { + "body": { + "dx": 0, + "dy": 20 + }, + "headline": { + "dy": 3 + }, + "vis": { + "dx": 113, + "dy": -59 + } + }, + { + "body": { + "dx": 0, + "dy": 20 + }, + "headline": { + "dy": 3 + }, + "vis": { + "dx": -3, + "dy": -88 + } + }, + { + "body": { + "dx": 0, + "dy": 20 + }, + "headline": { + "dx": 0, + "dy": 3 + }, + "vis": { + "dx": -68, + "dy": -25, + "size": 1028 + } + }, + { + "body": { + "dy": 20 + }, + "headline": { + "dy": 3 + }, + "vis": { + "dx": 33, + "dy": -138 + } + }, + { + "body": { + "dy": 20 + }, + "headline": { + "dy": 3 + }, + "vis": { + "dx": 12, + "dy": 74, + "size": 1184 + } + } + ], + "frameStyle": "aus", + "layoutState": [ + "standard", + "standard", + "standard", + "standard", + "standard", + "standard" + ], + "superSample": 3, + "tagOut": "an", + "tilt": "an", + "v": 7, + "variant": "hell", + "view": "streifen" +} diff --git a/uebersicht.html b/uebersicht.html new file mode 100644 index 0000000..d8065b4 --- /dev/null +++ b/uebersicht.html @@ -0,0 +1,281 @@ + + + + + +PostGrid · Alle Projekte + + + + + +
+ PostGrid +
+ +
+ + + +
+ +
+
+
+ +
+
+
+
+
+

Lade Streifen ...

+
+ + + +
+
+
+ + + +