@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/carousel/engine/SlideFocus.js

@@ -0,0 +1,39 @@
+import { isBoolean, isNumber } from "./utils.js";
+export function SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus) {
+    const focusListenerOptions = { passive: true, capture: true };
+    let lastTabPressTime = 0;
+    function init(emblaApi) {
+        if (!watchFocus)
+            return;
+        function defaultCallback(index) {
+            const nowTime = new Date().getTime();
+            const diffTime = nowTime - lastTabPressTime;
+            if (diffTime > 10)
+                return;
+            eventHandler.emit("slideFocusStart");
+            root.scrollLeft = 0;
+            const group = slideRegistry.findIndex((group) => group.includes(index));
+            if (!isNumber(group))
+                return;
+            scrollBody.useDuration(0);
+            scrollTo.index(group, 0);
+            eventHandler.emit("slideFocus");
+        }
+        eventStore.add(document, "keydown", registerTabPress, false);
+        slides.forEach((slide, slideIndex) => {
+            eventStore.add(slide, "focus", (evt) => {
+                if (isBoolean(watchFocus) || watchFocus(emblaApi, evt)) {
+                    defaultCallback(slideIndex);
+                }
+            }, focusListenerOptions);
+        });
+    }
+    function registerTabPress(event) {
+        if (event.code === "Tab")
+            lastTabPressTime = new Date().getTime();
+    }
+    const self = {
+        init,
+    };
+    return self;
+}

package/carousel/engine/SlideLooper.d.ts

@@ -0,0 +1,18 @@
+import type { AxisType } from "./Axis.js";
+import { type Vector1DType } from "../../motion/Vector1d.js";
+import { type TranslateType } from "./Translate.js";
+type LoopPointType = {
+    loopPoint: number;
+    index: number;
+    translate: TranslateType;
+    slideLocation: Vector1DType;
+    target: () => number;
+};
+export type SlideLooperType = {
+    canLoop: () => boolean;
+    clear: () => void;
+    loop: () => void;
+    loopPoints: LoopPointType[];
+};
+export declare function SlideLooper(axis: AxisType, viewSize: number, contentSize: number, slideSizes: number[], slideSizesWithGaps: number[], snaps: number[], scrollSnaps: number[], location: Vector1DType, slides: HTMLElement[]): SlideLooperType;
+export {};

package/carousel/engine/SlideLooper.js

@@ -0,0 +1,78 @@
+import { arrayKeys } from "./utils.js";
+import { Vector1D } from "../../motion/Vector1d.js";
+import { Translate } from "./Translate.js";
+export function SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, location, slides) {
+    const roundingSafety = 0.5;
+    const ascItems = arrayKeys(slideSizesWithGaps);
+    const descItems = arrayKeys(slideSizesWithGaps).reverse();
+    const loopPoints = startPoints().concat(endPoints());
+    function removeSlideSizes(indexes, from) {
+        return indexes.reduce((a, i) => {
+            return a - slideSizesWithGaps[i];
+        }, from);
+    }
+    function slidesInGap(indexes, gap) {
+        return indexes.reduce((a, i) => {
+            const remainingGap = removeSlideSizes(a, gap);
+            return remainingGap > 0 ? a.concat([i]) : a;
+        }, []);
+    }
+    function findSlideBounds(offset) {
+        return snaps.map((snap, index) => ({
+            start: snap - slideSizes[index] + roundingSafety + offset,
+            end: snap + viewSize - roundingSafety + offset,
+        }));
+    }
+    function findLoopPoints(indexes, offset, isEndEdge) {
+        const slideBounds = findSlideBounds(offset);
+        return indexes.map((index) => {
+            const initial = isEndEdge ? 0 : -contentSize;
+            const altered = isEndEdge ? contentSize : 0;
+            const boundEdge = isEndEdge ? "end" : "start";
+            const loopPoint = slideBounds[index][boundEdge];
+            return {
+                index,
+                loopPoint,
+                slideLocation: Vector1D(-1),
+                translate: Translate(axis, slides[index]),
+                target: () => (location.get() > loopPoint ? initial : altered),
+            };
+        });
+    }
+    function startPoints() {
+        const gap = scrollSnaps[0];
+        const indexes = slidesInGap(descItems, gap);
+        return findLoopPoints(indexes, contentSize, false);
+    }
+    function endPoints() {
+        const gap = viewSize - scrollSnaps[0] - 1;
+        const indexes = slidesInGap(ascItems, gap);
+        return findLoopPoints(indexes, -contentSize, true);
+    }
+    function canLoop() {
+        return loopPoints.every(({ index }) => {
+            const otherIndexes = ascItems.filter((i) => i !== index);
+            return removeSlideSizes(otherIndexes, viewSize) <= 0.1;
+        });
+    }
+    function loop() {
+        loopPoints.forEach((loopPoint) => {
+            const { target, translate, slideLocation } = loopPoint;
+            const shiftLocation = target();
+            if (shiftLocation === slideLocation.get())
+                return;
+            translate.to(shiftLocation);
+            slideLocation.set(shiftLocation);
+        });
+    }
+    function clear() {
+        loopPoints.forEach((loopPoint) => loopPoint.translate.clear());
+    }
+    const self = {
+        canLoop,
+        clear,
+        loop,
+        loopPoints,
+    };
+    return self;
+}

