Frontend: Refactor dialogs and lightbox photoprism#3168 photoprism#4777

Signed-off-by: Michael Mayer <michael@photoprism.app>

Author: lastzero

assets/templates/app.gohtml

@@ -32,4 +32,4 @@
     </div>
   </div>
 </div>
-<div id="busy-overlay"><div class="splash-center"><progress id="busy-progress" class="html-progress" max="100"></progress></div></div>
+<div id="busy-overlay"><div class="splash-center"><progress id="busy-progress" class="html-progress" max="100"></progress></div></div>

frontend/src/app.js

@@ -23,12 +23,14 @@ Additional information can be found in our Developer Guide:
 
 */
 
+import "common/debug";
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 import "common/navigation";
 import $api from "common/api";
 import $notify from "common/notify";
 import { $view } from "common/view";
+import { $lightbox } from "common/lightbox";
 import { PhotoClipboard } from "common/clipboard";
 import $event from "pubsub-js";
 import $log from "common/log";
@@ -95,6 +97,7 @@ $config.update().finally(() => {
   app.config.globalProperties.$event = $event;
   app.config.globalProperties.$notify = $notify;
   app.config.globalProperties.$view = $view;
+  app.config.globalProperties.$lightbox = $lightbox;
   app.config.globalProperties.$session = $session;
   app.config.globalProperties.$api = $api;
   app.config.globalProperties.$log = $log;
@@ -161,13 +164,13 @@ $config.update().finally(() => {
   components.install(app);
 
   // Make scroll-pos-restore compatible with bfcache (required to work in PWA mode on iOS).
-  window.addEventListener("pagehide", (event) => {
-    if (event.persisted) {
+  window.addEventListener("pagehide", (ev) => {
+    if (ev.persisted) {
       localStorage.setItem("lastScrollPosBeforePageHide", JSON.stringify({ x: window.scrollX, y: window.scrollY }));
     }
   });
-  window.addEventListener("pageshow", (event) => {
-    if (event.persisted) {
+  window.addEventListener("pageshow", (ev) => {
+    if (ev.persisted) {
       const lastSavedScrollPos = localStorage.getItem("lastScrollPosBeforePageHide");
       if (lastSavedScrollPos !== undefined && lastSavedScrollPos !== null && lastSavedScrollPos !== "") {
         window.positionToRestore = JSON.parse(localStorage.getItem("lastScrollPosBeforePageHide"));

frontend/src/app.vue

@@ -12,7 +12,7 @@
       </v-main>
     </v-app>
 
-    <p-lightbox ref="lightbox"></p-lightbox>
+    <p-dialogs></p-dialogs>
   </div>
 </template>
 
@@ -21,15 +21,15 @@ import Event from "pubsub-js";
 import PLoadingBar from "component/loading-bar.vue";
 import PNotify from "component/notify.vue";
 import PNavigation from "component/navigation.vue";
-import PLightbox from "component/lightbox.vue";
+import PDialogs from "component/dialogs.vue";
 
 export default {
   name: "App",
   components: {
     PLoadingBar,
     PNotify,
     PNavigation,
-    PLightbox,
+    PDialogs,
   },
   data() {
     return {

frontend/src/common/captions.js

@@ -128,8 +128,11 @@ class PhotoSwipeDynamicCaption {
       if (slide.captionFadeTimeout) {
         clearTimeout(slide.captionFadeTimeout);
       }
+
       slide.captionFadeTimeout = setTimeout(() => {
-        captionElement.style.visibility = "hidden";
+        if (captionElement) {
+          captionElement.style.visibility = "hidden";
+        }
         delete slide.captionFadeTimeout;
       }, 400);
     }
@@ -150,9 +153,14 @@ class PhotoSwipeDynamicCaption {
       slide.dynamicCaption.hidden = false;
       captionElement.style.visibility = "visible";
 
-      clearTimeout(slide.captionFadeTimeout);
+      if (slide.captionFadeTimeout) {
+        clearTimeout(slide.captionFadeTimeout);
+      }
+
       slide.captionFadeTimeout = setTimeout(() => {
-        captionElement.classList.remove("pswp__dynamic-caption--faded");
+        if (captionElement) {
+          captionElement.classList.remove("pswp__dynamic-caption--faded");
+        }
         delete slide.captionFadeTimeout;
       }, 50);
     }

frontend/src/common/config.js

@@ -173,7 +173,7 @@ export default class Config {
     }
 
     if (values.jsUri && this.values.jsUri !== values.jsUri) {
-      $event.publish("dialog.reload", { values });
+      $event.publish("dialog.update", { values });
     }
 
     for (let key in values) {

frontend/src/common/debug.js

@@ -0,0 +1,17 @@
+let lastLog = Date.now();
+let log = console.log;
+
+console.log = function () {
+  if (!window.__CONFIG__?.debug) {
+    return;
+  }
+
+  if (log && arguments.length) {
+    const args = Array.from(arguments);
+    if (typeof args[0] === "string") {
+      args[0] += ` [${Date.now() - lastLog}ms]`;
+    }
+    log.apply(console, args);
+    lastLog = Date.now();
+  }
+};

frontend/src/common/lightbox.js

@@ -0,0 +1,18 @@
+import $event from "pubsub-js";
+
+// Opens the lightbox dialog with the specified options.
+export class Lightbox {
+  open(options) {
+    $event.publish("lightbox.open", options);
+  }
+
+  openModels(models, index) {
+    $event.publish("lightbox.open", { models, index });
+  }
+
+  openView(view, index) {
+    $event.publish("lightbox.open", { view, index });
+  }
+}
+
+export const $lightbox = new Lightbox();

frontend/src/common/view.js

@@ -4,7 +4,7 @@ const TouchStartEvent = "touchstart";
 const TouchMoveEvent = "touchmove";
 
 // If true, logging is enabled.
-const log = window.__CONFIG__?.debug && typeof console.log == "function";
+const debug = window.__CONFIG__?.debug;
 
 // Returns the <html> element.
 export function getHtmlElement() {
@@ -16,7 +16,7 @@ export function initHtmlElement() {
   const htmlElement = document.documentElement;
 
   if (htmlElement && htmlElement.hasAttribute("class")) {
-    if (log) {
+    if (debug) {
       console.log(`html: removed class="${htmlElement.getAttribute("class")}"`);
     }
 
@@ -28,7 +28,7 @@ export function initHtmlElement() {
     if (document.body.classList.contains("hide-scrollbar")) {
       htmlElement.setAttribute("class", "hide-scrollbar");
 
-      if (log) {
+      if (debug) {
         console.log('html: added class="hide-scrollbar" to permanently hide the scrollbar');
       }
     }
@@ -210,7 +210,7 @@ export class View {
 
     this.preventNavigation = preventNavigation;
 
-    if (log && name && uid) {
+    if (debug && name && uid) {
       const scope = this.scopes.map((s) => `${s?.$options?.name} #${s?.$?.uid.toString()}`).join(" › ");
       console.log(`view: ${scope}`, toRaw(c?.$data));
     }
@@ -220,47 +220,47 @@ export class View {
         bodyEl.classList.add("hide-scrollbar");
         setHtmlStyle("scrollbar-width", "none");
         setHtmlStyle("overflow-y", "hidden");
-        if (log) {
+        if (debug) {
           console.log(`html: added style="scrollbar-width: none; overflow-y: hidden;"`);
         }
       }
     } else if (bodyEl.classList.contains("hide-scrollbar")) {
       bodyEl.classList.remove("hide-scrollbar");
       setHtmlStyle("scrollbar-width");
       setHtmlStyle("overflow-y");
-      if (log) {
+      if (debug) {
         console.log(`html: removed style="scrollbar-width: none; overflow-y: hidden;"`);
       }
     }
 
     if (disableScrolling) {
       if (!bodyEl.classList.contains("disable-scrolling")) {
         bodyEl.classList.add("disable-scrolling");
-        if (log) {
+        if (debug) {
           console.log(`body: added class="disable-scrolling"`);
         }
       }
     } else if (bodyEl.classList.contains("disable-scrolling")) {
       bodyEl.classList.remove("disable-scrolling");
-      if (log) {
+      if (debug) {
         console.log(`body: removed class="disable-scrolling"`);
       }
     }
 
     if (disableNavigationGestures) {
       if (!bodyEl.classList.contains("disable-navigation-gestures")) {
         bodyEl.classList.add("disable-navigation-gestures");
-        document.addEventListener(TouchStartEvent, preventNavigationTouchEvent, { passive: false });
-        document.addEventListener(TouchMoveEvent, preventNavigationTouchEvent, { passive: false });
-        if (log) {
+        window.addEventListener(TouchStartEvent, preventNavigationTouchEvent, { passive: false });
+        window.addEventListener(TouchMoveEvent, preventNavigationTouchEvent, { passive: false });
+        if (debug) {
           console.log(`view: disabled touch navigation gestures`);
         }
       }
     } else if (bodyEl.classList.contains("disable-navigation-gestures")) {
       bodyEl.classList.remove("disable-navigation-gestures");
-      document.removeEventListener(TouchStartEvent, preventNavigationTouchEvent, false);
-      document.removeEventListener(TouchMoveEvent, preventNavigationTouchEvent, false);
-      if (log) {
+      window.removeEventListener(TouchStartEvent, preventNavigationTouchEvent, false);
+      window.removeEventListener(TouchMoveEvent, preventNavigationTouchEvent, false);
+      if (debug) {
         console.log(`view: re-enabled touch navigation gestures`);
       }
     }

frontend/src/component/album/clipboard.vue

@@ -91,12 +91,12 @@
       </v-speed-dial>
     </div>
     <p-photo-album-dialog
-      :show="dialog.album"
+      :visible="dialog.album"
       @close="dialog.album = false"
       @confirm="cloneAlbums"
     ></p-photo-album-dialog>
     <p-album-delete-dialog
-      :show="dialog.delete"
+      :visible="dialog.delete"
       @close="dialog.delete = false"
       @confirm="batchDelete"
     ></p-album-delete-dialog>

frontend/src/component/album/delete/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog :model-value="show" persistent max-width="350" class="p-dialog p-album-delete-dialog" @keydown.esc="close">
+  <v-dialog :model-value="visible" persistent max-width="350" class="p-dialog p-album-delete-dialog" @keydown.esc="close">
     <v-card>
       <v-card-title class="d-flex justify-start align-center ga-3">
         <v-icon icon="mdi-delete-outline" size="54" color="primary"></v-icon>
@@ -20,7 +20,7 @@
 export default {
   name: "PAlbumDeleteDialog",
   props: {
-    show: Boolean,
+    visible: Boolean,
   },
   data() {
     return {};