@inappstory/slide-api 0.0.8 → 0.0.9

package/dist/index.cjs

@@ -213,6 +213,29 @@ class WidgetsService {
 
 container.registerSingleton(undefined, { identifier: `WidgetsService`, implementation: WidgetsService });
 
+class LayoutService {
+    _env;
+    _sdkApi;
+    _layoutApi;
+    constructor(_env, _sdkApi, _layoutApi) {
+        this._env = _env;
+        this._sdkApi = _sdkApi;
+        this._layoutApi = _layoutApi;
+    }
+    get env() {
+        return this._env;
+    }
+    get sdkApi() {
+        return this._sdkApi;
+    }
+    get layoutApi() {
+        return this._layoutApi;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`Window`, `SDKApi`, `ILayoutApi`]; }
+}
+
+container.registerSingleton(undefined, { identifier: `LayoutService`, implementation: LayoutService });
+
 // import '../adapters/dateTimeSource/composition';
 // import '../adapters/uuidGenerator/composition';
 // import '../effects/eventHandler/composition';
@@ -220,6 +243,8 @@ container.registerSingleton(undefined, { identifier: `WidgetsService`, implement
 // import '../effects/timer/composition';
 container.registerSingleton(() => window, { identifier: `Window` });
 
+const DEFAULT_SLIDE_DURATION = 10000;
+
 const arPrototype = Array.prototype;
 const obPrototype = Object.prototype;
 const slice = arPrototype.slice;
@@ -544,9 +569,6 @@ class Data {
 }
 // var data_priv = new Data();
 const data_user = new Data();
-const getSlideDuration = function (sdkApi, storyId, slideIndex) {
-    return sdkApi.getSlideDuration(storyId, slideIndex) ?? 10000;
-};
 const getWinWidth = function (env) {
     return env.innerWidth || env.document.documentElement.clientWidth || env.document.body.clientWidth;
 };
@@ -1132,6 +1154,18 @@ class EsModuleSdkApi {
     getStorySessionValue(element, key) {
         return this.sdkBinding().getStorySessionValue(key);
     }
+    updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
+        this.sdkBinding().updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
+    }
+    storyPausedCallback(currentTime) { }
+    storyResumedCallback(currentTime) { }
+    startDisabledTimeline(storyId, slideIndex) {
+        // old api
+        this.showNextSlide(this.getSlideDuration(storyId, slideIndex) ?? DEFAULT_SLIDE_DURATION);
+    }
+    getStoryFonts() {
+        return this.sdkBinding().getStoryFonts();
+    }
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`() => SDKInterface`]; }
 }
 
