Refactor hotspot embed_link

tjek · Apr 16, 2024 · c8fe802 · c8fe802
1 parent 5552b1f
commit c8fe802
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/lib/kits/core/index.ts b/lib/kits/core/index.ts
@@ -198,7 +198,7 @@ export interface V2PageDecoration {
               y1: number;
               y2: number;
               rotate: number;
-              link_embed: boolean;
+              embed_link: string;
               link: string;
           }[]
         | null;

diff --git a/lib/kits/paged-publication/bootstrapper.ts b/lib/kits/paged-publication/bootstrapper.ts
@@ -51,7 +51,7 @@ export default class Bootstrapper {
         const pageDecorationHotspots: {
             id: string;
             type: string;
-            link_embed: boolean;
+            embed_link: string;
             link: string;
             rotate: number;
             locations: any;
@@ -62,15 +62,15 @@ export default class Bootstrapper {
                 pageDecorationHotspots.push({
                     id: `page${pageDecoration.page_number}-hotspot-${index}`,
                     type: 'pagedecoration',
-                    link_embed: hotspot.link_embed,
+                    embed_link: hotspot.embed_link,
                     link: hotspot.link,
                     rotate: hotspot.rotate,
                     locations: {
                         [pageDecoration.page_number]: [
-                            [hotspot.x1, hotspot.y1],
-                            [hotspot.x1, hotspot.y2],
-                            [hotspot.x2, hotspot.y2],
-                            [hotspot.x2, hotspot.y1]
+                            [hotspot.x1 / 100, hotspot.y1 / 100],
+                            [hotspot.x1 / 100, hotspot.y2 / 100],
+                            [hotspot.x2 / 100, hotspot.y2 / 100],
+                            [hotspot.x2 / 100, hotspot.y1 / 100]
                         ]
                     }
                 });

diff --git a/lib/kits/paged-publication/hotspots.ts b/lib/kits/paged-publication/hotspots.ts
@@ -38,6 +38,8 @@ function getPosition(pages: Page[], ratio: number, hotspot: V2Hotspot) {
     const width = maxX! - minX!;
     const height = maxY! - minY!;
 
+    ratio = hotspot.type === 'pagedecoration' ? 1 : ratio;
+
     return {
         top: (minY! / ratio) * 100,
         left: minX! * 100,
@@ -69,9 +71,9 @@ function renderHotspot(hotspot, position, contentRect, boundingRect) {
     if (hotspot.type === 'pagedecoration') {
         el.className += ' sgn-pagedecoration-hotspot';
 
-        if (hotspot.link_embed) {
-            el.innerHTML = `<iframe src="${hotspot.link}" height="100%" width="100%"  style="border:0;"></iframe>`;
-        } else {
+        if (hotspot.embed_link) {
+            el.innerHTML = `<iframe src="${hotspot.embed_link}" height="100%" width="100%"  style="border:0;"></iframe>`;
+        } else if (hotspot.link) {
             el.innerHTML = `
             <a href="${
                 hotspot.link

diff --git a/lib/kits/paged-publication/viewer.ts b/lib/kits/paged-publication/viewer.ts
@@ -66,7 +66,7 @@ class Viewer extends MicroEvent {
             id: string;
             locations;
             link: string;
-            link_embed: boolean;
+            embed_link: string;
             rotate: number;
         }
     > | null = null;
@@ -282,7 +282,7 @@ class Viewer extends MicroEvent {
             for (const hotspotId in this.hotspots) {
                 if (hotspots[hotspotId]) continue;
 
-                const {id, type, locations, link, link_embed, rotate} =
+                const {id, type, locations, link, embed_link, rotate} =
                     this.hotspots[hotspotId];
                 for (let idx = 0; idx < hotspotRequest.pages.length; idx++) {
                     const {pageNumber} = hotspotRequest.pages[idx];
@@ -292,7 +292,7 @@ class Viewer extends MicroEvent {
                             id,
                             locations,
                             link,
-                            link_embed,
+                            embed_link,
                             rotate
                         };