poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implementace photoswipe

Browse Source
This commit is contained in:
Michal Kváček
2023-10-30 09:08:58 +01:00
parent a63efc44d8
commit e2ad6e39b8
9 changed files with 221 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2
View File
@@ -19,6 +19,8 @@
"chart.js": "^4.4.0",
"graphql": "16.6.0",
"graphql-tag": "2.12.6",
"photoswipe": "^5.4.2",
"photoswipe-dynamic-caption-plugin": "^1.2.7",
"pinia": "^2.0.33",
"quasar": "^2.12.0",
"vue": "^3.2.47",
src/components/photos/PhotoCaption.vue
+63
View File
@@ -0,0 +1,63 @@
<script setup>
import {formatDatetime} from "src/composables/datetimeUtils";
import {roundWithPrecision} from "src/composables/utils";
import EmbeddedMap from "components/map/EmbeddedMap.vue";
const props = defineProps({
photo: {
type: Object,
required: true
}
})
</script>
<template>
<div class="pswp-caption-content">
<strong v-if="photo.name !== ''">{{ photo.name }}</strong>
<article v-html="photo.description" v-if="photo.description !== ''"/>
<q-list>
<q-item v-if="photo.pointOfInterest">
<q-item-section avatar>
<q-avatar icon="marker"></q-avatar>
</q-item-section>
<q-item-section>
{{ photo.pointOfInterest.name }}
</q-item-section>
</q-item>
<q-item v-if="photo.exposedAt">
<q-item-section avatar>
<q-avatar icon="photo_camera"></q-avatar>
</q-item-section>
<q-item-section>
{{ formatDatetime(photo.exposedAt) }}
</q-item-section>
</q-item>
<q-item v-if="photo.gpsAltitude">
<q-item-section avatar>
<q-avatar icon="height"/>
</q-item-section>
<q-item-section>
Nadmořská výška: {{ roundWithPrecision(photo.gpsAltitude, 1) }} m
<br>
<template v-if="photo.terrainElevation">
Výška terénu: {{ roundWithPrecision(photo.terrainElevation, 1) }} m
<br>
Výška nad zemí: {{ roundWithPrecision(photo.gpsAltitude - photo.terrainElevation, 1) }} m
</template>
</q-item-section>
</q-item>
</q-list>
<div style="height: 200px; width: 100%;">
<EmbeddedMap
v-if="photo.gpsLatitude && photo.gpsLongitude"
height="200px"
class="q-mb-sm"
:gps-latitude="photo.gpsLatitude"
:gps-longitude="photo.gpsLongitude"
/>
</div>
</div>
</template>
src/components/photos/PhotoGallery.vue
+103
View File
@@ -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>
src/components/photos/PhotosList.vue → src/components/photos/PhotosEditorList.vue
+7 -18
View File
@@ -3,33 +3,29 @@ import {computed, onMounted, reactive, ref, watch} from "vue";
import {useQuasar} from "quasar";
import {confirmObject} from "src/composables/dialog";
const $q = useQuasar();
const props = defineProps({
photos: {
type: Array
},
showActions: {
type: Boolean,
required: false,
default: true
}
});
const batchEdit = ref({});
onMounted(() => {
for (const photo of props.photos) {
batchEdit.value[photo.id] = false;
}
});
const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate", "photo-click"])
const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
const openEdit = (photo) => {
emits("edit", photo);
};
const $q = useQuasar();
const confirmPhotoDelete = (id) => {
$q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
@@ -50,11 +46,7 @@ const confirmBatchPhotoDelete = () => {
}
const handleImageClick = (photo, idx) => {
if (props.showActions) {
batchEdit.value[photo.id] = !batchEdit.value[photo.id];
} else {
emits("photo-click", {photo, idx});
}
batchEdit.value[photo.id] = !batchEdit.value[photo.id];
}
const selectedPhotos = computed(() => {
@@ -133,13 +125,10 @@ const batchOptionsProps = computed(() => ({
</div>
</q-img>
<q-card-actions v-if="showActions" align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
<q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
<div class="col-grow">
<q-checkbox v-model="batchEdit[photo.id]"/>
<q-icon name="star" v-if="photo.isFlightCover" color="red"/>
<q-icon name="place" v-if="photo.pointOfInterestId"/>
<q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude"/>
<q-icon name="gps_off" v-else/>
</div>
<q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
<q-btn flat icon="info" color="blue" @click="openEdit(photo)"/>
@@ -149,7 +138,7 @@ const batchOptionsProps = computed(() => ({
</div>
</div>
<q-page-sticky :offset="[50, 50]" position="bottom" v-if="showActions && photos.length > 0">
<q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0">
<q-card>
<q-card-actions>
<q-checkbox v-model="checkAll" label="Vybrat vše"/>
src/pages/profile/flight/EditFlightPage.vue
+1 -1
View File
@@ -15,7 +15,7 @@ import {useCopilotsStore} from "stores/Copilots";
import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
import {usePhotosStore} from "stores/Photo";
import PhotosList from "components/photos/PhotosList.vue";
import PhotosList from "components/photos/PhotosEditorList.vue";
import {errorObject, successObject, warningObject} from "src/composables/dialog";
import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
src/pages/profile/flight/FlightDetailPage.vue
+25 -35
View File
@@ -1,6 +1,6 @@
<script setup>
import {useRoute, useRouter} from "vue-router";
import {onMounted, watch} from "vue";
import {computed, onMounted, ref, watch} from "vue";
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
import {useAppStore} from "stores/App";
@@ -8,14 +8,11 @@ import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
import {copyToClipboard, useQuasar} from "quasar";
import {successObject} from "src/composables/dialog";
import {useFlightsStore} from "stores/Flights";
import PhotoCarousel from "components/photos/PhotoCarousel.vue";
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
import PhotosList from "components/photos/PhotosList.vue";
import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo";
import PhotoDetail from "components/photos/PhotoDetail.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import PhotoGallery from "components/photos/PhotoGallery.vue";
const $q = useQuasar();
const $router = useRouter();
@@ -72,22 +69,26 @@ const copyLinkToClipboard = () => {
<FlightDetailSkeleton v-if="loading || !flight"/>
<q-card class="flight-detail-card" v-else>
<PhotoCarousel
:cover-photo-url="flight.coverPhoto?.url"
:carousel-title="flightName(flight)"
:photos="flight.photos"
@open-detail="openDetail"
/>
<!-- <PhotoCarousel-->
<!-- :cover-photo-url="flight.coverPhoto?.url"-->
<!-- :carousel-title="flightName(flight)"-->
<!-- :photos="flight.photos"-->
<!-- />-->
<q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
<div class="absolute-bottom custom-caption">
<div class="text-h5"> {{ flightName(flight) }} </div>
</div>
</q-img>
<q-card-actions class="q-my-md">
<div class="col-grow">
<q-btn
flat
:to="{name: 'flightEdit', params:{id: flight.id}}"
icon="edit"
text-color="primary"
label="Upravit"
/>
<!-- <q-btn-->
<!-- flat-->
<!-- :to="{name: 'flightEdit', params:{id: flight.id}}"-->
<!-- icon="edit"-->
<!-- text-color="primary"-->
<!-- label="Upravit"-->
<!-- />-->
<q-btn
@click="togglePublicVisibility"
@@ -110,19 +111,19 @@ const copyLinkToClipboard = () => {
<q-card-section>
<div class="text-right">
<q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
</div>
<FlightBasicInfo :flight="flight" :show-copilots="true"/>
<div class="text-right">
<q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
</div>
<article class="q-my-lg" v-html="flight.description"/>
<q-separator />
<q-separator/>
<div class="text-right">
<q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
</div>
<BasicInfoBanner
v-if="flight.photos.length === 0"
@@ -130,14 +131,12 @@ const copyLinkToClipboard = () => {
>
U tohoto letu nemáš nahrané žádné fotografie.
</BasicInfoBanner>
<PhotosList
<PhotoGallery
v-else
:photos="flight.photos"
:show-actions="false"
@photo-click="openPhotoFromList"
/>
<q-separator />
<q-separator/>
<div class="text-right">
<q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
@@ -154,13 +153,4 @@ const copyLinkToClipboard = () => {
/>
</q-card-section>
</q-card>
<PhotoDetail
v-if="photoData"
v-model="openPhotoDetail"
:default-title="flightName(flight)"
:photo="photoData.photo"
:photos="photoData.allPhotos"
:opened-index="photoData.idx"
/>
</template>
src/pages/profile/poi/PointOfInterestDetailPage.vue
+1 -1
View File
@@ -4,7 +4,7 @@ import {useRoute} from "vue-router";
import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
import FAB from "components/FAB.vue";
import {fetchPoi, loading, poi} from "src/composables/objects/poi";
import PhotosList from "components/photos/PhotosList.vue";
import PhotosList from "components/photos/PhotosEditorList.vue";
import {useAppStore} from "stores/App";
import EmbeddedMap from "components/map/EmbeddedMap.vue";
import {useUserStore} from "stores/User";
src/pages/public/pilotProfile/FlightDetailPage.vue
+9 -21
View File
@@ -2,17 +2,12 @@
import {onMounted, watch} from "vue";
import {fetchFlight, flight, flightName, loading} from "src/composables/objects/flight";
import {useRoute} from "vue-router";
import PhotoCarousel from "components/photos/PhotoCarousel.vue";
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
import {useAppStore} from "stores/App";
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
import PilotProfileCard from "components/profile/PilotProfileCard.vue";
import PhotosList from "components/photos/PhotosList.vue";
import PhotoDetail from "components/photos/PhotoDetail.vue";
import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo";
import PhotoGallery from "components/photos/PhotoGallery.vue";
const routeParams = useRoute().params;
onMounted(() => {
@@ -41,31 +36,24 @@ watch(flight, (newVal) => {
</q-banner>
<q-card class="q-mx-md q-my-md flight-detail-card">
<PhotoCarousel
:default-title="flightName(flight)"
:cover-photo-url="flight.coverPhoto?.url"
:photos="flight.photos"
@open-detail="openDetail"
/>
<q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
<div class="absolute-bottom custom-caption">
<div class="text-h5"> {{ flightName(flight) }}</div>
</div>
</q-img>
<q-card-section>
<FlightBasicInfo :flight="flight" :show-copilots="false"/>
<article class="q-my-lg" v-html="flight.description"/>
<PhotosList :photos="flight.photos" :show-actions="false" @photo-click="openPhotoFromList"/>
<PhotoGallery :photos="flight.photos"/>
<FlightTrackMap :flight="flight"/>
</q-card-section>
</q-card>
<PhotoDetail
v-if="photoData"
v-model="openPhotoDetail"
:default-title="flightName(flight)"
:photo="photoData.photo"
:photos="photoData.allPhotos"
:opened-index="photoData.idx"
/>
</template>
</div>
</template>
yarn.lock
+10
View File
@@ -2354,6 +2354,16 @@ path-to-regexp@0.1.7:
resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz"
integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
photoswipe-dynamic-caption-plugin@^1.2.7:
version "1.2.7"
resolved "https://registry.yarnpkg.com/photoswipe-dynamic-caption-plugin/-/photoswipe-dynamic-caption-plugin-1.2.7.tgz#53aa5059f1c4dccc8aa36196ff3e09baa5e537c2"
integrity sha512-5XXdXLf2381nwe7KqQvcyStiUBi9TitYXppUQTrzPwYAi4lZsmWNnNKMclM7I4QGlX6fXo42v3bgb6rlK9pY1Q==
photoswipe@^5.4.2:
version "5.4.2"
resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.2.tgz#bed976c27f876bd9c86085a022701a8cea484f7e"
integrity sha512-z5hr36nAIPOZbHJPbCJ/mQ3+ZlizttF9za5gKXKH/us1k4KNHaRbC63K1Px5sVVKUtGb/2+ixHpKqtwl0WAwvA==
picocolors@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"