@@ -1310,8 +1344,8 @@ class WidgetBase {
     sendStatisticEventToApp(name, data, devPayload) {
         this.constructor.sendStatisticEventToApp(name, data, devPayload);
     }
-    showNextSlide() {
-        this.sdkApi.showNextSlide(getSlideDuration(this.sdkApi, this.storyId, this.slideIndex));
+    startDisabledTimeline() {
+        this.sdkApi.startDisabledTimeline(this.storyId, this.slideIndex);
     }
     _showLayout(layers, selectIndex, withStatEvent = false) {
         if (this.sdkApi.isExistsShowLayer()) {
@@ -1548,7 +1582,7 @@ class WidgetCopy extends WidgetBase {
             // флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
             // смотрим что прозрачный текст - тогда и лоадер прозрачный
             // _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
-            this.showNextSlide();
+            this.startDisabledTimeline();
         }
     }
     copyToClipboard(element) {
@@ -1568,6 +1602,7 @@ class WidgetCopy extends WidgetBase {
         return this.localData["_cp_g_" + this.elementId + "_done_at"] !== undefined;
     }
     static api = {
+        widgetClassName: WidgetCopy.widgetClassName,
         refreshUserData: WidgetCopy.refreshUserData,
         initWidget: function (nodeList, localData) {
             // prevent initWidget for result layer
@@ -1632,7 +1667,7 @@ class WidgetDataInput extends WidgetBase {
         if (text) {
             this.element.classList.add("done");
             if (this.disableTimer) {
-                this.showNextSlide();
+                this.startDisabledTimeline();
             }
         }
     }
@@ -1749,7 +1784,7 @@ class WidgetDataInput extends WidgetBase {
             this.setLocalData(this.localData, true);
             this._statEventInputSave(text);
             if (this.disableTimer) {
-                this.showNextSlide();
+                this.startDisabledTimeline();
                 needResumeUITimer = false;
             }
         }
@@ -1758,6 +1793,7 @@ class WidgetDataInput extends WidgetBase {
         }
     }
     static api = {
+        widgetClassName: WidgetDataInput.widgetClassName,
         refreshUserData: WidgetDataInput.refreshUserData,
         initWidget: function (nodeList, localData) {
             WidgetDataInput.initWidgets((element, options) => new WidgetDataInput(element, options), slice.call(nodeList), localData);
@@ -1971,6 +2007,7 @@ class WidgetDateCountdown extends WidgetBase {
         return result;
     }
     static api = {
+        widgetClassName: WidgetDateCountdown.widgetClassName,
         refreshUserData: WidgetDateCountdown.refreshUserData,
         initWidget: function (nodeList, layers, localData) {
             WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), slice.call(nodeList), localData);
@@ -2261,7 +2298,7 @@ class WidgetPoll extends WidgetBase {
                 // todo poll - если виджет на первом слайде то при повторном заходе автоматически не стартует таймлайн слайда
                 // только в web sdk такое
                 // если поставить через setTimeout то все ок
-                this.showNextSlide();
+                this.startDisabledTimeline();
             });
         }
     }
@@ -2599,6 +2636,7 @@ class WidgetPoll extends WidgetBase {
         return this.localData["_p_g_" + this.elementId + "_sa"] !== undefined;
     }
     static api = {
+        widgetClassName: WidgetPoll.widgetClassName,
         refreshUserData: WidgetPoll.refreshUserData,
         initWidget: function (element, localData) {
             WidgetPoll.initWidgets((element, options) => new WidgetPoll(element, options), [element], localData);
@@ -2727,7 +2765,7 @@ class WidgetPollLayers extends WidgetBase {
         }
         this._showLayout(this.layers, layerIndex, userAction);
         if (this.disableTimer) {
-            this.showNextSlide();
+            this.startDisabledTimeline();
         }
     }
     selectVariant(variant) {
@@ -2764,6 +2802,7 @@ class WidgetPollLayers extends WidgetBase {
         return this.localData != null && this.localData["_pl_g_" + this.elementId + "_sa"] !== undefined;
     }
     static api = {
+        widgetClassName: WidgetPollLayers.widgetClassName,
         refreshUserData: WidgetPollLayers.refreshUserData,
         // signature variants
         // (widget, layers, undefined) - modern web sdk
@@ -3047,6 +3086,7 @@ class WidgetQuest extends WidgetBase {
         }
     }
     static api = {
+        widgetClassName: WidgetQuest.widgetClassName,
         refreshUserData: WidgetQuest.refreshUserData,
         initWidget: function (element, localData) {
             return new Promise(function (resolve, reject) {
@@ -3153,7 +3193,7 @@ class WidgetQuiz extends WidgetBase {
         //   })
         // }
         if (this.disableTimer) {
-            this.showNextSlide();
+            this.startDisabledTimeline();
         }
     }
     _clearAnswerSelection() {
@@ -3245,6 +3285,7 @@ class WidgetQuiz extends WidgetBase {
         return this.localData["_q_g_" + this.elementId + "_sa"] !== undefined;
     }
     static api = {
+        widgetClassName: WidgetQuiz.widgetClassName,
         refreshUserData: WidgetQuiz.refreshUserData,
         initWidget: function (element, localData) {
             WidgetQuiz.initWidgets((element, options) => new WidgetQuiz(element, options), [element], localData);
@@ -3330,7 +3371,7 @@ class WidgetQuizGrouped extends WidgetBase {
             }
         });
         if (this.disableTimer) {
-            this.showNextSlide();
+            this.startDisabledTimeline();
         }
     }
     _clearAnswerSelection() {
@@ -3439,6 +3480,7 @@ class WidgetQuizGrouped extends WidgetBase {
         return this.localData["_q_gg_" + this.elementId + "_sa"] !== undefined;
     }
     static api = {
+        widgetClassName: WidgetQuizGrouped.widgetClassName,
         refreshUserData: WidgetQuizGrouped.refreshUserData,
         initWidget: function (element, localData) {
             WidgetQuizGrouped.initWidgets((element, options) => new WidgetQuizGrouped(element, options), [element], localData);
@@ -3691,7 +3733,7 @@ class WidgetRangeSlider extends WidgetBase {
             this.element.classList.add("done");
             this.displayAverageAnswer();
             if (this.disableTimer) {
-                this.showNextSlide();
+                this.startDisabledTimeline();
             }
         }
         else {
@@ -3760,7 +3802,7 @@ class WidgetRangeSlider extends WidgetBase {
             }
         });
         // if (this.disableTimer) {
-        this.showNextSlide();
+        this.startDisabledTimeline();
         // }
         this.setLocalData(this.localData, true);
         this._statEventInputSave(this.localData["_rs_g_" + this.elementId + "_v"]);
@@ -4048,6 +4090,7 @@ class WidgetRangeSlider extends WidgetBase {
         //   .removeData('plugin_' + pluginName);
     }
     static api = {
+        widgetClassName: WidgetRangeSlider.widgetClassName,
         refreshUserData: WidgetRangeSlider.refreshUserData,
         initWidget: function (element, localData) {
             WidgetRangeSlider.initWidgets((element, options) => new WidgetRangeSlider(element, options), [element], localData);
@@ -4172,7 +4215,7 @@ class WidgetRate extends WidgetBase {
         this.localData["_r_g_" + this.elementId + "_ss"] = value;
         this.element.classList.add("done");
         if (this.disableTimer && runTimer) {
-            this.showNextSlide();
+            this.startDisabledTimeline();
         }
     }
     _clearSelectedStar() {
@@ -4296,6 +4339,7 @@ class WidgetRate extends WidgetBase {
         return this.localData["_r_g_" + this.elementId + "_sa"] !== undefined;
     }
     static api = {
+        widgetClassName: WidgetRate.widgetClassName,
         refreshUserData: WidgetRate.refreshUserData,
         initWidget: function (nodeList, localData) {
             WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), slice.call(nodeList), localData);
@@ -4418,6 +4462,7 @@ class WidgetShare extends WidgetBase {
         return Boolean(this.localData["_s_" + this.elementId + "_ts"]);
     }
     static api = {
+        widgetClassName: WidgetShare.widgetClassName,
         refreshUserData: WidgetShare.refreshUserData,
         // signature variants
         // (widget, layers, undefined) - modern web sdk
@@ -4537,6 +4582,11 @@ class WidgetTest extends WidgetBase {
                         this.timeline.style.transform = "translateX(100%)";
                     }
                 }
+                else if (this.localData["_&ts_t_g_" + this.elementId + "_a_tspent"] != null) {
+                    if (this.timeline) {
+                        this.timeline.style.transform = "translateX(" + String(this.localData["_&ts_t_g_" + this.elementId + "_a_tspent"]) + "%)";
+                    }
+                }
             }
         }
         // this.refreshUserData(this.options.localData);
@@ -4592,7 +4642,7 @@ class WidgetTest extends WidgetBase {
             }
         });
         if (this.disableTimer) {
-            this.showNextSlide();
+            this.startDisabledTimeline();
         }
     }
     selectAnswer(answer) {
@@ -4636,6 +4686,10 @@ class WidgetTest extends WidgetBase {
         }
         // answer on question
         this.localData["_&ts_t_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+        // spent percent of time
+        if (this.slideTestWithTimer()) {
+            this.localData["_&ts_t_g_" + this.elementId + "_a_tspent"] = Math.round((1 - this.timeLeft / this.timeLeftDefault) * 100);
+        }
         if (this.widgetDone) {
             this.widgetDone.classList.add("active", "opacity-active");
             setTimeout(() => {
@@ -4658,6 +4712,7 @@ class WidgetTest extends WidgetBase {
         return Boolean(this.withTimeToAnswer && this.answerTimeout);
     }
     static api = {
+        widgetClassName: WidgetTest.widgetClassName,
         refreshUserData: WidgetTest.refreshUserData,
         initWidget: function (element, localData) {
             WidgetTest.initWidgets((element, options) => new WidgetTest(element, options), [element], localData);
@@ -4711,6 +4766,7 @@ class WidgetVote extends WidgetBase {
     selectedVariant;
     voteAllocation;
     hideClientTotalResult;
+    multipleChoice;
     /**
      * @throws Error
      * @param element
@@ -4729,38 +4785,112 @@ class WidgetVote extends WidgetBase {
             }
         });
         this.hideClientTotalResult = getValueOrDefault(Boolean(getTagDataAsNumber(this.element, "hideClientTotalResult")), false);
+        this.multipleChoice = getValueOrDefault(Boolean(getTagDataAsNumber(this.element, "multipleChoice")), false);
+        this.refreshUserData(this.options.localData);
+    }
+    _initFromLocalData() {
+        const value = this.localData["_v_g_" + this.elementId + "_sa"];
+        if (!this.multipleChoice) {
+            let index = value;
+            if (Array.isArray(value)) {
+                index = value[0];
+            }
+            this._checkVariant(index);
+            this._selectVariant(index, true);
+            if (!this.hideClientTotalResult) {
+                this.displayPercents([index], true);
+            }
+            this._fillWidget(true);
+        }
+        if (this.multipleChoice) {
+            let values = [];
+            if (Array.isArray(value)) {
+                values = value;
+            }
+            else {
+                values.push(value);
+            }
+            for (let i = 0; i < values.length; ++i) {
+                const index = values[i];
+                this._checkVariant(index);
+                this._selectVariant(index, true);
+            }
+            if (!this.hideClientTotalResult) {
+                this.displayPercents(values, true);
+            }
+            this._fillWidget(true);
+        }
+    }
+    refreshUserData(localData) {
+        this.savedData = this.sdkApi.getStoryServerData(this.storyId);
+        this.localData = extend({}, this.savedData ?? {}, localData);
         this.selectedVariant = undefined;
         if (this.localData) {
-            if (this.localData["_v_g_" + this.elementId + "_sa"] !== undefined) {
-                this._selectVariant(this.localData["_v_g_" + this.elementId + "_sa"], true);
+            if (this.localData["_v_g_" + this.elementId + "_sa"] != null) {
+                this._initFromLocalData();
+            }
+            else {
+                this._clearSelectedVariants();
+                this.element.classList.remove("done");
+                this.element.classList.remove("input-done");
+                this.element.classList.remove("filled");
             }
         }
         this.firstOpenTime = new Date().getTime();
-        // this.refreshUserData(this.options.localData);
     }
-    refreshUserData(localData) { }
+    _clearSelectedVariants() {
+        this.variants.forEach((variant, index) => {
+            variant.classList.remove("checked");
+            variant.classList.remove("selected");
+            variant.style.setProperty("--selected-variant-view-clip-area", String(100));
+        });
+    }
     _statEventVoteVariant() {
         try {
-            if (this.selectedVariant != null) {
-                var labelText = this.label?.textContent ?? "";
-                var variantText = this.variantsTexts[this.selectedVariant] ? this.variantsTexts[this.selectedVariant] : "";
-                var duration = new Date().getTime() - this.firstOpenTime;
+            let isValid = false;
+            let selectedVariant = null;
+            if (!this.multipleChoice) {
+                if (this.selectedVariant != null) {
+                    isValid = true;
+                    selectedVariant = this.selectedVariant;
+                }
+            }
+            let selectedVariantsLabels = [];
+            let selectedVariantsIdxs = [];
+            if (this.multipleChoice) {
+                selectedVariantsIdxs = this._getCheckedVariants();
+                if (selectedVariantsIdxs.length > 0) {
+                    isValid = true;
+                    selectedVariant = selectedVariantsIdxs[0];
+                    selectedVariantsIdxs.forEach(idx => selectedVariantsLabels.push(this.variantsTexts[idx] ? this.variantsTexts[idx] : ""));
+                }
+            }
+            if (isValid) {
+                let labelText = this.label?.textContent ?? "";
+                let variantText = this.variantsTexts[selectedVariant] ? this.variantsTexts[selectedVariant] : "";
+                let duration = new Date().getTime() - this.firstOpenTime;
+                // доп поля - для multiple choice
+                // первые оставляем пустыми в этом случае
                 this.sendStatisticEventToApp("w-vote-answer", {
                     i: this.storyId,
                     si: this.slideIndex,
                     wi: this.elementId,
                     wl: labelText,
-                    wa: this.selectedVariant,
+                    wa: selectedVariant,
                     wv: variantText,
                     d: duration,
+                    was: selectedVariantsIdxs,
+                    wvs: selectedVariantsLabels,
                 }, {
                     story_id: this.storyId,
                     slide_index: this.slideIndex,
                     widget_id: this.elementId,
                     widget_label: labelText,
-                    widget_answer: this.selectedVariant,
+                    widget_answer: selectedVariant,
                     widget_value: variantText,
                     duration_ms: duration,
+                    widget_answers: selectedVariantsIdxs,
+                    widget_values: selectedVariantsLabels,
                 });
             }
         }
@@ -4768,15 +4898,33 @@ class WidgetVote extends WidgetBase {
             console.error(error);
         }
     }
+    // user click on (un)checked (radio btn) variant
+    _checkVariant(index) {
+        if (this.variants[index]) {
+            if (this.variants[index].classList.contains("checked")) {
+                this.variants[index].classList.remove("checked");
+            }
+            else {
+                this.variants[index].classList.add("checked");
+            }
+        }
+    }
+    _getCheckedVariants() {
+        const map = [];
+        this.variants.forEach((variant, index) => {
+            if (variant.classList.contains("checked")) {
+                map.push(index);
+            }
+        });
+        return map;
+    }
     _selectVariant(index, filled = false) {
         if (this.variants[index]) {
             this.variants[index].classList.add("selected");
         }
         this.selectedVariant = index;
-        this.localData["_v_g_" + this.elementId + "_sa"] = index;
-        this.element.classList.add("done");
-        if (filled) {
-            this.element.classList.add("filled");
+        if (!this.multipleChoice) {
+            this.localData["_v_g_" + this.elementId + "_sa"] = index;
         }
         if (this.hideClientTotalResult) {
             const cb = () => {
@@ -4791,43 +4939,136 @@ class WidgetVote extends WidgetBase {
                 this.env.requestAnimationFrame(cb);
             }
         }
-        else {
-            this.displayPercents(index, filled);
+    }
+    _fillWidget(filled = false) {
+        this.element.classList.add("done");
+        if (filled) {
+            this.element.classList.add("filled");
+        }
+        if (!this.multipleChoice) {
+            if (this.submitButtonView != null) {
+                this._setInputDone();
+                this._showSubmitBtn();
+            }
         }
+        if (this.multipleChoice) {
+            this._removeInputDone();
+            this._hideSubmitBtn();
+        }
+        if (this.disableTimer) {
+            this.startDisabledTimeline();
+        }
+    }
+    _showSubmitBtn() {
         this.env.requestAnimationFrame(() => {
             if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
                 this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
             }
         });
-        if (this.disableTimer) {
-            this.showNextSlide();
-        }
+    }
+    _hideSubmitBtn() {
+        this.env.requestAnimationFrame(() => {
+            if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
+                this.submitButtonAnimatedView.style.maxHeight = "0px";
+            }
+        });
     }
     selectVariant(variant) {
-        if (this.selectedVariant !== undefined) {
-            return true;
+        if (!this.multipleChoice) {
+            if (this.selectedVariant != null) {
+                return true;
+            }
+        }
+        if (this.multipleChoice) {
+            if (this.isDone()) {
+                return true;
+            }
         }
         var selectedVariantIndex = this.variants.indexOf(variant);
         if (selectedVariantIndex !== -1) {
-            this._selectVariant(selectedVariantIndex);
-            this.localData["_v_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
-            // ответ на вопрос
-            this.localData["_&ts_v_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
-            if (this.widgetDone) {
-                this.widgetDone.classList.add("active", "opacity-active");
-                setTimeout(() => {
-                    this.widgetDone?.classList.remove("active");
-                    setTimeout(() => {
-                        this.widgetDone?.classList.remove("opacity-active");
-                    }, 250);
-                }, 2000);
+            this._checkVariant(selectedVariantIndex);
+            if (this.multipleChoice) {
+                if (this._getCheckedVariants().length > 0) {
+                    this._setInputDone();
+                    this._showSubmitBtn();
+                }
+                else {
+                    this._removeInputDone();
+                    this._hideSubmitBtn();
+                }
+            }
+            if (!this.multipleChoice) {
+                this._selectVariant(selectedVariantIndex);
+                if (!this.hideClientTotalResult) {
+                    this.displayPercents([selectedVariantIndex]);
+                }
+                this._fillWidget();
+                this._completeWidget();
             }
-            this.setLocalData(this.localData, true);
-            this._statEventVoteVariant();
         }
         return false;
     }
-    displayPercents(selectedVariantIndex, filled = false) {
+    _setInputDone() {
+        if (this.submitButtonView != null) {
+            this.element.classList.add("input-done");
+        }
+    }
+    _removeInputDone() {
+        // if (this.submitButtonView != null) {
+        setTimeout(() => {
+            this.element.classList.add("border-radius-transition-250");
+            this.env.requestAnimationFrame(() => {
+                this.element.classList.remove("input-done");
+                setTimeout(() => this.element.classList.remove("border-radius-transition-250"), 250);
+            });
+        }, 250);
+        // }
+    }
+    _completeWidget() {
+        this.localData["_v_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
+        // ответ на вопрос
+        this.localData["_&ts_v_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
+        if (this.widgetDone) {
+            this.widgetDone.classList.add("active", "opacity-active");
+            setTimeout(() => {
+                this.widgetDone?.classList.remove("active");
+                setTimeout(() => {
+                    this.widgetDone?.classList.remove("opacity-active");
+                }, 250);
+            }, 2000);
+        }
+        this.setLocalData(this.localData, true);
+        this._statEventVoteVariant();
+    }
+    submitMultipleChoice() {
+        const variants = this._getCheckedVariants();
+        if (variants.length > 0) {
+            this.localData["_v_g_" + this.elementId + "_sa"] = variants;
+            for (let i = 0; i < variants.length; ++i) {
+                const index = variants[i];
+                this._selectVariant(index);
+            }
+            if (!this.hideClientTotalResult) {
+                this.displayPercents(variants);
+            }
+            this._fillWidget();
+            this._completeWidget();
+        }
+    }
+    click() {
+        if (this.isDone()) {
+            return true;
+        }
+        if (this.multipleChoice) {
+            this.submitMultipleChoice();
+            return false;
+        }
+        else {
+            // for single mode - return true and sdk will proceed click as nextClick()
+            return true;
+        }
+    }
+    displayPercents(selectedVariantsIndexes, filled = false) {
         // voteAllocation[0] - variant total count allocation
         // voteAllocation[1]
         // ...
@@ -4849,7 +5090,7 @@ class WidgetVote extends WidgetBase {
                 if (voteAllocation[key] === undefined || !isNumber(voteAllocation[key])) {
                     voteAllocation[key] = 0;
                 }
-                if (selectedVariantIndex === key) {
+                if (selectedVariantsIndexes.includes(key)) {
                     ++voteAllocation[key];
                 }
             });
@@ -4905,12 +5146,13 @@ class WidgetVote extends WidgetBase {
         }
     }
     isDone() {
-        return this.localData["_v_g_" + this.elementId + "_done_at"] !== undefined;
+        return this.localData["_v_g_" + this.elementId + "_done_at"] != null;
     }
     slideVoteIsDone() {
-        return this.localData["_v_g_" + this.elementId + "_sa"] !== undefined;
+        return this.localData["_v_g_" + this.elementId + "_sa"] != null;
     }
     static api = {
+        widgetClassName: WidgetVote.widgetClassName,
         refreshUserData: WidgetVote.refreshUserData,
         // fix for WidgetVote on every layer of multilayers story
         fallbackInitOnMultiSlide: function (element, localData) {
@@ -4948,6 +5190,16 @@ class WidgetVote extends WidgetBase {
             }
             return false;
         },
+        click: function (element) {
+            const widgetElement = element.closest(`.${WidgetVote.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetVote.getInstance(widgetElement);
+                if (widget) {
+                    return widget.click();
+                }
+            }
+            return true;
+        },
         slideVoteIsDone: function (element) {
             const widget = WidgetVote.getInstance(element);
             if (widget) {