npm - @glitchr/stickyjs - Versions diffs - 1.0.51 → 1.2.1 - Mend

@glitchr/stickyjs 1.0.51 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -1 +1,46 @@
 # Sticky JS library
+## Scroll stops
+`src/js/stops.js` - places on the page a scroll settles on, once it has come
+to rest. Standalone: no jQuery, and `import '@glitchr/stickyjs/src/js/stops.js'`
+brings in nothing else.
+```html
+<header class="sticky-stop" data-sticky-band-down="0">…</header>
+<div id="site" class="sticky-stop" data-sticky-band-up="90" data-sticky-band-down="280"></div>
+```
+Each stop has a band above and below it, in px (`rem` and `em` work too).
+Once a scroll comes to rest - trackpad momentum included:
+- between two stops it glides on to the one it was heading for, unless it
+  rests inside the band of the stop it just left: that was a nudge, and it
+  settles back. So a band is the least a scroll must travel before the next
+  stop takes;
+- past the last stop (and before the first) it scrolls freely, except inside
+  that stop's band: a scroll back towards the stop, or an overshoot past it,
+  returns to it.
+A band never reaches past halfway to the neighbouring stop. The glide is the
+browser's smooth scroll, which any wheel, touch, key or click interrupts, and
+a jump under `prefers-reduced-motion`.
+With two stops or more the scroller (`<html>` for the page) carries
+`--sticky-stop` (the index of the stop above), `--sticky-progress` (0 at that
+stop, 1 at the next) and `--sticky-progress-held` (the same, held still across
+the bands), and dispatches `sticky:progress` with `{index, from, to, top,
+progress, held}` in `event.detail` when they change, and `sticky:stop` with
+`{stop, top}` at each glide. Both bubble to the window.
+The window attaches itself when the document has stops at `DOMContentLoaded`
+or `load`. Otherwise, and for scrolling elements:
+```js
+StickyStops.attach(scroller, { settle: 160, tolerance: 3, bandUp: 0, bandDown: 0, progress: true, smooth: true });
+StickyStops.get(scroller).state;      // the last progress, or null
+StickyStops.get(scroller).refresh();  // after content moved
+StickyStops.pause(); StickyStops.resume();  // while a script scrolls the page itself; nests
+```
+`Sticky.stops` is the same object when `sticky.js` is loaded.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@glitchr/stickyjs",
-  "version": "1.0.51",
+  "version": "1.2.1",
   "description": "Sticky scroll library",
   "main": "src/index.js",
   "repository": {
@@ -12,4 +12,4 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   }
-}
+}

package/src/index.js CHANGED Viewed

@@ -1,2 +1,4 @@
 import './js/sticky.js';
-import './css/index.css';
+import './js/stops.js';
+import './js/sortable.js';
+import './css/index.css';

package/src/js/sortable.js ADDED Viewed

