hiding-header - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/index.d.ts

@@ -1,2 +0,2 @@
-export declare function hidingHeader(container: HTMLElement, { heightPropertyName, boundsHeightPropertyName, animationOffsetPropertyName, snap, }?: {
+export declare function hidingHeader(container: HTMLElement, { heightPropertyName, boundsHeightPropertyName, animationOffsetPropertyName, snap, onHeightChange, onVisibleHeightChange, }?: {
     heightPropertyName?: string | undefined;
@@ -6,2 +6,4 @@ boundsHeightPropertyName?: string | undefined;
     snap?: boolean | undefined;
+    onHeightChange?: ((height: number) => void) | undefined;
+    onVisibleHeightChange?: ((height: number) => void) | undefined;
 }): {
@@ -13,2 +15,4 @@ run: () => void;
     hide: () => void;
+    getHeight: () => number;
+    getVisibleHeight: () => number;
 };

dist/index.es.js

 function hidingHeader(container, _a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.heightPropertyName, heightPropertyName = _c === void 0 ? '--hidingHeader-height' : _c, _d = _b.boundsHeightPropertyName, boundsHeightPropertyName = _d === void 0 ? '--hidingHeader-bounds-height' : _d, _e = _b.animationOffsetPropertyName, animationOffsetPropertyName = _e === void 0 ? '--hidingHeader-animation-offset' : _e, _f = _b.snap, snap = _f === void 0 ? true : _f;
+    var _b = _a === void 0 ? {} : _a, _c = _b.heightPropertyName, heightPropertyName = _c === void 0 ? '--hidingHeader-height' : _c, _d = _b.boundsHeightPropertyName, boundsHeightPropertyName = _d === void 0 ? '--hidingHeader-bounds-height' : _d, _e = _b.animationOffsetPropertyName, animationOffsetPropertyName = _e === void 0 ? '--hidingHeader-animation-offset' : _e, _f = _b.snap, snap = _f === void 0 ? true : _f, _g = _b.onHeightChange, onHeightChange = _g === void 0 ? function (height) { } : _g, _h = _b.onVisibleHeightChange, onVisibleHeightChange = _h === void 0 ? function (height) { } : _h;
+    var content = container.querySelector('*');
     var lastScrollTopPosition = 0;
-    var lastContentHeight = 0;
+    var contentHeight = (function () {
+        var getContentHeight = function () { return content.clientHeight; };
+        var setContentHeightProperty = function (height) {
+            container.style.setProperty(heightPropertyName, height + "px");
+        };
+        var resizeObserver = new ResizeObserver(function () {
+            var newContentHeight = getContentHeight();
+            if (contentHeight !== newContentHeight) {
+                contentHeight = newContentHeight;
+                setContentHeightProperty(contentHeight);
+                onScroll();
+                onHeightChange(contentHeight);
+            }
+        });
+        resizeObserver.observe(content);
+        var initialHeight = getContentHeight();
+        setContentHeightProperty(initialHeight);
+        return initialHeight;
+    })();
+    var visibleHeight = contentHeight;
     var paused = false;
     var lastBoundsHeight = 0;
     var pointersDown = 0;
-    var content = container.querySelector('*');
     var parent = container.parentElement;
@@ -13,5 +32,2 @@ if (parent === null) {
     }
-    var getContentHeight = function () {
-        return content.clientHeight;
-    };
     var getParentHeight = function () {
@@ -44,16 +60,7 @@ return parent.clientHeight;
     var capBoundsHeight = function (rawBoundsHeight) {
-        return Math.min(getParentHeight() - getRelativeTopOffset(), Math.max(getContentHeight(), rawBoundsHeight));
+        return Math.min(getParentHeight() - getRelativeTopOffset(), Math.max(contentHeight, rawBoundsHeight));
     };
-    var getHeightInsideViewport = function () {
-        var contentHeight = getContentHeight();
-        var top = content.getBoundingClientRect().top;
-        return Math.max(0, Math.min(contentHeight + top, contentHeight));
-    };
     var snapIfPossible = function () {
-        var contentHeight = getContentHeight();
-        var heightInsideViewport = getHeightInsideViewport();
-        if (snap &&
-            heightInsideViewport !== 0 &&
-            heightInsideViewport !== contentHeight) {
-            if (heightInsideViewport < contentHeight / 2) {
+        if (snap && visibleHeight !== 0 && visibleHeight !== contentHeight) {
+            if (visibleHeight < contentHeight / 2) {
                 hide();
@@ -77,10 +84,35 @@ }
     })();
+    var updateVisibleHeight = function () {
+        visibleHeight = (function () {
+            var top = content.getBoundingClientRect().top;
+            var newVisibleHeight = Math.max(0, Math.min(contentHeight + top, contentHeight));
+            if (visibleHeight !== newVisibleHeight) {
+                onVisibleHeightChange(newVisibleHeight);
+            }
+            return newVisibleHeight;
+        })();
+    };
+    var onTransitioning = function () {
+        updateVisibleHeight();
+    };
+    (function () {
+        var running = false;
+        var loop = function () {
+            if (!running) {
+                return;
+            }
+            onTransitioning();
+            requestAnimationFrame(loop);
+        };
+        content.addEventListener('transitionstart', function () {
+            running = true;
+            loop();
+        });
+        content.addEventListener('transitionend', function () {
+            running = false;
+            onTransitioning();
+        });
+    })();
     var onScroll = function () {
         var globalTopOffset = getGlobalTopOffset();
-        // Handle content height
-        var contentHeight = getContentHeight();
-        if (lastContentHeight !== contentHeight) {
-            lastContentHeight = contentHeight;
-            container.style.setProperty(heightPropertyName, lastContentHeight + "px");
-        }
         // Handle bounds height
@@ -108,2 +140,3 @@ var scrollTopPosition = window.scrollY;
             onScrollStopDebounced();
+            updateVisibleHeight();
         }
@@ -138,3 +171,2 @@ lastScrollTopPosition = scrollTopPosition;
         var scrollTopPosition = window.scrollY;
-        var contentHeight = getContentHeight();
         var globalTopOffset = getGlobalTopOffset();
@@ -152,2 +184,4 @@ var boundsHeight = capBoundsHeight(scrollTopPosition - globalTopOffset + contentHeight);
     };
+    var getHeight = function () { return contentHeight; };
+    var getVisibleHeight = function () { return visibleHeight; };
     return {
@@ -159,2 +193,4 @@ run: run,
         hide: hide,
+        getHeight: getHeight,
+        getVisibleHeight: getVisibleHeight,
     };
@@ -161,0 +197,0 @@ }

dist/index.js

@@ -6,9 +6,28 @@ 'use strict';
 function hidingHeader(container, _a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.heightPropertyName, heightPropertyName = _c === void 0 ? '--hidingHeader-height' : _c, _d = _b.boundsHeightPropertyName, boundsHeightPropertyName = _d === void 0 ? '--hidingHeader-bounds-height' : _d, _e = _b.animationOffsetPropertyName, animationOffsetPropertyName = _e === void 0 ? '--hidingHeader-animation-offset' : _e, _f = _b.snap, snap = _f === void 0 ? true : _f;
+    var _b = _a === void 0 ? {} : _a, _c = _b.heightPropertyName, heightPropertyName = _c === void 0 ? '--hidingHeader-height' : _c, _d = _b.boundsHeightPropertyName, boundsHeightPropertyName = _d === void 0 ? '--hidingHeader-bounds-height' : _d, _e = _b.animationOffsetPropertyName, animationOffsetPropertyName = _e === void 0 ? '--hidingHeader-animation-offset' : _e, _f = _b.snap, snap = _f === void 0 ? true : _f, _g = _b.onHeightChange, onHeightChange = _g === void 0 ? function (height) { } : _g, _h = _b.onVisibleHeightChange, onVisibleHeightChange = _h === void 0 ? function (height) { } : _h;
+    var content = container.querySelector('*');
     var lastScrollTopPosition = 0;
-    var lastContentHeight = 0;
+    var contentHeight = (function () {
+        var getContentHeight = function () { return content.clientHeight; };
+        var setContentHeightProperty = function (height) {
+            container.style.setProperty(heightPropertyName, height + "px");
+        };
+        var resizeObserver = new ResizeObserver(function () {
+            var newContentHeight = getContentHeight();
+            if (contentHeight !== newContentHeight) {
+                contentHeight = newContentHeight;
+                setContentHeightProperty(contentHeight);
+                onScroll();
+                onHeightChange(contentHeight);
+            }
+        });
+        resizeObserver.observe(content);
+        var initialHeight = getContentHeight();
+        setContentHeightProperty(initialHeight);
+        return initialHeight;
+    })();
+    var visibleHeight = contentHeight;
     var paused = false;
     var lastBoundsHeight = 0;
     var pointersDown = 0;
-    var content = container.querySelector('*');
     var parent = container.parentElement;
@@ -18,5 +37,2 @@ if (parent === null) {
     }
-    var getContentHeight = function () {
-        return content.clientHeight;
-    };
     var getParentHeight = function () {
@@ -49,16 +65,7 @@ return parent.clientHeight;
     var capBoundsHeight = function (rawBoundsHeight) {
-        return Math.min(getParentHeight() - getRelativeTopOffset(), Math.max(getContentHeight(), rawBoundsHeight));
+        return Math.min(getParentHeight() - getRelativeTopOffset(), Math.max(contentHeight, rawBoundsHeight));
     };
-    var getHeightInsideViewport = function () {
-        var contentHeight = getContentHeight();
-        var top = content.getBoundingClientRect().top;
-        return Math.max(0, Math.min(contentHeight + top, contentHeight));
-    };
     var snapIfPossible = function () {
-        var contentHeight = getContentHeight();
-        var heightInsideViewport = getHeightInsideViewport();
-        if (snap &&
-            heightInsideViewport !== 0 &&
-            heightInsideViewport !== contentHeight) {
-            if (heightInsideViewport < contentHeight / 2) {
+        if (snap && visibleHeight !== 0 && visibleHeight !== contentHeight) {
+            if (visibleHeight < contentHeight / 2) {
                 hide();
@@ -82,10 +89,35 @@ }
     })();
+    var updateVisibleHeight = function () {
+        visibleHeight = (function () {
+            var top = content.getBoundingClientRect().top;
+            var newVisibleHeight = Math.max(0, Math.min(contentHeight + top, contentHeight));
+            if (visibleHeight !== newVisibleHeight) {
+                onVisibleHeightChange(newVisibleHeight);
+            }
+            return newVisibleHeight;
+        })();
+    };
+    var onTransitioning = function () {
+        updateVisibleHeight();
+    };
+    (function () {
+        var running = false;
+        var loop = function () {
+            if (!running) {
+                return;
+            }
+            onTransitioning();
+            requestAnimationFrame(loop);
+        };
+        content.addEventListener('transitionstart', function () {
+            running = true;
+            loop();
+        });
+        content.addEventListener('transitionend', function () {
+            running = false;
+            onTransitioning();
+        });
+    })();
     var onScroll = function () {
         var globalTopOffset = getGlobalTopOffset();
-        // Handle content height
-        var contentHeight = getContentHeight();
-        if (lastContentHeight !== contentHeight) {
-            lastContentHeight = contentHeight;
-            container.style.setProperty(heightPropertyName, lastContentHeight + "px");
-        }
         // Handle bounds height
@@ -113,2 +145,3 @@ var scrollTopPosition = window.scrollY;
             onScrollStopDebounced();
+            updateVisibleHeight();
         }
@@ -143,3 +176,2 @@ lastScrollTopPosition = scrollTopPosition;
         var scrollTopPosition = window.scrollY;
-        var contentHeight = getContentHeight();
         var globalTopOffset = getGlobalTopOffset();
@@ -157,2 +189,4 @@ var boundsHeight = capBoundsHeight(scrollTopPosition - globalTopOffset + contentHeight);
     };
+    var getHeight = function () { return contentHeight; };
+    var getVisibleHeight = function () { return visibleHeight; };
     return {
@@ -164,2 +198,4 @@ run: run,
         hide: hide,
+        getHeight: getHeight,
+        getVisibleHeight: getVisibleHeight,
     };
@@ -166,0 +202,0 @@ }

package.json

 {
 	"name": "hiding-header",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"description": "Toggles header visibility on scroll.",
@@ -32,2 +32,3 @@ "main": "./dist/index.js",
 		"@rollup/plugin-node-resolve": "^10.0.0",
+		"@types/resize-observer-browser": "^0.1.5",
 		"prettier": "^2.1.2",
@@ -34,0 +35,0 @@ "rollup": "^2.33.1",

README.md

@@ -53,18 +53,22 @@ # Hiding Header [![npm](https://img.shields.io/npm/v/hiding-header.svg)](https://www.npmjs.com/package/hiding-header) [![Dependencies](https://img.shields.io/david/FilipChalupa/hiding-header.svg)](https://www.npmjs.com/package/hiding-header?activeTab=dependencies) ![npm type definitions](https://img.shields.io/npm/types/hiding-header.svg)
 		animationOffsetPropertyName = '--hidingHeader-animation-offset',
-		snap = true,
+		snap = true, // Reveal or hide header if user stops scrolling in middle
+		onHeightChange = (height: number) => {}, // When content height changes
+		onVisibleHeightChange = (height: number) => {}, // When part of header is revealed
 })
 
 // …
-instance.pause() // Pauses scroll listener
+instance.pause() // Pauses recalculations of sticky boundaries on scroll
+instance.isPaused() // Check if paused
+instance.run() // Reactivates
 // …
-instance.isPaused() // Check if scroll listener is paused
+
 // …
-instance.run() // Reactivates scroll listener
+instance.reveal() // Reveals header if hidden
+instance.hide() // Hides header if visible
 // …
 
 // …
-instance.reveal() // Reveals header if hidden
+instance.getHeight() // Returns content height in pixels
+instance.getVisibleHeight() // Returns height of visible content area in pixels
 // …
-instance.hide() // Hides header if visible
-// …
 ```
@@ -71,0 +75,0 @@

No alert changes

Improved metrics

Total package byte prevSize

20758

increased by20.88%

Lines of code

422

increased by21.97%

Number of lines in readme file

82

increased by5.13%

Worsened metrics

Dev dependency count

10

increased by11.11%

No dependency changes