Seitenleiste ausgeduennt, Vorschau statt Bearbeiten-Schalter

Bearbeiten ist immer an. An seine Stelle tritt die Vorschau: alles festgelegt, keine Auswahl, kein Ziehen, keine Rahmen. Blaettern und Zoomen bleiben, das ist der Sinn. Taste P statt E. Aus der Seitenleiste raus: Layout, Tag optisch ausgerueckt, Vorschau, Intensitaet, Mockup-Perspektive und die Download-Knoepfe. Entweder post-spezifisch oder inzwischen oben in der Leiste. Die Schalter selbst bleiben im Dokument, nur unsichtbar. Die Menueleiste betaetigt sie, die Tastenkuerzel ebenso, und zwei Abgleich-Funktionen schreiben hinein. Geloescht muesste jeder dieser Zustaende ein zweites Mal gefuehrt werden. Die Buehne stand noch auf 100vh. Darueber sitzt seit der Menueleiste aber deren Hoehe, weshalb die Fussleiste mit Zoom und Merkzettel unter den unteren Rand rutschte. Oben links steht PostGrid statt HiveGrid, auch im Fenstertitel. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-08 00:28:32 +02:00
1 parent b0ec520a72
commit 276cced03c
@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>HiveGrid Post 1 (Lösung, Carousel)</title>
+<title>PostGrid Post 1 · Lösung</title>
 <link rel="stylesheet" href="./assets/fonts/manrope.css">
 <style>
  /* ─── HiveGrid design tokens (mirrored from app/globals.css) ─────────────
@@ -249,7 +249,10 @@
     Klar abgesetzt von der Sidebar: eigener Grund, eigener Scroll, eigener
     Zoom. Was hier passiert, lässt die Bedienleiste unberührt. */
  .stage {
-    flex: 1; position: relative; height: 100vh; overflow: hidden;
+    /* Nicht 100vh: darueber sitzt die Menueleiste. Mit voller
+       Fensterhoehe rutscht die Fussleiste samt Zoom und Merkzettel
+       unter den unteren Rand. */
+    flex: 1; position: relative; height: 100%; overflow: hidden;
    background-color: #101116;
    background-image: radial-gradient(circle, #282B35 1.6px, transparent 1.6px);
    background-size: 24px 24px;
@@ -755,7 +758,7 @@
 <body>

 <div class="menubar" id="menubar">
-  <span class="marke">HiveGrid</span>
+  <span class="marke">PostGrid</span>

  <div class="menu" data-menu="projekt">
    <button type="button">Projekt</button>
@@ -786,9 +789,6 @@
      <button type="button" data-tun="undo">Rückgängig<span class="kurz">⌘Z</span></button>
      <button type="button" data-tun="redo">Wiederherstellen<span class="kurz">⇧⌘Z</span></button>
      <hr>
-      <button type="button" data-opt="editmodes:e:an">Bearbeiten an<span class="kurz">E</span></button>
-      <button type="button" data-opt="editmodes:e:aus">Bearbeiten aus</button>
-      <hr>
      <button type="button" data-klick="reset-one">Element auf Standard</button>
      <button type="button" data-klick="reset-all">Alles auf Standard</button>
    </div>
@@ -809,6 +809,8 @@
  <div class="menu" data-menu="ansicht">
    <button type="button">Ansicht</button>
    <div class="liste">
+      <button type="button" data-tun="vorschau">Vorschau<span class="kurz">P</span></button>
+      <hr>
      <button type="button" data-opt="views:w:streifen">Streifen<span class="kurz">W</span></button>
      <button type="button" data-opt="views:w:einzeln">Einzeln</button>
      <hr>
@@ -860,29 +862,31 @@
    </div>
  </details>

-  <details class="group" data-grp="layout-nur-diese-slide">
-    <summary>Layout (nur diese Slide)</summary>
+  <!-- Nicht mehr in der Seitenleiste: Layout und Perspektive sind
+       post-spezifisch, Vorschau steht oben unter Ansicht, der Tag ist
+       ausgeblendet. Die Schalter bleiben trotzdem im Dokument, weil die
+       Menueleiste, die Tastenkuerzel und die Abgleich-Funktionen sie
+       betaetigen. Sonst gaebe es zwei Wahrheiten ueber denselben Zustand. -->
+  <div hidden>
    <div class="opts" id="layouts"></div>
-  </details>
-
-  <details class="group" data-grp="tag-optisch-ausger-ckt">
-    <summary>Tag optisch ausgerückt</summary>
    <div class="opts" id="tagouts">
      <button data-o="an"  aria-pressed="true">An</button>
      <button data-o="aus" aria-pressed="false">Aus</button>
    </div>
-  </details>
-
-  <details class="group" data-grp="bearbeiten">
-    <summary>Bearbeiten</summary>
-    <div class="opts" id="editmodes">
-      <button data-e="an"  aria-pressed="false">An</button>
-      <button data-e="aus" aria-pressed="true">Aus</button>
+    <div class="opts" id="vorschau">
+      <button data-p="aus" aria-pressed="true">Aus</button>
+      <button data-p="an"  aria-pressed="false">An</button>
    </div>
-    <div class="hint" style="margin-top:8px">Ein angeklicktes Element öffnet
-      sein eigenes Feld rechts.</div>
-    <button class="btn secondary" id="reset-all" style="width:100%;margin-top:8px">Alles auf Standard</button>
-  </details>
+    <div class="opts" id="ints">
+      <button data-i="dezent"   aria-pressed="true">Dezent</button>
+      <button data-i="kraeftig" aria-pressed="false">Kräftig</button>
+    </div>
+    <div class="opts" id="tilts">
+      <button data-t="an"  aria-pressed="true">Gekippt</button>
+      <button data-t="aus" aria-pressed="false">Gerade</button>
+    </div>
+    <button id="reset-all">Alles auf Standard</button>
+  </div>

  <details class="std">
    <summary>Standardwerte</summary>
@@ -897,14 +901,6 @@
    </div>
  </details>

-  <details class="group" data-grp="intensit-t">
-    <summary>Intensität</summary>
-    <div class="opts" id="ints">
-      <button data-i="dezent"   aria-pressed="true">Dezent</button>
-      <button data-i="kraeftig" aria-pressed="false">Kräftig</button>
-    </div>
-  </details>
-
  <details class="group" data-grp="bildrahmen">
    <summary>Bildrahmen</summary>
    <div class="opts three" id="frames">
@@ -915,14 +911,6 @@
    </div>
  </details>

-  <details class="group" data-grp="mockup-perspektive">
-    <summary>Mockup-Perspektive</summary>
-    <div class="opts" id="tilts">
-      <button data-t="an"  aria-pressed="true">Gekippt</button>
-      <button data-t="aus" aria-pressed="false">Gerade</button>
-    </div>
-  </details>
-
  <details class="group" data-grp="renderqualit-t">
    <summary>Renderqualität</summary>
    <div class="opts three" id="quality">
@@ -932,12 +920,13 @@
    </div>
  </details>

-  <div class="group">
-    <label>Download</label>
-    <div class="row" style="margin-bottom:8px">
-      <button id="dl-png" disabled>Diese Slide</button>
-    </div>
-    <button id="dl-all" class="btn secondary" style="width:100%" disabled>Alle 5 Slides als ZIP</button>
+  <!-- Der Export steht oben unter Datei. Die Knoepfe bleiben trotzdem im
+       Dokument: die Menueleiste betaetigt sie, und sie tragen den Zustand
+       "noch nicht bereit", solange die Schrift nicht geladen ist. Ohne sie
+       muesste beides doppelt gefuehrt werden. -->
+  <div hidden>
+    <button id="dl-png" disabled>Diese Slide</button>
+    <button id="dl-all" disabled>Alle Slides als ZIP</button>
  </div>

  <details class="group" style="margin-bottom:0" data-grp="tastatur">
@@ -945,10 +934,10 @@
    <div class="keys">
      <kbd>←</kbd><kbd>→</kbd> Slide · <kbd>V</kbd> Variante<br>
      <kbd>L</kbd> Layout · <kbd>I</kbd> Intensität<br>
-      <kbd>W</kbd> Ansicht · <kbd>G</kbd> Tag<br>
+      <kbd>W</kbd> Ansicht<br>
      <kbd>R</kbd> Bildrahmen<br>
      <kbd>T</kbd> Perspektive<br>
-      <kbd>E</kbd> Bearbeiten · Pfeile verschieben (<kbd>⇧</kbd> = 10 px)<br>
+      <kbd>P</kbd> Vorschau · Pfeile verschieben (<kbd>⇧</kbd> = 10 px)<br>
      <kbd>+</kbd> <kbd>−</kbd> <kbd>0</kbd> Zoom · ⌘/Strg + Rad<br>
      <kbd>Leer</kbd> + ziehen verschiebt die Fläche<br>
      <kbd>⌘/Strg</kbd>+<kbd>Z</kbd> Rückgängig (<kbd>⇧</kbd> = wiederherstellen)<br>
@@ -1222,7 +1211,8 @@
  let edits = SLIDES.map(() => ({}));

  let picked = null;          // { slide, key }
-  let editMode = "aus";
+  // Bearbeiten ist immer an. "aus" heisst Vorschau: alles festgelegt.
+  let editMode = "an";

  let current = 0;
  let variant = "dunkel", tilt = "an", superSample = 2, view = "streifen", tagOut = "an", frameStyle = "chamfer";
@@ -3115,18 +3105,24 @@
  })();

  document.getElementById("forget").addEventListener("click", forgetProject);
