https://incode.com/js/behaviors/solution-hero.js

1(function() {
2    if (window.__b_solutionHeroSwap) return;
3    window.__b_solutionHeroSwap = true;
4    var swap = document.querySelector("[data-sol-swap]");
5    if (!swap) return;
6    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
7    if (window.matchMedia("(max-width: 639px)").matches) return;
8    var words = swap.querySelectorAll(".sol-hero__swap-word");
9    if (words.length < 2) return;
10    var idx = 0;
11    var HOLD = 3e3;
12    var SETTLE = 650;
13    setInterval(function() {
14        var leaving = words[idx];
15        leaving.classList.remove("is-active");
16        leaving.classList.add("is-leaving");
17        setTimeout(function() {
18            leaving.classList.remove("is-leaving");
19        }, SETTLE);
20        idx = (idx + 1) % words.length;
21        words[idx].classList.add("is-active");
22    }, HOLD);
23})();
24
25(function() {
26    if (window.__b_solutionHow) return;
27    window.__b_solutionHow = true;
28    var wrap = document.querySelector("[data-sol-flow]");
29    var how = document.querySelector("[data-sol-how]");
30    if (!wrap || !how) return;
31    if ((window.location.pathname.indexOf("/use-cases/") !== -1 || wrap.hasAttribute("data-sol-standalone")) && window.matchMedia("(max-width: 1023px)").matches) {
32        var pStage = how.querySelector(".sol-how__stage");
33        var pDeck = how.querySelector(".sol-stage__deck");
34        var pItems = how.querySelectorAll(".sol-how__item");
35        if (pStage && pItems.length) {
36            pItems.forEach(function(li, i) {
37                var inDeck = pDeck && pDeck.querySelector('[data-sol-screen="' + i + '"]');
38                var pScreen = inDeck || pStage.querySelector('[data-sol-screen="' + i + '"]');
39                if (!pScreen) return;
40                var host = pScreen.closest("[data-dash-base]");
41                var pShot = document.createElement("span");
42                pShot.setAttribute("aria-hidden", "true");
43                if (host && host !== pScreen) {
44                    pShot.className = "sol-how__shot sol-how__shot--dash";
45                    var clone = host.cloneNode(true);
46                    var cscr = clone.querySelectorAll("[data-sol-screen]");
47                    for (var c = 0; c < cscr.length; c++) {
48                        cscr[c].classList.toggle("is-active", cscr[c].getAttribute("data-sol-screen") === String(i));
49                        cscr[c].removeAttribute("data-sol-screen");
50                    }
51                    pShot.appendChild(clone);
52                } else if (!inDeck || pScreen.hasAttribute("data-dash-base")) {
53                    pShot.className = "sol-how__shot sol-how__shot--dash";
54                    pScreen.setAttribute("data-dash-fit", "");
55                    if (!pScreen.getAttribute("data-dash-base")) {
56                        pScreen.setAttribute("data-dash-base", "560");
57                    }
58                    pShot.appendChild(pScreen);
59                } else {
60                    pShot.className = "sol-how__shot";
61                    var pFrame = document.createElement("span");
62                    pFrame.className = "sol-stage__frame sol-how__shot-phone";
63                    pFrame.appendChild(pScreen);
64                    pShot.appendChild(pFrame);
65                }
66                li.appendChild(pShot);
67            });
68            how.classList.add("is-paired");
69            if (window.__dashFit) window.__dashFit();
70        }
71    }
72    var buttons = how.querySelectorAll("[data-sol-step]");
73    var screens = wrap.querySelectorAll("[data-sol-screen]");
74    if (!buttons.length) return;
75    var restKey = "0";
76    for (var r = 0; r < screens.length; r++) {
77        if (screens[r].getAttribute("data-sol-screen") === "rest") {
78            restKey = "rest";
79            break;
80        }
81    }
82    var heroFrame = wrap.querySelector(".sol-hero__frame");
83    var howStage = wrap.querySelector(".sol-how__stage");
84    var floatPhone = wrap.querySelector(".sol-phonecol__phone");
85    var wide = window.matchMedia("(min-width: 1024px)");
86    var still = window.matchMedia("(prefers-reduced-motion: reduce)");
87    var HOLD = 6e3;
88    how.style.setProperty("--sol-hold", HOLD / 1e3 + "s");
89    var idx = 0;
90    function setScreens(key) {
91        for (var j = 0; j < screens.length; j++) {
92            var k = screens[j].getAttribute("data-sol-screen");
93            screens[j].classList.toggle("is-active", k === key || k === "rest" && key === "0");
94        }
95    }
96    function activate(next, screenKey) {
97        idx = next;
98        var key = String(next);
99        for (var i = 0; i < buttons.length; i++) {
100            buttons[i].classList.toggle("is-active", buttons[i].getAttribute("data-sol-step") === key);
101            buttons[i].classList.toggle("is-done", i < next);
102        }
103        setScreens(screenKey || key);
104    }
105    var floating = false;

106    var ticking = false;
107    var lastKey = null;
108    function bandFor(p) {
109        if (p <= 0) return "rest";
110        var n = buttons.length;
111        return String(Math.min(n - 1, Math.floor(p * n)));
112    }
113    function update() {
114        ticking = false;
115        if (!floating) return;
116        wrap.classList.toggle("is-scrolled", window.scrollY > 40);
117        if (howStage && floatPhone) {
118            var ph = floatPhone.getBoundingClientRect();
119            if (heroFrame) {
120                wrap.classList.toggle("is-hero-left", heroFrame.getBoundingClientRect().bottom < ph.bottom + 8);
121            }
122            wrap.classList.toggle("is-how-near", howStage.getBoundingClientRect().top < ph.bottom - 8);
123        }
124        var range = how.offsetHeight - window.innerHeight;
125        if (range <= 0) return;
126        var p = -how.getBoundingClientRect().top / range;
127        var key = bandFor(p);
128        if (key === lastKey) return;
129        lastKey = key;
130        if (key === "rest") {
131            activate(0, restKey);
132        } else {
133            activate(Number(key));
134        }
135    }
136    function onScroll() {
137        if (!ticking) {
138            ticking = true;
139            requestAnimationFrame(update);
140        }
141    }
142    var timer = null;
143    function stopAuto() {
144        if (timer) {
145            clearInterval(timer);
146            timer = null;
147        }
148    }
149    function startAuto() {
150        if (timer || still.matches || floating) return;
151        timer = setInterval(function() {
152            activate((idx + 1) % buttons.length);
153        }, HOLD);
154    }
155    var io = null;
156    if ("IntersectionObserver" in window) {
157        io = new IntersectionObserver(function(entries) {
158            if (entries[0].isIntersecting) startAuto(); else stopAuto();
159        }, {
160            threshold: .35
161        });
162    }
163    var standalone = wrap.hasAttribute("data-sol-standalone");
164    function applyMode() {
165        var next = wide.matches && !still.matches;
166        if (next === floating) return;
167        floating = next;
168        wrap.classList.toggle("is-float", floating);
169        lastKey = null;
170        if (floating) {
171            stopAuto();
172            if (io) io.unobserve(how);
173            update();
174        } else {
175            activate(0);
176            if (io) io.observe(how); else startAuto();
177        }
178    }
179    for (var i = 0; i < buttons.length; i++) {
180        (function(btn, n) {
181            btn.addEventListener("click", function() {
182                if (floating) {
183                    var top = how.getBoundingClientRect().top + window.scrollY;
184                    var range = how.offsetHeight - window.innerHeight;
185                    var count = buttons.length;
186                    window.scrollTo({
187                        top: top + range * ((n + .55) / count),
188                        behavior: "smooth"
189                    });
190                } else {
191                    activate(n);
192                    stopAuto();
193                    startAuto();
194                }
195            });
196        })(buttons[i], i);
197    }
198    var glideId = null;
199    var glideDir = 0;
200    function dockY() {
201        var top = how.getBoundingClientRect().top + window.scrollY;
202        return top + Math.max(0, how.offsetHeight - window.innerHeight) * .14;
203    }
204    function cancelGlide() {
205        if (glideId) {
206            cancelAnimationFrame(glideId);
207            glideId = null;
208            glideDir = 0;
209        }
210    }
211    function glideTo(target) {
212        cancelGlide();
213        var from = window.scrollY;
214        glideDir = target > from ? 1 : -1;
215        var dur = Math.min(1800, 900 + Math.abs(target - from) / window.innerHeight * 520);
216        var start = null;
217        function step(ts) {
218            if (start === null) start = ts;
219            var t = Math.min(1, (ts - start) / dur);
220            var e = t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
221            window.scrollTo({
222                top: from + (target - from) * e,
223                behavior: "instant"
224            });
225            if (t < 1) {
226                glideId = requestAnimationFrame(step);
227            } else {
228                glideId = null;
229                glideDir = 0;
230            }
231        }
232        glideId = requestAnimationFrame(step);
233    }
234    function onWheel(e) {
235        if (!floating || standalone) return;
236        if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
237        var dir = e.deltaY > 0 ? 1 : -1;
238        if (glideId) {
239            e.preventDefault();
240            if (dir !== glideDir && Math.abs(e.deltaY) > 8) glideTo(dir > 0 ? dockY() : 0);
241            return;
242        }
243        var y = window.scrollY;
244        var dock = dockY();
245        if (dir > 0) {
246            if (y >= dock - 2) return;
247            e.preventDefault();
248            glideTo(dock);
249        } else {
250            if (y > dock + 2 || y <= 2) return;
251            e.preventDefault();
252            glideTo(0);
253        }
254    }
255    window.addEventListener("wheel", onWheel, {
256        passive: false
257    });
258    window.addEventListener("scroll", onScroll, {
259        passive: true
260    });
261    window.addEventListener("resize", onScroll, {
262        passive: true
263    });
264    if (wide.addEventListener) {
265        wide.addEventListener("change", applyMode);
266        still.addEventListener("change", applyMode);
267    }
268    applyMode();
269    if (!floating) activate(0);
270})();
271
272(function() {
273    if (window.__b_solutionDeploy) return;
274    window.__b_solutionDeploy = true;
275    var section = document.querySelector("[data-sol-deploy]");
276    if (!section) return;
277    if (window.location.pathname.indexOf("/use-cases/") !== -1 && window.matchMedia("(max-width: 1023px)").matches) {
278        var mStage = section.querySelector(".sol-deploy__stage");
279        if (mStage) {
280            var mWrap = document.createElement("div");
281            mWrap.className = "sol-deploy__mcta";
282            section.querySelectorAll(".sol-deploy__panel").forEach(function(panel) {
283                var cta = panel.querySelector(".sol-deploy__cta");
284                if (!cta) return;
285                var slot = document.createElement("div");
286                slot.className = "sol-deploy__mcta-slot" + (panel.classList.contains("is-active") ? " is-active" : "");
287                slot.setAttribute("data-sol-deploy-panel", panel.getAttribute("data-sol-deploy-panel"));
288                slot.appendChild(cta);
289                mWrap.appendChild(slot);
290            });
291            if (mWrap.children.length) mStage.after(mWrap);
292        }
293    }
294    var buttons = section.querySelectorAll("[data-sol-deploy-step]");
295    var visuals = section.querySelectorAll("[data-sol-deploy-vis]");
296    var layers = section.querySelectorAll("[data-sol-deploy-layer]");
297    var panels = section.querySelectorAll("[data-sol-deploy-panel]");
298    if (!buttons.length) return;
299    var still = window.matchMedia("(prefers-reduced-motion: reduce)");
300    var HOLD = 5e3;
301    var idx = 0;
302    function toggleBy(list, attr, key) {
303        for (var i = 0; i < list.length; i++) {
304            list[i].classList.toggle("is-active", list[i].getAttribute(attr) === key);
305        }
306    }
307    function activate(next) {
308        idx = next;
309        var key = String(next);
310        toggleBy(buttons, "data-sol-deploy-step", key);
311        toggleBy(visuals, "data-sol-deploy-vis", key);
312        toggleBy(layers, "data-sol-deploy-layer", key);
313        toggleBy(panels, "data-sol-deploy-panel", key);
314        for (var i = 0; i < buttons.length; i++) {
315            buttons[i].setAttribute("aria-selected", buttons[i].getAttribute("data-sol-deploy-step") === key ? "true" : "false");
316        }
317    }
318    var timer = null;
319    var hovering = false;

320    var inView = false;
321    function stopAuto() {
322        if (timer) {
323            clearInterval(timer);
324            timer = null;
325        }
326    }
327    function startAuto() {
328        if (timer || still.matches || !inView || hovering) return;
329        timer = setInterval(function() {
330            activate((idx + 1) % buttons.length);
331        }, HOLD);
332    }
333    section.classList.add("is-choreo");
334    var CHOREO = [ [ "is-c1", 400 ], [ "is-c2", 1400 ], [ "is-c3", 2250 ], [ "is-c4", 3250 ], [ "is-c5", 4100 ] ];
335    var choreoTimers = [];
336    function playChoreo() {
337        resetChoreo();
338        if (still.matches) {
339            for (var i = 0; i < CHOREO.length; i++) section.classList.add(CHOREO[i][0]);
340            startAuto();
341            return;
342        }
343        for (var i = 0; i < CHOREO.length; i++) {
344            (function(cls, at) {
345                choreoTimers.push(setTimeout(function() {
346                    section.classList.add(cls);
347                }, at));
348            })(CHOREO[i][0], CHOREO[i][1]);
349        }
350        choreoTimers.push(setTimeout(startAuto, 5200));
351    }
352    function resetChoreo() {
353        for (var i = 0; i < choreoTimers.length; i++) clearTimeout(choreoTimers[i]);
354        choreoTimers = [];
355        for (var j = 0; j < CHOREO.length; j++) section.classList.remove(CHOREO[j][0]);
356    }
357    if ("IntersectionObserver" in window) {
358        new IntersectionObserver(function(entries) {
359            inView = entries[0].isIntersecting;
360            if (inView) playChoreo(); else {
361                stopAuto();
362                resetChoreo();
363                activate(0);
364            }
365        }, {
366            threshold: .4
367        }).observe(section);
368    } else {
369        inView = true;
370        section.classList.add("is-pop", "is-branded");
371        startAuto();
372    }
373    section.addEventListener("mouseenter", function() {
374        hovering = true;
375        stopAuto();
376    });
377    section.addEventListener("mouseleave", function() {
378        hovering = false;
379        startAuto();
380    });
381    for (var i = 0; i < buttons.length; i++) {
382        (function(btn, n) {
383            btn.addEventListener("click", function() {
384                activate(n);
385                stopAuto();
386                startAuto();
387            });
388        })(buttons[i], i);
389    }
390    activate(0);
391})();