package/carousel/engine/SlideRegistry.d.ts

@@ -0,0 +1,7 @@
+import type { LimitType } from "../../motion/Limit.js";
+import type { ScrollContainOptionType } from "./ScrollContain.js";
+import type { SlidesToScrollType } from "./SlidesToScroll.js";
+export type SlideRegistryType = {
+    slideRegistry: number[][];
+};
+export declare function SlideRegistry(containSnaps: boolean, containScroll: ScrollContainOptionType, scrollSnaps: number[], scrollContainLimit: LimitType, slidesToScroll: SlidesToScrollType, slideIndexes: number[]): SlideRegistryType;

package/carousel/engine/SlideRegistry.js

@@ -0,0 +1,31 @@
+import { arrayFromNumber, arrayIsLastIndex, arrayLast, arrayLastIndex } from "./utils.js";
+export function SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes) {
+    const { groupSlides } = slidesToScroll;
+    const { min, max } = scrollContainLimit;
+    const slideRegistry = createSlideRegistry();
+    function createSlideRegistry() {
+        const groupedSlideIndexes = groupSlides(slideIndexes);
+        const doNotContain = !containSnaps || containScroll === "keepSnaps";
+        if (scrollSnaps.length === 1)
+            return [slideIndexes];
+        if (doNotContain)
+            return groupedSlideIndexes;
+        return groupedSlideIndexes.slice(min, max).map((group, index, groups) => {
+            const isFirst = !index;
+            const isLast = arrayIsLastIndex(groups, index);
+            if (isFirst) {
+                const range = arrayLast(groups[0]) + 1;
+                return arrayFromNumber(range);
+            }
+            if (isLast) {
+                const range = arrayLastIndex(slideIndexes) - arrayLast(groups)[0] + 1;
+                return arrayFromNumber(range, arrayLast(groups)[0]);
+            }
+            return group;
+        });
+    }
+    const self = {
+        slideRegistry,
+    };
+    return self;
+}

package/carousel/engine/SlideSizes.d.ts

@@ -0,0 +1,10 @@
+import type { AxisType } from "./Axis.js";
+import type { NodeRectType } from "./NodeRects.js";
+import { type WindowType } from "./utils.js";
+export type SlideSizesType = {
+    slideSizes: number[];
+    slideSizesWithGaps: number[];
+    startGap: number;
+    endGap: number;
+};
+export declare function SlideSizes(axis: AxisType, containerRect: NodeRectType, slideRects: NodeRectType[], slides: HTMLElement[], readEdgeGap: boolean, ownerWindow: WindowType): SlideSizesType;

package/carousel/engine/SlideSizes.js

@@ -0,0 +1,41 @@
+import { arrayIsLastIndex, arrayLast, mathAbs } from "./utils.js";
+export function SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow) {
+    const { measureSize, startEdge, endEdge } = axis;
+    const withEdgeGap = slideRects[0] && readEdgeGap;
+    const startGap = measureStartGap();
+    const endGap = measureEndGap();
+    const slideSizes = slideRects.map(measureSize);
+    const slideSizesWithGaps = measureWithGaps();
+    function measureStartGap() {
+        if (!withEdgeGap)
+            return 0;
+        const slideRect = slideRects[0];
+        return mathAbs(containerRect[startEdge] - slideRect[startEdge]);
+    }
+    function measureEndGap() {
+        if (!withEdgeGap)
+            return 0;
+        const style = ownerWindow.getComputedStyle(arrayLast(slides));
+        return parseFloat(style.getPropertyValue(`margin-${endEdge}`));
+    }
+    function measureWithGaps() {
+        return slideRects
+            .map((rect, index, rects) => {
+            const isFirst = !index;
+            const isLast = arrayIsLastIndex(rects, index);
+            if (isFirst)
+                return slideSizes[index] + startGap;
+            if (isLast)
+                return slideSizes[index] + endGap;
+            return rects[index + 1][startEdge] - rect[startEdge];
+        })
+            .map(mathAbs);
+    }
+    const self = {
+        slideSizes,
+        slideSizesWithGaps,
+        startGap,
+        endGap,
+    };
+    return self;
+}

