hiding-header - npm Package Compare versions

Comparing version 0.1.8 to 0.2.0

dist/index.d.ts

@@ -5,2 +5,4 @@ export declare function hidingHeader(container: HTMLElement): {
     isPaused: () => boolean;
+    reveal: () => void;
+    hide: () => void;
 };

dist/index.es.js

@@ -5,5 +5,7 @@ function hidingHeader(container) {
     var DEFAULT_BOUNDS_HEIGHT_PROPERTY_NAME = '--hidingHeader-bounds-height';
+    var DEFAULT_ANIMATION_OFFSET_PROPERTY_NAME = '--hidingHeader-animation-offset';
     var contentSelector = DEFAULT_CONTENT_SELECTOR;
     var heightPropertyName = DEFAULT_HEIGHT_PROPERTY_NAME;
     var boundsHeightPropertyName = DEFAULT_BOUNDS_HEIGHT_PROPERTY_NAME;
+    var animationOffsetPropertyName = DEFAULT_ANIMATION_OFFSET_PROPERTY_NAME;
     var lastScrollTopPosition = 0;
@@ -14,3 +16,3 @@ var lastContentHeight = 0;
     var content = container.querySelector(contentSelector);
-    if (content === null) {
+    if (!(content instanceof HTMLElement)) {
         throw new Error("Content '" + contentSelector + "' not found in container.");
@@ -35,2 +37,15 @@ }
     };
+    var animateOffset = function (initialOffset) {
+        content.style.transition = 'none';
+        container.style.setProperty(animationOffsetPropertyName, initialOffset + "px");
+        content.offsetHeight; // Trigger transition
+        content.style.transition = '';
+        container.style.setProperty(animationOffsetPropertyName, '0px');
+    };
+    var updateBoundsHeight = function (boundsHeight) {
+        if (boundsHeight !== lastBoundsHeight) {
+            container.style.setProperty(boundsHeightPropertyName, boundsHeight + "px");
+            lastBoundsHeight = boundsHeight;
+        }
+    };
     var onScroll = function () {
@@ -66,6 +81,3 @@ var parentHeight = getParentHeight();
             })()));
-            if (boundsHeight !== lastBoundsHeight) {
-                container.style.setProperty(boundsHeightPropertyName, boundsHeight + "px");
-                lastBoundsHeight = boundsHeight;
-            }
+            updateBoundsHeight(boundsHeight);
         }
@@ -90,2 +102,19 @@ lastScrollTopPosition = scrollTopPosition;
     };
+    var reveal = function () {
+        var scrollTopPosition = window.scrollY;
+        var contentHeight = getContentHeight();
+        var maxBoundsHeight = getParentHeight() - getRelativeTopOffset();
+        var globalTopOffset = getGlobalTopOffset();
+        var boundsHeight = Math.min(maxBoundsHeight, scrollTopPosition - globalTopOffset + contentHeight);
+        animateOffset(lastBoundsHeight - boundsHeight);
+        updateBoundsHeight(boundsHeight);
+    };
+    var hide = function () {
+        var scrollTopPosition = window.scrollY;
+        var contentHeight = getContentHeight();
+        var globalTopOffset = getGlobalTopOffset();
+        var boundsHeight = Math.max(contentHeight, scrollTopPosition - globalTopOffset);
+        animateOffset(lastBoundsHeight - boundsHeight);
+        updateBoundsHeight(boundsHeight);
+    };
     return {
@@ -95,2 +124,4 @@ run: run,
         isPaused: isPaused,
+        reveal: reveal,
+        hide: hide,
     };
@@ -97,0 +128,0 @@ }

dist/index.js

@@ -9,5 +9,7 @@ 'use strict';
     var DEFAULT_BOUNDS_HEIGHT_PROPERTY_NAME = '--hidingHeader-bounds-height';
+    var DEFAULT_ANIMATION_OFFSET_PROPERTY_NAME = '--hidingHeader-animation-offset';
     var contentSelector = DEFAULT_CONTENT_SELECTOR;
     var heightPropertyName = DEFAULT_HEIGHT_PROPERTY_NAME;
     var boundsHeightPropertyName = DEFAULT_BOUNDS_HEIGHT_PROPERTY_NAME;
+    var animationOffsetPropertyName = DEFAULT_ANIMATION_OFFSET_PROPERTY_NAME;
     var lastScrollTopPosition = 0;
