UNPKG

@blossom-carousel/svelte

Version:

A native-scroll-first carousel component for Svelte.

www.blossom-carousel.com

jespervos/blossom-carousel

65 lines (64 loc) • 3.45 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/** Attribute the author adds to each element that should get a dot. */ export declare const SLIDE_ATTR = "data-blossom-slide"; /** * Returns the marker targets for a scroller. Mirrors `::scroll-marker` * authoring: targets are explicitly opted-in via the `data-blossom-slide` * attribute and collected depth-agnostically (at any nesting level), in tree * order. There is no implicit detection from `scroll-snap-align` or direct * children; if nothing is marked, there are no markers. */ export declare function getMarkerTargets(scroller: HTMLElement): HTMLElement[]; /** * The redistributed activation position of each target, in tree order (parallel * to `getMarkerTargets`). Positions are logical scroll offsets (see * `logicalScrollLeft`), so they hold in both LTR and RTL. Scroll-invariant: it * depends only on layout, never on the scroll offset, so the host can compute * it once on init/resize/mutation and cache it. {@link selectActiveIndex} then * maps the live logical scroll offset onto it each frame without touching * layout. * * This is a single-axis (inline) implementation of the geometry behind the CSS * Overflow Level 5 "Calculating the Active Scroll Marker" algorithm (§3.1.8, * https://drafts.csswg.org/css-overflow-5/#active-scroll-markers-calculation): * each target's unclamped scroll-into-view position (respecting its own * `scroll-snap-align`), with the leading/trailing unreachable targets * redistributed across the `min(scrollport / 8, scrollRange / 2)` edge bands so * each gets a distinct activation point. */ export declare function getMarkerPositions(scroller: HTMLElement, targets: HTMLElement[]): number[]; /** * Maps the current logical scroll offset onto precomputed marker `positions` * and returns the tree-order index of the active target. Pure and layout-free, * so it can run on every scroll frame; pass the cached `sorted` copy to keep it * allocation-free too. * * The selected position is the largest target position at or before the current * position, or — to surface section-header style markers early — one whose * nearest smaller target position sits more than half a scrollport behind and * which itself sits less than half a scrollport ahead. Ties resolve to the * earliest target in tree order. */ export declare function selectActiveIndex(positions: number[], position: number, scrollportSize: number, sorted?: number[]): number; /** * The scroll-invariant geometry needed to resolve the active marker index on * the scroll hot loop without layout reads, style reads, or allocations. * Subset of the host-maintained `SnapCache`. */ export interface ActiveIndexGeometry { /** Redistributed activation position per marker, in tree order. */ activePositions: number[]; /** `activePositions` sorted ascending. */ sortedActivePositions: number[]; /** Whether the scroller's inline axis is right-to-left. */ rtl: boolean; } /** * Returns the tree-order index of the active marker target along the inline * axis, or -1 when there are none. * * Convenience wrapper that composes {@link getMarkerPositions} and * {@link selectActiveIndex} for live (uncached) use. Pass `cached` geometry * from a host-maintained cache to skip the per-call style/layout reads and * the sort on the scroll path. */ export declare function getActiveMarkerIndex(scroller: HTMLElement, targets: HTMLElement[], cached?: ActiveIndexGeometry): number;