Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/components/photos/PhotoGallery.vue

@@ -1,17 +1,19 @@
 <script setup>
-import {onMounted, onUnmounted} from "vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 import 'photoswipe/style.css';
 import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
 import PhotoSwipeDynamicCaption from "../../../node_modules/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm";
 import PhotoCaption from "components/photos/PhotoCaption.vue";
 import PhotoSwipeLightbox from "../../../node_modules/photoswipe/dist/photoswipe-lightbox.esm"
-
+import PhotoSwipe from "../../../node_modules/photoswipe/dist/photoswipe.esm"
+import {useRoute, useRouter} from "vue-router";
+import {usePhotosStore} from "stores/Photos";
 
 const props = defineProps({
   galleryId: {
     type: String,
     required: false,
-    default: () => "randomGalleryId"
+    default: () => "photogallery"
   },
   photos: {
     type: Array,
@@ -19,46 +21,79 @@ const props = defineProps({
   }
 })
 
-let $lightbox = null;
+
+const route = useRoute();
+const $router = useRouter();
+
+let $lightbox = ref(null);
+
+const initLightbox = () => {
+  if ($lightbox.value && $lightbox.value.pswp) {
+    // lightbox already initialized
+    return
+  }
+
+  $lightbox.value = new PhotoSwipeLightbox({
+    gallery: '#' + props.galleryId,
+    children: 'a',
+    pswpModule: () => PhotoSwipe,
+  });
+
+  let captionPlugin = new PhotoSwipeDynamicCaption($lightbox.value, {
+    type: 'auto',
+  });
+
+  $lightbox.value.init();
+}
 
 onMounted(() => {
-  if (!$lightbox) {
-    $lightbox = new PhotoSwipeLightbox({
-      gallery: '#' + props.galleryId,
-      children: 'a',
-      pswpModule: () => import('photoswipe'),
-    });
+  initLightbox();
 
-    let captionPlugin = new PhotoSwipeDynamicCaption($lightbox, {
-      type: 'auto',
-    });
+  // todo: tohle nefunguje, sice se galerie zavre, ale i tak se user presmeruje na predchozi stranku
+  window.onpopstate = function (e) {
+    if (!$lightbox.value || !$lightbox.value.pswp) {
+      initLightbox();
+    }
 
-    $lightbox.init();
-  }
+    if ($lightbox.value && $lightbox.value.pswp)
+      $lightbox.value.pswp.close();
+  };
 });
+
 onUnmounted(() => {
-  if ($lightbox) {
-    $lightbox.destroy();
-    $lightbox = null;
+  if ($lightbox.value) {
+    $lightbox.value.destroy();
+    $lightbox.value = null;
   }
 });
+
+const openedPhoto = computed(() => usePhotosStore().openedPhoto);
+watch(() => [openedPhoto.value, $lightbox.value], () => {
+  if (!$lightbox.value || !openedPhoto.value) return;
+
+  const idx = props.photos.findIndex(p => p.id === openedPhoto.value.id);
+  if (idx >= 0) {
+    $lightbox.value.loadAndOpen(idx);
+    usePhotosStore().setOpenedPhoto(null);
+  }
+}, {immediate: true})
 </script>
 
 <template>
   <div :id="galleryId" class="row">
     <div class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm" v-for="photo in photos" :key="photo.id">
       <a
-          :href="photo.url"
-          :data-pswp-width="photo.width"
-          :data-pswp-height="photo.height"
-          target="_blank"
-          rel="noreferrer"
+        :href="photo.url"
+        :data-pswp-width="photo.width"
+        :data-pswp-height="photo.height"
+        target="_blank"
+        rel="noreferrer"
       >
         <q-img
-            spinner-color="primary"
-            class="rounded-borders"
-            :src="photo.thumbnailUrl"
-            alt=""
+          spinner-color="primary"
+          class="rounded-borders"
+          :src="photo.thumbnailUrl"
+          alt=""
         >
           <div class="absolute-bottom" v-if="photo.name !== ''">
             {{ photo.name }}