@inappstory/slide-api 0.1.29 → 0.1.30

package/dist/index.cjs

@@ -2656,7 +2656,9 @@ class Image extends ClickableBase {
         this._layer = _layer;
         const mediaElements = Array.from(this._elementNodeRef.querySelectorAll("img"));
         this.mediaElementsLoadingPromises = mediaElements.map(waitForImageHtmlElementLoad);
+        this._animatedImageVideoElement = this._elementNodeRef.querySelector("video");
     }
+    _animatedImageVideoElement;
     mediaElementsLoadingPromises = [];
     get nodeRef() {
         return this._elementNodeRef;
@@ -2664,8 +2666,12 @@ class Image extends ClickableBase {
     init(localData) {
         return Promise.resolve(true);
     }
-    onPause() { }
-    onResume() { }
+    onPause() {
+        this._animatedImageVideoElement?.pause();
+    }
+    onResume() {
+        this._animatedImageVideoElement?.play();
+    }
     onStart() { }
     onStop() { }
     onBeforeUnmount() {
@@ -3302,6 +3308,7 @@ class VideoStateAdapter {
 class Timer {
     _elementNodeRef;
     _layer;
+    _layersNodesRefs;
     _widgetApi;
     _widgetCallbacks;
     _widgetDeps;
@@ -3309,9 +3316,10 @@ class Timer {
     static className() {
         return Timer._className;
     }
-    constructor(_elementNodeRef, _layer, _widgetApi, _widgetCallbacks, _widgetDeps) {
+    constructor(_elementNodeRef, _layer, _layersNodesRefs, _widgetApi, _widgetCallbacks, _widgetDeps) {
         this._elementNodeRef = _elementNodeRef;
         this._layer = _layer;
+        this._layersNodesRefs = _layersNodesRefs;
         this._widgetApi = _widgetApi;
         this._widgetCallbacks = _widgetCallbacks;
         this._widgetDeps = _widgetDeps;
@@ -3322,7 +3330,7 @@ class Timer {
     }
     init(localData) {
         try {
-            this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
+            this._widgetApi.init(this._elementNodeRef, this._layersNodesRefs, localData, this._widgetCallbacks, this._widgetDeps);
         }
         catch (e) {
             console.error(e);
@@ -3346,7 +3354,7 @@ class Timer {
     get isLayerForcePaused() {
         return false;
     }
-    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `typeof WidgetTimer.api`, `WidgetCallbacks`, `WidgetDeps`]; }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `Array`, `typeof WidgetTimer.api`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
 // export const tryCreateAtLayer = (layerNodeRef: HTMLElement): IElement {
@@ -3410,7 +3418,7 @@ const tryCreateFromHtmlElement = (nodeRef, layer, widgetCallbacks, widgetDeps) =
             case Tooltip.className():
                 return layoutApi.widgetTooltipApi ? new Tooltip(nodeRef, layer, layoutApi.widgetTooltipApi, widgetCallbacks, widgetDeps) : null;
             case Timer.className():
-                return layoutApi.widgetTimerApi ? new Timer(nodeRef, layer, layoutApi.widgetTimerApi, widgetCallbacks, widgetDeps) : null;
+                return layoutApi.widgetTimerApi ? new Timer(nodeRef, layer, layersNodesRefs, layoutApi.widgetTimerApi, widgetCallbacks, widgetDeps) : null;
         }
     }
     return null;
@@ -5168,6 +5176,16 @@ let SlideApi$1 = class SlideApi {
             }
         }
         /** rate */
+        if (target?.classList.contains("narrative-element-rate-next-button")) {
+            element = target;
+        }
+        else {
+            element = target?.closest(".narrative-element-rate-next-button");
+        }
+        if (element) {
+            result.canClickNext = false;
+            return result;
+        }
         if (target?.classList.contains("narrative-element-rate-input")) {
             element = target;
         }
@@ -7347,6 +7365,7 @@ var TimerCompletionAction;
     TimerCompletionAction["ChangeText"] = "changeText";
     TimerCompletionAction["CloseCard"] = "closeCard";
     TimerCompletionAction["NextSlide"] = "nextSlide";
+    TimerCompletionAction["ShowLayer"] = "showLayer";
 })(TimerCompletionAction || (TimerCompletionAction = {}));
 const pulseDurationStep = 200;
 const maxPulseDuration = 2000;
@@ -7612,6 +7631,7 @@ class WidgetTimer extends WidgetBase {
         activateAfterCreate: false,
         create: false,
         localData: {},
+        layers: [],
     };
     static widgetClassName = "narrative-element-timer";
     model;
@@ -7622,6 +7642,7 @@ class WidgetTimer extends WidgetBase {
     rafId;
     effects = [];
     abortController = new AbortController();
+    layers;
     constructor(element, options, widgetCallbacks, widgetDeps) {
         super(element, options, widgetCallbacks, widgetDeps);
         this.model = this.createTimerModel();
@@ -7629,9 +7650,7 @@ class WidgetTimer extends WidgetBase {
         this.timerRenderer = new TimerRenderer();
         this.timerGroup = this.mountTimerGroup(this.timerRenderer);
         this.fillEffects();
-        if (this.isDone()) {
-            this.update();
-        }
+        this.layers = this.options.layers;
     }
     isDone() {
         const time = this.getCurrentTime();
@@ -7703,7 +7722,6 @@ class WidgetTimer extends WidgetBase {
         super.onStop();
         this.abortController.abort();
         this.reset();
-        this.showElement();
     }
     onPause() {
         this.env.cancelAnimationFrame(this.rafId);
@@ -7725,6 +7743,7 @@ class WidgetTimer extends WidgetBase {
         const { days, hours, minutes, seconds, remainingSeconds } = this.getCurrentTime();
         this.timerRenderer.setTime({ days, hours, minutes, seconds });
         this.resetEffects(remainingSeconds);
+        this.showElement();
     }
     update() {
         if (!this.timerInit)
@@ -7789,6 +7808,11 @@ class WidgetTimer extends WidgetBase {
             case TimerCompletionAction.NextSlide:
                 this.widgetDeps.slideApiDeps.showNextSlide(0);
                 break;
+            case TimerCompletionAction.ShowLayer: {
+                if (this.layers[1] != null) {
+                    this._showLayer(this.layers, 1);
+                }
+            }
         }
     }
     getMaxCardAnimationsDelay() {
@@ -7805,8 +7829,8 @@ class WidgetTimer extends WidgetBase {
     static api = {
         widgetClassName: WidgetTimer.widgetClassName,
         onRefreshUserData: WidgetTimer.onRefreshUserData,
-        init: function (element, localData, widgetCallbacks, widgetDeps) {
-            WidgetTimer.initWidget(element, localData, (element, options) => new WidgetTimer(element, options, widgetCallbacks, widgetDeps));
+        init: function (element, layers, localData, widgetCallbacks, widgetDeps) {
+            WidgetTimer.initWidget(element, localData, (element, options) => new WidgetTimer(element, { ...options, layers }, widgetCallbacks, widgetDeps));
         },
         onStart: function (element) {
             WidgetTimer.getInstance(element)?.onStart();
@@ -22444,6 +22468,18 @@ class WidgetRangeSlider extends WidgetBase {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
+var RateCompletionAction;
+(function (RateCompletionAction) {
+    RateCompletionAction[RateCompletionAction["Default"] = 0] = "Default";
+    RateCompletionAction[RateCompletionAction["ShowDialog"] = 1] = "ShowDialog";
+    RateCompletionAction[RateCompletionAction["SubmitToAppStores"] = 2] = "SubmitToAppStores";
+})(RateCompletionAction || (RateCompletionAction = {}));
+class NoStarSelectedError extends Error {
+    constructor() {
+        super("[Rate Widget] No star selected");
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return []; }
+}
 class WidgetRate extends WidgetBase {
     static DEFAULTS = {
         slide: null,
@@ -22458,16 +22494,18 @@ class WidgetRate extends WidgetBase {
     submitToStores;
     submitToStoresMin;
     submitToStoresMax;
+    hasSubmitButton;
     showDialogOnLowRate;
     showDialogueMin;
     showDialogueMax;
-    selectedStar;
+    selectedStar = null;
     answerSelectDuration;
     elementRect;
     constructor(element, options, widgetCallbacks, widgetDeps) {
         super(element, options, widgetCallbacks, widgetDeps);
         this.label = this.element.querySelector(".label-view .label");
         this.stars = slice.call(this.element.querySelectorAll(".input-view"));
+        this.hasSubmitButton = Boolean(this.element.querySelector(".submit-button-view"));
         this.submitToStores = Boolean(getValueOrDefault(getTagDataAsNumber(this.element, "submitToStores"), 0));
         this.submitToStoresMin = getValueOrDefault(getTagDataAsNumber(this.element, "submitToStoresMin"), 4);
         this.submitToStoresMax = getValueOrDefault(getTagDataAsNumber(this.element, "submitToStoresMax"), 5);
@@ -22475,176 +22513,199 @@ class WidgetRate extends WidgetBase {
         this.showDialogueMin = getValueOrDefault(getTagDataAsNumber(this.element, "showDialogueMin"), 1);
         this.showDialogueMax = getValueOrDefault(getTagDataAsNumber(this.element, "showDialogueMax"), 3);
     }
+    onStart() {
+        super.onStart();
+        this.submitButtonAnimatedView?.addEventListener("click", this.handleSubmit);
+    }
+    onStop() {
+        this.submitButtonAnimatedView?.removeEventListener("click", this.handleSubmit);
+    }
     /**
      * Start or restart widget
      * @param localData
      */
     onRefreshUserData(localData) {
         super.onRefreshUserData(localData);
-        this.selectedStar = undefined;
-        if (this.localData) {
-            if (this.localData["_r_g_" + this.elementId + "_ss"] !== undefined) {
-                this._selectStar(this.localData["_r_g_" + this.elementId + "_ss"], true);
-            }
-            else {
-                this._clearSelectedStar();
-            }
+        this.resetState();
+        const savedStar = this.localData["_r_g_" + this.elementId + "_ss"];
+        if (savedStar != null) {
+            this.selectedStar = savedStar;
+            this.fillStars(savedStar);
+            this.markWidgetCompleted(savedStar);
         }
-        this.firstOpenTime = new Date().getTime();
-        this.answerSelectDuration = 0;
-        this.nativeDialogueWasOpened = false;
     }
-    _statEventRateUsAnswer(answerText) {
+    sendStatistic(answerText) {
+        if (this.selectedStar == null)
+            throw new NoStarSelectedError();
         try {
             const labelText = this.label?.textContent ?? "";
-            if (this.selectedStar != null) {
-                const selectedAnswer = this.selectedStar + 1;
-                this.sendStatisticEventToApp("w-rate-answer", {
-                    ...this.statisticEventBaseFieldsShortForm,
-                    wi: this.elementId,
-                    wl: labelText,
-                    wa: selectedAnswer,
-                    wv: answerText,
-                    d: this.answerSelectDuration,
-                }, {
-                    ...this.statisticEventBaseFieldsFullForm,
-                    widget_id: this.elementId,
-                    widget_label: labelText,
-                    widget_answer: selectedAnswer,
-                    widget_value: answerText,
-                    duration_ms: this.answerSelectDuration,
-                });
-            }
+            const selectedAnswer = this.selectedStar + 1;
+            this.sendStatisticEventToApp("w-rate-answer", {
+                ...this.statisticEventBaseFieldsShortForm,
+                wi: this.elementId,
+                wl: labelText,
+                wa: selectedAnswer,
+                wv: answerText,
+                d: this.answerSelectDuration,
+            }, {
+                ...this.statisticEventBaseFieldsFullForm,
+                widget_id: this.elementId,
+                widget_label: labelText,
+                widget_answer: selectedAnswer,
+                widget_value: answerText,
+                duration_ms: this.answerSelectDuration,
+            });
         }
         catch (error) {
             console.error(error);
         }
     }
-    _selectStar(value, runTimer) {
-        const list = [];
-        let i;
-        for (i = 0; i < this.stars.length; i++) {
-            list[i] = this.stars[i];
+    resetState() {
+        this.selectedStar = null;
+        this.nativeDialogueWasOpened = false;
+        this.answerSelectDuration = 0;
+        this.firstOpenTime = Date.now();
+        this.clearStars();
+        this.hideSubmitButton();
+    }
+    selectStar(starElement) {
+        if ((this.selectedStar != null && !this.hasSubmitButton) || this.isDone())
+            return true;
+        const value = this.stars.indexOf(starElement);
+        if (value === -1)
+            return false;
+        this.selectedStar = value;
+        this.fillStars(value);
+        if (this.hasSubmitButton) {
+            this.showSubmitButton();
         }
-        forEach(list, (element, idx) => {
-            const key = idx;
-            if (key <= value) {
-                element.classList.add("fill");
-            }
-        });
-        if (list[value]) {
-            list[value].classList.add("selected");
+        else {
+            this.handleSubmit();
         }
-        this.selectedStar = value;
-        this.localData["_r_g_" + this.elementId + "_ss"] = value;
-        this.element.classList.add("done");
+        return false;
+    }
+    completeWidget(value, userText = "") {
+        this.markWidgetCompleted(value);
+        this.showToast();
+        this.saveLocalData();
+        this.sendStatistic(userText);
+    }
+    saveLocalData() {
+        const time = Math.round(new Date().getTime() / 1000);
+        this.localData["_r_g_" + this.elementId + "_done_at"] = time;
+        // ответ на вопрос
+        this.localData["_&ts_r_g_" + this.elementId + "_a_at"] = time;
+        this.setLocalData(this.localData, true);
+    }
+    markWidgetCompleted(value) {
+        this.saveStarSelection(value);
         this.startReadyPromise.then(() => {
-            if (this.disableTimer && runTimer) {
+            if (this.disableTimer) {
                 this.onWidgetComplete();
             }
         });
     }
-    _clearSelectedStar() {
-        forEach(this.stars, function (element) {
-            element.classList.remove("fill");
-            element.classList.remove("selected");
-        });
-        this.element.classList.remove("done");
+    saveStarSelection(value) {
+        this.localData["_r_g_" + this.elementId + "_ss"] = value;
+        this.element.classList.add("done");
     }
-    selectStar(starElement) {
-        if (this.selectedStar !== undefined) {
-            return true;
-        }
-        const index = this.stars.indexOf(starElement);
-        this.stars.length;
-        const value = index;
-        // if (this.layoutDirection === 'rtl') {
-        //   value = length - index + 1;
-        // }
+    isDone() {
+        return this.localData["_r_g_" + this.elementId + "_done_at"] !== undefined;
+    }
+    slideRateIsDone() {
+        return this.localData["_r_g_" + this.elementId + "_sa"] !== undefined;
+    }
+    handleSubmit = () => {
+        if (this.selectedStar == null)
+            throw new NoStarSelectedError();
+        const value = this.selectedStar;
+        const action = this.getCompletionAction(value);
         this.nativeDialogueWasOpened = false;
-        if (value !== -1) {
-            this.answerSelectDuration = new Date().getTime() - this.firstOpenTime;
-            // 1-3 stars (default)
-            if (value + 1 >= this.showDialogueMin && value + 1 <= this.showDialogueMax) {
-                this.selectedStar = value;
-                if (this.showDialogOnLowRate) {
-                    this.elementRect = this.element.getBoundingClientRect();
-                    this._selectStar(this.selectedStar, false);
-                    if (this.widgetDeps.slideApiDeps.isAndroid) {
-                        this.slide.classList.add("blured");
-                    }
-                    this.slide.classList.add("data-input-editing");
-                    const dataString = this.element.dataset["clientdialogwidgetconfig"];
-                    if (this.widgetDeps.slideApiDeps.isExistsShowCardTextInput && dataString) {
-                        const data = JSON.parse(dataString);
-                        data.size = getElementBounding(this.env, this.elementRect);
-                        if (!this.disableTimer) {
-                            this.onWidgetRequirePauseUI();
-                        }
-                        this.nativeDialogueWasOpened = true;
-                        try {
-                            data.text.value = data.text.value.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
-                            data.input.text.placeholder = data.input.text.placeholder.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
-                            data.configV2.main.question.text.value = data.configV2.main.question.text.value
-                                .replaceAll("\\n", "\n")
-                                .replaceAll("\\r", "\r")
-                                .replaceAll("\\t", "\t");
-                            data.configV2.main.input.text.placeholder = data.configV2.main.input.text.placeholder
-                                .replaceAll("\\n", "\n")
-                                .replaceAll("\\r", "\r")
-                                .replaceAll("\\t", "\t");
-                        }
-                        catch (e) {
-                            console.error(e);
-                        }
-                        this.widgetDeps.slideApiDeps.showCardTextInput(this.id, data);
-                    }
-                }
-                else {
-                    this._selectStar(this.selectedStar, true);
-                    this.completeWidget();
-                    this._statEventRateUsAnswer("");
-                }
-                return false;
+        this.answerSelectDuration = new Date().getTime() - this.firstOpenTime;
+        switch (action) {
+            case RateCompletionAction.ShowDialog:
+                this.openUserDialog(value);
+                break;
+            case RateCompletionAction.SubmitToAppStores:
+                this.submitToAppStores(value);
+                break;
+            default:
+                this.completeWidget(value);
+        }
+        this.hideSubmitButton();
+    };
+    getCompletionAction(value) {
+        if (value + 1 >= this.showDialogueMin && value + 1 <= this.showDialogueMax) {
+            if (this.showDialogOnLowRate)
+                return RateCompletionAction.ShowDialog;
+            else
+                RateCompletionAction.Default;
+        }
+        if (value + 1 >= this.submitToStoresMin && value + 1 <= this.submitToStoresMax)
+            return RateCompletionAction.SubmitToAppStores;
+        return RateCompletionAction.Default;
+    }
+    submitToAppStores(value) {
+        let target = null;
+        if (this.widgetDeps.slideApiDeps.isAndroid) {
+            target = getTagData(this.element, "androidLink");
+        }
+        else if (this.widgetDeps.slideApiDeps.isIOS) {
+            target = getTagData(this.element, "appleLink");
+        }
+        this.completeWidget(value);
+        if (this.submitToStores && target) {
+            this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target } });
+        }
+    }
+    openUserDialog(value) {
+        this.saveStarSelection(value);
+        this.localData["_r_g_" + this.elementId + "_ss"] = value;
+        this.element.classList.add("done");
+        this.elementRect = this.element.getBoundingClientRect();
+        if (this.widgetDeps.slideApiDeps.isAndroid) {
+            this.slide.classList.add("blured");
+        }
+        this.slide.classList.add("data-input-editing");
+        const dataString = this.element.dataset["clientdialogwidgetconfig"];
+        if (this.widgetDeps.slideApiDeps.isExistsShowCardTextInput && dataString) {
+            const data = JSON.parse(dataString);
+            data.size = getElementBounding(this.env, this.elementRect);
+            if (!this.disableTimer) {
+                this.onWidgetRequirePauseUI();
             }
-            else if (value + 1 >= this.submitToStoresMin && value + 1 <= this.submitToStoresMax) {
-                let target = null;
-                if (this.widgetDeps.slideApiDeps.isAndroid) {
-                    target = getTagData(this.element, "androidLink");
-                }
-                else if (this.widgetDeps.slideApiDeps.isIOS) {
-                    target = getTagData(this.element, "appleLink");
-                }
-                this._selectStar(value, true);
-                this.completeWidget();
-                this._statEventRateUsAnswer("");
-                if (this.submitToStores && target) {
-                    this.widgetDeps.slideApiDeps.openUrl({ type: "link", link: { type: "url", target } });
-                }
+            this.nativeDialogueWasOpened = true;
+            try {
+                data.text.value = data.text.value.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                data.input.text.placeholder = data.input.text.placeholder.replaceAll("\\n", "\n").replaceAll("\\r", "\r").replaceAll("\\t", "\t");
+                data.configV2.main.question.text.value = data.configV2.main.question.text.value
+                    .replaceAll("\\n", "\n")
+                    .replaceAll("\\r", "\r")
+                    .replaceAll("\\t", "\t");
+                data.configV2.main.input.text.placeholder = data.configV2.main.input.text.placeholder
+                    .replaceAll("\\n", "\n")
+                    .replaceAll("\\r", "\r")
+                    .replaceAll("\\t", "\t");
             }
-            else {
-                this._selectStar(value, true);
-                this.completeWidget();
-                this._statEventRateUsAnswer("");
+            catch (e) {
+                console.error(e);
             }
+            this.widgetDeps.slideApiDeps.showCardTextInput(this.id, data);
         }
-        return false;
     }
-    setUserText(text) {
+    onUserDialogComplete(userText) {
+        if (this.selectedStar == null)
+            throw new NoStarSelectedError();
         this.slide.classList.remove("data-input-editing");
         this.slide.classList.remove("blured");
-        if (this.selectedStar != null) {
-            this._selectStar(this.selectedStar, true);
-        }
         if (!this.disableTimer && this.nativeDialogueWasOpened) {
             this.onWidgetRequireResumeUI();
             this.nativeDialogueWasOpened = false;
         }
-        this.localData["_r_g_" + this.elementId + "_user_response"] = text;
-        this.completeWidget();
-        this._statEventRateUsAnswer(text);
+        this.localData["_r_g_" + this.elementId + "_user_response"] = userText;
+        this.completeWidget(this.selectedStar, userText);
     }
-    completeWidget() {
+    showToast() {
         if (this.widgetDone) {
             this.widgetDone.classList.add("active", "opacity-active");
             setTimeout(() => {
@@ -22654,16 +22715,36 @@ class WidgetRate extends WidgetBase {
                 }, 250);
             }, 2000);
         }
-        this.localData["_r_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
-        // ответ на вопрос
-        this.localData["_&ts_r_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
-        this.setLocalData(this.localData, true);
     }
-    isDone() {
-        return this.localData["_r_g_" + this.elementId + "_done_at"] !== undefined;
+    showSubmitButton() {
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = `${this.submitButtonViewHeight}px`;
+            }
+        });
     }
-    slideRateIsDone() {
-        return this.localData["_r_g_" + this.elementId + "_sa"] !== undefined;
+    hideSubmitButton() {
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null) {
+                this.submitButtonAnimatedView.style.maxHeight = "0px";
+            }
+        });
+    }
+    fillStars(value) {
+        if (!this.stars[value])
+            return;
+        this.stars.forEach((star, index) => {
+            star.classList.remove("fill", "selected");
+            if (index <= value)
+                star.classList.add("fill");
+        });
+        this.stars[value].classList.add("selected");
+    }
+    clearStars() {
+        this.stars.forEach(star => {
+            star.classList.remove("fill", "selected");
+        });
+        this.element.classList.remove("done");
     }
     static api = {
         widgetClassName: WidgetRate.widgetClassName,
@@ -22695,7 +22776,7 @@ class WidgetRate extends WidgetBase {
             return true;
         },
         setUserData: function (slideRoot, id, text) {
-            WidgetRate.getInstanceById(slideRoot, id)?.setUserText(text);
+            WidgetRate.getInstanceById(slideRoot, id)?.onUserDialogComplete(text);
         },
     };
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `WidgetCallbacks`, `WidgetDeps`]; }