From 32b2fa4c78ead6c7c665b1e9d834cb76f1366687 Mon Sep 17 00:00:00 2001
From: Spencer Wahl <spencer.s.wahl@gmail.com>
Date: Mon, 6 Jan 2025 15:24:24 -0500
Subject: [PATCH] fix interactive-image imageid and title bug

---
 ...000000-0000-0000-0000-000000000000_en.json |  1 +
 .../panels/interactive-image-panel.vue        | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
index 1dda19f0..e54aa8f4 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
@@ -63,6 +63,7 @@
             "panel": [
                 {
                     "type": "interactive-image",
+                    "title": "Interactive Image test",
                     "defaultImage": {
                         "id": "default",
                         "src":"00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg"
diff --git a/src/components/panels/interactive-image-panel.vue b/src/components/panels/interactive-image-panel.vue
index 3ae93140..d7462668 100644
--- a/src/components/panels/interactive-image-panel.vue
+++ b/src/components/panels/interactive-image-panel.vue
@@ -6,7 +6,7 @@
         :class="!!config.reversed ? 'sm:flex-row-reverse' : 'sm:flex-row'"
     >
         <div
-            class="sticky max-w-none min-w-0 mb-5 mx-1 py-0 sm:py-5 z-40"
+            class="sticky prose max-w-none min-w-0 mb-5 mx-1 py-0 sm:py-5 z-40"
             :class="{ 'has-background': background, 'flex-1': !!config.contentWidth === false }"
             :style="{
                 width: !isMobile ? `${config.contentWidth}` : undefined
@@ -14,7 +14,7 @@
         >
             <component
                 :is="config.titleTag || 'h2'"
-                class="px-10 mb-0 chapter-title top-20"
+                class="px-10 image-title mb-0 chapter-title top-20"
                 :style="activeIdx !== defaultPanel.id ? 'margin-top: 0px;' : ''"
             >
                 {{ config.title }}
@@ -27,7 +27,7 @@
                     :class="config.class"
                     :alt="activeImage?.altText || ''"
                     :style="{ width: `${config.width}px`, height: `${config.height}px` }"
-                    class="mx-auto flex object-contain sm:max-w-screen sm:max-h-screen"
+                    class="mx-auto flex object-contain sm:max-w-screen sm:max-h-screen story-graphic"
                 />
                 <div 
                     v-for="zone in config.zones" 
@@ -154,7 +154,7 @@ const zoneClick = (zone: InteractiveImageZone): void => {
     });
     if (zone.imageId) {
         const image = props.config.images.find((img) => {
-            return zone.imageId = img.id;
+            return zone.imageId == img.id;
         });
         if (image) {
             activeImage.value = image;
@@ -175,7 +175,7 @@ const zoneClick = (zone: InteractiveImageZone): void => {
         }, 10);
 
         setTimeout(() => {
-            const elTop = isMobile ? img.value?.getBoundingClientRect().top : content.value?.$el.getBoundingClientRect().top;
+            const elTop = el.value?.getBoundingClientRect().top;
             window.scrollTo({
                 top: window.scrollY + elTop - calculateScrollOffset(),
                 left: 0,
@@ -191,7 +191,7 @@ const zoneMouseEnter = (zone: InteractiveImageZone): void => {
     }
     if (zone.imageId) {
         activeImage.value = props.config.images.find((img) => {
-            return zone.imageId = img.id;
+            return zone.imageId == img.id;
         }) || activeImage.value;
     }
 }
@@ -232,7 +232,7 @@ const clickBack = (): void => {
     }, 10);
 
     setTimeout(() => {
-        const elTop = content.value?.$el.getBoundingClientRect().top;
+        const elTop = el.value?.getBoundingClientRect().top;
         window.scrollTo({
             top: window.scrollY + elTop - calculateScrollOffset(),
             left: 0,
@@ -291,6 +291,12 @@ const clickBack = (): void => {
 }
 
 @media screen and (max-width: 640px) {
+    .image-title {
+        margin: 0em;
+        padding-top: 0.2em;
+        padding-bottom: 0.2em;
+        background: #fff;
+    }
 
     .return-button-container {
         position: sticky;