@inappstory/slide-api 0.1.34 → 0.1.36

package/dist/index.cjs

@@ -1009,7 +1009,9 @@ const animationApi = {
                     removeClass(elements[i], "active");
                     removeClass(elements[i], "animated");
                     elements[i].style.setProperty("transform", "");
-                    elements[i].style.setProperty("filter", "");
+                    if (hasClass(elements[i], "narrative-element-animation-blur")) {
+                        elements[i].style.setProperty("filter", "");
+                    }
                 }
             }
         }
@@ -5992,6 +5994,9 @@ class SlideTimer {
             if (currentTime != null) {
                 // timeLeft correction
                 this.timeLeft = this.duration - currentTime;
+                if (this.timeLeft < 0) {
+                    this.timeLeft = 0;
+                }
             }
             this.tick();
         }
@@ -6008,6 +6013,9 @@ class SlideTimer {
             }
             const dtDiff = new Date().getTime() - rafStartTime;
             this.timeLeft -= dtDiff;
+            if (this.timeLeft < 0) {
+                this.timeLeft = 0;
+            }
             let progressPercent = Math.round(((this.duration - this.timeLeft) / this.duration) * 100 * 10000) / 10000;
             if (progressPercent > 100) {
                 progressPercent = 100;
@@ -6077,14 +6085,16 @@ class Slider {
             });
             this.slidesFirstRenders[i] = item;
         }