@@ -0,0 +1,399 @@
+// StickySortable - drag-and-drop reordering, built to stand alone (no
+// dependency on sticky.js's own scroll/hash machinery) so a consumer who
+// only wants sorting doesn't pay for sticky.js's DOMContentLoaded-triggered
+// global scroll/wheel/hashchange handlers. Pointer Events (not HTML5 drag-
+// and-drop) so a custom placeholder and touch both work with one code path -
+// requires touch-action: none on the handle in CSS.
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        module.exports = factory(require('jquery'));
+    } else {
+        root.StickySortable = factory(root.jQuery);
+    }
+})(this, function ($) {
+    var defaults = {
+        handle: null,          // selector, relative to the item, or null to drag the whole item
+        items: '[data-sortable-item]',
+        axis: 'y',
+        dragThreshold: 4,      // px of pointer movement before a press counts as a drag, not a click
+        autoscroll: true,
+        autoscrollEdge: 40,    // px from the scroll container's edge that triggers scrolling
+        autoscrollSpeed: 12,   // px per animation frame at full deflection
+        draggingClass: 'is-dragging',
+        placeholderClass: 'is-sortable-placeholder',
+        onChange: null,        // function(order, container) - fires once, on drop, if the order changed
+        mergeable: false,      // opt-in: dropping in the INNER zone of another item fires onMerge instead of reordering
+        mergeInset: 28,        // px inset from an item's edges that counts as its "merge zone" rather than its "reorder edge"
+        mergeTargetClass: 'is-merge-target',
+        isMergeable: null,     // function(el): bool - gates the item being DRAGGED (can it be a merge source at all); null = anything can
+        isMergeTarget: null,   // function(el): bool - gates merge TARGET candidates; null = falls back to isMergeable (same rule both ways)
+        onMerge: null,         // function(draggedEl, targetEl, container) - fires on drop instead of onChange, only when armed
+    };
+    function closestScrollable(el) {
+        var node = el.parentElement;
+        while (node && node !== document.body) {
+            var style = getComputedStyle(node);
+            var overflowY = style.overflowY;
+            if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
+                return node;
+            }
+            node = node.parentElement;
+        }
+        return document.scrollingElement || document.documentElement;
+    }
+    function StickySortable(container, options) {
+        this.container = container;
+        this.options = $.extend({}, defaults, options);
+        this.scroller = closestScrollable(container);
+        this.dragging = null;
+        this.placeholder = null;
+        this.startY = 0;
+        this.startIndex = -1;
+        this.pointerId = null;
+        this.autoscrollFrame = null;
+        this.autoscrollDirection = 0;
+        this.mergeTarget = null;
+        this.onPointerDown = this.onPointerDown.bind(this);
+        this.onPointerMove = this.onPointerMove.bind(this);
+        this.onPointerUp = this.onPointerUp.bind(this);
+        container.addEventListener('pointerdown', this.onPointerDown);
+        container.addEventListener('keydown', this.onKeyDown.bind(this));
+    }
+    StickySortable.prototype.items = function () {
+        return Array.prototype.slice.call(this.container.querySelectorAll(this.options.items))
+            .filter(function (el) { return el.parentElement === this.container; }.bind(this));
+    };
+    StickySortable.prototype.onPointerDown = function (e) {
+        if (this.dragging || e.button !== undefined && e.button !== 0) {
+            return;
+        }
+        var handle = this.options.handle ? e.target.closest(this.options.handle) : e.target;
+        if (!handle) {
+            return;
+        }
+        var item = e.target.closest(this.options.items);
+        if (!item || item.parentElement !== this.container) {
+            return;
+        }
+        this.pendingItem = item;
+        this.pendingPointerId = e.pointerId;
+        this.pendingStartX = e.clientX;
+        this.pendingStartY = e.clientY;
+        this.container.addEventListener('pointermove', this.onPendingMove = function (moveEvent) {
+            if (moveEvent.pointerId !== this.pendingPointerId) {
+                return;
+            }
+            var dx = moveEvent.clientX - this.pendingStartX;
+            var dy = moveEvent.clientY - this.pendingStartY;
+            if (Math.sqrt(dx * dx + dy * dy) >= this.options.dragThreshold) {
+                this.beginDrag(this.pendingItem, this.pendingPointerId, moveEvent);
+            }
+        }.bind(this));
+        this.container.addEventListener('pointerup', this.onPendingUp = function () {
+            this.container.removeEventListener('pointermove', this.onPendingMove);
+            this.container.removeEventListener('pointerup', this.onPendingUp);
+        }.bind(this), { once: true });
+    };
+    StickySortable.prototype.beginDrag = function (item, pointerId, e) {
+        this.container.removeEventListener('pointermove', this.onPendingMove);
+        this.dragging = item;
+        this.pointerId = pointerId;
+        this.startIndex = this.items().indexOf(item);
+        item.setPointerCapture(pointerId);
+        item.classList.add(this.options.draggingClass);
+        this.placeholder = document.createElement(item.tagName);
+        this.placeholder.className = this.options.placeholderClass;
+        this.placeholder.style.height = item.offsetHeight + 'px';
+        item.parentElement.insertBefore(this.placeholder, item.nextSibling);
+        var rect = item.getBoundingClientRect();
+        this.offsetX = e.clientX - rect.left;
+        this.offsetY = e.clientY - rect.top;
+        item.style.position = 'fixed';
+        item.style.width = rect.width + 'px';
+        item.style.zIndex = 1000;
+        item.style.pointerEvents = 'none';
+        this.moveItemTo(e.clientX, e.clientY);
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+    };
+    // axis:'y' locks left to wherever the drag started (a single-column
+    // list has nothing to gain from tracking x, and this keeps that case's
+    // behavior byte-for-byte unchanged) - any other axis value follows the
+    // pointer on both axes, needed for a multi-column grid like the
+    // dashboard's widget grid.
+    StickySortable.prototype.moveItemTo = function (clientX, clientY) {
+        this.dragging.style.top = (clientY - this.offsetY) + 'px';
+        this.dragging.style.left = 'y' === this.options.axis
+            ? this.dragging.getBoundingClientRect().left + 'px'
+            : (clientX - this.offsetX) + 'px';
+    };
+    // Single-column mode (axis:'y'): unchanged from before - compare only
+    // vertical midpoints, in DOM order. Free/grid mode: "nearest sibling
+    // wins" alone doesn't say which SIDE to drop on (a grid has more than
+    // one neighbor at similar distance), so whichever axis has the larger
+    // offset from that sibling's center decides before-vs-after.
+    StickySortable.prototype.findDropTarget = function (siblings, x, y) {
+        if ('y' === this.options.axis) {
+            for (var i = 0; i < siblings.length; i++) {
+                var rect = siblings[i].getBoundingClientRect();
+                if (y < rect.top + rect.height / 2) {
+                    return { el: siblings[i], before: true };
+                }
+            }
+            return null;
+        }
+        // Distance to the nearest point ON EACH RECT (clamped to its
+        // edges), not to its center. A wide/tall item (e.g. a 3-of-5-
+        // column chart card) has empty grid space free in its OWN row -
+        // center-to-center distance made that empty space attract to
+        // whatever smaller item happened to sit directly above/below it
+        // in a different row instead, since a small item's center can be
+        // numerically closer than a big item's center even though the
+        // big item's actual edge is right there. Rect-distance is 0 for
+        // any point already alongside the item (same row, past its edge),
+        // so the item you're visually next to wins regardless of size.
+        var closest = null;
+        var closestDist = Infinity;
+        siblings.forEach(function (el) {
+            var r = el.getBoundingClientRect();
+            var nearestX = Math.max(r.left, Math.min(x, r.right));
+            var nearestY = Math.max(r.top, Math.min(y, r.bottom));
+            var dist = Math.pow(x - nearestX, 2) + Math.pow(y - nearestY, 2);
+            if (dist < closestDist) {
+                closestDist = dist;
+                closest = { el: el, cx: r.left + r.width / 2, cy: r.top + r.height / 2 };
+            }
+        });
+        if (!closest) {
+            return null;
+        }
+        var dx = x - closest.cx;
+        var dy = y - closest.cy;
+        var before = Math.abs(dx) > Math.abs(dy) ? dx < 0 : dy < 0;
+        return { el: closest.el, before: before };
+    };
+    // Only relevant when options.mergeable - an inset "inner zone" of a
+    // sibling's own rect, distinct from findDropTarget()'s reorder logic
+    // above (which reacts to nearest EDGE/point, not containment). A
+    // point can be simultaneously "nearest" a sibling for reorder purposes
+    // and inside its merge zone; onPointerMove checks merge FIRST and
+    // short-circuits reorder entirely while a merge target is armed, so
+    // there's never a conflict between the two at drop time.
+    StickySortable.prototype.findMergeTarget = function (siblings, x, y) {
+        var inset = this.options.mergeInset;
+        // isMergeTarget, not isMergeable, for the CANDIDATE side - a
+        // composite can be a valid drop target (gains a pane) without
+        // being draggable to merge further itself; falls back to
+        // isMergeable when the two aren't meant to differ.
+        var isTarget = this.options.isMergeTarget || this.options.isMergeable;
+        for (var i = 0; i < siblings.length; i++) {
+            var el = siblings[i];
+            if (isTarget && !isTarget(el)) {
+                continue;
+            }
+            var r = el.getBoundingClientRect();
+            if (x >= r.left + inset && x <= r.right - inset && y >= r.top + inset && y <= r.bottom - inset) {
+                return el;
+            }
+        }
+        return null;
+    };
+    StickySortable.prototype.onPointerMove = function (e) {
+        if (!this.dragging || e.pointerId !== this.pointerId) {
+            return;
+        }
+        this.moveItemTo(e.clientX, e.clientY);
+        var siblings = Array.prototype.slice.call(this.container.children).filter(function (el) {
+            return el !== this.dragging && el !== this.placeholder && el.matches(this.options.items);
+        }.bind(this));
+        if (this.options.mergeable) {
+            var mergeCandidate = this.options.isMergeable && !this.options.isMergeable(this.dragging)
+                ? null // the item being dragged isn't itself a valid merge source (e.g. a composite) - never arm a merge for it, only allow it to reorder
+                : this.findMergeTarget(siblings, e.clientX, e.clientY);
+            if (mergeCandidate !== this.mergeTarget) {
+                if (this.mergeTarget) {
+                    this.mergeTarget.classList.remove(this.options.mergeTargetClass);
+                }
+                this.mergeTarget = mergeCandidate;
+                if (this.mergeTarget) {
+                    this.mergeTarget.classList.add(this.options.mergeTargetClass);
+                }
+            }
+            if (this.mergeTarget) {
+                // Armed: leave the placeholder exactly where it is - the
+                // dragged item's eventual REORDER position is moot, it's
+                // about to be replaced (along with the target) by onMerge.
+                if (this.options.autoscroll) {
+                    this.updateAutoscroll(e.clientY);
+                }
+                return;
+            }
+        }
+        var target = this.findDropTarget(siblings, e.clientX, e.clientY);
+        if (target) {
+            this.container.insertBefore(this.placeholder, target.before ? target.el : target.el.nextSibling);
+        } else if (siblings.length) {
+            this.container.insertBefore(this.placeholder, null);
+        }
+        if (this.options.autoscroll) {
+            this.updateAutoscroll(e.clientY);
+        }
+    };
+    StickySortable.prototype.updateAutoscroll = function (clientY) {
+        var rect = this.scroller === document.scrollingElement || this.scroller === document.documentElement
+            ? { top: 0, bottom: window.innerHeight }
+            : this.scroller.getBoundingClientRect();
+        var edge = this.options.autoscrollEdge;
+        if (clientY < rect.top + edge) {
+            this.autoscrollDirection = -1;
+        } else if (clientY > rect.bottom - edge) {
+            this.autoscrollDirection = 1;
+        } else {
+            this.autoscrollDirection = 0;
+        }
+        if (this.autoscrollDirection !== 0 && !this.autoscrollFrame) {
+            this.runAutoscroll();
+        }
+    };
+    StickySortable.prototype.runAutoscroll = function () {
+        if (!this.dragging || this.autoscrollDirection === 0) {
+            this.autoscrollFrame = null;
+            return;
+        }
+        this.scroller.scrollTop += this.autoscrollDirection * this.options.autoscrollSpeed;
+        this.autoscrollFrame = requestAnimationFrame(this.runAutoscroll.bind(this));
+    };
+    StickySortable.prototype.onPointerUp = function (e) {
+        if (!this.dragging || e.pointerId !== this.pointerId) {
+            return;
+        }
+        var item = this.dragging;
+        item.releasePointerCapture(this.pointerId);
+        item.classList.remove(this.options.draggingClass);
+        item.style.position = '';
+        item.style.top = '';
+        item.style.left = '';
+        item.style.width = '';
+        item.style.zIndex = '';
+        item.style.pointerEvents = '';
+        this.container.insertBefore(item, this.placeholder);
+        this.placeholder.remove();
+        this.placeholder = null;
+        this.autoscrollDirection = 0;
+        if (this.autoscrollFrame) {
+            cancelAnimationFrame(this.autoscrollFrame);
+            this.autoscrollFrame = null;
+        }
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        var mergeTarget = this.mergeTarget;
+        if (mergeTarget) {
+            mergeTarget.classList.remove(this.options.mergeTargetClass);
+            this.mergeTarget = null;
+        }
+        var newIndex = this.items().indexOf(item);
+        this.dragging = null;
+        this.pointerId = null;
+        if (mergeTarget) {
+            if (typeof this.options.onMerge === 'function') {
+                this.options.onMerge(item, mergeTarget, this.container);
+            }
+            return;
+        }
+        if (newIndex !== this.startIndex && typeof this.options.onChange === 'function') {
+            this.options.onChange(this.items(), this.container);
+        }
+    };
+    /** Keyboard fallback: focus a handle, ArrowUp/ArrowDown moves its item, no pointer needed. */
+    StickySortable.prototype.onKeyDown = function (e) {
+        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
+            return;
+        }
+        var handle = this.options.handle ? e.target.closest(this.options.handle) : null;
+        if (!handle) {
+            return;
+        }
+        var item = e.target.closest(this.options.items);
+        if (!item || item.parentElement !== this.container) {
+            return;
+        }
+        var items = this.items();
+        var index = items.indexOf(item);
+        var swapWith = e.key === 'ArrowUp' ? items[index - 1] : items[index + 1];
+        if (!swapWith) {
+            return;
+        }
+        e.preventDefault();
+        if (e.key === 'ArrowUp') {
+            this.container.insertBefore(item, swapWith);
+        } else {
+            this.container.insertBefore(item, swapWith.nextSibling);
+        }
+        handle.focus();
+        if (typeof this.options.onChange === 'function') {
+            this.options.onChange(this.items(), this.container);
+        }
+    };
+    $.fn.stickySortable = function (options) {
+        return this.each(function () {
+            if (!this._stickySortable) {
+                this._stickySortable = new StickySortable(this, options);
+            }
+        });
+    };
+    return StickySortable;
+});