@@ -18,3 +20,3 @@ var lastContentHeight = 0;
     var content = container.querySelector(contentSelector);
-    if (content === null) {
+    if (!(content instanceof HTMLElement)) {
         throw new Error("Content '" + contentSelector + "' not found in container.");
@@ -39,2 +41,15 @@ }
     };
+    var animateOffset = function (initialOffset) {
+        content.style.transition = 'none';
+        container.style.setProperty(animationOffsetPropertyName, initialOffset + "px");
+        content.offsetHeight; // Trigger transition
+        content.style.transition = '';
+        container.style.setProperty(animationOffsetPropertyName, '0px');
+    };
+    var updateBoundsHeight = function (boundsHeight) {
+        if (boundsHeight !== lastBoundsHeight) {
+            container.style.setProperty(boundsHeightPropertyName, boundsHeight + "px");
+            lastBoundsHeight = boundsHeight;
+        }
+    };
     var onScroll = function () {
@@ -70,6 +85,3 @@ var parentHeight = getParentHeight();
             })()));
-            if (boundsHeight !== lastBoundsHeight) {
-                container.style.setProperty(boundsHeightPropertyName, boundsHeight + "px");
-                lastBoundsHeight = boundsHeight;
-            }
+            updateBoundsHeight(boundsHeight);
         }
@@ -94,2 +106,19 @@ lastScrollTopPosition = scrollTopPosition;
     };
+    var reveal = function () {
+        var scrollTopPosition = window.scrollY;
+        var contentHeight = getContentHeight();
+        var maxBoundsHeight = getParentHeight() - getRelativeTopOffset();
+        var globalTopOffset = getGlobalTopOffset();
+        var boundsHeight = Math.min(maxBoundsHeight, scrollTopPosition - globalTopOffset + contentHeight);
+        animateOffset(lastBoundsHeight - boundsHeight);
+        updateBoundsHeight(boundsHeight);
+    };
+    var hide = function () {
+        var scrollTopPosition = window.scrollY;
+        var contentHeight = getContentHeight();
+        var globalTopOffset = getGlobalTopOffset();
+        var boundsHeight = Math.max(contentHeight, scrollTopPosition - globalTopOffset);
+        animateOffset(lastBoundsHeight - boundsHeight);
+        updateBoundsHeight(boundsHeight);
+    };
     return {
@@ -99,2 +128,4 @@ run: run,
         isPaused: isPaused,
+        reveal: reveal,
+        hide: hide,
     };
@@ -101,0 +132,0 @@ }

package.json

 {
 	"name": "hiding-header",
-	"version": "0.1.8",
+	"version": "0.2.0",
 	"description": "Toggles header visibility on scroll.",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -37,2 +37,3 @@ # 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)
 	--hidingHeader-bounds-height: auto;
+	--hidingHeader-animation-offset: 0px;
 	z-index: 10;
@@ -51,2 +52,4 @@ height: var(--hidingHeader-bounds-height);
 	pointer-events: auto;
+	transition: transform 0.2s;
+	transform: translateY(var(--hidingHeader-animation-offset));
 }
@@ -64,21 +67,27 @@ ```
 
-### React component (HTML alternative)
+### More
 
-```jsx
-import React, { useEffect } from 'react'
+```javascript
 import { hidingHeader } from 'hiding-header'
 
-export const HidingHeader = (props) => {
-	const container = React.useRef()
+const container = document.querySelector('#hidingHeader')
+const instance = hidingHeader(container)
 
-	useEffect(() => {
-		hidingHeader(container.current)
-	}, [])
+// …
+instance.pause() // Pauses scroll listener
+// …
+instance.isPaused() // Check if scroll listener is paused
+// …
+instance.run() // Reactivates scroll listener
+// …
 
-	return (
-		<div className="hidingHeader" ref={container}>
-			<div className="hidingHeader-in">{props.children}</div>
-		</div>
-	)
-}
+// …
+instance.reveal() // Reveals header if hidden
+// …
+instance.hide() // Hides header if visible
+// …
 ```
+
+### React component
+
+For more information see [hiding-header-react](https://www.npmjs.com/package/hiding-header-react).

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30358

increased by39.96%

Lines of code

257

increased by33.16%

Number of lines in readme file

91

increased by10.98%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes