From 883b4fa97f69b0daa1440a72e2afe562767d2777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Sat, 9 Mar 2024 23:02:30 +0100
Subject: [PATCH] Init lightboxu az po otevreni fotky

---
 src/components/photos/PhotoGallery.vue        | 121 +++++++++++-------
 src/composables/pagination.js                 |   2 +
 .../public/pilotProfile/FlightDetailPage.vue  |   2 +-
 3 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/src/components/photos/PhotoGallery.vue b/src/components/photos/PhotoGallery.vue
index 49d12c5..cacdfdc 100644
--- a/src/components/photos/PhotoGallery.vue
+++ b/src/components/photos/PhotoGallery.vue
@@ -6,8 +6,9 @@ import PhotoSwipeDynamicCaption from "../../../node_modules/photoswipe-dynamic-c
 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 {useRouter} from "vue-router";
 import {usePhotosStore} from "stores/Photos";
+import {useQuasar} from "quasar";
 
 const props = defineProps({
   galleryId: {
@@ -21,9 +22,8 @@ const props = defineProps({
   }
 })
 
-
-const route = useRoute();
 const $router = useRouter();
+const $q = useQuasar();
 
 let $lightbox = ref(null);
 
@@ -46,18 +46,15 @@ const initLightbox = () => {
   $lightbox.value.init();
 }
 
+const isCollapsed = ref(true);
+const photosCollapseLimit = computed(() => {
+  if ($q.screen.width <= $q.screen.sizes.sm) return 2;
+  else if ($q.screen.width <= $q.screen.sizes.md) return 3;
+  else return 4;
+});
+
 onMounted(() => {
-  initLightbox();
-
-  // 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();
-    }
-
-    if ($lightbox.value && $lightbox.value.pswp)
-      $lightbox.value.pswp.close();
-  };
+  isCollapsed.value = props.photos.length >= photosCollapseLimit.value;
 });
 
 onUnmounted(() => {
@@ -69,7 +66,11 @@ onUnmounted(() => {
 
 const openedPhoto = computed(() => usePhotosStore().openedPhoto);
 watch(() => [openedPhoto.value, $lightbox.value], () => {
-  if (!$lightbox.value || !openedPhoto.value) return;
+  if (!openedPhoto.value) return;
+
+  if (!$lightbox.value) {
+    initLightbox();
+  }
 
   const idx = props.photos.findIndex(p => p.id === openedPhoto.value.id);
   if (idx >= 0) {
@@ -77,47 +78,73 @@ watch(() => [openedPhoto.value, $lightbox.value], () => {
     usePhotosStore().setOpenedPhoto(null);
   }
 }, {immediate: true});
-
-const isCollapsed = ref(false);
 </script>
 
 <template>
-  <div :id="galleryId" :class="{row: true, collapsed: isCollapsed}">
-    <div
-      v-for="photo in photos" :key="photo.id"
-      style="min-height: 100px"
-      class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm"
-    >
-      <a
-        :href="photo.url"
-        :data-pswp-width="photo.width"
-        :data-pswp-height="photo.height"
-        target="_blank"
-        rel="noreferrer"
+  <div :class="{'photogallery--wrapper': true, collapsed: isCollapsed}" :id="`${galleryId}-wrapper`">
+    <div :id="galleryId" class="row photogallery--content">
+      <div
+        v-for="photo in photos" :key="photo.id"
+        style="min-height: 100px"
+        class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm"
       >
-        <q-img
-          spinner-color="primary"
-          class="rounded-borders"
-          :src="photo.thumbnailUrl"
-          alt=""
+        <a
+          :data-pswp-src="photo.url"
+          :data-pswp-width="photo.width"
+          :data-pswp-height="photo.height"
+          target="_blank"
+          @click="initLightbox"
+          rel="noreferrer"
         >
-          <div class="absolute-bottom" v-if="photo.name !== ''">
-            {{ photo.name }}
-          </div>
-        </q-img>
-        <PhotoCaption :photo="photo"/>
-      </a>
+          <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>
+
+    <a class="photogallery--collapse" v-if="isCollapsed" @click="isCollapsed = false">
+      <q-btn class="q-mt-lg q-mb-md" color="secondary">Rozbalit</q-btn>
+    </a>
   </div>
 
-  <!--      <q-btn @click="isCollapsed=!isCollapsed">{{isCollapsed ? 'Sbalit' : "Rozbalit"}}</q-btn>-->
-
-
 </template>
 
-<style>
-.collapsed {
-  max-height: 50px;
-  overflow: hidden
+<style lang="scss">
+.photogallery--wrapper {
+  margin: 50px 0;
+
+  a:hover {
+    cursor: pointer
+  }
+
+  &.collapsed {
+    position: relative;
+
+    .photogallery--content {
+      max-height: 250px;
+      overflow: hidden
+    }
+
+    .photogallery--collapse {
+      display: block;
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      text-align: center;
+      background: rgb(255, 255, 255);
+      background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0) 100%);
+    }
+  }
 }
 </style>
diff --git a/src/composables/pagination.js b/src/composables/pagination.js
index b44b5c9..cd6ace4 100644
--- a/src/composables/pagination.js
+++ b/src/composables/pagination.js
@@ -1,6 +1,8 @@
 import {ref} from "vue";
 
 
+// TODO: predelat na usePagination() composable!
+
 export const paginationLimit = ref(10);
 export const paginationOffset = ref(0);
 
diff --git a/src/pages/public/pilotProfile/FlightDetailPage.vue b/src/pages/public/pilotProfile/FlightDetailPage.vue
index 33e219d..8e18bc8 100644
--- a/src/pages/public/pilotProfile/FlightDetailPage.vue
+++ b/src/pages/public/pilotProfile/FlightDetailPage.vue
@@ -89,7 +89,7 @@ useMeta(() => metaData({
 
           <q-no-ssr>
             <q-inner-loading v-if="arePhotosLoading"/>
-            <PhotoGallery :photos="flightPhotos" v-else/>
+            <PhotoGallery :photos="flightPhotos" v-else-if="!arePhotosLoading && flightPhotos.length > 0"/>
             <FlightTrackMap :key="flight.id" :flight="flight" :photos="flightPhotos"/>
           </q-no-ssr>
         </q-card-section>