Merge pull request #2143 from tf/hotspots-7

Further improvements for hotspots element
codevise · Aug 9, 2024 · 96fb09b · 96fb09b
2 parents 28d7035 + 2a57537
commit 96fb09b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/entry_types/scrolled/package/package.json b/entry_types/scrolled/package/package.json
@@ -28,7 +28,7 @@
     "react_ujs": "^2.6.1",
     "reselect": "^4.0.0",
     "screenfull": "^5.1.0",
-    "scroll-timeline": "https://github.com/tf/scroll-timeline#pageflow-scrolled-1",
+    "scroll-timeline": "https://github.com/tf/scroll-timeline#pageflow-scrolled-2",
     "slate": "^0.57.3",
     "slate-react": "^0.57.3",
     "slugify": "^1.4.6",

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js b/entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js
@@ -152,12 +152,20 @@ export function HotspotsImage({
         <div className={styles.left}>
           <ScrollButton direction="left"
                         disabled={activeIndex === -1}
-                        onClick={() => activateArea(activeIndex - 1)} />
+                        onClick={() => {
+                          if (activeIndex >= 0) {
+                            activateArea(activeIndex - 1)
+                          }
+                        }} />
         </div>
         <div className={styles.right}>
           <ScrollButton direction="right"
                         disabled={activeIndex >= areas.length}
-                        onClick={() => activateArea(activeIndex + 1)}/>
+                        onClick={() => {
+                          if (activeIndex < areas.length) {
+                            activateArea(activeIndex + 1)
+                          }
+                        }}/>
         </div>
       </>
     );
@@ -185,7 +193,9 @@ export function HotspotsImage({
       <Area key={index}
             area={area}
             portraitMode={portraitMode}
-            noPointerEvents={panZoomEnabled && activeIndex >= 0}
+            noPointerEvents={panZoomEnabled &&
+                             activeIndex >= 0 &&
+                             activeIndex < areas.length}
             onMouseEnter={() => setHoveredIndex(index)}
             onMouseLeave={() => setHoveredIndex(-1)}
             onClick={() => {
@@ -200,7 +210,10 @@ export function HotspotsImage({
     return areas.map((area, index) =>
       <Indicator key={index}
                  area={area}
-                 hidden={panZoomEnabled && activeIndex >= 0 && activeIndex !== index}
+                 hidden={panZoomEnabled &&
+                         activeIndex >= 0 &&
+                         activeIndex < areas.length &&
+                         activeIndex !== index}
                  outerRef={setIndicatorRef(index)}
                  portraitMode={portraitMode} />
     );

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/useScrollPanZoom.js b/entry_types/scrolled/package/src/contentElements/hotspots/useScrollPanZoom.js
@@ -70,6 +70,10 @@ export function useScrollPanZoom({
 
     scroller.scrollTo(Math.abs(scroller.offsetLeft - step.offsetLeft), 0);
 
+    if (!steps) {
+      return;
+    }
+
     wrapperRef.current.animate(
       [
         keyframe(steps[from + 1]),

diff --git a/yarn.lock b/yarn.lock
@@ -11529,9 +11529,9 @@ scroll-into-view-if-needed@^2.2.20:
   dependencies:
     compute-scroll-into-view "^1.0.13"
 
-"scroll-timeline@https://github.com/tf/scroll-timeline#pageflow-scrolled-1":
+"scroll-timeline@https://github.com/tf/scroll-timeline#pageflow-scrolled-2":
   version "1.0.0"
-  resolved "https://github.com/tf/scroll-timeline#c47ac20bc7dfabc2f9bc6f31a95b0e4c662fdffe"
+  resolved "https://github.com/tf/scroll-timeline#3613d3acd8ae628f523349c6c7c79474ceb13862"
 
 "semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.1:
   version "5.7.2"