@inappstory/slide-api 0.0.20 → 0.0.22

package/dist/index.cjs

@@ -1202,6 +1202,8 @@ class WidgetBase {
     localData = null;
     firstOpenTime = 0;
     id;
+    startReadyPromise = null;
+    startReadyResolve = null;
     constructor(element, options, elementIdGetter, slideGetter) {
         this.options = extend({}, this.constructor.DEFAULTS, options);
         this.element = element;
@@ -1253,8 +1255,32 @@ class WidgetBase {
         this.localData = extend({}, this.savedData ?? {}, this.options.localData ?? {});
         this.id = `w_${this.elementId}_${WidgetBase.widgetIndex}`;
         ++WidgetBase.widgetIndex;
+        this.resetStartReadyPromise();
     }
-    onRefreshUserData(localData) { }
+    resetStartReadyPromise() {
+        this.startReadyPromise = new Promise(resolve => {
+            this.startReadyResolve = resolve;
+        });
+    }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
+    onRefreshUserData(localData) {
+        this.savedData = this.sdkApi.getCardServerData(this.cardId);
+        this.localData = extend({}, this.savedData ?? {}, localData);
+    }
+    onStart() {
+        // add active class for enable animation
+        this.element.classList.add("active");
+        this.startReadyResolve();
+    }
+    onStop() {
+        this.element.classList.remove("active");
+        this.resetStartReadyPromise();
+    }
+    onPause() { }
+    onResume() { }
     static widgetCacheKey = "ias.story-element";
     static widgetClassName = "";
     static getInstance(element) {
@@ -1284,19 +1310,23 @@ class WidgetBase {
     }
     static initWidget(htmlElement, localData, instantiate) {
         if (localData != null) {
-            this.createInstance(instantiate, htmlElement, {
+            const widget = this.createInstance(instantiate, htmlElement, {
                 slide: null,
                 localData,
             });
+            // start widget (just created or cached instance)
+            widget.onRefreshUserData(localData);
             return Promise.resolve(localData);
         }
         else {
             return new Promise(resolve => {
                 this.getLocalData().then(localData => {
-                    this.createInstance(instantiate, htmlElement, {
+                    const widget = this.createInstance(instantiate, htmlElement, {
                         slide: null,
                         localData,
                     });
+                    // start widget (just created or cached instance)
+                    widget.onRefreshUserData(localData);
                     resolve(localData);
                 });
             });
@@ -1306,10 +1336,12 @@ class WidgetBase {
     static initWidgets(instantiate, elements, localData) {
         if (localData != null) {
             forEach(elements, element => {
-                this.createInstance(instantiate, element, {
+                const widget = this.createInstance(instantiate, element, {
                     slide: null,
                     localData,
                 });
+                // start widget (just created or cached instance)
+                widget.onRefreshUserData(localData);
             });
             return Promise.resolve(localData);
         }
@@ -1317,10 +1349,12 @@ class WidgetBase {
             return new Promise(resolve => {
                 this.getLocalData().then(localData => {
                     forEach(elements, element => {
-                        this.createInstance(instantiate, element, {
+                        const widget = this.createInstance(instantiate, element, {
                             slide: null,
                             localData,
                         });
+                        // start widget (just created or cached instance)
+                        widget.onRefreshUserData(localData);
                     });
                     resolve(localData);
                 });
@@ -1400,7 +1434,7 @@ class WidgetBase {
     startDisabledTimeline() {
         this.sdkApi.startDisabledTimeline(this.cardId, this.slideIndex);
     }
-    _showLayout(layers, selectIndex, withStatEvent = false) {
+    _showLayer(layers, selectIndex, withStatEvent = false) {
         if (this.sdkApi.isExistsShowLayer()) {
             this.sdkApi.showLayer(selectIndex);
         }
@@ -1509,7 +1543,6 @@ class WidgetCopy extends WidgetBase {
         this.button = this.element.querySelector(".narrative-element-text-lines");
         this.clipboardTarget = getTagData(element, "clipboardTarget");
         this.isPromotionalCode = getTagData(element, "clipboardType") === "promocode";
-        this.state = null;
         this.msgNetworkError = getTagData(this.element, "msgNetworkError");
         this.msgServiceError = getTagData(this.element, "msgServiceError");
         this.msgNoMoreCodes = getTagData(this.element, "msgNoMoreCodes");
@@ -1538,12 +1571,31 @@ class WidgetCopy extends WidgetBase {
                 this.resultLayerGeometry.style.setProperty("left", newResultLayerGeometryLeft + "px");
             }
         }
+    }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
+        // return DOM to init state (ready to copy)
+        this.element.classList.remove("done");
+        if (this.resultLayer) {
+            this.resultLayer.classList.remove("done");
+        }
+        this.state = null;
+        if (this.isPromotionalCode) {
+            this.initPromotionalCodeFromLocalData();
+        }
+    }
+    onStart() {
+        super.onStart();
+        // add active class for enable animation
+        this.resultLayer?.classList.add("active");
         if (this.isPromotionalCode) {
             this.fetchPromoCode();
         }
-        // this.onRefreshUserData(this.options.localData);
     }
-    onRefreshUserData(localData) { }
     isTransparentElement() {
         if (this.element) {
             try {
@@ -1563,16 +1615,22 @@ class WidgetCopy extends WidgetBase {
             this.button.textContent = newText;
         }
     }
-    fetchPromoCode() {
-        this.state = 0;
-        if (this.localData["_cp_g_" + this.elementId + "_pc"] !== undefined) {
+    getPromotionalCodeFromLocalData() {
+        return this.localData["_cp_g_" + this.elementId + "_pc"];
+    }
+    initPromotionalCodeFromLocalData() {
+        if (this.getPromotionalCodeFromLocalData() !== undefined) {
             this.state = 1;
-            this.clipboardTarget = this.localData["_cp_g_" + this.elementId + "_pc"];
+            this.clipboardTarget = this.getPromotionalCodeFromLocalData();
             if (this.clipboardTarget != null) {
                 this.changeText(this.clipboardTarget);
             }
             removeClass(this.element, "loader");
         }
+    }
+    fetchPromoCode() {
+        this.state = 0;
+        this.initPromotionalCodeFromLocalData();
         if (this.state === 0) {
             if (!this.isTransparentElement()) {
                 // for transparent element
@@ -1660,12 +1718,14 @@ class WidgetCopy extends WidgetBase {
         if (this.resultLayer) {
             this.resultLayer.classList.add("done");
         }
-        if (this.disableTimer) {
-            // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
-            // смотрим что прозрачный текст - тогда и лоадер прозрачный
-            // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
+                // смотрим что прозрачный текст - тогда и лоадер прозрачный
+                // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
+                this.startDisabledTimeline();
+            }
+        });
     }
     copyToClipboard(element) {
         this._select();
@@ -1699,6 +1759,13 @@ class WidgetCopy extends WidgetBase {
             // 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());
+        },
+        onStart: function (element) {
+            WidgetCopy.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetCopy.getInstance(element)?.onStop();
         },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetCopy.widgetClassName}`);
@@ -1748,20 +1815,27 @@ class WidgetDataInput extends WidgetBase {
         this.inputElement = getValueOrException(this.element.querySelector(".input-view .input"), "Empty .input-view .input");
         this.textElement = getValueOrException(this.inputElement.querySelector(".narrative-element-text-lines"), "Empty .narrative-element-text-lines");
         this.inputPlaceholderValue = this.textElement.innerHTML;
-        this.onRefreshUserData(this.options.localData);
     }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
-        const text = this.localData["_di_g_" + this.elementId + "_t"];
+        super.onRefreshUserData(localData);
+        const text = this.getTextFromLocalData();
         this._fillUserText(text);
-        if (text) {
+        if (text != null) {
             this.element.classList.add("done");
-            if (this.disableTimer) {
-                this.startDisabledTimeline();
-            }
+            this.startReadyPromise.then(() => {
+                if (this.disableTimer) {
+                    this.startDisabledTimeline();
+                }
+            });
         }
     }
+    getTextFromLocalData() {
+        return this.localData["_di_g_" + this.elementId + "_t"];
+    }
     _statEventFocusIn() {
         try {
             const labelText = this.label ? this.label.textContent ?? "" : "";
@@ -1839,7 +1913,7 @@ class WidgetDataInput extends WidgetBase {
     }
     _fillUserText(text) {
         if (this.inputElement && this.textElement) {
-            if (text) {
+            if (text != null) {
                 this.inputElement.classList.remove("_is-placeholder");
                 text = text.replace(new RegExp("\r?\n", "g"), "<br />");
                 this.textElement.innerHTML = text;
@@ -1889,7 +1963,15 @@ 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());
+        },
+        onStart: function (element) {
+            WidgetDataInput.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetDataInput.getInstance(element)?.onStop();
         },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetDataInput.widgetClassName}`);
@@ -1920,9 +2002,9 @@ class WidgetDateCountdown extends WidgetBase {
     label;
     layers;
     messages;
-    timestampSeconds;
+    timestampMs;
     diff;
-    timerInited;
+    timerInit;
     pendingUpdate;
     firstGroup1;
     firstGroup2;
@@ -1942,52 +2024,56 @@ class WidgetDateCountdown extends WidgetBase {
             minutes: getTagData(this.element, "tMinutes") ?? "",
             seconds: getTagData(this.element, "tSeconds") ?? "",
         };
-        this.timestampSeconds = getValueOrException(getTagDataAsNumber(this.element, "timestampSeconds"), "Empty timestampSeconds");
+        this.timestampMs = getValueOrException(getTagDataAsNumber(this.element, "timestampSeconds"), "Empty timestampSeconds") * 1000;
         this.diff = 0;
-        this.timerInited = false;
+        this.timerInit = false;
         this.pendingUpdate = true;
         this.layers = this.options.layers;
-        // if (false) {
-        //     // if (sendApiRequestSupported()) {
-        //     // fetch project time
-        //     var path = "story/" + this.storyId + "/widget/" + this.elementId + "/timestamp";
-        //     var profileKey = "fetch-story-timestamp";
-        //     this.sdkApi
-        //         .sendApiRequest<{ timestamp: number }>(path, "GET", null, null, null, profileKey)
-        //         .then(response => {
-        //             var status = response.status;
-        //             var timestamp = null;
-        //             if (status === 200) {
-        //                 if (response.data) timestamp = response.data.timestamp;
-        //                 if (timestamp) {
-        //                     this.diff = new Date().getTime() - timestamp * 1000;
-        //                 }
-        //             }
-        //
-        //             this.initTimer();
-        //         })
-        //         .catch( (reason)=> {
-        //             console.error(reason);
-        //             this.initTimer();
-        //         });
-        // } else {
-        this.initTimer();
-        // }
-        // this.onRefreshUserData(this.options.localData);
     }
-    onRefreshUserData(localData) { }
-    pause() {
-        if (this.timerInited) {
+    /**
+     * Start or restart widget
+     * @param localData
+     */
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
+        const value = this.timestampMs - (new Date().getTime() - this.diff);
+        if (value > 0) {
+            this._showLayer(this.layers, 0);
+        }
+        else {
+            this._showLayer(this.layers, 1);
+        }
+    }
+    onPause() {
+        super.onPause();
+        if (this.timerInit) {
             this.pendingUpdate = false;
         }
     }
-    resume() {
-        if (this.timerInited) {
+    onResume() {
+        super.onResume();
+        if (this.timerInit && !this.pendingUpdate) {
             this.pendingUpdate = true;
             this.updateTimer();
         }
     }
+    onStart() {
+        super.onStart();
+        if (!this.timerInit) {
+            this.initTimer();
+        }
+    }
+    onStop() {
+        super.onStop();
+        if (this.timerInit) {
+            this.pendingUpdate = false;
+            this.timerInit = false;
+        }
+    }
     initTimer() {
+        if (this.timerInit) {
+            return;
+        }
         // find groups
         this.firstGroup1 = getValueOrException(this.element.querySelector(".date-item-view-group-1 .date-output-label-1"), "Empty firstGroup1");
         this.firstGroup2 = getValueOrException(this.element.querySelector(".date-item-view-group-1 .date-output-label-2"), "Empty firstGroup2");
@@ -1998,16 +2084,18 @@ class WidgetDateCountdown extends WidgetBase {
         this.thirdGroup1 = getValueOrException(this.element.querySelector(".date-item-view-group-3 .date-output-label-1"), "Empty thirdGroup1");
         this.thirdGroup2 = getValueOrException(this.element.querySelector(".date-item-view-group-3 .date-output-label-2"), "Empty thirdGroup2");
         this.thirdGroupCaption = getValueOrException(this.element.querySelector(".date-item-view-group-3 .date-item-caption"), "Empty thirdGroupCaption");
-        this.timestampSeconds *= 1000;
-        this.timerInited = true;
-        const value = this.timestampSeconds - (new Date().getTime() - this.diff);
+        this.timerInit = true;
+        const value = this.timestampMs - (new Date().getTime() - this.diff);
         if (value > 0) {
-            this._showLayout(this.layers, 0);
+            this._showLayer(this.layers, 0);
         }
         this.updateTimer();
     }
     updateTimer() {
-        const value = this.timestampSeconds - (new Date().getTime() - this.diff);
+        if (!this.timerInit) {
+            return;
+        }
+        const value = this.timestampMs - (new Date().getTime() - this.diff);
         if (value > 0) {
             const result = this._asDuration(Math.round(value / 1000));
             if (result.days) {
@@ -2036,7 +2124,7 @@ class WidgetDateCountdown extends WidgetBase {
         }
         else {
             this.pendingUpdate = false;
-            this._showLayout(this.layers, 1);
+            this._showLayer(this.layers, 1);
         }
         if (this.pendingUpdate) {
             this.env.requestAnimationFrame(() => this.updateTimer());
@@ -2109,24 +2197,32 @@ class WidgetDateCountdown extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (nodeList, layers, localData) {
-            WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), slice.call(nodeList), localData);
+            const elements = slice.call(nodeList);
+            WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), elements, localData);
+            elements.forEach(element => WidgetDateCountdown.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetDateCountdown.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetDateCountdown.getInstance(element)?.onStop();
         },
         onPause: function (element) {
-            WidgetDateCountdown.getInstance(element)?.pause();
+            WidgetDateCountdown.getInstance(element)?.onPause();
         },
         onResume: function (element) {
-            WidgetDateCountdown.getInstance(element)?.resume();
+            WidgetDateCountdown.getInstance(element)?.onResume();
         },
         /** @deprecated */
         pause: function (nodeList) {
             forEach(slice.call(nodeList), function (el, index) {
-                WidgetDateCountdown.getInstance(el)?.pause();
+                WidgetDateCountdown.getInstance(el)?.onPause();
             });
         },
         /** @deprecated */
         resume: function (nodeList) {
             forEach(slice.call(nodeList), function (el, index) {
-                WidgetDateCountdown.getInstance(el)?.resume();
+                WidgetDateCountdown.getInstance(el)?.onResume();
             });
         },
     };
@@ -2312,11 +2408,13 @@ class WidgetPoll extends WidgetBase {
         this.getUseResponseOnFirstButton = Boolean(getTagDataAsNumber(this.element, "getUserResponseOnFirstButton"));
         this.getUseResponseOnSecondButton = Boolean(getTagDataAsNumber(this.element, "getUserResponseOnSecondButton"));
         this.showClientTotalResult = Boolean(getTagDataAsNumber(this.element, "showClientTotalResult"));
-        this.onRefreshUserData(this.options.localData);
     }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedVariant = undefined;
         if (this.localData) {
             if (this.localData["_p_g_" + this.elementId + "_sa"] !== undefined) {
@@ -2399,14 +2497,11 @@ class WidgetPoll extends WidgetBase {
             this.element.classList.add("with-total-result");
             this.displayPercents(index, filled);
         }
-        if (this.disableTimer) {
-            this.env.setTimeout(() => {
-                // todo poll - если виджет на первом слайде то при повторном заходе автоматически не стартует таймлайн слайда
-                // только в web sdk такое
-                // если поставить через setTimeout то все ок
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
                 this.startDisabledTimeline();
-            });
-        }
+            }
+        });
     }
     _clearVariantSelection() {
         forEach(this.variants, function (variant) {
@@ -2753,6 +2848,13 @@ class WidgetPoll extends WidgetBase {
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetPoll.initWidgets((element, options) => new WidgetPoll(element, options), [element], localData);
+            WidgetPoll.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetPoll.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetPoll.getInstance(element)?.onStop();
         },
         /**
          * click
@@ -2821,17 +2923,22 @@ class WidgetPollLayers extends WidgetBase {
                 this.variantsTexts.push(label.textContent ?? "");
             }
         });
+    }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
         this.selectedVariant = undefined;
         if (this.slidePollIsDone()) {
             this._selectVariant(this.localData["_pl_g_" + this.elementId + "_sa"]);
         }
         else {
-            this._showLayout(this.layers, 0);
+            this._showLayer(this.layers, 0);
         }
         this.firstOpenTime = new Date().getTime();
-        this.onRefreshUserData(this.options.localData);
     }
-    onRefreshUserData(localData) { }
     _statEventPollVariant() {
         try {
             if (this.selectedVariant != null) {
@@ -2874,10 +2981,12 @@ class WidgetPollLayers extends WidgetBase {
         else if (index === 1) {
             layerIndex = 2;
         }
-        this._showLayout(this.layers, layerIndex, userAction);
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this._showLayer(this.layers, layerIndex, userAction);
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     selectVariant(variant) {
         if (this.selectedVariant !== undefined) {
@@ -2934,6 +3043,13 @@ class WidgetPollLayers extends WidgetBase {
                 localData = undefined;
             }
             WidgetPollLayers.initWidgets((element, options) => new WidgetPollLayers(element, { ...options, layers }), [element], localData);
+            WidgetPollLayers.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetPollLayers.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetPollLayers.getInstance(element)?.onStop();
         },
         /**
          * click on poll variant
@@ -2981,9 +3097,14 @@ class WidgetQuest extends WidgetBase {
         this.label = this.element.querySelector(".label-view .label");
         this.variants = slice.call(this.element.querySelectorAll(".variants-box .variant-view"));
         this.selectedAnswer = undefined;
-        // this.onRefreshUserData(this.options.localData);
     }
-    onRefreshUserData(localData) { }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
+    }
     setCardSessionValue(name, value) {
         this.sdkApi.setCardSessionValue(this.element, name, value);
     }
@@ -3223,6 +3344,7 @@ class WidgetQuest extends WidgetBase {
                 });
             });
         },
+        /** @deprecated */
         initWidget: function (element, localData) {
             return new Promise(function (resolve, reject) {
                 WidgetQuest.initWidgets((element, options) => new WidgetQuest(element, options), [element], localData).then(localData => {
@@ -3234,8 +3356,15 @@ class WidgetQuest extends WidgetBase {
                         resolve(true);
                     }
                 });
+                WidgetQuest.getInstance(element)?.onStart();
             });
         },
+        onStart: function (element) {
+            WidgetQuest.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetQuest.getInstance(element)?.onStop();
+        },
         select: function (element) {
             const widgetElement = element.closest(`.${WidgetQuest.widgetClassName}`);
             if (widgetElement) {
@@ -3280,11 +3409,13 @@ class WidgetQuiz extends WidgetBase {
         this.question = this.element.querySelector(".label-view .label");
         this.answers = slice.call(this.element.querySelectorAll(".variants-box .variant-view-group"));
         this.questionCount = getValueOrException(getTagDataAsNumber(this.slide, "quizCount"), "Empty quizCount");
-        this.onRefreshUserData(this.options.localData);
     }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedAnswer = undefined;
         if (this.localData) {
             if (this.localData["_q_g_" + this.elementId + "_sa"] !== undefined) {
@@ -3327,9 +3458,11 @@ class WidgetQuiz extends WidgetBase {
         //     })
         //   })
         // }
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     _clearAnswerSelection() {
         forEach(this.answers, function (answer) {
@@ -3428,6 +3561,13 @@ class WidgetQuiz extends WidgetBase {
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetQuiz.initWidgets((element, options) => new WidgetQuiz(element, options), [element], localData);
+            WidgetQuiz.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetQuiz.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetQuiz.getInstance(element)?.onStop();
         },
         /**
          * click on quiz answer
@@ -3475,11 +3615,13 @@ class WidgetQuizGrouped extends WidgetBase {
         this.question = this.element.querySelector(".label-view .label");
         this.answers = slice.call(this.element.querySelectorAll(".variants-box .variant-view-group"));
         this.questionCount = getValueOrException(getTagDataAsNumber(this.slide, "quizCount"), "Empty quizCount");
-        this.onRefreshUserData(this.options.localData);
     }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedAnswer = undefined;
         if (this.localData) {
             if (this.localData["_q_gg_" + this.elementId + "_sa"] !== undefined) {
@@ -3509,9 +3651,11 @@ class WidgetQuizGrouped extends WidgetBase {
                 this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
             }
         });
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     _clearAnswerSelection() {
         forEach(this.answers, function (answer) {
@@ -3627,6 +3771,13 @@ class WidgetQuizGrouped extends WidgetBase {
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetQuizGrouped.initWidgets((element, options) => new WidgetQuizGrouped(element, options), [element], localData);
+            WidgetQuizGrouped.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetQuizGrouped.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetQuizGrouped.getInstance(element)?.onStop();
         },
         /**
          * click on quiz answer
@@ -3857,7 +4008,6 @@ class WidgetRangeSlider extends WidgetBase {
         this.handleDown = proxy(this.handleDown, this);
         this.handleMove = proxy(this.handleMove, this);
         this.handleEnd = proxy(this.handleEnd, this);
-        this.onRefreshUserData(this.options.localData);
         // Attach Events
         // window.addEventListener('resize.' + this.identifier, debounce(function() {
         //   // Simulate resizeEnd event.
@@ -3868,16 +4018,21 @@ class WidgetRangeSlider extends WidgetBase {
         this.env.document.addEventListener("touchstart", this.handleDown);
         this.env.document.addEventListener("mousedown", this.handleDown);
     }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         if (this.localData["_rs_g_" + this.elementId + "_v"] !== undefined) {
             this.elementSlider.value = String(tryParseFloat(this.localData["_rs_g_" + this.elementId + "_v"], 0));
             this.element.classList.add("done");
             this.displayAverageAnswer();
-            if (this.disableTimer) {
-                this.startDisabledTimeline();
-            }
+            this.startReadyPromise.then(() => {
+                if (this.disableTimer) {
+                    this.startDisabledTimeline();
+                }
+            });
         }
         else {
             this.elementSlider.value = String(this.startValue);
@@ -3886,6 +4041,10 @@ class WidgetRangeSlider extends WidgetBase {
         }
         this.init();
     }
+    onStop() {
+        super.onStop();
+        this.destroy();
+    }
     _statEventInputSave(val) {
         try {
             const labelText = this.label?.textContent ?? "";
@@ -4237,11 +4396,18 @@ class WidgetRangeSlider extends WidgetBase {
         onRefreshUserData: WidgetRangeSlider.onRefreshUserData,
         init: function (element, localData) {
             WidgetRangeSlider.initWidget(element, localData, (element, options) => new WidgetRangeSlider(element, options));
+            WidgetRangeSlider.getInstance(element)?.onStart();
         },
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetRangeSlider.initWidgets((element, options) => new WidgetRangeSlider(element, options), [element], localData);
         },
+        onStart: function (element) {
+            WidgetRangeSlider.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetRangeSlider.getInstance(element)?.onStop();
+        },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetRangeSlider.widgetClassName}`);
             if (widgetElement) {
@@ -4296,11 +4462,13 @@ class WidgetRate extends WidgetBase {
         this.showDialogOnLowRate = Boolean(getValueOrDefault(getTagDataAsNumber(this.element, "showDialogOnLowRate"), 0));
         this.showDialogueMin = getValueOrDefault(getTagDataAsNumber(this.element, "showDialogueMin"), 1);
         this.showDialogueMax = getValueOrDefault(getTagDataAsNumber(this.element, "showDialogueMax"), 3);
-        this.onRefreshUserData(this.options.localData);
     }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedStar = undefined;
         if (this.localData) {
             if (this.localData["_r_g_" + this.elementId + "_ss"] !== undefined) {
@@ -4358,9 +4526,11 @@ class WidgetRate extends WidgetBase {
         this.selectedStar = value;
         this.localData["_r_g_" + this.elementId + "_ss"] = value;
         this.element.classList.add("done");
-        if (this.disableTimer && runTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer && runTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     _clearSelectedStar() {
         forEach(this.stars, function (element) {
@@ -4493,7 +4663,15 @@ class WidgetRate extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (nodeList, localData) {
-            WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), slice.call(nodeList), localData);
+            const elements = slice.call(nodeList);
+            WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), elements, localData);
+            elements.forEach(element => WidgetRate.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetRate.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetRate.getInstance(element)?.onStop();
         },
         select: function (element) {
             const widgetElement = element.closest(`.${WidgetRate.widgetClassName}`);
@@ -4539,21 +4717,28 @@ class WidgetShare extends WidgetBase {
         this.shareTarget = getTagData(this.element, "shareTarget");
         this.layers = this.options.layers;
         this.withLayer = Boolean(getValueOrDefault(getTagDataAsNumber(this.element, "withLayer"), 0));
+    }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
         if (this.withLayer) {
             if (this.isDone()) {
-                this._showLayout(this.layers, 1);
+                this._showLayer(this.layers, 1);
             }
             else {
-                this._showLayout(this.layers, 0);
+                this._showLayer(this.layers, 0);
             }
         }
-        if (this.isDone() && this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.isDone() && this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
         this.btnDisabled = false;
-        // this.onRefreshUserData(this.options.localData);
     }
-    onRefreshUserData(localData) { }
     _statEventShare(result, via) {
         try {
             const buttonText = this.element.textContent ?? "";
@@ -4606,7 +4791,7 @@ class WidgetShare extends WidgetBase {
         }
         this._statEventShare(isSuccess, null);
         if (isSuccess && this.withLayer) {
-            this._showLayout(this.layers, 1, true);
+            this._showLayer(this.layers, 1, true);
         }
         if (this.disableTimer) {
             this.startDisabledTimeline();
@@ -4622,7 +4807,10 @@ class WidgetShare extends WidgetBase {
         refreshUserData: WidgetShare.refreshUserData,
         onRefreshUserData: WidgetShare.onRefreshUserData,
         init: function (element, layers, localData) {
-            WidgetShare.initWidget(element, localData, (element, options) => new WidgetShare(element, { ...options, layers }));
+            WidgetShare.initWidget(element, localData, (element, options) => new WidgetShare(element, {
+                ...options,
+                layers,
+            }));
         },
         /** @deprecated
          * signature variants
@@ -4636,7 +4824,15 @@ class WidgetShare extends WidgetBase {
                 layers = localData;
                 localData = undefined;
             }
-            WidgetShare.initWidgets((element, options) => new WidgetShare(element, { ...options, layers }), slice.call(nodeList), localData);
+            const elements = slice.call(nodeList);
+            WidgetShare.initWidgets((element, options) => new WidgetShare(element, { ...options, layers }), elements, localData);
+            elements.forEach(element => WidgetShare.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetShare.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetShare.getInstance(element)?.onStop();
         },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetShare.widgetClassName}`);
@@ -4682,18 +4878,6 @@ class WidgetTest extends WidgetBase {
         this.testCount = getValueOrException(getTagDataAsNumber(this.slide, "testCount"), "Empty testCount");
         this.withTimeToAnswer = Boolean(getValueOrDefault(getTagDataAsNumber(this.element, "withTimeToAnswer"), 0));
         this.answerTimeout = getValueOrDefault(getTagDataAsNumber(this.element, "answerTimeout"), 0);
-        this.selectedAnswer = undefined;
-        if (this.localData) {
-            if (this.localData["_t_g_" + this.elementId + "_sa"] !== undefined) {
-                this._selectAnswer(this.localData["_t_g_" + this.elementId + "_sa"]);
-                this.setLocalData(this.localData, false);
-            }
-            if (this.localData["_t_fo_at"] === undefined) {
-                this.localData["_t_fo_at"] = Math.round(new Date().getTime() / 1000);
-                this.setLocalData(this.localData, false);
-            }
-        }
-        this.firstOpenTime = new Date().getTime();
         this.tick = () => {
             this.animationFrameId = this.env.requestAnimationFrame(() => {
                 this.tick();
@@ -4722,7 +4906,27 @@ class WidgetTest extends WidgetBase {
                 this.env.cancelAnimationFrame(this.animationFrameId);
             }
         };
+    }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
+        this.selectedAnswer = undefined;
+        if (this.localData) {
+            if (this.localData["_t_g_" + this.elementId + "_sa"] !== undefined) {
+                this._selectAnswer(this.localData["_t_g_" + this.elementId + "_sa"]);
+                this.setLocalData(this.localData, false);
+            }
+            if (this.localData["_t_fo_at"] === undefined) {
+                this.localData["_t_fo_at"] = Math.round(new Date().getTime() / 1000);
+                this.setLocalData(this.localData, false);
+            }
+        }
+        this.firstOpenTime = new Date().getTime();
         if (this.slideTestWithTimer()) {
+            this.cancelTick();
             this.timeline = this.element.querySelector(".timeline");
             if (this.selectedAnswer === undefined) {
                 // find timer element
@@ -4732,7 +4936,9 @@ class WidgetTest extends WidgetBase {
                 this.timeLeft = this.timeLeftDefault;
                 this.animationFrameId = null;
                 this.startTimerAt = new Date().getTime();
-                this.tick();
+                this.startReadyPromise.then(() => {
+                    this.tick();
+                });
                 // set answer - unanswered (for close and run again)
                 this.localData["_t_g_" + this.elementId + "_sa"] = -1;
                 this.setLocalData(this.localData, true);
@@ -4751,9 +4957,16 @@ class WidgetTest extends WidgetBase {
                 }
             }
         }
-        // this.onRefreshUserData(this.options.localData);
     }
-    onRefreshUserData(localData) { }
+    onStart() {
+        super.onStart();
+    }
+    onStop() {
+        super.onStop();
+        if (this.slideTestWithTimer()) {
+            this.cancelTick();
+        }
+    }
     _statEventVoteAnswer(answerScore) {
         try {
             if (this.selectedAnswer != null) {
@@ -4801,9 +5014,11 @@ class WidgetTest extends WidgetBase {
                 this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
             }
         });
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     selectAnswer(answer) {
         if (this.selectedAnswer !== undefined) {
@@ -4882,6 +5097,13 @@ class WidgetTest extends WidgetBase {
         /** @deprecated */
         initWidget: function (element, localData) {
             WidgetTest.initWidgets((element, options) => new WidgetTest(element, options), [element], localData);
+            WidgetTest.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetTest.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetTest.getInstance(element)?.onStop();
         },
         /**
          * click on quiz answer
@@ -4952,7 +5174,6 @@ class WidgetVote extends WidgetBase {
         });
         this.hideClientTotalResult = getValueOrDefault(Boolean(getTagDataAsNumber(this.element, "hideClientTotalResult")), false);
         this.multipleChoice = getValueOrDefault(Boolean(getTagDataAsNumber(this.element, "multipleChoice")), false);
-        this.onRefreshUserData(this.options.localData);
     }
     _initFromLocalData() {
         const value = this.localData["_v_g_" + this.elementId + "_sa"];
@@ -4987,9 +5208,12 @@ class WidgetVote extends WidgetBase {
             this._fillWidget(true);
         }
     }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.selectedVariant = undefined;
         if (this.localData) {
             if (this.localData["_v_g_" + this.elementId + "_sa"] != null) {
@@ -5119,9 +5343,11 @@ class WidgetVote extends WidgetBase {
             this._removeInputDone();
             this._hideSubmitBtn();
         }
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     _showSubmitBtn() {
         this.env.requestAnimationFrame(() => {
@@ -5352,6 +5578,13 @@ class WidgetVote extends WidgetBase {
             WidgetVote.initWidgets((element, options) => new WidgetVote(element, options), [element], localData).then(localData => {
                 WidgetVote.api.fallbackInitOnMultiSlide(element, localData);
             });
+            WidgetVote.getInstance(element)?.onStart();
+        },
+        onStart: function (element) {
+            WidgetVote.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetVote.getInstance(element)?.onStop();
         },
         select: function (element) {
             const widgetElement = element.closest(`.${WidgetVote.widgetClassName}`);
@@ -14769,22 +15002,33 @@ class WidgetBarcode extends WidgetBase {
         this.formatterType = getTagData(element, "formatterType");
         this.copiedText = getTagData(element, "copiedText");
         this.svgView = this.element.querySelector(".barcode-view-inner");
-        this.state = null;
         this.msgNetworkError = getTagData(this.element, "msgNetworkError");
         this.msgServiceError = getTagData(this.element, "msgServiceError");
         this.msgNoMoreCodes = getTagData(this.element, "msgNoMoreCodes");
         this.msgTryAgain = getTagData(this.element, "msgTryAgain");
         this.msgBarcodeRenderError = getTagData(this.element, "msgBarcodeRenderError");
+    }
+    /**
+     * Start or restart widget
+     * @param localData
+     */
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
+        this.state = null;
         if (this.isPromotionalCode) {
-            this.fetchPromoCode();
+            this.initPromotionalCodeFromLocalData();
         }
         else {
             this.renderCodeView();
             this.renderCaptionView();
         }
-        // this.onRefreshUserData(this.options.localData);
     }
-    onRefreshUserData(localData) { }
+    onStart() {
+        super.onStart();
+        if (this.isPromotionalCode) {
+            this.fetchPromoCode();
+        }
+    }
     isTransparentElement() {
         if (this.element) {
             try {
@@ -14866,17 +15110,23 @@ class WidgetBarcode extends WidgetBase {
             this.captionView.textContent = text;
         }
     }
-    fetchPromoCode() {
-        this.state = 0;
-        if (this.localData["_bc_g_" + this.elementId + "_pc"] !== undefined) {
+    getPromotionalCodeFromLocalData() {
+        return this.localData["_bc_g_" + this.elementId + "_pc"];
+    }
+    initPromotionalCodeFromLocalData() {
+        if (this.getPromotionalCodeFromLocalData() !== undefined) {
             this.state = 1;
-            this.clipboardTarget = this.localData["_bc_g_" + this.elementId + "_pc"];
+            this.clipboardTarget = this.getPromotionalCodeFromLocalData();
             if (this.clipboardTarget != null) {
                 this.renderCaptionView();
                 this.renderCodeView();
             }
             removeClass(this.element, "loader");
         }
+    }
+    fetchPromoCode() {
+        this.state = 0;
+        this.initPromotionalCodeFromLocalData();
         if (this.state === 0) {
             if (!this.isTransparentElement()) {
                 // for transparent element
@@ -14962,12 +15212,14 @@ class WidgetBarcode extends WidgetBase {
     }
     _select() {
         this.element.classList.add("done");
-        if (this.disableTimer) {
-            // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
-            // смотрим что прозрачный текст - тогда и лоадер прозрачный
-            // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
+                // смотрим что прозрачный текст - тогда и лоадер прозрачный
+                // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
+                this.startDisabledTimeline();
+            }
+        });
         if (this.copiedText) {
             this.sdkApi.showToast(this.copiedText);
         }
@@ -14998,7 +15250,15 @@ class WidgetBarcode extends WidgetBase {
         },
         /** @deprecated */
         initWidget: function (nodeList, localData) {
-            WidgetBarcode.initWidgets((element, options) => new WidgetBarcode(element, options), slice.call(nodeList), localData);
+            const elements = slice.call(nodeList);
+            WidgetBarcode.initWidgets((element, options) => new WidgetBarcode(element, options), elements, localData);
+            elements.forEach(element => WidgetBarcode.getInstance(element)?.onStart());
+        },
+        onStart: function (element) {
+            WidgetBarcode.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetBarcode.getInstance(element)?.onStop();
         },
         click: function (element) {
             const widgetElement = element.closest(`.${WidgetBarcode.widgetClassName}`);