chore: destroy zoom on route leave (#878)

plentymarkets · Dec 9, 2024 · 241ab39 · 241ab39
1 parent 61fd214
commit 241ab39
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/apps/web/components/Drift/Drift.vue b/apps/web/components/Drift/Drift.vue
@@ -15,6 +15,10 @@ onMounted(() => {
   let demoTrigger = document.querySelector(`.demo-trigger-${index}`) as HTMLElement;
   let paneContainer = document.querySelector('.drift-zoom-image') as HTMLElement;
 
+  if (!demoTrigger || !paneContainer) {
+    return;
+  }
+
   drift = new Drift(demoTrigger, {
     paneContainer: paneContainer,
     containInline: true,
@@ -25,6 +29,20 @@ onMounted(() => {
   });
 });
 
+onBeforeRouteUpdate(() => {
+  if (drift) {
+    drift.destroy();
+    drift = null;
+  }
+});
+
+onBeforeRouteLeave(() => {
+  if (drift) {
+    drift.destroy();
+    drift = null;
+  }
+});
+
 onUnmounted(() => {
   if (drift) {
     drift.destroy();

diff --git a/apps/web/components/ZoomableImage/ZoomableImage.vue b/apps/web/components/ZoomableImage/ZoomableImage.vue
@@ -10,7 +10,7 @@
       {{ $t('double-tap-zoom') }}
     </div>
 
-    <Drift v-if="!isMobile" :index="index">
+    <Drift v-if="!isMobile && imagesLoaded[`gallery-img-${index}`]" :index="index">
       <NuxtImg
         v-bind="nuxtImgProps"
         @touchstart="onTouchStart"