Implementace photoswipe

2023-10-30 09:08:58 +01:00
parent a63efc44d8
commit e2ad6e39b8
9 changed files with 221 additions and 76 deletions
@@ -0,0 +1,103 @@
+<script setup>
+import {onMounted, onUnmounted, ref} from "vue";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import 'photoswipe/style.css';
+import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
+import PhotoSwipeDynamicCaption from "photoswipe-dynamic-caption-plugin";
+import MapWithMarkers from "components/map/MapWithMarkers.vue";
+import {formatDatetime} from "src/composables/datetimeUtils";
+import EmbeddedMap from "components/map/EmbeddedMap.vue";
+import {roundWithPrecision} from "../../composables/utils";
+import PhotoCaption from "components/photos/PhotoCaption.vue";
+
+
+const props = defineProps({
+  galleryId: {
+    type: String,
+    required: false,
+    default: () => "randomGalleryId"
+  },
+  photos: {
+    type: Array,
+    required: true
+  }
+})
+
+let $lightbox = null;
+
+
+onMounted(() => {
+  if (!$lightbox) {
+    $lightbox = new PhotoSwipeLightbox({
+      gallery: '#' + props.galleryId,
+      children: 'a',
+      pswpModule: () => import('photoswipe'),
+    });
+
+    let captionPlugin = new PhotoSwipeDynamicCaption($lightbox, {
+      type: 'auto',
+    });
+
+    // $lightbox.on('uiRegister', function () {
+    //   $lightbox.pswp.ui.registerElement({
+    //     name: 'test-button',
+    //     order: 9,
+    //     isButton: true,
+    //     html: infoIcon,
+    //     onClick: (event, el, pswp) => {
+    //       for (const elem of document.querySelectorAll('.pswp__dynamic-caption')) {
+    //         elem.style.display = "block";
+    //       }
+    //
+    //       // pswp.currSlide.dynamicCaption.element.style.display="block";
+    //       // pswp.currSlide.dynamicCaption.element.hidden = false;
+    //       pswp.dispatch("calcSlideSize", {slide: pswp.currSlide});
+    //       pswp.currSlide.zoomAndPanToInitial();
+    //
+    //       // captionPlugin.recalculateZoomLevelAndBounds(pswp.currSlide);
+    //       // captionPlugin.storeAdjustedPanAreaSize(pswp.currSlide);
+    //       // captionPlugin.storeOriginalPanAreaSize(pswp.currSlide);
+    //       // window.resize();
+    //       // captionPlugin.updateCaptionPosition(pswp.currSlide);
+    //       // captionPlugin.adjustPanArea(pswp.currSlide, pswp.currSlide.zoomLevels.initial);
+    //       // // captionPlugin.showCaption(pswp.currSlide);
+    //     }
+    //   });
+    // });
+
+    $lightbox.init();
+  }
+});
+onUnmounted(() => {
+  if ($lightbox) {
+    $lightbox.destroy();
+    $lightbox = null;
+  }
+});
+</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"
+      >
+        <q-img
+            spinner-color="primary"
+            class="rounded-borders"
+            :src="photo.thumbnailUrl"
+            alt=""
+        >
+          <div class="absolute-bottom" v-if="photo.name !== ''">
+              {{ photo.name }}
+          </div>
+        </q-img>
+        <PhotoCaption :photo="photo"/>
+      </a>
+    </div>
+  </div>
+</template>