From 318e4d7fae65800962e28ec693f887459728b781 Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Thu, 16 Nov 2023 16:33:11 +0500
Subject: [PATCH] scroll on preview image

---
 app/javascript/template_builder/builder.vue  | 10 +++++-----
 app/javascript/template_builder/document.vue |  4 ++++
 app/javascript/template_builder/preview.vue  |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 31ad58cc..e990d5d1 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -80,7 +80,7 @@
           :editable="editable"
           :template="template"
           :is-direct-upload="isDirectUpload"
-          @scroll-to="scrollIntoDocument(item)"
+          @scroll-to="scrollIntoDocument"
           @remove="onDocumentRemove"
           @replace="onDocumentReplace"
           @up="moveDocument(item, -1)"
@@ -448,10 +448,10 @@ export default {
         this.documentRefs.push(el)
       }
     },
-    scrollIntoDocument (item) {
-      const ref = this.documentRefs.find((e) => e.document.uuid === item.attachment_uuid)
-
-      ref.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    scrollIntoDocument (item, page) {
+      const documentRef = this.documentRefs.find((e) => e.document.uuid === item.attachment_uuid)
+      documentRef.scrollIntoDocument(page)
+      // pageRef.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
     },
     onKeyUp (e) {
       if (e.code === 'Escape') {
diff --git a/app/javascript/template_builder/document.vue b/app/javascript/template_builder/document.vue
index 74b784ab..eac84145 100644
--- a/app/javascript/template_builder/document.vue
+++ b/app/javascript/template_builder/document.vue
@@ -91,6 +91,10 @@ export default {
     scrollToArea (area) {
       this.pageRefs[area.page].areaRefs.find((e) => e.area === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
     },
+    scrollIntoDocument (page) {
+      const ref = this.pageRefs.find((e) => e.image.uuid === page.uuid)
+      ref.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    },
     setPageRefs (el) {
       if (el) {
         this.pageRefs.push(el)
diff --git a/app/javascript/template_builder/preview.vue b/app/javascript/template_builder/preview.vue
index e87d3af1..b0bd0601 100644
--- a/app/javascript/template_builder/preview.vue
+++ b/app/javascript/template_builder/preview.vue
@@ -13,7 +13,7 @@
       </div>
       <div
         class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
-        @click="$emit('scroll-to', item)"
+        @click="$emit('scroll-to', item, previewImage)"
       >
         <div
           v-if="editable && index==0"