-  document.getElementById("editmodes").addEventListener("click", e => {
+  document.getElementById("vorschau").addEventListener("click", e => {
    const b = e.target.closest("button");
    if (!b) return;
-    editMode = b.dataset.e;
-    press("editmodes", "e", editMode);
+    setVorschau(b.dataset.p === "an");
+  });
+
+  /* In der Vorschau ist alles festgelegt: keine Auswahl, kein Ziehen, keine
+     Rahmen. Blaettern und Zoomen bleiben, das ist der Sinn der Sache. */
+  function setVorschau(an) {
+    editMode = an ? "aus" : "an";
+    press("vorschau", "p", an ? "an" : "aus");
    deck.querySelectorAll(".slide").forEach(el => { el.dataset.editmode = editMode; });
-    if (editMode === "aus") {
+    if (an) {
      picked = null;
      deck.querySelectorAll("[data-edit]").forEach(n => n.classList.remove("picked"));
      syncEditPanel();
    }
-  });
+  }

  /* ─── Angleichen über alle Slides ────────────────────────────────────────
     Das gewählte Element ist die Vorlage, alle gleichnamigen auf den anderen
@@ -3286,7 +3282,7 @@
    const menues = [...bar.querySelectorAll(".menu")];
    const zu = () => menues.forEach(m => delete m.dataset.offen);

-    const AKTION = { undo, redo };
+    const AKTION = { undo, redo, vorschau: () => setVorschau(editMode === "an") };

    // Haken und graue Eintraege erst beim Oeffnen setzen: vorher weiss die
    // Leiste nicht, was gerade gilt.
@@ -3299,6 +3295,11 @@
        b.insertAdjacentHTML("afterbegin",
          '<span class="haken">' + (an ? "✓" : "") + "</span>");
      });
+      m.querySelectorAll('button[data-tun="vorschau"]').forEach(b => {
+        b.querySelector(".haken")?.remove();
+        b.insertAdjacentHTML("afterbegin",
+          '<span class="haken">' + (editMode === "aus" ? "✓" : "") + "</span>");
+      });
      m.querySelectorAll("button[data-klick]").forEach(b => {
        const q = document.getElementById(b.dataset.klick);
        b.disabled = !q || q.disabled;
@@ -3545,13 +3546,12 @@
    else if (e.key === "-") { setZoom((zoom || autoFit()) / 1.25); }
    else if (e.key === "0") { zoom = null; fitStrip(); }
    else if (k === "w") { view = view === "streifen" ? "einzeln" : "streifen"; deck.dataset.view = view; press("views", "w", view); zoom = null; show(current); }
-    else if (k === "e") { document.querySelector('#editmodes button[data-e="' + (editMode === "an" ? "aus" : "an") + '"]').click(); }
+    else if (k === "p") { setVorschau(editMode === "an"); }
    else if (k === "r") {
      const cyc = ["chamfer", "rund", "stapel", "aus"];
      frameStyle = cyc[(cyc.indexOf(frameStyle) + 1) % cyc.length];
      press("frames", "f", frameStyle); applyAll(); saveState();
    }
-    else if (k === "g") { tagOut = tagOut === "an" ? "aus" : "an"; press("tagouts", "o", tagOut); applyAll(); saveState(); }
    else if (k === "d") guard(downloadOne)();
    else if (k === "a") guard(downloadAll)();
  });