-        const slideWrapper = this.createSliderElement({
+        const { sliderWrapper, safeAreaView } = this.createSliderElement({
             slides: config.slides,
             nonce: config.nonce,
             slideRender: config.slideRender,
             navbarAppearance: config.navbarAppearance,
+            singleSlideTimerAppearance: config.singleSlideTimerAppearance,
         });
-        config.root.appendChild(slideWrapper);
-        this.slideWrapperElement = slideWrapper;
+        config.root.appendChild(sliderWrapper);
+        this.sliderWrapperElement = sliderWrapper;
+        this.safeAreaViewElement = safeAreaView;
         this.timelineController = createTimelineController(TimelineController, this.slides, this.config.getLayoutDirection.bind(this));
         // cardMounted: (card: HTMLElement) => Promise<void>
         requestAnimationFrame(async () => {
@@ -6100,12 +6110,16 @@ class Slider {
     }
     slides = [];
     sliderTrack = null;
-    bulletsContainer = null;
     slidesFirstRenders = [];
-    slideWrapperElement;
+    sliderWrapperElement;
+    safeAreaViewElement;
+    isBulletsActive = false;
+    isSingleSlideTimerActive = false;
+    pausedAt = null;
     timelineController;
-    assembleNavbarCssVariables(navbarAppearance) {
+    assembleAppearanceCssVariables(navbarAppearance, singleSlideTimerAppearance) {
         let css = "";
+        /** Navbar variables **/
         if (navbarAppearance.edge_offset != null) {
             css += `--navbar-edge-offset: ${navbarAppearance.edge_offset};`;
         }
@@ -6148,25 +6162,53 @@ class Slider {
         if (navbarAppearance.horizontal_padding != null) {
             css += `--navbar-horizontal-padding: ${navbarAppearance.horizontal_padding};`;
         }
-        return `.cards-slider {${css}`;
+        /** SingleSlideTimer variables **/
+        if (singleSlideTimerAppearance.edge_offset != null) {
+            css += `--timer-edge-offset: ${singleSlideTimerAppearance.edge_offset};`;
+        }
+        if (singleSlideTimerAppearance.timeline_background_color != null) {
+            css += `--timer-timeline-background-color: ${singleSlideTimerAppearance.timeline_background_color};`;
+        }
+        if (singleSlideTimerAppearance.timeline_fill_color != null) {
+            css += `--timer-timeline-fill-color: ${singleSlideTimerAppearance.timeline_fill_color};`;
+        }
+        if (singleSlideTimerAppearance.timeline_height != null) {
+            css += `--timer-timeline-height: ${singleSlideTimerAppearance.timeline_height};`;
+        }
+        if (singleSlideTimerAppearance.timeline_border_radius != null) {
+            css += `--timer-timeline-border-radius: ${singleSlideTimerAppearance.timeline_border_radius};`;
+        }
+        if (singleSlideTimerAppearance.horizontal_margin != null) {
+            css += `--timer-horizontal-margin: ${singleSlideTimerAppearance.horizontal_margin};`;
+        }
+        return `.cards-slider {${css}}`;
     }
-    createSliderElement = ({ slides, nonce, slideRender, navbarAppearance, }) => {
+    createSliderElement = ({ slides, nonce, slideRender, navbarAppearance, singleSlideTimerAppearance, }) => {
         const style = document.createElement("style");
         if (nonce != null) {
             style.nonce = nonce;
         }
-        style.innerText = this.assembleNavbarCssVariables(navbarAppearance);
+        style.innerText = this.assembleAppearanceCssVariables(navbarAppearance, singleSlideTimerAppearance);
         const slider = document.createElement("div");
         slider.classList.add("cards-slider");
         const track = document.createElement("div");
         track.classList.add("cards-slider__track");
         this.sliderTrack = track;
-        const [bullets, updateTimelineProgress] = this.createBulletPoints(slides.length, this.config.getLayoutDirection.bind(this), navbarAppearance.position);
-        this.bulletsContainer = bullets;
+        const [isBulletsActive, bullets, bulletsUpdateTimelineProgress] = this.createBulletPoints(slides.length, this.config.getLayoutDirection.bind(this), navbarAppearance.position);
+        this.isBulletsActive = isBulletsActive;
+        const [isSingleSlideTimerActive, singleSlideTimer, singleSlideTimerUpdateTimelineProgress] = this.createSingleSlideTimer(this.config.getLayoutDirection.bind(this), singleSlideTimerAppearance.position, singleSlideTimerAppearance.timeline_direction);
+        this.isSingleSlideTimerActive = isSingleSlideTimerActive;
         this.slides = slides.map((slide, i) => ({
             element: slideRender(slide, i, this.slidesFirstRenders[i].firstRenderCallPromise),
             timer: new SlideTimer(cb => window.requestAnimationFrame(cb), handle => window.cancelAnimationFrame(handle), progressPercent => this.timelineController.onSlideTimerUpdate(i, progressPercent), this.onSlideTimerEnd.bind(this)),
-            updateTimelineProgress: (progressPercent, isActive) => updateTimelineProgress(i, progressPercent, isActive),
+            updateTimelineProgress: (progressPercent, isActive) => {
+                if (isBulletsActive) {
+                    bulletsUpdateTimelineProgress(i, progressPercent, isActive);
+                }
+                if (isSingleSlideTimerActive) {
+                    singleSlideTimerUpdateTimelineProgress(progressPercent);
+                }
+            },
         }));
         for (let i = 0; i < this.slides.length; ++i) {
             const slideElement = document.createElement("div");
@@ -6181,12 +6223,14 @@ class Slider {
         const safeAreaRelativeZoneView = document.createElement("div");
         safeAreaRelativeZoneView.classList.add("safe-area-relative-zone-view");
         safeAreaRelativeZoneView.appendChild(bullets);
+        safeAreaRelativeZoneView.appendChild(singleSlideTimer);
         safeAreaView.appendChild(safeAreaRelativeZoneView);
         slider.appendChild(safeAreaView);
         slider.appendChild(style);
-        return slider;
+        return { sliderWrapper: slider, safeAreaView };
     };
     createBulletPoints(count, getLayoutDirection, position) {
+        let isActive = true;
         const bullets = document.createElement("div");
         bullets.classList.add("cards-slider__navbar");
         // force hide bullets container for single slide
@@ -6194,6 +6238,7 @@ class Slider {
             position = 0;
         }
         if (position === 0) {
+            isActive = false;
             bullets.classList.add("cards-slider__navbar--position-none");
         }
         else if (position === 1) {
@@ -6202,10 +6247,6 @@ class Slider {
         else if (position === 2) {
             bullets.classList.add("cards-slider__navbar--position-bottom");
         }
-        else {
-            // default
-            bullets.classList.add("cards-slider__navbar--position-bottom");
-        }
         bullets.dir = getLayoutDirection();
         // skip creating view elements for single slide
         if (count > 1) {
@@ -6252,7 +6293,56 @@ class Slider {
                 }
             }
         };
-        return [bullets, onUpdateTimelineProgress];
+        return [isActive, bullets, onUpdateTimelineProgress];
+    }
+    createSingleSlideTimer(getLayoutDirection, position, timelineDirection) {
+        let isActive = true;
+        const timer = document.createElement("div");
+        timer.classList.add("cards-slider__timer");
+        if (position === 0) {
+            isActive = false;
+            timer.classList.add("cards-slider__timer--position-none");
+        }
+        else if (position === 1) {
+            timer.classList.add("cards-slider__timer--position-top");
+        }
+        else if (position === 2) {
+            timer.classList.add("cards-slider__timer--position-bottom");
+        }
+        timer.dir = getLayoutDirection();
+        if (timelineDirection === 0) {
+            timer.classList.add("cards-slider__timer--straight-direction");
+        }
+        else if (timelineDirection === 1) {
+            timer.classList.add("cards-slider__timer--reverse-direction");
+        }
+        const timeline = document.createElement("div");
+        timeline.classList.add("cards-slider__timer_timeline", "touchable");
+        const timelineFill = document.createElement("div");
+        timelineFill.classList.add("cards-slider__timer_timeline-fill");
+        timeline.append(timelineFill);
+        timer.appendChild(timeline);
+        const onUpdateTimelineProgress = (progress) => {
+            if (timelineFill != null) {
+                // timeline straight direction
+                if (timelineDirection === 0) {
+                    if (this.config.getLayoutDirection() === "rtl") {
+                        progress = -1 * progress;
+                    }
+                    // timeline reverse direction
+                }
+                else if (timelineDirection === 1) {
+                    if (this.config.getLayoutDirection() === "ltr") {
+                        progress = -100 - progress;
+                    }
+                    if (this.config.getLayoutDirection() === "rtl") {
+                        progress = 100 + progress;
+                    }
+                }
+                timelineFill.style.setProperty("transform", `translateX(${progress}%)`);
+            }
+        };
+        return [isActive, timer, onUpdateTimelineProgress];
     }
     async showByIndex(newIndex) {
         const prevIndex = this.activeIndex;
@@ -6301,7 +6391,11 @@ class Slider {
             this.slidesFirstRenders[index].called = true;
             showSlidePromise = new Promise(resolve => {
                 this.slidesFirstRenders[index].firstRenderCall(resolve);
-            }).then(_ => _);
+            })
+                .then(data => data)
+                .catch(reason => {
+                throw new Error(reason);
+            });
         }
         else {
             showSlidePromise = this.config.onBeforeShowSlide(this.slides[index].element, index);
@@ -6331,6 +6425,8 @@ class Slider {
     }
     onUpdateSizeMetrics(metrics) {
         // this.slideTo(this.activeIndex, 0);
+        // todo CSP violation
+        this.safeAreaViewElement.style.fontSize = metrics.fontSize;
     }
     getSlideOffset(index) {
         if (!this.slides.length)
@@ -6381,8 +6477,9 @@ class Slider {
     }
     destroy() {
         this.activeSlide?.timer.stop();
-        if (this.slideWrapperElement != null && this.config.root != null) {
-            this.config.root.removeChild(this.slideWrapperElement);
+        this.pausedAt = null;
+        if (this.sliderWrapperElement != null && this.config.root != null) {
+            this.config.root.removeChild(this.sliderWrapperElement);
         }
     }
     async updateTimeline(slideIndex, action, currentTime, duration, showLoader, showError) {
@@ -6408,10 +6505,14 @@ class Slider {
                     resumeTimer = true;
                 }
                 if (currentTime === duration) {
-                    // skip timer start for already ended layer timeline
                     // skip timer start for already ended layer timeline
                     resumeTimer = false;
                 }
+                // if single slide timer mode - calc diff for blur time, override currentTime
+                if (this.isSingleSlideTimerActive && this.pausedAt != null) {
+                    currentTime += new Date().getTime() - this.pausedAt;
+                    // we must resume timer - for trigger done callback and hide Card (SingleSlideTimer business logic)
+                }
                 if (resumeTimer) {
                     this.activeSlide?.timer.resume(currentTime, duration);
                 }
@@ -6422,6 +6523,9 @@ class Slider {
                     this.config.onSlideDataWaiting();
                 }
                 this.activeSlide?.timer.pause();
+                if (this.isSingleSlideTimerActive) {
+                    this.pausedAt = new Date().getTime();
+                }
                 // console.log("TIMELINE_ACTION.PAUSE", { activeSlide: this.activeSlide, duration });
                 break;
             }
@@ -6449,6 +6553,7 @@ class Slider {
             root: HTMLElement;
             nonce?: string;
             navbarAppearance: NavbarAppearance;
+            singleSlideTimerAppearance: SingleSlideTimerAppearance;
             slideRender: SlideRender<T>;
             onSlideMounted: OnSlideMounted;
             onBeforeShowSlide: OnBeforeShowSlide;
@@ -6660,12 +6765,33 @@ class CardApi {
         return this.activeSlide.showSlide(html);
     }
     slider = null;
-    async showSlides(slides, cardAppearance, index = 0) {
+    globalCssVariablesImported = false;
+    importGlobalCssVariables(safeAreaInsetTop, safeAreaInsetBottom) {
+        if (!this.globalCssVariablesImported) {
+            const style = document.createElement("style");
+            if (this.config.nonce != null) {
+                style.nonce = this.config.nonce;
+            }
+            let css = "";
+            if (safeAreaInsetBottom != null) {
+                css += `--safe-area-inset-top: ${safeAreaInsetTop}px;`;
+            }
+            if (safeAreaInsetBottom != null) {
+                css += `--safe-area-inset-bottom: ${safeAreaInsetBottom}px;`;
+            }
+            style.innerText = `:root {${css}}`;
+            this.config.root.appendChild(style);
+            this.globalCssVariablesImported = true;
+        }
+    }
+    async showSlides(slides, cardAppearance, index = 0, config = {}) {
         this.slidesMode = 1 /* SLIDES_MODE.MULTIPLE */;
         if (this.cardLoadingStateController === null) {
             this.cardLoadingStateController = new CardLoadingStateController(this.sdkApi.onCardLoadingStateChange.bind(this.sdkApi));
         }
         this.cardLoadingStateController.onSetLoadStartState();
+        // TODO mv to CardApi CTOR
+        this.importGlobalCssVariables(config.safeAreaInsetTop, config.safeAreaInsetBottom);
         slides.forEach((content, index) => {
             if (this.slides[index] == null) {
                 const item = { content, resourcesReadyPromise: null };
@@ -6831,6 +6957,7 @@ class CardApi {
         if (this.slider != null) {
             this.slider.destroy();
         }
+        const singleSlideTimerAppearance = cardAppearance.singleSlideTimer ?? {};
         this.slider = new Slider({
             root: this.config.root,
             slides: this.slides.map(({ content, resourcesReadyPromise }) => ({
@@ -6839,6 +6966,7 @@ class CardApi {
             })),
             nonce: this.config.nonce,
             navbarAppearance: cardAppearance.navbar ?? {},
+            singleSlideTimerAppearance: singleSlideTimerAppearance,
             slideRender,
             onSlideMounted,
             onBeforeShowSlide,
@@ -6847,7 +6975,16 @@ class CardApi {
             onShowSlide,
             onSlideLeft,
             getLayoutDirection: () => this.layoutDirection,
-            onSlideTimerEnd: () => this.activeSlide.slideTimerEnd(),
+            onSlideTimerEnd: () => {
+                // special for IAM with type Toast - single slide, close toast after slideTimerEnd
+                // singleSlideTimerAppearance.position !== 0 (SingleSlideTimer is visible) - sign that this is Toast IAM
+                if (singleSlideTimerAppearance.position !== 0) {
+                    this.activeSlide.slideApiDeps.closeCard("Single slide timer end");
+                }
+                else {
+                    this.activeSlide.slideTimerEnd();
+                }
+            },
             onSlideChangeActiveIndex: index => (this.activeSlide = this.slides[index].slide),
             onSlideStart: () => {
                 // return Promise.resolve({currentTime: 0});
@@ -6859,6 +6996,8 @@ class CardApi {
             onSlideDataResume: () => this.cardLoadingStateController.onSetLoadEndState(),
             onSlideDataError: () => this.cardLoadingStateController.onSetLoadEndState(),
         });
+        // to set font size at SafeAreaView inside Slider
+        this.slider.onUpdateSizeMetrics(this.sizeMetrics);
         await this.slider.showByIndex(index);
         // return await onShowActiveCard;
     }
@@ -6971,12 +7110,14 @@ class CardApi {
         this._sdkClientVariables = variables;
     }
     setSlideInCacheStatus(index, status) {
-        if (this.slides[index] != null && this.slides[index].resourcesReadyPromisesResolver != null) {
-            if (status === 1 /* SLIDE_IN_CACHE_STATUS.SUCCESS */) {
-                this.slides[index].resourcesReadyPromisesResolver.resolve();
-            }
-            else {
-                this.slides[index].resourcesReadyPromisesResolver.reject();
+        if (this.slides[index] != null) {
+            if (this.slides[index].resourcesReadyPromisesResolver != null) {
+                if (status === 1 /* SLIDE_IN_CACHE_STATUS.SUCCESS */) {
+                    this.slides[index].resourcesReadyPromisesResolver.resolve();
+                }
+                else {
+                    this.slides[index].resourcesReadyPromisesResolver.reject();
+                }
             }
         }
         else {
@@ -7380,22 +7521,27 @@ class TimerRenderer {
     render(time) {
         const container = document.createElement("div");
         container.classList.add("narrative-element-timer__container");
-        const days = this.createGroup("d");
-        const hours = this.createGroup("h");
-        const minutes = this.createGroup("m");
-        const seconds = this.createGroup("s");
         if (time.days > 0) {
-            container.appendChild(days);
-            container.appendChild(this.createDelimiter());
-        }
-        container.appendChild(hours);
-        container.appendChild(this.createDelimiter());
-        container.appendChild(minutes);
-        container.appendChild(this.createDelimiter());
-        container.appendChild(seconds);
+            this.renderByFormat(container, "d:h:m");
+        }
+        else if (time.hours > 0) {
+            this.renderByFormat(container, "h:m:s");
+        }
+        else {
+            this.renderByFormat(container, "m:s");
+        }
         this.setTime(time);
         return container;
     }
+    renderByFormat(container, format) {
+        const parts = format.split(":");
+        for (let i = 0; i < parts.length; i++) {
+            container.appendChild(this.createGroup(parts[i]));
+            if (i < parts.length - 1) {
+                container.appendChild(this.createDelimiter());
+            }
+        }
+    }
     pad(num) {
         return num.toString().padStart(2, "0");
     }
@@ -7424,20 +7570,28 @@ class TimerRenderer {
     }
     setDays(days) {
         const padded = this.pad(days);
+        if (!this.digits["d1"] || !this.digits["d2"])
+            return;
         this.digits["d1"].textContent = padded[0];
         this.digits["d2"].textContent = padded[1];
     }
     setHours(hours) {
+        if (!this.digits["h1"] || !this.digits["h2"])
+            return;
         const padded = this.pad(hours);
         this.digits["h1"].textContent = padded[0];
         this.digits["h2"].textContent = padded[1];
     }
     setMinutes(minutes) {
+        if (!this.digits["m1"] || !this.digits["m2"])
+            return;
         const padded = this.pad(minutes);
         this.digits["m1"].textContent = padded[0];
         this.digits["m2"].textContent = padded[1];
     }
     setSeconds(seconds) {
+        if (!this.digits["s1"] || !this.digits["s2"])
+            return;
         const padded = this.pad(seconds);
         this.digits["s1"].textContent = padded[0];
         this.digits["s2"].textContent = padded[1];