feat: add zoom in image

plentymarkets · Nov 6, 2024 · ce20c62 · ce20c62
1 parent addff21
commit ce20c62
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 18 deletions.
diff --git a/apps/web/components/Drift.vue b/apps/web/components/Drift.vue
@@ -0,0 +1,75 @@
+<template>
+  <article class="demo-area">
+    <!--      <img-->
+    <!--        class="demo-trigger"-->
+    <!--        src="https://demos.imgix.net/wristwatch.jpg?w=200&ch=DPR&dpr=2&border=1,ddd"-->
+    <!--        data-zoom="https://demos.imgix.net/wristwatch.jpg?w=1000&ch=DPR&dpr=2"-->
+    <!--      />-->
+    <slot></slot>
+  </article>
+</template>
+
+<script setup lang="ts">
+import Drift from 'drift-zoom';
+
+onMounted(() => {
+  let demoTrigger = document.querySelector('.demo-trigger') as HTMLElement;
+  let paneContainer = document.querySelector('.detail') as HTMLElement;
+
+  new Drift(demoTrigger, {
+    paneContainer: paneContainer,
+    inlinePane: 1,
+  });
+});
+</script>
+
+<style scoped>
+.demo-trigger {
+  display: inline-block;
+  width: 30%;
+}
+
+.detail {
+  position: relative;
+  width: 65%;
+  margin-left: 5%;
+  float: left;
+  button {
+    vertical-align: middle;
+    opacity: 0.5;
+    cursor: unset;
+    background: $color_invert_chrome_tint;
+    margin-left: 1em;
+  }
+}
+
+@media (max-width: 610px) {
+  .detail,
+  .demo-trigger {
+    float: none;
+  }
+
+  .demo-trigger {
+    display: block;
+    width: 50%;
+    max-width: 200px;
+    margin: 0 auto;
+  }
+
+  .detail {
+    margin: 0;
+    width: auto;
+  }
+
+  p {
+    margin: 0 auto 1em;
+  }
+
+  .responsive-hint {
+    display: none;
+  }
+  h3 {
+    margin-top: 20px;
+  }
+}
+</style>
diff --git a/apps/web/components/Gallery/Gallery.vue b/apps/web/components/Gallery/Gallery.vue
@@ -1,8 +1,11 @@
 <template>
-  <div class="flex-col md:flex-row h-full flex relative scroll-smooth md:gap-4" data-testid="gallery">
+  <div class="flex-col md:flex-row h-full flex relative scroll-smooth md:gap-4 relative" data-testid="gallery">
     <div
       class="after:block after:pt-[100%] flex-1 relative overflow-hidden w-full max-h-[600px]"
       data-testid="gallery-images"
+      ref="my-input"
+      @mouseover="mouse = true"
+      @mouseleave="mouse = false"
     >
       <SfScrollable
         class="flex items-center snap-x snap-mandatory scrollbar-hidden w-full h-full"
@@ -18,23 +21,26 @@
           :key="`image-${index}-thumbnail`"
           class="w-full h-full relative flex items-center justify-center snap-center snap-always basis-full shrink-0 grow"
         >
-          <NuxtImg
-            :id="`gallery-img-${index}`"
-            :alt="productImageGetters.getImageAlternate(image) || productImageGetters.getCleanImageName(image) || ''"
-            :title="productImageGetters.getImageName(image) || productImageGetters.getCleanImageName(image) || ''"
-            :aria-hidden="activeIndex !== index"
-            fit="fill"
-            class="object-contain h-full w-full"
-            :quality="80"
-            :src="productImageGetters.getImageUrl(image)"
-            sizes="2xs:100vw, md:700px"
-            draggable="false"
-            :loading="index === 0 ? 'eager' : 'lazy'"
-            :fetchpriority="index === 0 ? 'high' : 'auto'"
-            @load="updateImageStatusFor(`gallery-img-${index}`)"
-            :width="getWidth(image, productImageGetters.getImageUrl(image))"
-            :height="getHeight(image, productImageGetters.getImageUrl(image))"
-          />
+          <Drift>
+            <NuxtImg
+              :id="`gallery-img-${index}`"
+              :alt="productImageGetters.getImageAlternate(image) || productImageGetters.getCleanImageName(image) || ''"
+              :title="productImageGetters.getImageName(image) || productImageGetters.getCleanImageName(image) || ''"
+              :aria-hidden="activeIndex !== index"
+              fit="fill"
+              class="object-contain h-full w-full demo-trigger"
+              :data-zoom="productImageGetters.getImageUrl(image)"
+              :quality="80"
+              :src="productImageGetters.getImageUrl(image)"
+              sizes="2xs:100vw, md:700px"
+              draggable="false"
+              :loading="index === 0 ? 'eager' : 'lazy'"
+              :fetchpriority="index === 0 ? 'high' : 'auto'"
+              @load="updateImageStatusFor(`gallery-img-${index}`)"
+              :width="getWidth(image, productImageGetters.getImageUrl(image))"
+              :height="getHeight(image, productImageGetters.getImageUrl(image))"
+            />
+          </Drift>
           <SfLoaderCircular v-if="!imagesLoaded[`gallery-img-${index}`]" class="absolute" size="sm" />
         </div>
       </SfScrollable>