package/carousel/engine/SlidesHandler.d.ts

@@ -0,0 +1,10 @@
+import type { EmblaCarouselType } from "./EmblaCarousel.js";
+import type { EventHandlerType } from "./EventHandler.js";
+type SlidesHandlerCallbackType = (emblaApi: EmblaCarouselType, mutations: MutationRecord[]) => boolean | void;
+export type SlidesHandlerOptionType = boolean | SlidesHandlerCallbackType;
+export type SlidesHandlerType = {
+    init: (emblaApi: EmblaCarouselType) => void;
+    destroy: () => void;
+};
+export declare function SlidesHandler(container: HTMLElement, eventHandler: EventHandlerType, watchSlides: SlidesHandlerOptionType): SlidesHandlerType;
+export {};

package/carousel/engine/SlidesHandler.js

@@ -0,0 +1,36 @@
+import { isBoolean } from "./utils.js";
+export function SlidesHandler(container, eventHandler, watchSlides) {
+    let mutationObserver;
+    let destroyed = false;
+    function init(emblaApi) {
+        if (!watchSlides)
+            return;
+        function defaultCallback(mutations) {
+            for (const mutation of mutations) {
+                if (mutation.type === "childList") {
+                    emblaApi.reInit();
+                    eventHandler.emit("slidesChanged");
+                    break;
+                }
+            }
+        }
+        mutationObserver = new MutationObserver((mutations) => {
+            if (destroyed)
+                return;
+            if (isBoolean(watchSlides) || watchSlides(emblaApi, mutations)) {
+                defaultCallback(mutations);
+            }
+        });
+        mutationObserver.observe(container, { childList: true });
+    }
+    function destroy() {
+        if (mutationObserver)
+            mutationObserver.disconnect();
+        destroyed = true;
+    }
+    const self = {
+        init,
+        destroy,
+    };
+    return self;
+}

package/carousel/engine/SlidesInView.d.ts

@@ -0,0 +1,8 @@
+import type { EventHandlerType } from "./EventHandler.js";
+export type SlidesInViewOptionsType = IntersectionObserverInit["threshold"];
+export type SlidesInViewType = {
+    init: () => void;
+    destroy: () => void;
+    get: (inView?: boolean) => number[];
+};
+export declare function SlidesInView(container: HTMLElement, slides: HTMLElement[], eventHandler: EventHandlerType, threshold: SlidesInViewOptionsType): SlidesInViewType;

package/carousel/engine/SlidesInView.js

@@ -0,0 +1,59 @@
+import { objectKeys } from "./utils.js";
+export function SlidesInView(container, slides, eventHandler, threshold) {
+    const intersectionEntryMap = {};
+    let inViewCache = null;
+    let notInViewCache = null;
+    let intersectionObserver;
+    let destroyed = false;
+    function init() {
+        intersectionObserver = new IntersectionObserver((entries) => {
+            if (destroyed)
+                return;
+            entries.forEach((entry) => {
+                const index = slides.indexOf(entry.target);
+                intersectionEntryMap[index] = entry;
+            });
+            inViewCache = null;
+            notInViewCache = null;
+            eventHandler.emit("slidesInView");
+        }, {
+            root: container.parentElement,
+            threshold,
+        });
+        slides.forEach((slide) => intersectionObserver.observe(slide));
+    }
+    function destroy() {
+        if (intersectionObserver)
+            intersectionObserver.disconnect();
+        destroyed = true;
+    }
+    function createInViewList(inView) {
+        return objectKeys(intersectionEntryMap).reduce((list, slideIndex) => {
+            const index = parseInt(slideIndex);
+            const { isIntersecting } = intersectionEntryMap[index];
+            const inViewMatch = inView && isIntersecting;
+            const notInViewMatch = !inView && !isIntersecting;
+            if (inViewMatch || notInViewMatch)
+                list.push(index);
+            return list;
+        }, []);
+    }
+    function get(inView = true) {
+        if (inView && inViewCache)
+            return inViewCache;
+        if (!inView && notInViewCache)
+            return notInViewCache;
+        const slideIndexes = createInViewList(inView);
+        if (inView)
+            inViewCache = slideIndexes;
+        if (!inView)
+            notInViewCache = slideIndexes;
+        return slideIndexes;
+    }
+    const self = {
+        init,
+        destroy,
+        get,
+    };
+    return self;
+}

