hiding-header - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.d.ts

@@ -1,1 +0,5 @@
-export declare function hidingHeader(container: HTMLElement): void;
+export declare function hidingHeader(container: HTMLElement): {
+    run: () => void;
+    pause: () => void;
+    isPaused: () => boolean;
+};

dist/index.js

@@ -12,5 +12,5 @@ export function hidingHeader(container) {
     var contentHeight = 0;
-    var wasScrollingDown = true;
     var lastScrollCap = 0;
     var topOffset = 0;
+    var paused = false;
     var content = container.querySelector(contentSelector);
@@ -54,24 +54,26 @@ if (content === null) {
         var isScrollingDown = scrollTopPosition > lastScrollTopPosition;
-        // @TODO: fix offset variant on direction change
-        var scrollCap = Math.min(parentHeight - contentHeight, (function () {
-            var scrollCapBottomPosition = lastScrollTopPosition +
-                containerOffset +
-                lastScrollCap +
-                contentHeight;
-            if (isScrollingDown) {
-                var newScrollCap = scrollTopPosition - contentHeight;
-                return scrollCapBottomPosition < scrollTopPosition
-                    ? newScrollCap
-                    : lastScrollCap;
+        if (!paused) {
+            // @TODO: fix offset variant on direction change
+            var scrollCap = Math.min(parentHeight - contentHeight, (function () {
+                var scrollCapBottomPosition = lastScrollTopPosition +
+                    containerOffset +
+                    lastScrollCap +
+                    contentHeight;
+                if (isScrollingDown) {
+                    var newScrollCap = scrollTopPosition - contentHeight;
+                    return scrollCapBottomPosition < scrollTopPosition
+                        ? newScrollCap
+                        : lastScrollCap;
+                }
+                else {
+                    var newScrollCap = scrollTopPosition;
+                    return newScrollCap < scrollCapBottomPosition - contentHeight
+                        ? newScrollCap
+                        : lastScrollCap;
+                }
+            })());
+            if (scrollCap !== lastScrollCap) {
+                container.style.setProperty(scrollCapPropertyName, scrollCap + "px");
+                lastScrollCap = scrollCap;
             }
-            else {
-                var newScrollCap = scrollTopPosition;
-                return newScrollCap < scrollCapBottomPosition - contentHeight
-                    ? newScrollCap
-                    : lastScrollCap;
-            }
-        })());
-        if (scrollCap !== lastScrollCap) {
-            container.style.setProperty(scrollCapPropertyName, scrollCap + "px");
-            lastScrollCap = scrollCap;
         }
@@ -87,2 +89,16 @@ lastScrollTopPosition = scrollTopPosition;
     initialize();
+    var run = function () {
+        paused = false;
+    };
+    var pause = function () {
+        paused = true;
+    };
+    var isPaused = function () {
+        return paused;
+    };
+    return {
+        run: run,
+        pause: pause,
+        isPaused: isPaused,
+    };
 }

package.json

 {
 	"name": "hiding-header",
-	"version": "0.0.3",
-	"description": "Toggles header visibility.",
+	"version": "0.0.4",
+	"description": "Toggles header visibility on scroll.",
 	"main": "dist/index.js",
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts",

README.md

 # 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)
 
-Toggles header visibility.
+Toggles header visibility on scroll. [Demo](https://raw.githack.com/FilipChalupa/hiding-header/master/demo.html).
 
@@ -5,0 +5,0 @@ ## Installation

src/index.ts

@@ -14,5 +14,5 @@ export function hidingHeader(container: HTMLElement) {
 	let contentHeight = 0
-	let wasScrollingDown = true
 	let lastScrollCap = 0
 	let topOffset = 0
+	let paused = false
 
@@ -70,27 +70,29 @@ const content = container.querySelector(contentSelector)
 
-		// @TODO: fix offset variant on direction change
-		const scrollCap = Math.min(
-			parentHeight - contentHeight,
-			(() => {
-				const scrollCapBottomPosition =
-					lastScrollTopPosition +
-					containerOffset +
-					lastScrollCap +
-					contentHeight
-				if (isScrollingDown) {
-					const newScrollCap = scrollTopPosition - contentHeight
-					return scrollCapBottomPosition < scrollTopPosition
-						? newScrollCap
-						: lastScrollCap
-				} else {
-					const newScrollCap = scrollTopPosition
-					return newScrollCap < scrollCapBottomPosition - contentHeight
-						? newScrollCap
-						: lastScrollCap
-				}
-			})()
-		)
-		if (scrollCap !== lastScrollCap) {
-			container.style.setProperty(scrollCapPropertyName, `${scrollCap}px`)
-			lastScrollCap = scrollCap
+		if (!paused) {
+			// @TODO: fix offset variant on direction change
+			const scrollCap = Math.min(
+				parentHeight - contentHeight,
+				(() => {
+					const scrollCapBottomPosition =
+						lastScrollTopPosition +
+						containerOffset +
+						lastScrollCap +
+						contentHeight
+					if (isScrollingDown) {
+						const newScrollCap = scrollTopPosition - contentHeight
+						return scrollCapBottomPosition < scrollTopPosition
+							? newScrollCap
+							: lastScrollCap
+					} else {
+						const newScrollCap = scrollTopPosition
+						return newScrollCap < scrollCapBottomPosition - contentHeight
+							? newScrollCap
+							: lastScrollCap
+					}
+				})()
+			)
+			if (scrollCap !== lastScrollCap) {
+				container.style.setProperty(scrollCapPropertyName, `${scrollCap}px`)
+				lastScrollCap = scrollCap
+			}
 		}
@@ -110,2 +112,18 @@
 	initialize()
+
+	const run = () => {
+		paused = false
+	}
+	const pause = () => {
+		paused = true
+	}
+	const isPaused = () => {
+		return paused
+	}
+
+	return {
+		run,
+		pause,
+		isPaused,
+	}
 }

tsconfig.json

@@ -0,0 +0,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

12406

increased by3.89%

Lines of code

225

increased by15.98%

Worsened metrics

Number of package files

7

decreased by-22.22%

No dependency changes