package/src/js/stops.js ADDED Viewed

@@ -0,0 +1,465 @@
+// StickyStops - scroll stops that act once the scroll has come to rest.
+//
+// Mark the stops with .sticky-stop, in the page or inside any scrolling
+// element. Once a scroll comes to rest - momentum included - the scroller
+// glides on to the stop the reader was heading for, or back to the one they
+// had barely left:
+//
+//  - between two stops, heading down: the lower stop - unless the scroll rests
+//    inside the upper stop's band below it (data-sticky-band-down), in which
+//    case it was a nudge and the page settles back up;
+//  - between two stops, heading up: the upper stop - unless inside the lower
+//    stop's band above it (data-sticky-band-up), which settles back down. So a
+//    band is also the least a scroll must travel before the next stop takes;
+//  - past the last stop: free scrolling, from the first pixel, except that a
+//    scroll up that rests inside the last stop's band below it goes back to
+//    the stop - and so does a scroll down that started above the stop and
+//    overshot into that band (a trackpad flick past a stop near the top);
+//  - before the first stop: the mirror image.
+//
+// A band never reaches past halfway to the neighbouring stop, so every stop
+// stays reachable however the bands are set. Two stops at the same place are
+// one stop.
+//
+// Nothing happens during the scroll. Acting at the first movement fights
+// trackpad momentum, which keeps pushing during and after the glide; and the
+// browser's own scroll-snap is blind to direction and pulls to the NEAREST
+// stop, so a small scroll down from the top jumps straight back up. Here the
+// glide is the browser's smooth scroll, which any wheel, touch, key or click
+// interrupts, so the reader always keeps control: the stops only complete, or
+// undo, a movement the reader started. With prefers-reduced-motion the glide
+// is a jump.
+//
+// Nor does a scroll the browser makes to bring a focused field into view: an
+// invalid form submission revealing its first empty field, or Tab. Heading up
+// from the text, that scroll was taken for the reader's and carried the page
+// on to the stop above - the form gone from the screen it had just asked for.
+//
+// Progress: with two stops or more, the scroller (the <html> element for the
+// page) carries three custom properties - --sticky-stop, the index of the stop
+// above the scroll; --sticky-progress, 0 at that stop and 1 at the next; and
+// --sticky-progress-held, the same but held at 0 across the upper stop's band
+// below it and at 1 across the lower stop's band above it, so that whatever it
+// drives does not move for a nudge that will settle back. A sticky:progress
+// event on the scroller (it bubbles to the window) carries the same numbers
+// for scripts, and a sticky:stop event announces each glide.
+//
+// Standalone: no jQuery and no sticky.js, and only the window's own scroll
+// listener until a stop exists. Attached to the window by itself when the
+// document has stops; StickyStops.attach(scroller) for a scrolling element,
+// or for stops added after the page loaded. Sticky.stops is the same object
+// when sticky.js is loaded.
+(function (root, factory) {
+    var api = factory(root);
+    if (typeof module === 'object' && module.exports) module.exports = api;
+    root.StickyStops = api;
+    if (root.Sticky) root.Sticky.stops = api;
+})(typeof window !== 'undefined' ? window : this, function (window) {
+    var document = window.document;
+    var defaults = {
+        selector: '.sticky-stop',
+        settle: 160,     // ms of quiet that counts as "at rest": longer than the gap between momentum events
+        tolerance: 3,    // px: within this of a stop is at it
+        bandUp: 0,       // px, for a stop without data-sticky-band-up
+        bandDown: 0,     // px, for a stop without data-sticky-band-down
+        progress: true,  // the custom properties and sticky:progress events
+        smooth: true     // glide, rather than jump, to a stop
+    };
+    // The reader taking over ends a glide; the browser has already stopped it.
+    var INTERRUPT = ['wheel', 'touchstart', 'keydown', 'mousedown'];
+    // ms after a focus change in which a scroll starting is the browser
+    // revealing the focused field, not the reader.
+    var REVEAL = 250;
+    function now() { return window.performance ? performance.now() : Date.now(); }
+    function extend(target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+            if (!source) continue;
+            for (var key in source) {
+                if (Object.prototype.hasOwnProperty.call(source, key) && source[key] !== undefined) target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    function clamp(x, low, high) { return Math.min(high, Math.max(low, x)); }
+    // "90", "90px", "2rem" or "1.5em" to px; anything else is the fallback.
+    function toPixels(value, el, fallback) {
+        if (value === undefined || value === null || value === '') return fallback;
+        var text = String(value).trim();
+        var number = parseFloat(text);
+        if (isNaN(number)) return fallback;
+        if (text.slice(-3) === 'rem') return number * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        if (text.slice(-2) === 'em') return number * parseFloat(getComputedStyle(el).fontSize);
+        return number;
+    }
+    function reducedMotion() {
+        return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }
+    function Stops(scroller, options) {
+        this.scroller = scroller;
+        this.isWindow = scroller === window;
+        // Carries the custom properties and dispatches the events.
+        this.root = this.isWindow ? document.documentElement : scroller;
+        this.options = extend({}, defaults, options);
+        this.stops = [];
+        this.state = null;
+        this.last = this.top();
+        // Where the current gesture began: the position before its first event.
+        this.start = this.last;
+        this.direction = 0;
+        this.gliding = false;
+        this.paused = 0;
+        this.timer = null;
+        this.glideTimer = null;
+        this.frame = null;
+        this.focusedAt = -Infinity;
+        this.revealing = false;
+        this.onScroll = this.onScroll.bind(this);
+        this.onInterrupt = this.onInterrupt.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.onResize = this.onResize.bind(this);
+        this.settle = this.settle.bind(this);
+        this.tick = this.tick.bind(this);
+        // focusin bubbles, so the scroller hears its own fields; the window
+        // does not, so the page's are heard on the document.
+        this.focusTarget = this.isWindow ? document : this.scroller;
+        this.scroller.addEventListener('scroll', this.onScroll, { passive: true });
+        for (var i = 0; i < INTERRUPT.length; i++) {
+            this.scroller.addEventListener(INTERRUPT[i], this.onInterrupt, { passive: true });
+        }
+        this.focusTarget.addEventListener('focusin', this.onFocus, true);
+        window.addEventListener('resize', this.onResize);
+        this.refresh();
+    }
+    Stops.prototype.detach = function () {
+        this.scroller.removeEventListener('scroll', this.onScroll);
+        for (var i = 0; i < INTERRUPT.length; i++) {
+            this.scroller.removeEventListener(INTERRUPT[i], this.onInterrupt);
+        }
+        this.focusTarget.removeEventListener('focusin', this.onFocus, true);
+        window.removeEventListener('resize', this.onResize);
+        clearTimeout(this.timer);
+        clearTimeout(this.glideTimer);
+        if (this.frame !== null) cancelAnimationFrame(this.frame);
+        var style = this.root.style;
+        style.removeProperty('--sticky-stop');
+        style.removeProperty('--sticky-progress');
+        style.removeProperty('--sticky-progress-held');
+        var at = instances.indexOf(this);
+        if (at !== -1) instances.splice(at, 1);
+        return this;
+    };
+    /** Hold the stops off, e.g. while a script scrolls the page itself. Nests. */
+    Stops.prototype.pause = function () { this.paused++; return this; };
+    Stops.prototype.resume = function () { this.paused = Math.max(0, this.paused - 1); return this; };
+    Stops.prototype.top = function () {
+        return this.isWindow ? (window.scrollY || window.pageYOffset || 0) : this.scroller.scrollTop;
+    };
+    /** The scroller's scroll-padding-top: where a stop should rest below its edge. */
+    Stops.prototype.padding = function () {
+        var value = parseFloat(getComputedStyle(this.root).scrollPaddingTop);
+        return isNaN(value) ? 0 : value;
+    };
+    /** A stop's scroll position: where it is on screen now, not its layout box. */
+    Stops.prototype.position = function (el) {
+        var origin = this.isWindow ? 0 : this.scroller.getBoundingClientRect().top;
+        return el.getBoundingClientRect().top - origin + this.top() - this.padding();
+    };
+    Stops.prototype.measure = function () {
+        var options = this.options;
+        var elements = this.root.querySelectorAll(options.selector);
+        var stops = [];
+        var i;
+        for (i = 0; i < elements.length; i++) {
+            var el = elements[i];
+            if (!el.getClientRects().length) continue; // display: none
+            stops.push({
+                element: el,
+                top: Math.round(this.position(el)),
+                bandUp: Math.max(0, toPixels(el.dataset.stickyBandUp, el, options.bandUp)),
+                bandDown: Math.max(0, toPixels(el.dataset.stickyBandDown, el, options.bandDown))
+            });
+        }
+        stops.sort(function (a, b) { return a.top - b.top; });
+        // Two stops at the same place are one stop.
+        var unique = [];
+        for (i = 0; i < stops.length; i++) {
+            if (unique.length && stops[i].top - unique[unique.length - 1].top <= options.tolerance) continue;
+            unique.push(stops[i]);
+        }
+        // A band reaches at most halfway to the neighbouring stop, so both
+        // stay reachable however the bands are set.
+        for (i = 0; i < unique.length; i++) {
+            if (i > 0) unique[i].bandUp = Math.min(unique[i].bandUp, (unique[i].top - unique[i - 1].top) / 2);
+            if (i < unique.length - 1) unique[i].bandDown = Math.min(unique[i].bandDown, (unique[i + 1].top - unique[i].top) / 2);
+        }
+        this.stops = unique;
+        return unique;
+    };
+    Stops.prototype.glide = function (stop) {
+        var behavior = this.options.smooth && !reducedMotion() ? 'smooth' : 'auto';
+        this.gliding = true;
+        // A stop the scroller cannot reach (past its end) fires no scroll
+        // event: do not stay "gliding" waiting for one.
+        clearTimeout(this.glideTimer);
+        this.glideTimer = setTimeout(this.onInterrupt, 2 * this.options.settle);
+        this.root.dispatchEvent(new CustomEvent('sticky:stop', {
+            bubbles: true,
+            detail: { scroller: this.scroller, stop: stop.element, top: stop.top }
+        }));
+        this.scroller.scrollTo({ top: stop.top, behavior: behavior });
+    };
+    Stops.prototype.settle = function () {
+        this.timer = null;
+        // A glide of ours has just arrived (or been interrupted): let go.
+        if (this.gliding) {
+            this.gliding = false;
+            return;
+        }
+        // The browser bringing a focused field into view: it rests where the
+        // field is, wherever that falls between the stops.
+        if (this.revealing) {
+            this.revealing = false;
+            return;
+        }
+        if (this.paused || api.paused) return;
+        var stops = this.measure();
+        if (!stops.length) return;
+        var tolerance = this.options.tolerance;
+        var y = this.top();
+        var direction = this.direction;
+        var from = this.start;
+        var i;
+        // At a stop already: nothing to finish.
+        for (i = 0; i < stops.length; i++) {
+            if (Math.abs(y - stops[i].top) <= tolerance) return;
+        }
+        var first = stops[0];
+        var last = stops[stops.length - 1];
+        // Before the first stop: inside its band above it, heading down - or
+        // an overshoot from below - goes to the stop. Otherwise free.
+        if (y < first.top) {
+            var overshotUp = from > first.top + tolerance;
+            if (y > first.top - first.bandUp && (direction > 0 || overshotUp)) this.glide(first);
+            return;
+        }
+        // Past the last stop: inside its band below it, heading up - or an
+        // overshoot from above - goes back to the stop. Otherwise free.
+        if (y > last.top) {
+            var overshotDown = from < last.top - tolerance;
+            if (y < last.top + last.bandDown && (direction < 0 || overshotDown)) this.glide(last);
+            return;
+        }
+        // Between two stops: on to the one the reader was heading for, unless
+        // the scroll barely left the other, in which case back to it.
+        for (i = 0; i < stops.length - 1; i++) {
+            var upper = stops[i];
+            var lower = stops[i + 1];
+            if (y <= upper.top || y >= lower.top) continue;
+            if (direction > 0) this.glide(y < upper.top + upper.bandDown ? upper : lower);
+            else if (direction < 0) this.glide(y > lower.top - lower.bandUp ? lower : upper);
+            return;
+        }
+    };
+    Stops.prototype.onScroll = function () {
+        var y = this.top();
+        var step = y > this.last ? 1 : (y < this.last ? -1 : 0);
+        clearTimeout(this.glideTimer);
+        // The first event after a rest starts a new gesture.
+        if (this.timer === null && !this.gliding) {
+            this.start = this.last;
+            this.revealing = now() - this.focusedAt < REVEAL;
+        }
+        this.last = y;
+        // Which way the READER is going, not our own glide.
+        if (!this.gliding && step) this.direction = step;
+        clearTimeout(this.timer);
+        this.timer = setTimeout(this.settle, this.options.settle);
+        if (this.options.progress) this.queue();
+    };
+    Stops.prototype.onInterrupt = function () {
+        this.gliding = false;
+    };
+    Stops.prototype.onFocus = function () {
+        this.focusedAt = now();
+    };
+    Stops.prototype.onResize = function () {
+        this.refresh();
+    };
+    /** Re-measure the stops and report the progress. For content that moved. */
+    Stops.prototype.refresh = function () {
+        this.measure();
+        if (this.options.progress) this.progress();
+        return this;
+    };
+    Stops.prototype.queue = function () {
+        if (this.frame !== null) return;
+        this.frame = requestAnimationFrame(this.tick);
+    };
+    Stops.prototype.tick = function () {
+        this.frame = null;
+        this.progress();
+    };
+    /**
+     * Where the scroll is between its two nearest stops: {index, from, to,
+     * top, progress, held}, also written to the custom properties and sent as
+     * sticky:progress when it changed. null with fewer than two stops.
+     */
+    Stops.prototype.progress = function () {
+        var stops = this.measure();
+        var style = this.root.style;
+        if (stops.length < 2) {
+            if (this.state) {
+                style.removeProperty('--sticky-stop');
+                style.removeProperty('--sticky-progress');
+                style.removeProperty('--sticky-progress-held');
+            }
+            this.state = null;
+            return null;
+        }
+        var y = this.top();
+        var i = 0;
+        while (i < stops.length - 2 && y >= stops[i + 1].top) i++;
+        var upper = stops[i];
+        var lower = stops[i + 1];
+        var progress = clamp((y - upper.top) / (lower.top - upper.top), 0, 1);
+        // Held across the bands: still until the scroll has cleared them.
+        var a = upper.top + upper.bandDown;
+        var b = lower.top - lower.bandUp;
+        var held = b > a ? clamp((y - a) / (b - a), 0, 1) : (y < b ? 0 : 1);
+        var previous = this.state;
+        var state = {
+            scroller: this.scroller,
+            index: i,
+            from: upper.element,
+            to: lower.element,
+            top: y,
+            progress: progress,
+            held: held
+        };
+        this.state = state;
+        if (previous && previous.index === i && previous.progress === progress && previous.held === held) return state;
+        style.setProperty('--sticky-stop', String(i));
+        style.setProperty('--sticky-progress', progress.toFixed(4));
+        style.setProperty('--sticky-progress-held', held.toFixed(4));
+        this.root.dispatchEvent(new CustomEvent('sticky:progress', { bubbles: true, detail: state }));
+        return state;
+    };
+    var instances = [];
+    function normalize(scroller) {
+        if (!scroller || scroller === document || scroller === document.documentElement || scroller === document.body) return window;
+        return scroller;
+    }
+    var api = {
+        defaults: defaults,
+        Stops: Stops,
+        paused: 0,
+        /** The stops of a scroller (the window by default); made if needed. */
+        attach: function (scroller, options) {
+            scroller = normalize(scroller);
+            var found = api.get(scroller);
+            if (found) {
+                if (options) extend(found.options, options);
+                return found.refresh();
+            }
+            var made = new Stops(scroller, options);
+            instances.push(made);
+            return made;
+        },
+        get: function (scroller) {
+            scroller = normalize(scroller);
+            for (var i = 0; i < instances.length; i++) {
+                if (instances[i].scroller === scroller) return instances[i];
+            }
+            return null;
+        },
+        /** Hold every scroller's stops off, e.g. while a script scrolls the page. Nests. */
+        pause: function () { api.paused++; return api; },
+        resume: function () { api.paused = Math.max(0, api.paused - 1); return api; },
+        refresh: function () {
+            for (var i = 0; i < instances.length; i++) instances[i].refresh();
+            return api;
+        }
+    };
+    // The page's own stops, without being asked - and again on load, for a
+    // page swapped in place that re-dispatches it.
+    function auto() {
+        if (document.querySelector(defaults.selector)) api.attach(window);
+    }
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', auto);
+    else auto();
+    window.addEventListener('load', auto);
+    return api;
+});