package/carousel/engine/SlidesToScroll.d.ts

@@ -0,0 +1,7 @@
+import type { AxisType } from "./Axis.js";
+import type { NodeRectType } from "./NodeRects.js";
+export type SlidesToScrollOptionType = "auto" | number;
+export type SlidesToScrollType = {
+    groupSlides: <Type>(array: Type[]) => Type[][];
+};
+export declare function SlidesToScroll(axis: AxisType, viewSize: number, slidesToScroll: SlidesToScrollOptionType, loop: boolean, containerRect: NodeRectType, slideRects: NodeRectType[], startGap: number, endGap: number, pixelTolerance: number): SlidesToScrollType;

package/carousel/engine/SlidesToScroll.js

@@ -0,0 +1,41 @@
+import { arrayKeys, arrayLast, arrayLastIndex, isNumber, mathAbs } from "./utils.js";
+export function SlidesToScroll(axis, viewSize, slidesToScroll, loop, containerRect, slideRects, startGap, endGap, pixelTolerance) {
+    const { startEdge, endEdge, direction } = axis;
+    const groupByNumber = isNumber(slidesToScroll);
+    function byNumber(array, groupSize) {
+        return arrayKeys(array)
+            .filter((i) => i % groupSize === 0)
+            .map((i) => array.slice(i, i + groupSize));
+    }
+    function bySize(array) {
+        if (!array.length)
+            return [];
+        return arrayKeys(array)
+            .reduce((groups, rectB, index) => {
+            const rectA = arrayLast(groups) || 0;
+            const isFirst = rectA === 0;
+            const isLast = rectB === arrayLastIndex(array);
+            const edgeA = containerRect[startEdge] - slideRects[rectA][startEdge];
+            const edgeB = containerRect[startEdge] - slideRects[rectB][endEdge];
+            const gapA = !loop && isFirst ? direction(startGap) : 0;
+            const gapB = !loop && isLast ? direction(endGap) : 0;
+            const chunkSize = mathAbs(edgeB - gapB - (edgeA + gapA));
+            if (index && chunkSize > viewSize + pixelTolerance)
+                groups.push(rectB);
+            if (isLast)
+                groups.push(array.length);
+            return groups;
+        }, [])
+            .map((currentSize, index, groups) => {
+            const previousSize = Math.max(groups[index - 1] || 0);
+            return array.slice(previousSize, currentSize);
+        });
+    }
+    function groupSlides(array) {
+        return groupByNumber ? byNumber(array, slidesToScroll) : bySize(array);
+    }
+    const self = {
+        groupSlides,
+    };
+    return self;
+}

package/carousel/engine/Translate.d.ts

@@ -0,0 +1,7 @@
+import type { AxisType } from "./Axis.js";
+export type TranslateType = {
+    clear: () => void;
+    to: (target: number) => void;
+    toggleActive: (active: boolean) => void;
+};
+export declare function Translate(axis: AxisType, container: HTMLElement): TranslateType;

package/carousel/engine/Translate.js

@@ -0,0 +1,38 @@
+import { roundToTwoDecimals } from "./utils.js";
+export function Translate(axis, container) {
+    const translate = axis.scroll === "x" ? x : y;
+    const containerStyle = container.style;
+    let previousTarget = null;
+    let disabled = false;
+    function x(n) {
+        return `translate3d(${n}px,0px,0px)`;
+    }
+    function y(n) {
+        return `translate3d(0px,${n}px,0px)`;
+    }
+    function to(target) {
+        if (disabled)
+            return;
+        const newTarget = roundToTwoDecimals(axis.direction(target));
+        if (newTarget === previousTarget)
+            return;
+        containerStyle.transform = translate(newTarget);
+        previousTarget = newTarget;
+    }
+    function toggleActive(active) {
+        disabled = !active;
+    }
+    function clear() {
+        if (disabled)
+            return;
+        containerStyle.transform = "";
+        if (!container.getAttribute("style"))
+            container.removeAttribute("style");
+    }
+    const self = {
+        clear,
+        to,
+        toggleActive,
+    };
+    return self;
+}

