From 6468e12695616bf19fe18a2640d384a31425ef6e Mon Sep 17 00:00:00 2001 From: Bruno Perel Date: Wed, 27 Nov 2024 23:11:40 +0100 Subject: [PATCH] dumili: Extract DumiliBook, show visible pages when scrolling through the gallery Bump dependencies --- apps/dumili/api/package.json | 2 +- apps/dumili/package.json | 15 +- apps/dumili/src/components/DumiliBook.vue | 132 ++++++ apps/dumili/src/components/Gallery.vue | 33 +- .../dumili/src/components/TableOfContents.vue | 8 +- apps/dumili/src/pages/indexation/[id].vue | 122 +---- apps/dumili/src/stores/ui.ts | 2 + apps/edgecreator/api/package.json | 2 +- apps/edgecreator/package.json | 8 +- apps/web/package.json | 12 +- apps/whattheduck/package.json | 14 +- package.json | 2 +- packages/api/package.json | 2 +- pnpm-lock.yaml | 438 ++++++++++-------- 14 files changed, 444 insertions(+), 348 deletions(-) create mode 100644 apps/dumili/src/components/DumiliBook.vue diff --git a/apps/dumili/api/package.json b/apps/dumili/api/package.json index 3cde59bbc..1a2b6a534 100644 --- a/apps/dumili/api/package.json +++ b/apps/dumili/api/package.json @@ -22,7 +22,7 @@ }, "dependencies": { "@prisma/client": "^5.22.0", - "@sentry/node": "^8.40.0", + "@sentry/node": "^8.41.0", "axios": "^1.7.8", "busboy": "^1.6.0", "cloudinary": "^1.41.3", diff --git a/apps/dumili/package.json b/apps/dumili/package.json index 875b370c4..fa3a2b713 100644 --- a/apps/dumili/package.json +++ b/apps/dumili/package.json @@ -20,15 +20,16 @@ }, "dependencies": { "@iconify-json/bi": "^1.2.1", - "@sentry/browser": "^8.40.0", - "@sentry/vue": "^8.40.0", + "@sentry/browser": "^8.41.0", + "@sentry/vue": "^8.41.0", "@unhead/vue": "^1.11.13", "@vueuse/core": "^11.3.0", + "@vueuse/components": "^12.0.0", "@vueuse/integrations": "^11.3.0", "bootstrap": "^5.3.3", "bootstrap-vue-next": "^0.25.15", "js-cookie": "^3.0.5", - "pinia": "^2.2.6", + "pinia": "^2.2.7", "sortablejs": "^1.15.4", "vue": "^3.5.13", "vue-draggable-resizable": "^3.0.0", @@ -40,7 +41,7 @@ "~web": "workspace:*" }, "devDependencies": { - "@antfu/eslint-config": "^3.10.0", + "@antfu/eslint-config": "^3.11.0", "@eslint/eslintrc": "^3.2.0", "@eslint/js": "^9.15.0", "@intlify/eslint-plugin-vue-i18n": "^3.1.0", @@ -57,9 +58,9 @@ "sass": "^1.81.0", "typescript": "^5.7.2", "typescript-eslint": "^8.16.0", - "unplugin-auto-import": "^0.18.5", - "unplugin-icons": "^0.20.1", - "unplugin-vue-components": "^0.27.4", + "unplugin-auto-import": "^0.18.6", + "unplugin-icons": "^0.20.2", + "unplugin-vue-components": "^0.27.5", "vite": "^5.4.11", "vite-plugin-eslint": "^1.8.1", "vite-plugin-pages": "^0.32.4", diff --git a/apps/dumili/src/components/DumiliBook.vue b/apps/dumili/src/components/DumiliBook.vue new file mode 100644 index 000000000..c51e29343 --- /dev/null +++ b/apps/dumili/src/components/DumiliBook.vue @@ -0,0 +1,132 @@ + + + \ No newline at end of file diff --git a/apps/dumili/src/components/Gallery.vue b/apps/dumili/src/components/Gallery.vue index 2dc89f122..74db1e79d 100644 --- a/apps/dumili/src/components/Gallery.vue +++ b/apps/dumili/src/components/Gallery.vue @@ -19,7 +19,22 @@ md="4" @click="selectedId = id" > - +
{{ id }}
@@ -33,12 +48,15 @@ import { moveArrayElement, useSortable, } from "@vueuse/integrations/useSortable"; +import { vElementVisibility } from "@vueuse/components"; import { dumiliSocketInjectionKey } from "~/composables/useDumiliSocket"; import { ui } from "~/stores/ui"; const { indexationSocket } = inject(dumiliSocketInjectionKey)!; +const imagesInViewport = ref(new Set()); + const { images } = defineProps<{ images: { url: string | null; id: number }[]; selectable?: boolean; @@ -54,6 +72,8 @@ const emit = defineEmits<{ const { t: $t } = useI18n(); +const { visiblePages, currentPage } = storeToRefs(ui()); + const imagesRef = ref(null); useSortable(imagesRef, images, { multiDrag: true, @@ -77,11 +97,16 @@ watch(selectedId, (id) => { } }); +watch(currentPage, (value) => { + document.getElementById(`page-image-${value}`)?.scrollIntoView(); +}); + watch( - () => ui().currentPage, - (currentPage) => { - document.getElementById(`page-image-${currentPage}`)?.scrollIntoView(); + imagesInViewport, + (value) => { + visiblePages.value = value; }, + { immediate: true }, );