@inappstory/slide-api 0.0.20 → 0.0.22

package/dist/index.js

@@ -1200,6 +1200,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;
@@ -1251,8 +1253,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) {
@@ -1282,19 +1308,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);
                 });
             });
@@ -1304,10 +1334,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);
         }
@@ -1315,10 +1347,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);
                 });
@@ -1398,7 +1432,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);
         }
@@ -1507,7 +1541,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");
@@ -1536,12 +1569,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 {
@@ -1561,16 +1613,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
@@ -1658,12 +1716,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();
@@ -1697,6 +1757,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}`);
@@ -1746,20 +1813,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 ?? "" : "";
@@ -1837,7 +1911,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;
@@ -1887,7 +1961,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}`);
@@ -1918,9 +2000,9 @@ class WidgetDateCountdown extends WidgetBase {
     label;
     layers;
     messages;
-    timestampSeconds;
+    timestampMs;
     diff;
-    timerInited;
+    timerInit;
     pendingUpdate;
     firstGroup1;
     firstGroup2;
@@ -1940,52 +2022,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");
@@ -1996,16 +2082,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) {
@@ -2034,7 +2122,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());
@@ -2107,24 +2195,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();
             });
         },
     };
@@ -2310,11 +2406,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) {
@@ -2397,14 +2495,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) {
@@ -2751,6 +2846,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
@@ -2819,17 +2921,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) {
@@ -2872,10 +2979,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) {
@@ -2932,6 +3041,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
@@ -2979,9 +3095,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);
     }
@@ -3221,6 +3342,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 => {
@@ -3232,8 +3354,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) {
@@ -3278,11 +3407,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) {
@@ -3325,9 +3456,11 @@ class WidgetQuiz extends WidgetBase {
         //     })
         //   })
         // }
-        if (this.disableTimer) {
-            this.startDisabledTimeline();
-        }
+        this.startReadyPromise.then(() => {
+            if (this.disableTimer) {
+                this.startDisabledTimeline();
+            }
+        });
     }
     _clearAnswerSelection() {
         forEach(this.answers, function (answer) {
@@ -3426,6 +3559,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
@@ -3473,11 +3613,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) {
@@ -3507,9 +3649,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) {
@@ -3625,6 +3769,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
@@ -3855,7 +4006,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.
@@ -3866,16 +4016,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);
@@ -3884,6 +4039,10 @@ class WidgetRangeSlider extends WidgetBase {
         }
         this.init();
     }
+    onStop() {
+        super.onStop();
+        this.destroy();
+    }
     _statEventInputSave(val) {
         try {
             const labelText = this.label?.textContent ?? "";
@@ -4235,11 +4394,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) {
@@ -4294,11 +4460,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) {
@@ -4356,9 +4524,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) {
@@ -4491,7 +4661,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}`);
@@ -4537,21 +4715,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 ?? "";
@@ -4604,7 +4789,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();
@@ -4620,7 +4805,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
@@ -4634,7 +4822,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}`);
@@ -4680,18 +4876,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();
@@ -4720,7 +4904,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
@@ -4730,7 +4934,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);
@@ -4749,9 +4955,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) {
@@ -4799,9 +5012,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) {
@@ -4880,6 +5095,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
@@ -4950,7 +5172,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"];
@@ -4985,9 +5206,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) {
@@ -5117,9 +5341,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(() => {
@@ -5350,6 +5576,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}`);
@@ -14767,22 +15000,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 {
@@ -14864,17 +15108,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
@@ -14960,12 +15210,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);
         }
@@ -14996,7 +15248,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}`);