@inappstory/slide-api 0.0.23 → 0.0.24

package/dist/index.cjs

@@ -15815,6 +15815,7 @@ class SwipeGestureDetector {
     threshold = Math.max(1, Math.floor(0.01 * this.pageWidth));
     supportsTouch = false;
     handleDown(e) {
+        // console.log("handleDown", {e, startPageCoordinate: this.startPageCoordinate})
         if (!this.canContinueHandleDown(e)) {
             return;
         }
@@ -15886,9 +15887,13 @@ class SwipeGestureDetector {
     destroy() {
         if (this.isScreenSupportsTouch) {
             this.env.document.removeEventListener("touchstart", this.handleDown);
+            this.env.document.removeEventListener("touchmove", this.handleMove);
+            this.env.document.removeEventListener("touchend", this.handleEnd);
         }
         else {
             this.env.document.removeEventListener("mousedown", this.handleDown);
+            this.env.document.removeEventListener("mousemove", this.handleMove);
+            this.env.document.removeEventListener("mouseup", this.handleEnd);
         }
     }
     getPageCoordinate(e) {
@@ -16150,23 +16155,30 @@ class WidgetProducts extends WidgetBase {
     }
     initSwipeGestureDetector() {
         if (this.isOpen) {
-            this.swipeGestureDetector = new SwipeGestureDetector(this.env, this.isScreenSupportsTouch, () => true, e => {
-                // this.isClickCapturedByWidget = true;
-                return;
-            }, e => {
-                return;
-            }, (e, gesture) => {
-                if (gesture === 3 /* SwipeGesture.SwipeDown */) {
-                    this.closeProductsView();
-                }
-                // this.env.requestAnimationFrame(() => {
-                //     this.isClickCapturedByWidget = false;
-                // });
-            });
+            if (this.swipeGestureDetector == null) {
+                this.swipeGestureDetector = new SwipeGestureDetector(this.env, this.isScreenSupportsTouch, 
+                // detect gestures started on backdrop view
+                (e) => e.target instanceof HTMLElement ? e.target.classList.contains("ias-products-container-backdrop-view") : true, e => {
+                    // this.isClickCapturedByWidget = true;
+                    return;
+                }, e => {
+                    return;
+                }, (e, gesture) => {
+                    if (gesture === 3 /* SwipeGesture.SwipeDown */) {
+                        this.closeProductsView();
+                    }
+                    // this.env.requestAnimationFrame(() => {
+                    //     this.isClickCapturedByWidget = false;
+                    // });
+                });
+            }
         }
     }
     productsView = null;
     isOpen = false;
+    get isForcePaused() {
+        return this.isOpen;
+    }
     currentModels = [];
     async openProductsView() {
         if (this.isOpen) {
@@ -16214,6 +16226,7 @@ class WidgetProducts extends WidgetBase {
         this.isClickCapturedByWidget = false;
         if (this.swipeGestureDetector != null) {
             this.swipeGestureDetector.destroy();
+            this.swipeGestureDetector = null;
         }
         this.sdkApi.enableVerticalSwipeGesture();
         this.sdkApi.enableBackpress();
@@ -16282,14 +16295,56 @@ class WidgetProducts extends WidgetBase {
         return card;
     }
     createScrollView(offers) {
+        const scrollViewGroup = document.createElement("div");
+        scrollViewGroup.classList.add("ias-products-scroll-view-group");
         const scrollView = document.createElement("div");
         scrollView.classList.add("ias-products-scroll-view");
         offers.forEach(offer => scrollView.appendChild(this.createCardView(offer)));
-        return scrollView;
+        scrollViewGroup.appendChild(scrollView);
+        if (!this.isScreenSupportsTouch) {
+            const { scrollLeft, scrollRight, mountScrollControls } = this.createScrollControls(scrollView);
+            const scrollControlsView = document.createElement("div");
+            scrollControlsView.classList.add("ias-products-scroll-controls-view");
+            const scrollControlStartView = document.createElement("div");
+            scrollControlStartView.classList.add("ias-products-scroll-control-start-view");
+            const scrollControlStartIconView = document.createElement("div");
+            scrollControlStartIconView.classList.add("ias-products-scroll-control-start-icon-view");
+            scrollControlStartView.appendChild(scrollControlStartIconView);
+            scrollControlsView.appendChild(scrollControlStartView);
+            scrollControlStartView.onclick = e => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.layoutDirection === "ltr") {
+                    scrollLeft();
+                }
+                else {
+                    scrollRight();
+                }
+            };
+            const scrollControlEndView = document.createElement("div");
+            scrollControlEndView.classList.add("ias-products-scroll-control-end-view");
+            const scrollControlEndIconView = document.createElement("div");
+            scrollControlEndIconView.classList.add("ias-products-scroll-control-end-icon-view");
+            scrollControlEndView.appendChild(scrollControlEndIconView);
+            scrollControlsView.appendChild(scrollControlEndView);
+            scrollControlEndView.onclick = e => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.layoutDirection === "ltr") {
+                    scrollRight();
+                }
+                else {
+                    scrollLeft();
+                }
+            };
+            mountScrollControls(() => scrollViewGroup.appendChild(scrollControlsView));
+        }
+        return scrollViewGroup;
     }
     createProductsView(offers, onClose) {
         const containerView = document.createElement("div");
         containerView.classList.add("ias-products-container-view");
+        containerView.dir = this.layoutDirection;
         const backdropView = document.createElement("div");
         backdropView.classList.add("ias-products-container-backdrop-view");
         backdropView.onclick = e => {
@@ -16315,6 +16370,32 @@ class WidgetProducts extends WidgetBase {
         containerView.appendChild(backgroundView);
         return containerView;
     }
+    scrollViewRef = null;
+    getScrollLeft() {
+        if (this.scrollViewRef != null) {
+            return this.scrollViewRef.scrollLeft;
+        }
+        return 0;
+    }
+    getScrollViewportWidth() {
+        if (this.scrollViewRef != null) {
+            return this.scrollViewRef.clientWidth;
+        }
+        return 0;
+    }
+    setScrollLeft(value) {
+        if (this.scrollViewRef != null) {
+            this.scrollViewRef.scrollLeft = Math.round(value);
+        }
+    }
+    createScrollControls(scrollViewRef) {
+        this.scrollViewRef = scrollViewRef;
+        return {
+            scrollLeft: () => this.setScrollLeft(this.getScrollLeft() - this.getScrollViewportWidth()),
+            scrollRight: () => this.setScrollLeft(this.getScrollLeft() + this.getScrollViewportWidth()),
+            mountScrollControls: (cb) => this.env.requestAnimationFrame(() => scrollViewRef.scrollWidth > scrollViewRef.clientWidth && cb()),
+        };
+    }
     getIsClickCapturedByWidget() {
         return this.isClickCapturedByWidget;
     }
@@ -16360,6 +16441,16 @@ class WidgetProducts extends WidgetBase {
             }
             return false;
         },
+        isForcePaused: function (element) {
+            const widgetElement = element.closest(`.${WidgetProducts.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetProducts.getInstance(widgetElement);
+                if (widget) {
+                    return widget.isForcePaused;
+                }
+            }
+            return false;
+        },
         onHandleBackpress: function (element) {
             const widgetElement = element.closest(`.${WidgetProducts.widgetClassName}`);
             if (widgetElement) {