@@ -116,6 +122,7 @@
         />
       </div>
     </div>
+    <div class="detail" :class="{ active: mouse }"></div>
   </div>
 </template>
 
@@ -127,6 +134,7 @@ import type { ImagesData } from '@plentymarkets/shop-api';
 import { productImageGetters } from '@plentymarkets/shop-api';
 import { defaults } from '~/composables';
 
+const mouse = ref(false);
 const props = defineProps<{ images: ImagesData[] }>();
 
 const { isPending, start, stop } = useTimeoutFn(() => {}, 50);
@@ -218,3 +226,18 @@ const assignReference = (element: Element | ComponentPublicInstance | null, inde
   if (index === 0) firstThumbReference.value = element as HTMLButtonElement;
 };
 </script>
+
+<style scoped>
+.detail {
+  position: absolute;
+}
+.detail.active {
+  height: 100%;
+  width: 600px;
+  top: 0;
+  background: white;
+  margin-left: 100%;
+  z-index: 10;
+  border: 1px solid black;
+}
+</style>
diff --git a/package.json b/package.json
@@ -33,12 +33,14 @@
   "dependencies": {
     "@plentymarkets/shop-api": "^0.72.2",
     "@types/applepayjs": "^14.0.8",
+    "@types/drift-zoom": "^1.5.2",
     "@types/googlepay": "^0.7.6",
     "@vee-validate/nuxt": "^4.13.2",
     "@vee-validate/yup": "^4.13.2",
     "country-flag-icons": "^1.5.12",
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.5",
+    "drift-zoom": "^1.5.1",
     "nuxt-swiper": "^1.2.2"
   },
   "devDependencies": {

diff --git a/yarn.lock b/yarn.lock
@@ -4239,6 +4239,7 @@ __metadata:
     "@paypal/paypal-js": 8.1.0
     "@plentymarkets/shop-api": ^0.72.2
     "@types/applepayjs": ^14.0.8
+    "@types/drift-zoom": ^1.5.2
     "@types/googlepay": ^0.7.6
     "@types/uuid": ^9.0.8
     "@vee-validate/nuxt": ^4.13.2
@@ -4253,6 +4254,7 @@ __metadata:
     cross-env: ^7.0.3
     cypress-iframe: ^1.0.1
     dotenv: ^16.4.5
+    drift-zoom: ^1.5.1
     happy-dom: ^14.12.3
     husky: ^8.0.3
     is-ci: ^3.0.1
@@ -4929,6 +4931,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/drift-zoom@npm:^1.5.2":
+  version: 1.5.2
+  resolution: "@types/drift-zoom@npm:1.5.2"
+  checksum: 481bc258822acca5ef6092966c9f1c2eac19d749b1762e9086443777966a670be8d630968e40a71a53cc812cf146de1f10b7736cc95efc4a8809ded268f1bd4a
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:*, @types/estree@npm:1.0.5, @types/estree@npm:^1.0.0":
   version: 1.0.5
   resolution: "@types/estree@npm:1.0.5"
@@ -9930,6 +9939,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"drift-zoom@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "drift-zoom@npm:1.5.1"
+  checksum: 4a02c4196212137b2ef207116a142e221aa52399d3062b69e2bb9081a92050995179ddee2e0833c33fc773cc4aab9b0568d17f7ceabc2d4e727d8ca86a551d61
+  languageName: node
+  linkType: hard
+
 "duplexer@npm:^0.1.2":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"