@inappstory/slide-api 0.0.28 → 0.0.30

package/dist/index.cjs

@@ -1236,7 +1236,6 @@ class WidgetBase {
     showWidgetCompleteToast = null;
     submitButtonAnimatedView = null;
     submitButtonView = null;
-    submitButtonViewHeight = 0;
     savedData = null;
     localData = null;
     firstOpenTime = 0;
@@ -1285,9 +1284,6 @@ class WidgetBase {
             this.submitButtonAnimatedView = this.element.querySelector(".submit-button-animated-view");
             if (this.submitButtonAnimatedView != null) {
                 this.submitButtonView = this.submitButtonAnimatedView.querySelector(".submit-button-view");
-                if (this.submitButtonView != null) {
-                    this.submitButtonViewHeight = this.submitButtonView.clientHeight;
-                }
             }
         }
         this.savedData = this.sdkApi.getCardServerData(this.cardId);
@@ -1296,6 +1292,12 @@ class WidgetBase {
         ++WidgetBase.widgetIndex;
         this.resetStartReadyPromise();
     }
+    get submitButtonViewHeight() {
+        if (this.submitButtonView != null) {
+            return this.submitButtonView.clientHeight;
+        }
+        return 0;
+    }
     resetStartReadyPromise() {
         this.startReadyPromise = new Promise(resolve => {
             this.startReadyResolve = resolve;
@@ -1797,8 +1799,9 @@ class WidgetCopy extends WidgetBase {
         initWidget: function (nodeList, localData) {
             // prevent initWidget for result layer
             const elements = slice.call(nodeList).filter(element => !element.classList.contains("narrative-element-copy-result-variant"));
-            WidgetCopy.initWidgets((element, options) => new WidgetCopy(element, options), elements, localData);
-            elements.forEach(element => WidgetCopy.getInstance(element)?.onStart());
+            WidgetCopy.initWidgets((element, options) => new WidgetCopy(element, options), elements, localData).then(() => {
+                elements.forEach(element => WidgetCopy.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetCopy.getInstance(element)?.onStart();
@@ -2003,8 +2006,9 @@ class WidgetDataInput extends WidgetBase {
         /** @deprecated */
         initWidget: function (nodeList, localData) {
             const elements = slice.call(nodeList);
-            WidgetDataInput.initWidgets((element, options) => new WidgetDataInput(element, options), slice.call(nodeList), localData);
-            elements.forEach(element => WidgetDataInput.getInstance(element)?.onStart());
+            WidgetDataInput.initWidgets((element, options) => new WidgetDataInput(element, options), slice.call(nodeList), localData).then(() => {
+                elements.forEach(element => WidgetDataInput.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetDataInput.getInstance(element)?.onStart();
@@ -2241,8 +2245,9 @@ class WidgetDateCountdown extends WidgetBase {
         /** @deprecated */
         initWidget: function (nodeList, layers, localData) {
             const elements = slice.call(nodeList);
-            WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), elements, localData);
-            elements.forEach(element => WidgetDateCountdown.getInstance(element)?.onStart());
+            WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), elements, localData).then(() => {
+                elements.forEach(element => WidgetDateCountdown.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetDateCountdown.getInstance(element)?.onStart();
@@ -2890,8 +2895,9 @@ class WidgetPoll extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetPoll.initWidgets((element, options) => new WidgetPoll(element, options), [element], localData);
-            WidgetPoll.getInstance(element)?.onStart();
+            WidgetPoll.initWidgets((element, options) => new WidgetPoll(element, options), [element], localData).then(() => {
+                WidgetPoll.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetPoll.getInstance(element)?.onStart();
@@ -3085,8 +3091,9 @@ class WidgetPollLayers extends WidgetBase {
                 layers = localData;
                 localData = undefined;
             }
-            WidgetPollLayers.initWidgets((element, options) => new WidgetPollLayers(element, { ...options, layers }), [element], localData);
-            WidgetPollLayers.getInstance(element)?.onStart();
+            WidgetPollLayers.initWidgets((element, options) => new WidgetPollLayers(element, { ...options, layers }), [element], localData).then(() => {
+                WidgetPollLayers.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetPollLayers.getInstance(element)?.onStart();
@@ -3403,13 +3410,14 @@ class WidgetQuest extends WidgetBase {
                 WidgetQuest.initWidgets((element, options) => new WidgetQuest(element, options), [element], localData).then(localData => {
                     const widget = WidgetQuest.getInstance(element);
                     if (widget) {
-                        resolve(widget.init());
+                        const result = widget.init();
+                        widget.onStart();
+                        resolve(result);
                     }
                     else {
                         resolve(true);
                     }
                 });
-                WidgetQuest.getInstance(element)?.onStart();
             });
         },
         onStart: function (element) {
@@ -3500,7 +3508,7 @@ class WidgetQuiz extends WidgetBase {
         this.localData["_q_g_" + this.elementId + "_sa"] = index;
         this.element.classList.add("done");
         this.env.requestAnimationFrame(() => {
-            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
+            if (this.submitButtonAnimatedView != null) {
                 this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
             }
         });
@@ -3613,8 +3621,9 @@ class WidgetQuiz extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetQuiz.initWidgets((element, options) => new WidgetQuiz(element, options), [element], localData);
-            WidgetQuiz.getInstance(element)?.onStart();
+            WidgetQuiz.initWidgets((element, options) => new WidgetQuiz(element, options), [element], localData).then(() => {
+                WidgetQuiz.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetQuiz.getInstance(element)?.onStart();
@@ -3700,8 +3709,8 @@ class WidgetQuizGrouped extends WidgetBase {
         this.localData["_q_gg_" + this.elementId + "_sa"] = index;
         this.element.classList.add("done");
         this.env.requestAnimationFrame(() => {
-            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
-                this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
             }
         });
         this.startReadyPromise.then(() => {
@@ -3823,8 +3832,9 @@ class WidgetQuizGrouped extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetQuizGrouped.initWidgets((element, options) => new WidgetQuizGrouped(element, options), [element], localData);
-            WidgetQuizGrouped.getInstance(element)?.onStart();
+            WidgetQuizGrouped.initWidgets((element, options) => new WidgetQuizGrouped(element, options), [element], localData).then(() => {
+                WidgetQuizGrouped.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetQuizGrouped.getInstance(element)?.onStart();
@@ -3981,6 +3991,7 @@ class WidgetRangeSlider extends WidgetBase {
         create: false,
         localData: {},
         rangeClass: "slider-view",
+        rangeBackgroundClass: "slider-background-view",
         activeClass: "rangeslider--active",
         horizontalClass: "rangeslider--horizontal",
         verticalClass: "rangeslider--vertical",
@@ -4006,6 +4017,7 @@ class WidgetRangeSlider extends WidgetBase {
     fill;
     handle;
     range;
+    rangeBgView;
     DIMENSION;
     DIRECTION;
     DIRECTION_STYLE;
@@ -4048,11 +4060,14 @@ class WidgetRangeSlider extends WidgetBase {
         this.handle = getValueOrException(this.element.querySelector(`.${this.options.handleClass}`), `Empty .${this.options.handleClass}`);
         this.range = getValueOrException(this.element.querySelector(`.${this.options.rangeClass}`), `Empty .${this.options.rangeClass}`);
         this.range.id = this.id;
+        this.rangeBgView = getValueOrException(this.element.querySelector(`.${this.options.rangeBackgroundClass}`), `Empty .${this.options.rangeBackgroundClass}`);
         // if (this.range.classList.contains(this.options['horizontalClass'])) {
         this.orientation = "horizontal";
         // } else if (this.range.classList.contains(this.options['verticalClass'])) {
         //   this.orientation = 'vertical';
         // }
+        // enable expanded tap area (disabled by default for backward compatibility)
+        this.element.classList.add("width-expanded-slider-tap-area");
         this.DIMENSION = constants.orientation[this.orientation].dimension;
         this.DIRECTION = constants.orientation[this.orientation].direction;
         this.DIRECTION_STYLE = constants.orientation[this.orientation].directionStyle[this.layoutDirection];
@@ -4255,8 +4270,9 @@ class WidgetRangeSlider extends WidgetBase {
             this.step = tryParseFloat(this.elementSlider.getAttribute("step"), 1);
         }
         this.handleDimension = getDimension(this.handle, ("offset" + ucfirst(this.DIMENSION)));
-        this.rangeDimension = getDimension(this.range, ("offset" + ucfirst(this.DIMENSION)));
-        this.maxHandlePos = this.rangeDimension - this.handleDimension;
+        this.rangeDimension = getDimension(this.rangeBgView, ("offset" + ucfirst(this.DIMENSION)));
+        // this.maxHandlePos = this.rangeDimension - this.handleDimension;
+        this.maxHandlePos = this.rangeDimension;
         this.grabPos = this.handleDimension / 2;
         this.position = this.getPositionFromValue(this.value);
         if (updateAttributes) {
@@ -4295,7 +4311,7 @@ class WidgetRangeSlider extends WidgetBase {
         if ((" " + e.target.className + " ").replace(/[\n\t]/g, " ").indexOf(this.options.handleClass) > -1) {
             return;
         }
-        const pos = this.getRelativePosition(e), rangePos = this.range.getBoundingClientRect()[this.DIRECTION], handlePos = this.getPositionFromNode(this.handle) - rangePos, setPos = this.orientation === "vertical" ? this.maxHandlePos - (pos - this.grabPos) : pos - this.grabPos;
+        const pos = this.getRelativePosition(e), rangePos = this.rangeBgView.getBoundingClientRect()[this.DIRECTION], handlePos = this.getPositionFromNode(this.handle) - rangePos, setPos = this.orientation === "vertical" ? this.maxHandlePos - (pos - this.grabPos) : pos - this.grabPos;
         this.setPosition(setPos);
         if (pos >= handlePos && pos < handlePos + this.handleDimension) {
             this.grabPos = pos - handlePos;
@@ -4323,8 +4339,8 @@ class WidgetRangeSlider extends WidgetBase {
         }
         else {
             this.env.requestAnimationFrame(() => {
-                if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
-                    this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+                if (this.submitButtonAnimatedView != null) {
+                    this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
                 }
             });
         }
@@ -4352,11 +4368,14 @@ class WidgetRangeSlider extends WidgetBase {
             uiPos = this.maxHandlePos - uiPos;
         }
         // this.rangeDimension - slider width
-        this.fill.style.transform = "translateX(" + (uiPos + this.grabPos - this.rangeDimension) + "px)";
+        this.fill.style.transform = "translateX(" + (uiPos - this.rangeDimension) + "px)";
+        // this.fill.style.transform = "translateX(" + (uiPos + this.grabPos - this.rangeDimension) + "px)";
         // this.fill.style[this.DIMENSION]         = (uiPos + this.grabPos) + 'px';
         const percentage = this.getPercentageFromValue(value);
         // 1 + (scale - 1) * percentage
-        this.handle.style.transform = "translateY(-50%) translateX(" + uiPos + "px) scale(calc(1 + (var(--scale-factor, 1) - 1) * " + percentage + "))";
+        this.handle.style.setProperty("--offset", String(uiPos));
+        this.handle.style.setProperty("--percentage", String(percentage));
+        // this.handle.style.transform = "translateY(-50%) translateX(" + uiPos + "px) scale(calc(1 + (var(--scale-factor, 1) - 1) * " + percentage + "))";
         // this.handle.style[this.DIRECTION_STYLE] = uiPos + 'px';
         this.setValue(value);
         // Update globals
@@ -4467,8 +4486,9 @@ class WidgetRangeSlider extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetRangeSlider.initWidgets((element, options) => new WidgetRangeSlider(element, options), [element], localData);
-            WidgetRangeSlider.getInstance(element)?.onStart();
+            WidgetRangeSlider.initWidgets((element, options) => new WidgetRangeSlider(element, options), [element], localData).then(() => {
+                WidgetRangeSlider.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetRangeSlider.getInstance(element)?.onStart();
@@ -4732,8 +4752,9 @@ class WidgetRate extends WidgetBase {
         /** @deprecated */
         initWidget: function (nodeList, localData) {
             const elements = slice.call(nodeList);
-            WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), elements, localData);
-            elements.forEach(element => WidgetRate.getInstance(element)?.onStart());
+            WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), elements, localData).then(() => {
+                elements.forEach(element => WidgetRate.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetRate.getInstance(element)?.onStart();
@@ -4893,8 +4914,9 @@ class WidgetShare extends WidgetBase {
                 localData = undefined;
             }
             const elements = slice.call(nodeList);
-            WidgetShare.initWidgets((element, options) => new WidgetShare(element, { ...options, layers }), elements, localData);
-            elements.forEach(element => WidgetShare.getInstance(element)?.onStart());
+            WidgetShare.initWidgets((element, options) => new WidgetShare(element, { ...options, layers }), elements, localData).then(() => {
+                elements.forEach(element => WidgetShare.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetShare.getInstance(element)?.onStart();
@@ -5090,8 +5112,8 @@ class WidgetTest extends WidgetBase {
         this.localData["_t_g_" + this.elementId + "_sa"] = index;
         this.element.classList.add("done");
         this.env.requestAnimationFrame(() => {
-            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
-                this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
             }
         });
         this.startReadyPromise.then(() => {
@@ -5176,8 +5198,9 @@ class WidgetTest extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetTest.initWidgets((element, options) => new WidgetTest(element, options), [element], localData);
-            WidgetTest.getInstance(element)?.onStart();
+            WidgetTest.initWidgets((element, options) => new WidgetTest(element, options), [element], localData).then(() => {
+                WidgetTest.getInstance(element)?.onStart();
+            });
         },
         onStart: function (element) {
             WidgetTest.getInstance(element)?.onStart();
@@ -5431,8 +5454,8 @@ class WidgetVote extends WidgetBase {
     }
     _showSubmitBtn() {
         this.env.requestAnimationFrame(() => {
-            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
-                this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
             }
         });
     }
@@ -5655,10 +5678,13 @@ class WidgetVote extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (element, localData) {
-            WidgetVote.initWidgets((element, options) => new WidgetVote(element, options), [element], localData).then(localData => {
+            WidgetVote.initWidgets((element, options) => new WidgetVote(element, options), [element], localData)
+                .then(localData => {
                 WidgetVote.api.fallbackInitOnMultiSlide(element, localData);
+            })
+                .then(() => {
+                WidgetVote.getInstance(element)?.onStart();
             });
-            WidgetVote.getInstance(element)?.onStart();
         },
         onStart: function (element) {
             WidgetVote.getInstance(element)?.onStart();
@@ -15331,8 +15357,9 @@ class WidgetBarcode extends WidgetBase {
         /** @deprecated */
         initWidget: function (nodeList, localData) {
             const elements = slice.call(nodeList);
-            WidgetBarcode.initWidgets((element, options) => new WidgetBarcode(element, options), elements, localData);
-            elements.forEach(element => WidgetBarcode.getInstance(element)?.onStart());
+            WidgetBarcode.initWidgets((element, options) => new WidgetBarcode(element, options), elements, localData).then(() => {
+                elements.forEach(element => WidgetBarcode.getInstance(element)?.onStart());
+            });
         },
         onStart: function (element) {
             WidgetBarcode.getInstance(element)?.onStart();