@inappstory/slide-api 0.1.37 → 0.1.38

package/dist/index.cjs

@@ -3359,6 +3359,57 @@ class Timer {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Layer`, `Array`, `typeof WidgetTimer.api`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
+class Reactions {
+    _elementNodeRef;
+    _widgetApi;
+    _widgetCallbacks;
+    _widgetDeps;
+    static _className = "narrative-element-reactions";
+    static className() {
+        return Reactions._className;
+    }
+    constructor(_elementNodeRef, _widgetApi, _widgetCallbacks, _widgetDeps) {
+        this._elementNodeRef = _elementNodeRef;
+        this._widgetApi = _widgetApi;
+        this._widgetCallbacks = _widgetCallbacks;
+        this._widgetDeps = _widgetDeps;
+    }
+    static isTypeOf(element) {
+        return element instanceof Reactions;
+    }
+    mediaElementsLoadingPromises = [];
+    get nodeRef() {
+        return this._elementNodeRef;
+    }
+    init(localData) {
+        try {
+            this._widgetApi.init(this._elementNodeRef, localData, this._widgetCallbacks, this._widgetDeps);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return Promise.resolve(true);
+    }
+    onPause() { }
+    onResume() { }
+    onStart() {
+        this._widgetApi.onStart(this._elementNodeRef);
+    }
+    onStop() {
+        this._widgetApi.onStop(this._elementNodeRef);
+    }
+    onBeforeUnmount() {
+        return Promise.resolve();
+    }
+    handleClick() {
+        return false;
+    }
+    get isLayerForcePaused() {
+        return false;
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `typeof WidgetReactions.api`, `WidgetCallbacks`, `WidgetDeps`]; }
+}
+
 // export const tryCreateAtLayer = (layerNodeRef: HTMLElement): IElement {
 //     const
 // }
@@ -3421,6 +3472,8 @@ const tryCreateFromHtmlElement = (nodeRef, layer, widgetCallbacks, widgetDeps) =
                 return layoutApi.widgetTooltipApi ? new Tooltip(nodeRef, layer, layoutApi.widgetTooltipApi, widgetCallbacks, widgetDeps) : null;
             case Timer.className():
                 return layoutApi.widgetTimerApi ? new Timer(nodeRef, layer, layersNodesRefs, layoutApi.widgetTimerApi, widgetCallbacks, widgetDeps) : null;
+            case Reactions.className():
+                return layoutApi.widgetReactionsApi ? new Reactions(nodeRef, layoutApi.widgetReactionsApi, widgetCallbacks, widgetDeps) : null;
         }
     }
     return null;
@@ -5200,6 +5253,19 @@ let SlideApi$1 = class SlideApi {
                 propagation = false; // по клику на варианты ответа(даже на законченной викторине) не делаем клик на слайде
             }
         }
+        /** reactions */
+        if (target?.classList.contains("narrative-element-reaction")) {
+            element = target;
+        }
+        else {
+            element = target?.closest(".narrative-element-reaction");
+        }
+        if (element) {
+            if (this.layoutService.layoutApi.widgetReactionsApi) {
+                propagation = this.layoutService.layoutApi.widgetReactionsApi.select(element);
+                propagation = false;
+            }
+        }
         /** test */
         if (target?.classList.contains("narrative-element-test-answer")) {
             element = target;
@@ -24125,6 +24191,315 @@ class WidgetVote extends WidgetBase {
     static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `WidgetCallbacks`, `WidgetDeps`]; }
 }
 
+var ResultDisplayMode;
+(function (ResultDisplayMode) {
+    ResultDisplayMode["Hide"] = "hide";
+    ResultDisplayMode["Always"] = "always";
+    ResultDisplayMode["AfterSelection"] = "afterSelection";
+})(ResultDisplayMode || (ResultDisplayMode = {}));
+var ResultDisplayFormat;
+(function (ResultDisplayFormat) {
+    ResultDisplayFormat["Total"] = "total";
+    ResultDisplayFormat["Percentage"] = "percentage";
+})(ResultDisplayFormat || (ResultDisplayFormat = {}));
+
+const MIN_DURATION = 2000;
+const MAX_EXTRA_DURATION = 1500;
+const MIN_SCALE = 0.8;
+const SCALE_VARIATION = 0.4;
+const MAX_DRIFT_X = 40; // [-40, 40]
+const MAX_DELAY = 300;
+class ReactionFloatEffect {
+    container;
+    emoji;
+    count;
+    constructor(options) {
+        this.container = options.container;
+        this.emoji = options.emoji;
+        this.count = options.count ?? 6;
+    }
+    animate() {
+        for (let i = 0; i < this.count; i++) {
+            const delay = Math.random() * MAX_DELAY;
+            setTimeout(() => {
+                this.spawnReaction();
+            }, delay);
+        }
+    }
+    spawnReaction() {
+        const el = document.createElement("span");
+        el.className = "narrative-element-reaction--float-effect";
+        el.textContent = this.emoji;
+        const containerWidth = this.container.clientWidth;
+        const thresholdY = this.container.clientHeight / 2;
+        const startX = Math.random() * containerWidth;
+        const driftX = Math.random() * MAX_DRIFT_X * 2 - MAX_DRIFT_X;
+        const duration = MIN_DURATION + Math.random() * MAX_EXTRA_DURATION;
+        const randomScale = MIN_SCALE + Math.random() * SCALE_VARIATION;
+        el.style.left = `${startX}px`;
+        el.style.setProperty("--drift", `${driftX}px`);
+        el.style.setProperty("--y-threshold", `${thresholdY}px`);
+        el.style.setProperty("--duration", `${duration}ms`);
+        el.style.setProperty("--scale", `${randomScale}`);
+        this.container.appendChild(el);
+        setTimeout(() => {
+            el.remove();
+        }, duration);
+    }
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`ReactionFloatEffectOptions`]; }
+}
+
+class WidgetReactions extends WidgetBase {
+    static DEFAULTS = {
+        slide: null,
+        activateAfterCreate: false,
+        create: false,
+        localData: {},
+        layers: [],
+    };
+    static widgetClassName = "narrative-element-reactions";
+    model;
+    reactions;
+    constructor(element, options, widgetCallbacks, widgetDeps) {
+        super(element, options, widgetCallbacks, widgetDeps);
+        this.model = this.createReactionsModel();
+        this.reactions = Array.from(this.element.querySelectorAll(".narrative-element-reaction"));
+    }
+    onRefreshUserData(localData) {
+        super.onRefreshUserData(localData);
+        const data = this.getFromLocalData();
+        if (data.selectedIndex == null || data.widgetDoneAt == null || this.reactions[data.selectedIndex] === undefined) {
+            this.resetWidget();
+        }
+        else {
+            const reaction = this.reactions[data.selectedIndex];
+            this.initFromLocalData({ reaction, selectedIndex: data.selectedIndex, widgetDoneAt: data.widgetDoneAt });
+        }
+        this.firstOpenTime = new Date().getTime();
+    }
+    resetWidget() {
+        for (const reaction of this.reactions) {
+            reaction.classList.remove("narrative-element-reaction--selected");
+        }
+        this.element.classList.remove("narrative-element-reactions--done", "narrative-element-reactions--reacted");
+        if (this.model.resultDisplayMode === ResultDisplayMode.Always) {
+            const summary = this.getReactionsSummary();
+            this.displayResults(summary.allocation);
+        }
+    }
+    select(reaction) {
+        try {
+            if (this.isDone())
+                return;
+            const index = this.reactions.indexOf(reaction);
+            if (index === -1)
+                return;
+            reaction.classList.add("narrative-element-reaction--selected");
+            this.element.classList.add("narrative-element-reactions--reacted");
+            this.completeWidget(index);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    isDone() {
+        return this.getFromLocalData().selectedIndex != null;
+    }
+    showAnimationAfterSelection(emoji) {
+        if (!this.model.showAnimationAfterSelection)
+            return;
+        const geometryParent = this.element.closest(".narrative-slide-elements");
+        if (!geometryParent)
+            return;
+        new ReactionFloatEffect({ container: geometryParent, emoji, count: 15 /* fontSize: getComputedStyle(this.reactions[0]).fontSize */ }).animate();
+    }
+    initFromLocalData({ selectedIndex, widgetDoneAt, reaction }) {
+        try {
+            const summary = this.getReactionsSummary();
+            let allocation = summary.allocation;
+            if (summary.serverTimestamp == null || widgetDoneAt > summary.serverTimestamp) {
+                allocation = this.incrementAllocationByIndex(selectedIndex);
+            }
+            this.markWidgetAsDone(reaction);
+            this.displayResults(allocation);
+            this.startReadyPromise.then(() => {
+                if (this.disableTimer) {
+                    this.onWidgetComplete();
+                }
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    createReactionsModel() {
+        return {
+            icons: getTagData(this.element, "icons")?.split(",") ?? [],
+            showAnimationAfterSelection: Boolean(getTagData(this.element, "showAnimationAfterSelection")),
+            resultDisplayMode: getTagData(this.element, "resultDisplayMode"),
+            resultDisplayFormat: getTagData(this.element, "resultDisplayFormat"),
+        };
+    }
+    displayResults(results) {
+        try {
+            switch (this.model.resultDisplayFormat) {
+                case ResultDisplayFormat.Total:
+                    this.displayTotalResults(results);
+                    break;
+                case ResultDisplayFormat.Percentage:
+                    this.displayPercentageResults(results);
+                    break;
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    displayPercentageResults(counts) {
+        const totalCount = counts.reduce((sum, value) => sum + value, 0);
+        if (totalCount === 0)
+            return;
+        const formattedResults = counts.map(count => {
+            const percent = Math.min(Math.round((count / totalCount) * 1000) / 10, 100);
+            return `${percent}%`;
+        });
+        this.renderResults(formattedResults);
+    }
+    displayTotalResults(counts) {
+        const formattedResults = counts.map(count => {
+            if (count >= 1000000) {
+                const value = count / 1000000;
+                return `${+value.toPrecision(3)}M`;
+            }
+            if (count >= 1000) {
+                const value = count / 1000;
+                return `${+value.toPrecision(3)}K`;
+            }
+            return count.toString();
+        });
+        this.renderResults(formattedResults);
+    }
+    renderResults(results) {
+        if (this.model.resultDisplayMode === ResultDisplayMode.Hide)
+            return;
+        this.reactions.forEach((reaction, index) => {
+            const resultEl = reaction.querySelector(".narrative-element-reaction__result");
+            if (!resultEl)
+                return;
+            resultEl.textContent = results[index];
+        });
+    }
+    markWidgetAsDone(reaction) {
+        reaction.classList.add("narrative-element-reaction--selected");
+        this.element.classList.add("narrative-element-reactions--done");
+    }
+    getReactionsSummary() {
+        const sharedData = this.widgetDeps.slideApiDeps.getWidgetsSharedData(this.cardId, "reactions" /* Widgets.Reactions */);
+        let allocation = [];
+        let timestamp = null;
+        if (this.hasValidSharedData(sharedData)) {
+            allocation = sharedData[this.elementId].slice();
+            timestamp = sharedData.ts;
+        }
+        this.reactions.forEach((reaction, index) => {
+            if (allocation[index] == null || !isNumber(allocation[index]))
+                allocation[index] = 0;
+        });
+        return {
+            allocation,
+            serverTimestamp: timestamp,
+        };
+    }
+    hasValidSharedData(sharedData) {
+        if (!sharedData || sharedData[this.elementId] == null) {
+            return false;
+        }
+        const elementData = sharedData[this.elementId];
+        return isArray(elementData);
+    }
+    completeWidget(index) {
+        this.saveToLocalData(index);
+        this.sendStatEvent(index);
+        this.showAnimationAfterSelection(this.model.icons[index]);
+        const results = this.incrementAllocationByIndex(index);
+        this.displayResults(results);
+        this.markWidgetAsDone(this.reactions[index]);
+        if (this.disableTimer) {
+            this.onWidgetComplete();
+        }
+    }
+    sendStatEvent(selectedIndex) {
+        try {
+            const duration = new Date().getTime() - this.firstOpenTime;
+            this.sendStatisticEventToApp("w-reactions-answer", {
+                ...this.statisticEventBaseFieldsShortForm,
+                wi: this.elementId,
+                wa: selectedIndex,
+                d: duration,
+            }, {
+                ...this.statisticEventBaseFieldsFullForm,
+                widget_id: this.elementId,
+                widget_answer: selectedIndex,
+                duration_ms: duration,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    getLocalDataKeys() {
+        return {
+            selectedIndex: "_re_g_" + this.elementId + "_r",
+            widgetDoneAt: "_re_g_" + this.elementId + "_done_at",
+            selectedAt: "_&ts_re_g_" + this.elementId + "_a_at",
+        };
+    }
+    getFromLocalData() {
+        const keys = this.getLocalDataKeys();
+        return {
+            selectedIndex: this.localData[keys.selectedIndex],
+            widgetDoneAt: this.localData[keys.widgetDoneAt],
+        };
+    }
+    saveToLocalData(selectedIndex) {
+        const keys = this.getLocalDataKeys();
+        const time = Math.round(new Date().getTime() / 1000);
+        this.localData[keys.selectedIndex] = selectedIndex;
+        this.localData[keys.widgetDoneAt] = time;
+        this.localData[keys.selectedAt] = time;
+        this.setLocalData(this.localData, true);
+    }
+    incrementAllocationByIndex(index) {
+        const reactionsSummary = this.getReactionsSummary();
+        if (reactionsSummary.allocation[index] == null)
+            throw new Error(`No reaction allocation for the index <${index}>. Allocation: ${reactionsSummary.allocation.join(",")}`);
+        reactionsSummary.allocation[index]++;
+        return reactionsSummary.allocation;
+    }
+    static api = {
+        widgetClassName: WidgetReactions.widgetClassName,
+        onRefreshUserData: WidgetReactions.onRefreshUserData,
+        init: function (element, localData, widgetCallbacks, widgetDeps) {
+            WidgetReactions.initWidget(element, localData, (element, options) => new WidgetReactions(element, { ...options }, widgetCallbacks, widgetDeps));
+        },
+        onStart: function (element) {
+            WidgetReactions.getInstance(element)?.onStart();
+        },
+        onStop: function (element) {
+            WidgetReactions.getInstance(element)?.onStop();
+        },
+        select: function (element) {
+            const widgetElement = element.closest(`.${WidgetReactions.widgetClassName}`);
+            if (widgetElement) {
+                const widget = WidgetReactions.getInstance(widgetElement);
+                widget?.select(element);
+            }
+            return false;
+        },
+    };
+    static get [Symbol.for("___CTOR_ARGS___")]() { return [`HTMLElement`, `Partial`, `WidgetCallbacks`, `WidgetDeps`]; }
+}
+
 class EsModuleLayoutApi {
     slideApiPeerDeps;
     constructor(slideApiPeerDeps) {
@@ -24184,6 +24559,9 @@ class EsModuleLayoutApi {
     get widgetTimerApi() {
         return WidgetTimer.api;
     }
+    get widgetReactionsApi() {
+        return WidgetReactions.api;
+    }
     get VideoPlayer() {
         return this.slideApiPeerDeps().VODPlayer;
     }