@guardian/interactive-component-library 0.1.0-alpha.46 → 0.1.0-alpha.48

package/dist/interactive-component-library.js

@@ -4602,7 +4602,9 @@ class Dispatcher {
 }
 const MapEvent = {
   CHANGE: "change",
-  ZOOM: "zoom"
+  ZOOM: "zoom",
+  TRANSITION_START: "transition_start",
+  TRANSITION_END: "transition_end"
 };
 var noop = { value: () => {
 } };
@@ -5922,10 +5924,8 @@ let Map$2 = class Map2 {
     this._resizeObserver = new ResizeObserver(() => this._updateSize());
     this._resizeObserver.observe(this.target);
     this._viewport.addEventListener("touchmove", (event) => {
-      if (event.targetTouches.length < 2) {
+      if (event.targetTouches.length < 2 && this.collaborativeGesturesEnabled) {
         this._filterEventCallback(true);
-      } else {
-        event.stopImmediatePropagation();
       }
     });
   }
@@ -5940,9 +5940,12 @@ let Map$2 = class Map2 {
   get viewPort() {
     return this._viewport;
   }
-  get zoomLevel() {
+  get zoomScale() {
     return this.view.transform.k;
   }
+  get isTransitioning() {
+    return this._isTransitioning;
+  }
   /** PUBLIC METHODS */
   onFilterEvent(callback) {
     this._filterEventCallback = callback;
@@ -5983,15 +5986,15 @@ let Map$2 = class Map2 {
     this.layers.splice(layerIndex, 1);
   }
   async zoomIn(options) {
-    return this.zoomTo(this.zoomLevel * 2, options);
+    return this.zoomTo(this.zoomScale * 2, options);
   }
   async zoomOut(options) {
-    return this.zoomTo(this.zoomLevel * 0.5, options);
+    return this.zoomTo(this.zoomScale * 0.5, options);
   }
-  async zoomTo(zoomLevel, options = {
+  async zoomTo(zoomScale, options = {
     duration: 500
   }) {
-    return select(this._viewport).transition().duration(options.duration).call(this._zoomBehaviour.scaleTo, zoomLevel).end();
+    return select(this._viewport).transition().duration(options.duration).call(this._zoomBehaviour.scaleTo, zoomScale).end();
   }
   zoomToFeature(feature, focalPoint, padding = {
     top: 40,
@@ -6047,6 +6050,7 @@ let Map$2 = class Map2 {
     const ease = options.ease || ((t) => t);
     return new Promise((resolve) => {
       this._isTransitioning = true;
+      this.dispatcher.dispatch(MapEvent.TRANSITION_START);
       const _timer = timer((elapsed) => {
         const t = Math.min(elapsed / options.duration, 1);
         callback(ease(t));
@@ -6054,6 +6058,7 @@ let Map$2 = class Map2 {
         if (elapsed >= options.duration) {
           _timer.stop();
           this._isTransitioning = false;
+          this.dispatcher.dispatch(MapEvent.TRANSITION_END);
           resolve();
         }
       });
@@ -6101,7 +6106,7 @@ let Map$2 = class Map2 {
       if (event.type === "wheel" && !event[this._zoomBypassKey]) {
         return filterEvent(true);
       }
-      if ("targetTouches" in event) {
+      if ("targetTouches" in event && this.collaborativeGesturesEnabled) {
         if (event.targetTouches.length < 2) {
           return false;
         }
@@ -6339,6 +6344,7 @@ const Map$1 = forwardRef(({
   const [zoomHelpText, setZoomHelpText] = useState("");
   const [showHelpText, setShowHelpText] = useState(false);
   useEffect(() => {
+    var _a;
     const map2 = new Map$2({
       view: new View(config.view),
       target: targetRef.current
@@ -6349,7 +6355,12 @@ const Map$1 = forwardRef(({
     if (ref)
       ref.current = map2;
     onLoad && onLoad(map2);
-    const zoomHelpText2 = navigator.userAgent.indexOf("Mac") !== -1 ? "Use ⌘ + scroll to zoom" : "Use Ctrl + scroll to zoom";
+    let zoomHelpText2 = "";
+    if (((_a = navigator.userAgentData) == null ? void 0 : _a.mobile) || navigator.userAgent.indexOf("Mobile") !== -1) {
+      zoomHelpText2 = mobileHelpText;
+    } else {
+      zoomHelpText2 = navigator.userAgent.indexOf("Mac") !== -1 ? "Use ⌘ + scroll to zoom" : "Use Ctrl + scroll to zoom";
+    }
     setZoomHelpText(zoomHelpText2);
     return () => {
       map2.destroy();