@inappstory/slide-api 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +307 -55
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +286 -235
- package/dist/index.d.ts +286 -235
- package/dist/index.js +307 -55
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
package/dist/index.js
CHANGED
|
@@ -211,6 +211,29 @@ class WidgetsService {
|
|
|
211
211
|
|
|
212
212
|
container.registerSingleton(undefined, { identifier: `WidgetsService`, implementation: WidgetsService });
|
|
213
213
|
|
|
214
|
+
class LayoutService {
|
|
215
|
+
_env;
|
|
216
|
+
_sdkApi;
|
|
217
|
+
_layoutApi;
|
|
218
|
+
constructor(_env, _sdkApi, _layoutApi) {
|
|
219
|
+
this._env = _env;
|
|
220
|
+
this._sdkApi = _sdkApi;
|
|
221
|
+
this._layoutApi = _layoutApi;
|
|
222
|
+
}
|
|
223
|
+
get env() {
|
|
224
|
+
return this._env;
|
|
225
|
+
}
|
|
226
|
+
get sdkApi() {
|
|
227
|
+
return this._sdkApi;
|
|
228
|
+
}
|
|
229
|
+
get layoutApi() {
|
|
230
|
+
return this._layoutApi;
|
|
231
|
+
}
|
|
232
|
+
static get [Symbol.for("___CTOR_ARGS___")]() { return [`Window`, `SDKApi`, `ILayoutApi`]; }
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
container.registerSingleton(undefined, { identifier: `LayoutService`, implementation: LayoutService });
|
|
236
|
+
|
|
214
237
|
// import '../adapters/dateTimeSource/composition';
|
|
215
238
|
// import '../adapters/uuidGenerator/composition';
|
|
216
239
|
// import '../effects/eventHandler/composition';
|
|
@@ -218,6 +241,8 @@ container.registerSingleton(undefined, { identifier: `WidgetsService`, implement
|
|
|
218
241
|
// import '../effects/timer/composition';
|
|
219
242
|
container.registerSingleton(() => window, { identifier: `Window` });
|
|
220
243
|
|
|
244
|
+
const DEFAULT_SLIDE_DURATION = 10000;
|
|
245
|
+
|
|
221
246
|
const arPrototype = Array.prototype;
|
|
222
247
|
const obPrototype = Object.prototype;
|
|
223
248
|
const slice = arPrototype.slice;
|
|
@@ -542,9 +567,6 @@ class Data {
|
|
|
542
567
|
}
|
|
543
568
|
// var data_priv = new Data();
|
|
544
569
|
const data_user = new Data();
|
|
545
|
-
const getSlideDuration = function (sdkApi, storyId, slideIndex) {
|
|
546
|
-
return sdkApi.getSlideDuration(storyId, slideIndex) ?? 10000;
|
|
547
|
-
};
|
|
548
570
|
const getWinWidth = function (env) {
|
|
549
571
|
return env.innerWidth || env.document.documentElement.clientWidth || env.document.body.clientWidth;
|
|
550
572
|
};
|
|
@@ -1130,6 +1152,18 @@ class EsModuleSdkApi {
|
|
|
1130
1152
|
getStorySessionValue(element, key) {
|
|
1131
1153
|
return this.sdkBinding().getStorySessionValue(key);
|
|
1132
1154
|
}
|
|
1155
|
+
updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
|
|
1156
|
+
this.sdkBinding().updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError);
|
|
1157
|
+
}
|
|
1158
|
+
storyPausedCallback(currentTime) { }
|
|
1159
|
+
storyResumedCallback(currentTime) { }
|
|
1160
|
+
startDisabledTimeline(storyId, slideIndex) {
|
|
1161
|
+
// old api
|
|
1162
|
+
this.showNextSlide(this.getSlideDuration(storyId, slideIndex) ?? DEFAULT_SLIDE_DURATION);
|
|
1163
|
+
}
|
|
1164
|
+
getStoryFonts() {
|
|
1165
|
+
return this.sdkBinding().getStoryFonts();
|
|
1166
|
+
}
|
|
1133
1167
|
static get [Symbol.for("___CTOR_ARGS___")]() { return [`() => SDKInterface`]; }
|
|
1134
1168
|
}
|
|
1135
1169
|
|
|
@@ -1308,8 +1342,8 @@ class WidgetBase {
|
|
|
1308
1342
|
sendStatisticEventToApp(name, data, devPayload) {
|
|
1309
1343
|
this.constructor.sendStatisticEventToApp(name, data, devPayload);
|
|
1310
1344
|
}
|
|
1311
|
-
|
|
1312
|
-
this.sdkApi.
|
|
1345
|
+
startDisabledTimeline() {
|
|
1346
|
+
this.sdkApi.startDisabledTimeline(this.storyId, this.slideIndex);
|
|
1313
1347
|
}
|
|
1314
1348
|
_showLayout(layers, selectIndex, withStatEvent = false) {
|
|
1315
1349
|
if (this.sdkApi.isExistsShowLayer()) {
|
|
@@ -1546,7 +1580,7 @@ class WidgetCopy extends WidgetBase {
|
|
|
1546
1580
|
// флаг - что таймер уже стартанул (в layout или добавить объект sharedMemory)
|
|
1547
1581
|
// смотрим что прозрачный текст - тогда и лоадер прозрачный
|
|
1548
1582
|
// _log("_showNarrativeNextSlide: " + getSlideDuration(this.narrativeId, this.slideIndex), true);
|
|
1549
|
-
this.
|
|
1583
|
+
this.startDisabledTimeline();
|
|
1550
1584
|
}
|
|
1551
1585
|
}
|
|
1552
1586
|
copyToClipboard(element) {
|
|
@@ -1566,6 +1600,7 @@ class WidgetCopy extends WidgetBase {
|
|
|
1566
1600
|
return this.localData["_cp_g_" + this.elementId + "_done_at"] !== undefined;
|
|
1567
1601
|
}
|
|
1568
1602
|
static api = {
|
|
1603
|
+
widgetClassName: WidgetCopy.widgetClassName,
|
|
1569
1604
|
refreshUserData: WidgetCopy.refreshUserData,
|
|
1570
1605
|
initWidget: function (nodeList, localData) {
|
|
1571
1606
|
// prevent initWidget for result layer
|
|
@@ -1630,7 +1665,7 @@ class WidgetDataInput extends WidgetBase {
|
|
|
1630
1665
|
if (text) {
|
|
1631
1666
|
this.element.classList.add("done");
|
|
1632
1667
|
if (this.disableTimer) {
|
|
1633
|
-
this.
|
|
1668
|
+
this.startDisabledTimeline();
|
|
1634
1669
|
}
|
|
1635
1670
|
}
|
|
1636
1671
|
}
|
|
@@ -1747,7 +1782,7 @@ class WidgetDataInput extends WidgetBase {
|
|
|
1747
1782
|
this.setLocalData(this.localData, true);
|
|
1748
1783
|
this._statEventInputSave(text);
|
|
1749
1784
|
if (this.disableTimer) {
|
|
1750
|
-
this.
|
|
1785
|
+
this.startDisabledTimeline();
|
|
1751
1786
|
needResumeUITimer = false;
|
|
1752
1787
|
}
|
|
1753
1788
|
}
|
|
@@ -1756,6 +1791,7 @@ class WidgetDataInput extends WidgetBase {
|
|
|
1756
1791
|
}
|
|
1757
1792
|
}
|
|
1758
1793
|
static api = {
|
|
1794
|
+
widgetClassName: WidgetDataInput.widgetClassName,
|
|
1759
1795
|
refreshUserData: WidgetDataInput.refreshUserData,
|
|
1760
1796
|
initWidget: function (nodeList, localData) {
|
|
1761
1797
|
WidgetDataInput.initWidgets((element, options) => new WidgetDataInput(element, options), slice.call(nodeList), localData);
|
|
@@ -1969,6 +2005,7 @@ class WidgetDateCountdown extends WidgetBase {
|
|
|
1969
2005
|
return result;
|
|
1970
2006
|
}
|
|
1971
2007
|
static api = {
|
|
2008
|
+
widgetClassName: WidgetDateCountdown.widgetClassName,
|
|
1972
2009
|
refreshUserData: WidgetDateCountdown.refreshUserData,
|
|
1973
2010
|
initWidget: function (nodeList, layers, localData) {
|
|
1974
2011
|
WidgetDateCountdown.initWidgets((element, options) => new WidgetDateCountdown(element, { ...options, layers }), slice.call(nodeList), localData);
|
|
@@ -2259,7 +2296,7 @@ class WidgetPoll extends WidgetBase {
|
|
|
2259
2296
|
// todo poll - если виджет на первом слайде то при повторном заходе автоматически не стартует таймлайн слайда
|
|
2260
2297
|
// только в web sdk такое
|
|
2261
2298
|
// если поставить через setTimeout то все ок
|
|
2262
|
-
this.
|
|
2299
|
+
this.startDisabledTimeline();
|
|
2263
2300
|
});
|
|
2264
2301
|
}
|
|
2265
2302
|
}
|
|
@@ -2597,6 +2634,7 @@ class WidgetPoll extends WidgetBase {
|
|
|
2597
2634
|
return this.localData["_p_g_" + this.elementId + "_sa"] !== undefined;
|
|
2598
2635
|
}
|
|
2599
2636
|
static api = {
|
|
2637
|
+
widgetClassName: WidgetPoll.widgetClassName,
|
|
2600
2638
|
refreshUserData: WidgetPoll.refreshUserData,
|
|
2601
2639
|
initWidget: function (element, localData) {
|
|
2602
2640
|
WidgetPoll.initWidgets((element, options) => new WidgetPoll(element, options), [element], localData);
|
|
@@ -2725,7 +2763,7 @@ class WidgetPollLayers extends WidgetBase {
|
|
|
2725
2763
|
}
|
|
2726
2764
|
this._showLayout(this.layers, layerIndex, userAction);
|
|
2727
2765
|
if (this.disableTimer) {
|
|
2728
|
-
this.
|
|
2766
|
+
this.startDisabledTimeline();
|
|
2729
2767
|
}
|
|
2730
2768
|
}
|
|
2731
2769
|
selectVariant(variant) {
|
|
@@ -2762,6 +2800,7 @@ class WidgetPollLayers extends WidgetBase {
|
|
|
2762
2800
|
return this.localData != null && this.localData["_pl_g_" + this.elementId + "_sa"] !== undefined;
|
|
2763
2801
|
}
|
|
2764
2802
|
static api = {
|
|
2803
|
+
widgetClassName: WidgetPollLayers.widgetClassName,
|
|
2765
2804
|
refreshUserData: WidgetPollLayers.refreshUserData,
|
|
2766
2805
|
// signature variants
|
|
2767
2806
|
// (widget, layers, undefined) - modern web sdk
|
|
@@ -3045,6 +3084,7 @@ class WidgetQuest extends WidgetBase {
|
|
|
3045
3084
|
}
|
|
3046
3085
|
}
|
|
3047
3086
|
static api = {
|
|
3087
|
+
widgetClassName: WidgetQuest.widgetClassName,
|
|
3048
3088
|
refreshUserData: WidgetQuest.refreshUserData,
|
|
3049
3089
|
initWidget: function (element, localData) {
|
|
3050
3090
|
return new Promise(function (resolve, reject) {
|
|
@@ -3151,7 +3191,7 @@ class WidgetQuiz extends WidgetBase {
|
|
|
3151
3191
|
// })
|
|
3152
3192
|
// }
|
|
3153
3193
|
if (this.disableTimer) {
|
|
3154
|
-
this.
|
|
3194
|
+
this.startDisabledTimeline();
|
|
3155
3195
|
}
|
|
3156
3196
|
}
|
|
3157
3197
|
_clearAnswerSelection() {
|
|
@@ -3243,6 +3283,7 @@ class WidgetQuiz extends WidgetBase {
|
|
|
3243
3283
|
return this.localData["_q_g_" + this.elementId + "_sa"] !== undefined;
|
|
3244
3284
|
}
|
|
3245
3285
|
static api = {
|
|
3286
|
+
widgetClassName: WidgetQuiz.widgetClassName,
|
|
3246
3287
|
refreshUserData: WidgetQuiz.refreshUserData,
|
|
3247
3288
|
initWidget: function (element, localData) {
|
|
3248
3289
|
WidgetQuiz.initWidgets((element, options) => new WidgetQuiz(element, options), [element], localData);
|
|
@@ -3328,7 +3369,7 @@ class WidgetQuizGrouped extends WidgetBase {
|
|
|
3328
3369
|
}
|
|
3329
3370
|
});
|
|
3330
3371
|
if (this.disableTimer) {
|
|
3331
|
-
this.
|
|
3372
|
+
this.startDisabledTimeline();
|
|
3332
3373
|
}
|
|
3333
3374
|
}
|
|
3334
3375
|
_clearAnswerSelection() {
|
|
@@ -3437,6 +3478,7 @@ class WidgetQuizGrouped extends WidgetBase {
|
|
|
3437
3478
|
return this.localData["_q_gg_" + this.elementId + "_sa"] !== undefined;
|
|
3438
3479
|
}
|
|
3439
3480
|
static api = {
|
|
3481
|
+
widgetClassName: WidgetQuizGrouped.widgetClassName,
|
|
3440
3482
|
refreshUserData: WidgetQuizGrouped.refreshUserData,
|
|
3441
3483
|
initWidget: function (element, localData) {
|
|
3442
3484
|
WidgetQuizGrouped.initWidgets((element, options) => new WidgetQuizGrouped(element, options), [element], localData);
|
|
@@ -3689,7 +3731,7 @@ class WidgetRangeSlider extends WidgetBase {
|
|
|
3689
3731
|
this.element.classList.add("done");
|
|
3690
3732
|
this.displayAverageAnswer();
|
|
3691
3733
|
if (this.disableTimer) {
|
|
3692
|
-
this.
|
|
3734
|
+
this.startDisabledTimeline();
|
|
3693
3735
|
}
|
|
3694
3736
|
}
|
|
3695
3737
|
else {
|
|
@@ -3758,7 +3800,7 @@ class WidgetRangeSlider extends WidgetBase {
|
|
|
3758
3800
|
}
|
|
3759
3801
|
});
|
|
3760
3802
|
// if (this.disableTimer) {
|
|
3761
|
-
this.
|
|
3803
|
+
this.startDisabledTimeline();
|
|
3762
3804
|
// }
|
|
3763
3805
|
this.setLocalData(this.localData, true);
|
|
3764
3806
|
this._statEventInputSave(this.localData["_rs_g_" + this.elementId + "_v"]);
|
|
@@ -4046,6 +4088,7 @@ class WidgetRangeSlider extends WidgetBase {
|
|
|
4046
4088
|
// .removeData('plugin_' + pluginName);
|
|
4047
4089
|
}
|
|
4048
4090
|
static api = {
|
|
4091
|
+
widgetClassName: WidgetRangeSlider.widgetClassName,
|
|
4049
4092
|
refreshUserData: WidgetRangeSlider.refreshUserData,
|
|
4050
4093
|
initWidget: function (element, localData) {
|
|
4051
4094
|
WidgetRangeSlider.initWidgets((element, options) => new WidgetRangeSlider(element, options), [element], localData);
|
|
@@ -4170,7 +4213,7 @@ class WidgetRate extends WidgetBase {
|
|
|
4170
4213
|
this.localData["_r_g_" + this.elementId + "_ss"] = value;
|
|
4171
4214
|
this.element.classList.add("done");
|
|
4172
4215
|
if (this.disableTimer && runTimer) {
|
|
4173
|
-
this.
|
|
4216
|
+
this.startDisabledTimeline();
|
|
4174
4217
|
}
|
|
4175
4218
|
}
|
|
4176
4219
|
_clearSelectedStar() {
|
|
@@ -4294,6 +4337,7 @@ class WidgetRate extends WidgetBase {
|
|
|
4294
4337
|
return this.localData["_r_g_" + this.elementId + "_sa"] !== undefined;
|
|
4295
4338
|
}
|
|
4296
4339
|
static api = {
|
|
4340
|
+
widgetClassName: WidgetRate.widgetClassName,
|
|
4297
4341
|
refreshUserData: WidgetRate.refreshUserData,
|
|
4298
4342
|
initWidget: function (nodeList, localData) {
|
|
4299
4343
|
WidgetRate.initWidgets((element, options) => new WidgetRate(element, options), slice.call(nodeList), localData);
|
|
@@ -4416,6 +4460,7 @@ class WidgetShare extends WidgetBase {
|
|
|
4416
4460
|
return Boolean(this.localData["_s_" + this.elementId + "_ts"]);
|
|
4417
4461
|
}
|
|
4418
4462
|
static api = {
|
|
4463
|
+
widgetClassName: WidgetShare.widgetClassName,
|
|
4419
4464
|
refreshUserData: WidgetShare.refreshUserData,
|
|
4420
4465
|
// signature variants
|
|
4421
4466
|
// (widget, layers, undefined) - modern web sdk
|
|
@@ -4535,6 +4580,11 @@ class WidgetTest extends WidgetBase {
|
|
|
4535
4580
|
this.timeline.style.transform = "translateX(100%)";
|
|
4536
4581
|
}
|
|
4537
4582
|
}
|
|
4583
|
+
else if (this.localData["_&ts_t_g_" + this.elementId + "_a_tspent"] != null) {
|
|
4584
|
+
if (this.timeline) {
|
|
4585
|
+
this.timeline.style.transform = "translateX(" + String(this.localData["_&ts_t_g_" + this.elementId + "_a_tspent"]) + "%)";
|
|
4586
|
+
}
|
|
4587
|
+
}
|
|
4538
4588
|
}
|
|
4539
4589
|
}
|
|
4540
4590
|
// this.refreshUserData(this.options.localData);
|
|
@@ -4590,7 +4640,7 @@ class WidgetTest extends WidgetBase {
|
|
|
4590
4640
|
}
|
|
4591
4641
|
});
|
|
4592
4642
|
if (this.disableTimer) {
|
|
4593
|
-
this.
|
|
4643
|
+
this.startDisabledTimeline();
|
|
4594
4644
|
}
|
|
4595
4645
|
}
|
|
4596
4646
|
selectAnswer(answer) {
|
|
@@ -4634,6 +4684,10 @@ class WidgetTest extends WidgetBase {
|
|
|
4634
4684
|
}
|
|
4635
4685
|
// answer on question
|
|
4636
4686
|
this.localData["_&ts_t_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
|
|
4687
|
+
// spent percent of time
|
|
4688
|
+
if (this.slideTestWithTimer()) {
|
|
4689
|
+
this.localData["_&ts_t_g_" + this.elementId + "_a_tspent"] = Math.round((1 - this.timeLeft / this.timeLeftDefault) * 100);
|
|
4690
|
+
}
|
|
4637
4691
|
if (this.widgetDone) {
|
|
4638
4692
|
this.widgetDone.classList.add("active", "opacity-active");
|
|
4639
4693
|
setTimeout(() => {
|
|
@@ -4656,6 +4710,7 @@ class WidgetTest extends WidgetBase {
|
|
|
4656
4710
|
return Boolean(this.withTimeToAnswer && this.answerTimeout);
|
|
4657
4711
|
}
|
|
4658
4712
|
static api = {
|
|
4713
|
+
widgetClassName: WidgetTest.widgetClassName,
|
|
4659
4714
|
refreshUserData: WidgetTest.refreshUserData,
|
|
4660
4715
|
initWidget: function (element, localData) {
|
|
4661
4716
|
WidgetTest.initWidgets((element, options) => new WidgetTest(element, options), [element], localData);
|
|
@@ -4709,6 +4764,7 @@ class WidgetVote extends WidgetBase {
|
|
|
4709
4764
|
selectedVariant;
|
|
4710
4765
|
voteAllocation;
|
|
4711
4766
|
hideClientTotalResult;
|
|
4767
|
+
multipleChoice;
|
|
4712
4768
|
/**
|
|
4713
4769
|
* @throws Error
|
|
4714
4770
|
* @param element
|
|
@@ -4727,38 +4783,112 @@ class WidgetVote extends WidgetBase {
|
|
|
4727
4783
|
}
|
|
4728
4784
|
});
|
|
4729
4785
|
this.hideClientTotalResult = getValueOrDefault(Boolean(getTagDataAsNumber(this.element, "hideClientTotalResult")), false);
|
|
4786
|
+
this.multipleChoice = getValueOrDefault(Boolean(getTagDataAsNumber(this.element, "multipleChoice")), false);
|
|
4787
|
+
this.refreshUserData(this.options.localData);
|
|
4788
|
+
}
|
|
4789
|
+
_initFromLocalData() {
|
|
4790
|
+
const value = this.localData["_v_g_" + this.elementId + "_sa"];
|
|
4791
|
+
if (!this.multipleChoice) {
|
|
4792
|
+
let index = value;
|
|
4793
|
+
if (Array.isArray(value)) {
|
|
4794
|
+
index = value[0];
|
|
4795
|
+
}
|
|
4796
|
+
this._checkVariant(index);
|
|
4797
|
+
this._selectVariant(index, true);
|
|
4798
|
+
if (!this.hideClientTotalResult) {
|
|
4799
|
+
this.displayPercents([index], true);
|
|
4800
|
+
}
|
|
4801
|
+
this._fillWidget(true);
|
|
4802
|
+
}
|
|
4803
|
+
if (this.multipleChoice) {
|
|
4804
|
+
let values = [];
|
|
4805
|
+
if (Array.isArray(value)) {
|
|
4806
|
+
values = value;
|
|
4807
|
+
}
|
|
4808
|
+
else {
|
|
4809
|
+
values.push(value);
|
|
4810
|
+
}
|
|
4811
|
+
for (let i = 0; i < values.length; ++i) {
|
|
4812
|
+
const index = values[i];
|
|
4813
|
+
this._checkVariant(index);
|
|
4814
|
+
this._selectVariant(index, true);
|
|
4815
|
+
}
|
|
4816
|
+
if (!this.hideClientTotalResult) {
|
|
4817
|
+
this.displayPercents(values, true);
|
|
4818
|
+
}
|
|
4819
|
+
this._fillWidget(true);
|
|
4820
|
+
}
|
|
4821
|
+
}
|
|
4822
|
+
refreshUserData(localData) {
|
|
4823
|
+
this.savedData = this.sdkApi.getStoryServerData(this.storyId);
|
|
4824
|
+
this.localData = extend({}, this.savedData ?? {}, localData);
|
|
4730
4825
|
this.selectedVariant = undefined;
|
|
4731
4826
|
if (this.localData) {
|
|
4732
|
-
if (this.localData["_v_g_" + this.elementId + "_sa"]
|
|
4733
|
-
this.
|
|
4827
|
+
if (this.localData["_v_g_" + this.elementId + "_sa"] != null) {
|
|
4828
|
+
this._initFromLocalData();
|
|
4829
|
+
}
|
|
4830
|
+
else {
|
|
4831
|
+
this._clearSelectedVariants();
|
|
4832
|
+
this.element.classList.remove("done");
|
|
4833
|
+
this.element.classList.remove("input-done");
|
|
4834
|
+
this.element.classList.remove("filled");
|
|
4734
4835
|
}
|
|
4735
4836
|
}
|
|
4736
4837
|
this.firstOpenTime = new Date().getTime();
|
|
4737
|
-
// this.refreshUserData(this.options.localData);
|
|
4738
4838
|
}
|
|
4739
|
-
|
|
4839
|
+
_clearSelectedVariants() {
|
|
4840
|
+
this.variants.forEach((variant, index) => {
|
|
4841
|
+
variant.classList.remove("checked");
|
|
4842
|
+
variant.classList.remove("selected");
|
|
4843
|
+
variant.style.setProperty("--selected-variant-view-clip-area", String(100));
|
|
4844
|
+
});
|
|
4845
|
+
}
|
|
4740
4846
|
_statEventVoteVariant() {
|
|
4741
4847
|
try {
|
|
4742
|
-
|
|
4743
|
-
|
|
4744
|
-
|
|
4745
|
-
|
|
4848
|
+
let isValid = false;
|
|
4849
|
+
let selectedVariant = null;
|
|
4850
|
+
if (!this.multipleChoice) {
|
|
4851
|
+
if (this.selectedVariant != null) {
|
|
4852
|
+
isValid = true;
|
|
4853
|
+
selectedVariant = this.selectedVariant;
|
|
4854
|
+
}
|
|
4855
|
+
}
|
|
4856
|
+
let selectedVariantsLabels = [];
|
|
4857
|
+
let selectedVariantsIdxs = [];
|
|
4858
|
+
if (this.multipleChoice) {
|
|
4859
|
+
selectedVariantsIdxs = this._getCheckedVariants();
|
|
4860
|
+
if (selectedVariantsIdxs.length > 0) {
|
|
4861
|
+
isValid = true;
|
|
4862
|
+
selectedVariant = selectedVariantsIdxs[0];
|
|
4863
|
+
selectedVariantsIdxs.forEach(idx => selectedVariantsLabels.push(this.variantsTexts[idx] ? this.variantsTexts[idx] : ""));
|
|
4864
|
+
}
|
|
4865
|
+
}
|
|
4866
|
+
if (isValid) {
|
|
4867
|
+
let labelText = this.label?.textContent ?? "";
|
|
4868
|
+
let variantText = this.variantsTexts[selectedVariant] ? this.variantsTexts[selectedVariant] : "";
|
|
4869
|
+
let duration = new Date().getTime() - this.firstOpenTime;
|
|
4870
|
+
// доп поля - для multiple choice
|
|
4871
|
+
// первые оставляем пустыми в этом случае
|
|
4746
4872
|
this.sendStatisticEventToApp("w-vote-answer", {
|
|
4747
4873
|
i: this.storyId,
|
|
4748
4874
|
si: this.slideIndex,
|
|
4749
4875
|
wi: this.elementId,
|
|
4750
4876
|
wl: labelText,
|
|
4751
|
-
wa:
|
|
4877
|
+
wa: selectedVariant,
|
|
4752
4878
|
wv: variantText,
|
|
4753
4879
|
d: duration,
|
|
4880
|
+
was: selectedVariantsIdxs,
|
|
4881
|
+
wvs: selectedVariantsLabels,
|
|
4754
4882
|
}, {
|
|
4755
4883
|
story_id: this.storyId,
|
|
4756
4884
|
slide_index: this.slideIndex,
|
|
4757
4885
|
widget_id: this.elementId,
|
|
4758
4886
|
widget_label: labelText,
|
|
4759
|
-
widget_answer:
|
|
4887
|
+
widget_answer: selectedVariant,
|
|
4760
4888
|
widget_value: variantText,
|
|
4761
4889
|
duration_ms: duration,
|
|
4890
|
+
widget_answers: selectedVariantsIdxs,
|
|
4891
|
+
widget_values: selectedVariantsLabels,
|
|
4762
4892
|
});
|
|
4763
4893
|
}
|
|
4764
4894
|
}
|
|
@@ -4766,15 +4896,33 @@ class WidgetVote extends WidgetBase {
|
|
|
4766
4896
|
console.error(error);
|
|
4767
4897
|
}
|
|
4768
4898
|
}
|
|
4899
|
+
// user click on (un)checked (radio btn) variant
|
|
4900
|
+
_checkVariant(index) {
|
|
4901
|
+
if (this.variants[index]) {
|
|
4902
|
+
if (this.variants[index].classList.contains("checked")) {
|
|
4903
|
+
this.variants[index].classList.remove("checked");
|
|
4904
|
+
}
|
|
4905
|
+
else {
|
|
4906
|
+
this.variants[index].classList.add("checked");
|
|
4907
|
+
}
|
|
4908
|
+
}
|
|
4909
|
+
}
|
|
4910
|
+
_getCheckedVariants() {
|
|
4911
|
+
const map = [];
|
|
4912
|
+
this.variants.forEach((variant, index) => {
|
|
4913
|
+
if (variant.classList.contains("checked")) {
|
|
4914
|
+
map.push(index);
|
|
4915
|
+
}
|
|
4916
|
+
});
|
|
4917
|
+
return map;
|
|
4918
|
+
}
|
|
4769
4919
|
_selectVariant(index, filled = false) {
|
|
4770
4920
|
if (this.variants[index]) {
|
|
4771
4921
|
this.variants[index].classList.add("selected");
|
|
4772
4922
|
}
|
|
4773
4923
|
this.selectedVariant = index;
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
if (filled) {
|
|
4777
|
-
this.element.classList.add("filled");
|
|
4924
|
+
if (!this.multipleChoice) {
|
|
4925
|
+
this.localData["_v_g_" + this.elementId + "_sa"] = index;
|
|
4778
4926
|
}
|
|
4779
4927
|
if (this.hideClientTotalResult) {
|
|
4780
4928
|
const cb = () => {
|
|
@@ -4789,43 +4937,136 @@ class WidgetVote extends WidgetBase {
|
|
|
4789
4937
|
this.env.requestAnimationFrame(cb);
|
|
4790
4938
|
}
|
|
4791
4939
|
}
|
|
4792
|
-
|
|
4793
|
-
|
|
4940
|
+
}
|
|
4941
|
+
_fillWidget(filled = false) {
|
|
4942
|
+
this.element.classList.add("done");
|
|
4943
|
+
if (filled) {
|
|
4944
|
+
this.element.classList.add("filled");
|
|
4945
|
+
}
|
|
4946
|
+
if (!this.multipleChoice) {
|
|
4947
|
+
if (this.submitButtonView != null) {
|
|
4948
|
+
this._setInputDone();
|
|
4949
|
+
this._showSubmitBtn();
|
|
4950
|
+
}
|
|
4794
4951
|
}
|
|
4952
|
+
if (this.multipleChoice) {
|
|
4953
|
+
this._removeInputDone();
|
|
4954
|
+
this._hideSubmitBtn();
|
|
4955
|
+
}
|
|
4956
|
+
if (this.disableTimer) {
|
|
4957
|
+
this.startDisabledTimeline();
|
|
4958
|
+
}
|
|
4959
|
+
}
|
|
4960
|
+
_showSubmitBtn() {
|
|
4795
4961
|
this.env.requestAnimationFrame(() => {
|
|
4796
4962
|
if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
|
|
4797
4963
|
this.submitButtonAnimatedView.style.maxHeight = this.submitButtonViewHeight + "px";
|
|
4798
4964
|
}
|
|
4799
4965
|
});
|
|
4800
|
-
|
|
4801
|
-
|
|
4802
|
-
|
|
4966
|
+
}
|
|
4967
|
+
_hideSubmitBtn() {
|
|
4968
|
+
this.env.requestAnimationFrame(() => {
|
|
4969
|
+
if (this.submitButtonAnimatedView != null && this.submitButtonViewHeight != null) {
|
|
4970
|
+
this.submitButtonAnimatedView.style.maxHeight = "0px";
|
|
4971
|
+
}
|
|
4972
|
+
});
|
|
4803
4973
|
}
|
|
4804
4974
|
selectVariant(variant) {
|
|
4805
|
-
if (this.
|
|
4806
|
-
|
|
4975
|
+
if (!this.multipleChoice) {
|
|
4976
|
+
if (this.selectedVariant != null) {
|
|
4977
|
+
return true;
|
|
4978
|
+
}
|
|
4979
|
+
}
|
|
4980
|
+
if (this.multipleChoice) {
|
|
4981
|
+
if (this.isDone()) {
|
|
4982
|
+
return true;
|
|
4983
|
+
}
|
|
4807
4984
|
}
|
|
4808
4985
|
var selectedVariantIndex = this.variants.indexOf(variant);
|
|
4809
4986
|
if (selectedVariantIndex !== -1) {
|
|
4810
|
-
this.
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
this.
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4987
|
+
this._checkVariant(selectedVariantIndex);
|
|
4988
|
+
if (this.multipleChoice) {
|
|
4989
|
+
if (this._getCheckedVariants().length > 0) {
|
|
4990
|
+
this._setInputDone();
|
|
4991
|
+
this._showSubmitBtn();
|
|
4992
|
+
}
|
|
4993
|
+
else {
|
|
4994
|
+
this._removeInputDone();
|
|
4995
|
+
this._hideSubmitBtn();
|
|
4996
|
+
}
|
|
4997
|
+
}
|
|
4998
|
+
if (!this.multipleChoice) {
|
|
4999
|
+
this._selectVariant(selectedVariantIndex);
|
|
5000
|
+
if (!this.hideClientTotalResult) {
|
|
5001
|
+
this.displayPercents([selectedVariantIndex]);
|
|
5002
|
+
}
|
|
5003
|
+
this._fillWidget();
|
|
5004
|
+
this._completeWidget();
|
|
4822
5005
|
}
|
|
4823
|
-
this.setLocalData(this.localData, true);
|
|
4824
|
-
this._statEventVoteVariant();
|
|
4825
5006
|
}
|
|
4826
5007
|
return false;
|
|
4827
5008
|
}
|
|
4828
|
-
|
|
5009
|
+
_setInputDone() {
|
|
5010
|
+
if (this.submitButtonView != null) {
|
|
5011
|
+
this.element.classList.add("input-done");
|
|
5012
|
+
}
|
|
5013
|
+
}
|
|
5014
|
+
_removeInputDone() {
|
|
5015
|
+
// if (this.submitButtonView != null) {
|
|
5016
|
+
setTimeout(() => {
|
|
5017
|
+
this.element.classList.add("border-radius-transition-250");
|
|
5018
|
+
this.env.requestAnimationFrame(() => {
|
|
5019
|
+
this.element.classList.remove("input-done");
|
|
5020
|
+
setTimeout(() => this.element.classList.remove("border-radius-transition-250"), 250);
|
|
5021
|
+
});
|
|
5022
|
+
}, 250);
|
|
5023
|
+
// }
|
|
5024
|
+
}
|
|
5025
|
+
_completeWidget() {
|
|
5026
|
+
this.localData["_v_g_" + this.elementId + "_done_at"] = Math.round(new Date().getTime() / 1000);
|
|
5027
|
+
// ответ на вопрос
|
|
5028
|
+
this.localData["_&ts_v_g_" + this.elementId + "_a_at"] = Math.round(new Date().getTime() / 1000);
|
|
5029
|
+
if (this.widgetDone) {
|
|
5030
|
+
this.widgetDone.classList.add("active", "opacity-active");
|
|
5031
|
+
setTimeout(() => {
|
|
5032
|
+
this.widgetDone?.classList.remove("active");
|
|
5033
|
+
setTimeout(() => {
|
|
5034
|
+
this.widgetDone?.classList.remove("opacity-active");
|
|
5035
|
+
}, 250);
|
|
5036
|
+
}, 2000);
|
|
5037
|
+
}
|
|
5038
|
+
this.setLocalData(this.localData, true);
|
|
5039
|
+
this._statEventVoteVariant();
|
|
5040
|
+
}
|
|
5041
|
+
submitMultipleChoice() {
|
|
5042
|
+
const variants = this._getCheckedVariants();
|
|
5043
|
+
if (variants.length > 0) {
|
|
5044
|
+
this.localData["_v_g_" + this.elementId + "_sa"] = variants;
|
|
5045
|
+
for (let i = 0; i < variants.length; ++i) {
|
|
5046
|
+
const index = variants[i];
|
|
5047
|
+
this._selectVariant(index);
|
|
5048
|
+
}
|
|
5049
|
+
if (!this.hideClientTotalResult) {
|
|
5050
|
+
this.displayPercents(variants);
|
|
5051
|
+
}
|
|
5052
|
+
this._fillWidget();
|
|
5053
|
+
this._completeWidget();
|
|
5054
|
+
}
|
|
5055
|
+
}
|
|
5056
|
+
click() {
|
|
5057
|
+
if (this.isDone()) {
|
|
5058
|
+
return true;
|
|
5059
|
+
}
|
|
5060
|
+
if (this.multipleChoice) {
|
|
5061
|
+
this.submitMultipleChoice();
|
|
5062
|
+
return false;
|
|
5063
|
+
}
|
|
5064
|
+
else {
|
|
5065
|
+
// for single mode - return true and sdk will proceed click as nextClick()
|
|
5066
|
+
return true;
|
|
5067
|
+
}
|
|
5068
|
+
}
|
|
5069
|
+
displayPercents(selectedVariantsIndexes, filled = false) {
|
|
4829
5070
|
// voteAllocation[0] - variant total count allocation
|
|
4830
5071
|
// voteAllocation[1]
|
|
4831
5072
|
// ...
|
|
@@ -4847,7 +5088,7 @@ class WidgetVote extends WidgetBase {
|
|
|
4847
5088
|
if (voteAllocation[key] === undefined || !isNumber(voteAllocation[key])) {
|
|
4848
5089
|
voteAllocation[key] = 0;
|
|
4849
5090
|
}
|
|
4850
|
-
if (
|
|
5091
|
+
if (selectedVariantsIndexes.includes(key)) {
|
|
4851
5092
|
++voteAllocation[key];
|
|
4852
5093
|
}
|
|
4853
5094
|
});
|
|
@@ -4903,12 +5144,13 @@ class WidgetVote extends WidgetBase {
|
|
|
4903
5144
|
}
|
|
4904
5145
|
}
|
|
4905
5146
|
isDone() {
|
|
4906
|
-
return this.localData["_v_g_" + this.elementId + "_done_at"]
|
|
5147
|
+
return this.localData["_v_g_" + this.elementId + "_done_at"] != null;
|
|
4907
5148
|
}
|
|
4908
5149
|
slideVoteIsDone() {
|
|
4909
|
-
return this.localData["_v_g_" + this.elementId + "_sa"]
|
|
5150
|
+
return this.localData["_v_g_" + this.elementId + "_sa"] != null;
|
|
4910
5151
|
}
|
|
4911
5152
|
static api = {
|
|
5153
|
+
widgetClassName: WidgetVote.widgetClassName,
|
|
4912
5154
|
refreshUserData: WidgetVote.refreshUserData,
|
|
4913
5155
|
// fix for WidgetVote on every layer of multilayers story
|
|
4914
5156
|
fallbackInitOnMultiSlide: function (element, localData) {
|
|
@@ -4946,6 +5188,16 @@ class WidgetVote extends WidgetBase {
|
|
|
4946
5188
|
}
|
|
4947
5189
|
return false;
|
|
4948
5190
|
},
|
|
5191
|
+
click: function (element) {
|
|
5192
|
+
const widgetElement = element.closest(`.${WidgetVote.widgetClassName}`);
|
|
5193
|
+
if (widgetElement) {
|
|
5194
|
+
const widget = WidgetVote.getInstance(widgetElement);
|
|
5195
|
+
if (widget) {
|
|
5196
|
+
return widget.click();
|
|
5197
|
+
}
|
|
5198
|
+
}
|
|
5199
|
+
return true;
|
|
5200
|
+
},
|
|
4949
5201
|
slideVoteIsDone: function (element) {
|
|
4950
5202
|
const widget = WidgetVote.getInstance(element);
|
|
4951
5203
|
if (widget) {
|