ionic-react-header-parallax - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/useIonicHeaderParallax.js

@@ -46,6 +46,6 @@ "use strict";
         if (!toolbarShadowRoot)
-            return;
+            throw new Error('No shadow');
         const toolbarBackground = toolbarShadowRoot.querySelector('.toolbar-background');
         if (!toolbarBackground)
-            return;
+            throw new Error('No .toolbar-background');
         // ion-title
@@ -58,3 +58,3 @@ const ionTitle = toolbar.querySelector('ion-title');
         if (!ionContent)
-            throw new Error('Parallax an <ion-content> element on the page to work.');
+            throw new Error('Parallax requires an <ion-content> element on the page to work.');
         const scrollContent = (_a = ionContent.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.inner-scroll');
@@ -89,3 +89,2 @@ if (!scrollContent) {
         // still in init use JS DOM
-        let headerHeight = scrollContent === null || scrollContent === void 0 ? void 0 : scrollContent.clientHeight;
         setTicking(false);
@@ -95,10 +94,7 @@ // fetch styles
         let headerMinHeight = toolbar.offsetHeight;
-        let scrollContentPaddingTop = 0;
-        if (scrollContent) {
-            scrollContentPaddingTop = parseFloat(window.getComputedStyle(scrollContent, null).paddingTop.replace('px', ''));
+        let scrollContentPaddingTop = parseFloat(window.getComputedStyle(scrollContent, null).paddingTop.replace('px', ''));
+        const originalToolbarBgColor = window.getComputedStyle(toolbarBackground, null).backgroundColor;
+        if (!originalToolbarBgColor) {
+            throw new Error('Error: toolbarBackround is null.');
         }
-        let originalToolbarBgColor = 'white';
-        if (toolbarBackground) {
-            originalToolbarBgColor = window.getComputedStyle(toolbarBackground, null).backgroundColor;
-        }
         // header and title
@@ -131,5 +127,3 @@ header.style.position = 'relative';
         // .toolbar-background
-        if (toolbarBackground) {
-            toolbarBackground.style.backgroundColor = originalToolbarBgColor;
-        }
+        toolbarBackground.style.backgroundColor = originalToolbarBgColor;
         // .bar-buttons
@@ -149,6 +143,2 @@ if (barButtons) {
         }
-        /** init events */
-        window.addEventListener('resize', () => {
-            headerHeight = scrollContent.clientHeight;
-        }, false);
         if (scrollContent) {
@@ -160,12 +150,2 @@ scrollContent.addEventListener('scroll', (_e) => {
                         const scrollTop = scrollContent.scrollTop;
-                        let translateAmt;
-                        let scaleAmt;
-                        if (scrollTop >= 0) {
-                            translateAmt = scrollTop / 2;
-                            scaleAmt = 1;
-                        }
-                        else {
-                            translateAmt = 0;
-                            scaleAmt = scrollTop / headerHeight + 1;
-                        }
                         // Parallax total progress
@@ -177,3 +157,2 @@ headerMinHeight = toolbar.offsetHeight;
                         targetHeight = Math.max(targetHeight, headerMinHeight);
-                        header.style.transform = 'translate3d(0,' + translateAmt + 'px,0) scale(' + scaleAmt + ',' + scaleAmt + ')';
                         // .toolbar-background: change color
@@ -180,0 +159,0 @@ imageOverlay.style.height = `${targetHeight}px`;

package.json

 {
   "name": "ionic-react-header-parallax",
-  "version": "0.1.1",
-  "description": "A React Hook parallax effect for Ionic React <IonHeader> component",
+  "version": "0.1.2",
+  "description": "Easy to use hook to handle the parallax effect for IonHeader component in React Ionic",
   "author": {
@@ -65,3 +65,3 @@ "name": "Ahmd Nouira",
     "eslint": "7.32.0",
-    "jest": "26.6.3",
+    "jest": "26.6.0",
     "np": "7.5.0",
@@ -79,3 +79,6 @@ "prettier": "2.3.2",
     "registry": "https://registry.npmjs.org"
+  },
+  "resolutions": {
+    "jest": "26.6.0"
   }
 }

README.md

 <h1 align="center">
-    <b>Easy to use hook to handle the parallax effect for <b>IonHeader</b> component React Ionic.
+    Easy to use hook to handle the parallax effect for <b>IonHeader</b> component in React Ionic.
 </h1>
@@ -24,3 +24,3 @@
 
-# Installation with npm
+## Installation with npm
 
@@ -31,2 +31,4 @@ ```sh
 
+## Installation with yarn
+
 ```sh
@@ -36,3 +38,3 @@ yarn add ionic-react-header-parallax
 
-# Example
+## Example
 
@@ -82,6 +84,6 @@ ```tsx
 
-# API
+## API
 
-- [useIonHeaderParallax](https://github.com/ahmnouira/hooks#ionic-react-header-parallax)
+- [useIonHeaderParallax](https://github.com/ahmnouira/ionic-react-header-parallax#useIonHeaderParallax)
 
-## `useIonHeaderParallax`
+### `useIonHeaderParallax`

No alert changes

Improved metrics

Number of lines in readme file

86

increased by2.38%

Worsened metrics

Total package byte prevSize

20004

decreased by-3.71%

Lines of code

194

decreased by-9.77%

No dependency changes