@inappstory/slide-api 0.0.21 → 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,12 +1255,32 @@ class WidgetBase {
         this.localData = extend({}, this.savedData ?? {}, this.options.localData ?? {});
         this.id = `w_${this.elementId}_${WidgetBase.widgetIndex}`;
         ++WidgetBase.widgetIndex;
+        this.resetStartReadyPromise();
+    }
+    resetStartReadyPromise() {
+        this.startReadyPromise = new Promise(resolve => {
+            this.startReadyResolve = resolve;
+        });
     }
     /**
      * Start or restart widget
      * @param localData
      */
-    onRefreshUserData(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) {
@@ -1412,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);
         }
@@ -1555,9 +1577,21 @@ class WidgetCopy extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, 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();
         }
@@ -1581,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
@@ -1678,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();
@@ -1717,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}`);
@@ -1772,17 +1821,21 @@ class WidgetDataInput extends WidgetBase {
      * @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 ?? "" : "";
@@ -1860,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;
@@ -1910,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}`);
@@ -1941,7 +2002,7 @@ class WidgetDateCountdown extends WidgetBase {
     label;
     layers;
     messages;
-    timestampSeconds;
+    timestampMs;
     diff;
     timerInit;
     pendingUpdate;
@@ -1963,58 +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.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();
-        // }
     }
     /**
      * Start or restart widget
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, 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);
+        }
     }
-    pause() {
+    onPause() {
+        super.onPause();
         if (this.timerInit) {
             this.pendingUpdate = false;
         }
     }
-    resume() {
-        if (this.timerInit) {
+    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");
@@ -2025,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.timerInit = true;
-        const value = this.timestampSeconds - (new Date().getTime() - this.diff);
+        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) {
@@ -2063,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());
@@ -2136,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();
             });
         },
     };
@@ -2345,8 +2414,7 @@ class WidgetPoll extends WidgetBase {
      * @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) {
@@ -2429,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) {
@@ -2783,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
@@ -2857,14 +2929,13 @@ class WidgetPollLayers extends WidgetBase {
      * @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.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();
     }
@@ -2910,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) {
@@ -2970,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
@@ -3023,8 +3103,7 @@ class WidgetQuest extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
     }
     setCardSessionValue(name, value) {
         this.sdkApi.setCardSessionValue(this.element, name, value);
@@ -3277,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) {
@@ -3329,8 +3415,7 @@ class WidgetQuiz extends WidgetBase {
      * @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) {
@@ -3373,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) {
@@ -3474,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
@@ -3527,8 +3621,7 @@ class WidgetQuizGrouped extends WidgetBase {
      * @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) {
@@ -3558,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) {
@@ -3676,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
@@ -3921,15 +4023,16 @@ class WidgetRangeSlider extends WidgetBase {
      * @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);
@@ -3938,6 +4041,10 @@ class WidgetRangeSlider extends WidgetBase {
         }
         this.init();
     }
+    onStop() {
+        super.onStop();
+        this.destroy();
+    }
     _statEventInputSave(val) {
         try {
             const labelText = this.label?.textContent ?? "";
@@ -4289,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) {
@@ -4354,8 +4468,7 @@ class WidgetRate extends WidgetBase {
      * @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) {
@@ -4413,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) {
@@ -4548,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}`);
@@ -4600,19 +4723,20 @@ class WidgetShare extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, 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;
     }
     _statEventShare(result, via) {
@@ -4667,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();
@@ -4683,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
@@ -4697,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}`);
@@ -4777,8 +4912,7 @@ class WidgetTest extends WidgetBase {
      * @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["_t_g_" + this.elementId + "_sa"] !== undefined) {
@@ -4802,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);
@@ -4822,6 +4958,15 @@ class WidgetTest extends WidgetBase {
             }
         }
     }
+    onStart() {
+        super.onStart();
+    }
+    onStop() {
+        super.onStop();
+        if (this.slideTestWithTimer()) {
+            this.cancelTick();
+        }
+    }
     _statEventVoteAnswer(answerScore) {
         try {
             if (this.selectedAnswer != null) {
@@ -4869,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) {
@@ -4950,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
@@ -5059,8 +5213,7 @@ class WidgetVote extends WidgetBase {
      * @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) {
@@ -5190,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(() => {
@@ -5423,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}`);
@@ -14851,17 +15013,22 @@ class WidgetBarcode extends WidgetBase {
      * @param localData
      */
     onRefreshUserData(localData) {
-        this.savedData = this.sdkApi.getCardServerData(this.cardId);
-        this.localData = extend({}, this.savedData ?? {}, localData);
+        super.onRefreshUserData(localData);
         this.state = null;
         if (this.isPromotionalCode) {
-            this.fetchPromoCode();
+            this.initPromotionalCodeFromLocalData();
         }
         else {
             this.renderCodeView();
             this.renderCaptionView();
         }
     }
+    onStart() {
+        super.onStart();
+        if (this.isPromotionalCode) {
+            this.fetchPromoCode();
+        }
+    }
     isTransparentElement() {
         if (this.element) {
             try {
@@ -14943,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
@@ -15039,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);
         }
@@ -15075,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}`);