diff --git a/entry_types/scrolled/package/package.json b/entry_types/scrolled/package/package.json index 01ae09fad..ca1026fb5 100644 --- 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 index b8f1bb9d7..8acab4409 100644 --- 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({
activateArea(activeIndex - 1)} /> + onClick={() => { + if (activeIndex >= 0) { + activateArea(activeIndex - 1) + } + }} />
= areas.length} - onClick={() => activateArea(activeIndex + 1)}/> + onClick={() => { + if (activeIndex < areas.length) { + activateArea(activeIndex + 1) + } + }}/>
); @@ -185,7 +193,9 @@ export function HotspotsImage({ = 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) =>