feat(dashboard): refine moment media experience

assets/js/app.js

@@ -984,6 +984,7 @@
         const openSettingsMenu = document.querySelector("[data-settings-menu-open]");
         const closeSettingsMenu = [...document.querySelectorAll("[data-settings-menu-close]")];
         const openMoment = document.querySelector("[data-moment-overlay-open]");
+        const fabMenu = document.querySelector("[data-fab-menu]");
         const closeMoment = [...document.querySelectorAll("[data-moment-overlay-close]")];
         const chooseStep = document.querySelector('[data-moment-step="choose"]');
         const formStep = document.querySelector('[data-moment-step="form"]');
@@ -1046,7 +1047,7 @@
         }
 
         const stepperConfigs = {
-            event: { label: "Ereignis", valueLabel: "Wert", unit: "", placeholder: "optional", showValue: false, showSport: false, showAlcohol: false, commentPlaceholder: "Was hast du erlebt?" },
+            event: { label: "Moment", valueLabel: "Wert", unit: "", placeholder: "optional", showValue: false, showSport: false, showAlcohol: false, commentPlaceholder: "Was hast du erlebt?" },
             walk: { label: "Spaziergang", valueLabel: "Spaziergang", unit: walkUnit, placeholder: walkMode === "steps" ? "Schritte" : "Minuten", showValue: true, showSport: false, showAlcohol: false, showWalk: true, commentPlaceholder: "Was war dabei besonders?" },
             sport: { label: "Sport", valueLabel: "Dauer", unit: "min", placeholder: "Minuten", showValue: true, showSport: true, showAlcohol: false, commentPlaceholder: "Was hast du gemacht?" },
             sleep: { label: "Schlaf", valueLabel: "Dauer", unit: "h", placeholder: "Stunden", showValue: true, showSport: false, showAlcohol: false, commentPlaceholder: "Wie war der Schlaf?" },
@@ -1090,7 +1091,7 @@
             document.body.classList.toggle("is-dashboard-overlay-open", open);
 
             if (open) {
-                const focusTarget = overlay.querySelector("input, textarea, select, button");
+                const focusTarget = overlay.querySelector("button, [href]");
                 if (focusTarget instanceof HTMLElement) {
                     window.setTimeout(() => focusTarget.focus(), 10);
                 }
@@ -1302,11 +1303,47 @@
         if (openMoment) {
             openMoment.addEventListener("click", event => {
                 event.preventDefault();
+                if (fabMenu instanceof HTMLElement) {
+                    fabMenu.hidden = !fabMenu.hidden;
+                    openMoment.classList.toggle("is-open", !fabMenu.hidden);
+                    return;
+                }
+
                 showMomentChoose();
                 setOverlay(momentOverlay, true);
             });
         }
 
+        document.querySelectorAll("[data-fab-moment-choice]").forEach(button => {
+            button.addEventListener("click", event => {
+                event.preventDefault();
+                const type = button.dataset.fabMomentChoice || "event";
+                if (fabMenu instanceof HTMLElement) {
+                    fabMenu.hidden = true;
+                }
+                if (openMoment) {
+                    openMoment.classList.remove("is-open");
+                }
+                showMomentForm(type);
+                setOverlay(momentOverlay, true);
+            });
+        });
+
+        document.addEventListener("click", event => {
+            if (!(fabMenu instanceof HTMLElement) || fabMenu.hidden) {
+                return;
+            }
+
+            if (event.target.closest("[data-fab-menu]") || event.target.closest("[data-moment-overlay-open]")) {
+                return;
+            }
+
+            fabMenu.hidden = true;
+            if (openMoment) {
+                openMoment.classList.remove("is-open");
+            }
+        });
+
         closeMoment.forEach(button => {
             button.addEventListener("click", event => {
                 event.preventDefault();
@@ -1456,13 +1493,23 @@
         }
 
         const panels = [...overlay.querySelectorAll("[data-options-panel]")];
+        const menu = overlay.querySelector("[data-options-menu]");
         const closeButtons = [...overlay.querySelectorAll("[data-options-close]")];
         const backButtons = [...overlay.querySelectorAll("[data-options-back]")];
+        const isStandalone = overlay.dataset.optionsStandalone === "1";
         const initialPanel = overlay.dataset.openPanel || null;
 
         const setOpen = (panelName) => {
-            overlay.hidden = panelName === null;
-            document.body.classList.toggle("is-dashboard-overlay-open", panelName !== null);
+            overlay.hidden = !isStandalone && panelName === null;
+            document.body.classList.toggle("is-dashboard-overlay-open", isStandalone || panelName !== null);
+
+            if (menu instanceof HTMLElement) {
+                menu.hidden = panelName !== null;
+            }
+
+            backButtons.forEach(button => {
+                button.hidden = panelName === null;
+            });
 
             panels.forEach(panel => {
                 panel.hidden = panel.dataset.optionsPanel !== panelName;
@@ -1485,6 +1532,10 @@
         closeButtons.forEach(button => {
             button.addEventListener("click", event => {
                 event.preventDefault();
+                if (isStandalone) {
+                    window.location.href = "/";
+                    return;
+                }
                 setOpen(null);
             });
         });
@@ -1493,11 +1544,16 @@
             button.addEventListener("click", event => {
                 event.preventDefault();
                 setOpen(null);
+                if (window.location.search.includes("panel=")) {
+                    window.history.replaceState(null, "", "/options");
+                }
             });
         });
 
         if (initialPanel) {
             setOpen(initialPanel);
+        } else if (isStandalone) {
+            setOpen(null);
         }
     }