npm - @glitchr/stickyjs - Versions diffs - 1.2.0 → 1.2.2 - Mend

@glitchr/stickyjs 1.2.0 → 1.2.2

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 (4) hide show

package/README.md CHANGED Viewed

@@ -1,5 +1,20 @@
 # Sticky JS library
+## The address follows the reading
+With `replacehash` on (the default), the page's address carries the `#id` of
+the headline being read: `.sticky-headlines[id]`, any `[id]` inside a
+`.sticky-headlines`, or a `.sticky-magnet[id]` (`.sticky-headlines-skip` left
+out). A headline is being read once it has reached where its own link would
+land it - the scroller's `scroll-padding-top` plus the headline's
+`scroll-margin-top` - and until it has scrolled out of sight. At the top, with
+none reached, the address has no hash. The change is a `history.replaceState`:
+it adds nothing to the history.
+```html
+<section id="menus" class="sticky-headlines" style="scroll-margin-top: 4rem">…</section>
+```
 ## Scroll stops
 `src/js/stops.js` - places on the page a scroll settles on, once it has come

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@glitchr/stickyjs",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Sticky scroll library",
   "main": "src/index.js",
   "repository": {

package/src/js/sticky.js CHANGED Viewed

@@ -1173,7 +1173,13 @@ $.fn.serializeObject = function () {
             var elAll = $(ids).filter(function() {
                 if(this === $(Settings.identifier)) return false;
-                return this.getBoundingClientRect().top < scrollPaddingTop;
+                // Reached where an anchor jump would land it: the scroller's
+                // scroll-padding-top plus the headline's own scroll-margin-top
+                // (a section that lands under a fixed header, a band lower
+                // than the rest). Without the margin, a headline landed on
+                // by its own link was not the current one yet.
+                var margin = parseFloat(getComputedStyle(this).scrollMarginTop) || 0;
+                return this.getBoundingClientRect().top - margin < scrollPaddingTop;
             }).toArray().sort(function (el1, el2) {
                 return el1.offsetTop > el2.offsetTop ? -1
                     : (el1.offsetTop < el2.offsetTop ?  1 : 0);

package/src/js/stops.js CHANGED Viewed

@@ -19,7 +19,8 @@
 //
 // 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.
+// one stop. A stop past the end of the scroll (a footer shorter than the
+// screen) is at the end of the scroll.
 //
 // Nothing happens during the scroll. Acting at the first movement fights
 // trackpad momentum, which keeps pushing during and after the glide; and the
@@ -30,6 +31,11 @@
 // 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
@@ -68,6 +74,12 @@
     // 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];
@@ -114,17 +126,25 @@
         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();
@@ -135,6 +155,7 @@
         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);
@@ -158,6 +179,13 @@
         return this.isWindow ? (window.scrollY || window.pageYOffset || 0) : this.scroller.scrollTop;
     };
+    /** The furthest the scroller can scroll. */
+    Stops.prototype.max = function () {
+        return Math.max(0, this.isWindow
+            ? document.documentElement.scrollHeight - window.innerHeight
+            : this.scroller.scrollHeight - this.scroller.clientHeight);
+    };
     /** 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);
@@ -173,6 +201,7 @@
     Stops.prototype.measure = function () {
         var options = this.options;
         var elements = this.root.querySelectorAll(options.selector);
+        var max = this.max();
         var stops = [];
         var i;
@@ -181,7 +210,11 @@
             if (!el.getClientRects().length) continue; // display: none
             stops.push({
                 element: el,
-                top: Math.round(this.position(el)),
+                // A stop the scroll cannot bring to the top (a footer shorter
+                // than the screen) rests where the scroll ends. Taken as out
+                // of reach, it made every scroll up from the very bottom -
+                // Safari's bounce included - glide away to the stop above.
+                top: Math.min(Math.round(this.position(el)), max),
                 bandUp: Math.max(0, toPixels(el.dataset.stickyBandUp, el, options.bandUp)),
                 bandDown: Math.max(0, toPixels(el.dataset.stickyBandDown, el, options.bandDown))
             });
@@ -230,6 +263,12 @@
             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();
@@ -285,7 +324,10 @@
         clearTimeout(this.glideTimer);
         // The first event after a rest starts a new gesture.
-        if (this.timer === null && !this.gliding) this.start = this.last;
+        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.
@@ -301,6 +343,10 @@
         this.gliding = false;
     };
+    Stops.prototype.onFocus = function () {
+        this.focusedAt = now();
+    };
     Stops.prototype.onResize = function () {
         this.refresh();
     };