package/carousel/engine/index.d.ts

@@ -0,0 +1,11 @@
+export type { EmblaOptionsType } from "./Options.js";
+export type { EmblaEventType } from "./EventHandler.js";
+export type { EmblaPluginType } from "./Plugins.js";
+export type { EmblaCarouselType } from "./EmblaCarousel.js";
+export { default, default as EmblaCarousel } from "./EmblaCarousel.js";
+export type { CreatePluginType, EmblaPluginsType } from "./Plugins.js";
+export type { CreateOptionsType } from "./Options.js";
+export type { OptionsHandlerType } from "./OptionsHandler.js";
+export type { EmblaEventListType } from "./EventHandler.js";
+export type { EngineType } from "./Engine.js";
+export type { ScrollBodyType } from "../../motion/ScrollBody.js";

package/carousel/engine/index.js

@@ -0,0 +1 @@
+export { default, default as EmblaCarousel } from "./EmblaCarousel.js";

package/carousel/engine/utils.d.ts

@@ -0,0 +1,15 @@
+import type { PointerEventType } from "./DragTracker.js";
+export { isNumber, mathAbs, mathSign, deltaAbs, factorAbs } from "../../motion/utils.js";
+export type WindowType = Window & typeof globalThis;
+export declare function isString(subject: unknown): subject is string;
+export declare function isBoolean(subject: unknown): subject is boolean;
+export declare function isObject(subject: unknown): subject is Record<string, unknown>;
+export declare function roundToTwoDecimals(num: number): number;
+export declare function arrayKeys<Type>(array: Type[]): number[];
+export declare function arrayLast<Type>(array: Type[]): Type;
+export declare function arrayLastIndex<Type>(array: Type[]): number;
+export declare function arrayIsLastIndex<Type>(array: Type[], index: number): boolean;
+export declare function arrayFromNumber(n: number, startAt?: number): number[];
+export declare function objectKeys<Type extends object>(object: Type): string[];
+export declare function objectsMergeDeep(objectA: Record<string, unknown>, objectB: Record<string, unknown>): Record<string, unknown>;
+export declare function isMouseEvent(evt: PointerEventType, ownerWindow: WindowType): evt is MouseEvent;

package/carousel/engine/utils.js

@@ -0,0 +1,45 @@
+export { isNumber, mathAbs, mathSign, deltaAbs, factorAbs } from "../../motion/utils.js";
+export function isString(subject) {
+    return typeof subject === "string";
+}
+export function isBoolean(subject) {
+    return typeof subject === "boolean";
+}
+export function isObject(subject) {
+    return Object.prototype.toString.call(subject) === "[object Object]";
+}
+export function roundToTwoDecimals(num) {
+    return Math.round(num * 100) / 100;
+}
+export function arrayKeys(array) {
+    return objectKeys(array).map(Number);
+}
+export function arrayLast(array) {
+    return array[arrayLastIndex(array)];
+}
+export function arrayLastIndex(array) {
+    return Math.max(0, array.length - 1);
+}
+export function arrayIsLastIndex(array, index) {
+    return index === arrayLastIndex(array);
+}
+export function arrayFromNumber(n, startAt = 0) {
+    return Array.from(Array(n), (_, i) => startAt + i);
+}
+export function objectKeys(object) {
+    return Object.keys(object);
+}
+export function objectsMergeDeep(objectA, objectB) {
+    return [objectA, objectB].reduce((mergedObjects, currentObject) => {
+        objectKeys(currentObject).forEach((key) => {
+            const valueA = mergedObjects[key];
+            const valueB = currentObject[key];
+            const areObjects = isObject(valueA) && isObject(valueB);
+            mergedObjects[key] = areObjects ? objectsMergeDeep(valueA, valueB) : valueB;
+        });
+        return mergedObjects;
+    }, {});
+}
+export function isMouseEvent(evt, ownerWindow) {
+    return typeof ownerWindow.MouseEvent !== "undefined" && evt instanceof ownerWindow.MouseEvent;
+}