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

Comparing version 0.0.3 to 0.0.4

./@types/index.ts

@@ -1,3 +0,1 @@
-import * as React from 'react'
-
 export type UseIonHeaderParallxInput = {
@@ -13,1 +11,3 @@ image: string
 }
+
+export { useIonHeaderParallax } from '../src/useIonicHeaderParallax'

CHANGELOG.md

 # v0.0.3 (Tue Aug 17 2021)
 
-#### 🐛 Bug Fix
-
-- Configure Renovate [#1](https://github.com/ahmnouira/ionic-react-header-parallax/pull/1) ([@renovate-bot](https://github.com/renovate-bot) [@renovate[bot]](https://github.com/renovate[bot]))
-
 #### ⚠️ Pushed to `master`
 
 - fix: CHANGELOG ([e-mail])
-- fix: ignore .env ([e-mail])
-- Merge branch 'master' of github.com:ahmnouira/ionic-react-header-parallax ([e-mail])
-- Create LICENSE ([e-mail])
-- 0.0.1 ([e-mail])
-- add README ([e-mail])
-- add files ([e-mail])
-- first commit ([e-mail])
 
@@ -18,0 +7,0 @@ #### Authors: 3

dist/@types/index.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+/// <reference types="react" />
 export declare type UseIonHeaderParallxInput = {
@@ -11,2 +11,3 @@ image: string;
 };
+export { useIonHeaderParallax } from '../src/useIonicHeaderParallax';
 //# sourceMappingURL=index.d.ts.map

dist/@types/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIonHeaderParallax = void 0;
+var useIonicHeaderParallax_1 = require("../src/useIonicHeaderParallax");
+Object.defineProperty(exports, "useIonHeaderParallax", { enumerable: true, get: function () { return useIonicHeaderParallax_1.useIonHeaderParallax; } });
 //# sourceMappingURL=index.js.map

dist/src/useIonicHeaderParallax.d.ts

 import * as React from 'react';
-export declare type UseIonicHeaderParallxInput = {
+export declare type UseIonicHeaderParallaxInput = {
     image: string;
@@ -8,6 +8,7 @@ expandedColor: string;
 };
-export declare type UseIonHeaderParallxInputResult = {
+export declare type UseIonHeaderParallaxInputResult = {
     ref: React.MutableRefObject<HTMLElement | null>;
+    onScroll: () => void;
 };
-export declare function UseIonHeaderParallxInputResult({}: UseIonicHeaderParallxInput): UseIonHeaderParallxInputResult;
+export declare function useIonHeaderParallax({ titleColor, image, expandedColor, maximumHeight, }: UseIonicHeaderParallaxInput): UseIonHeaderParallaxInputResult;
 //# sourceMappingURL=useIonicHeaderParallax.d.ts.map

dist/src/useIonicHeaderParallax.js

@@ -22,5 +22,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UseIonHeaderParallxInputResult = void 0;
+exports.useIonHeaderParallax = void 0;
 const React = __importStar(require("react"));
-function UseIonHeaderParallxInputResult({}) {
+function useIonHeaderParallax({ titleColor, image, expandedColor, maximumHeight = 300, }) {
     const headerRef = React.useRef(null);
@@ -34,14 +34,14 @@ let header;
     let scrollContent;
-    // let headerHeight: any
-    // let headerMinHeight: number
-    // let translateAmt: any
-    // let scaleAmt: any
-    // let scrollTop: any
-    // let lastScrollTop: any
-    // let ticking: any
-    // let originalToolbarBgColor: string
+    let headerHeight;
+    let headerMinHeight;
+    let translateAmt;
+    let scaleAmt;
+    let scrollTop;
+    let lastScrollTop;
+    let ticking;
+    let originalToolbarBgColor;
     let overlayTitle;
     let ionTitle;
-    // let overlayButtons: HTMLElement[]
-    // let scrollContentPaddingTop: number
+    let overlayButtons;
+    let scrollContentPaddingTop;
     React.useEffect(() => {
@@ -61,3 +61,3 @@ setTimeout(() => {
         if (!(headerRef && headerRef.current))
-            throw new ReferenceError('Ref is required');
+            throw new ReferenceError('Ref is required to be set to <IonHeader />');
         const parentElement = headerRef.current.parentElement;
@@ -79,3 +79,3 @@ if (!parentElement)
         barButtons = header.querySelector('IonButtons');
-        const ionContent = parentElement.querySelector('ion-content');
+        const ionContent = parentElement.querySelector('IonContent');
         if (!ionContent)
@@ -89,2 +89,4 @@ throw new Error('Parallax directive requires an <IonContent> element on the page to work.');
         }
+        headerHeight = scrollContent.clientHeight;
+        console.log('headerHeight', headerHeight);
         // Create image overlay
@@ -116,9 +118,74 @@ imageOverlay = document.createElement('div');
     };
-    const initStyles = () => { };
+    const initStyles = () => {
+        ticking = false;
+        if (!scrollContent || !toolbar) {
+            return;
+        }
+        // fetch styles
+        headerMinHeight = toolbar.offsetHeight;
+        scrollContentPaddingTop = window.getComputedStyle(scrollContent, null).paddingTop.replace('px', '');
+        scrollContentPaddingTop = parseFloat(scrollContentPaddingTop);
+        if (!toolbarBackground)
+            return;
+        originalToolbarBgColor = window.getComputedStyle(toolbarBackground, null).backgroundColor;
+        if (!originalToolbarBgColor) {
+            throw new Error('Error: toolbarBackround is null.');
+        }
+        // header and title
+        header.style.position = 'relative';
+        if (overlayTitle) {
+            // rerender here
+            overlayTitle.style.color = titleColor;
+            overlayTitle.style.position = 'absolute';
+            overlayTitle.style.width = '100%';
+            overlayTitle.style.height = '100%';
+            overlayTitle.style.textAlign = 'center';
+        }
+        // color overlay
+        colorOverlay.style.backgroundColor = originalToolbarBgColor;
+        colorOverlay.style.height = `${maximumHeight}px`;
+        colorOverlay.style.position = 'absolute';
+        colorOverlay.style.top = `${-headerMinHeight * 0}px`;
+        colorOverlay.style.left = '0';
+        colorOverlay.style.width = '100%';
+        colorOverlay.style.zIndex = '10';
+        colorOverlay.style.pointerEvents = 'none';
+        // image overlay
+        imageOverlay.style.backgroundColor = expandedColor;
+        imageOverlay.style.backgroundImage = `url(${image || ''})`;
+        imageOverlay.style.height = '100%';
+        imageOverlay.style.width = '100%';
+        imageOverlay.style.pointerEvents = 'none';
+        imageOverlay.style.backgroundSize = 'cover';
+        imageOverlay.style.backgroundPosition = 'center';
+    };
     const initEvents = () => { };
+    const onScroll = () => {
+        if (!scrollContent || !toolbar) {
+            return;
+        }
+        scrollTop = scrollContent.scrollTop;
+        if (scrollTop >= 0) {
+            translateAmt = scrollTop / 2;
+            scaleAmt = 1;
+        }
+        else {
+            translateAmt = 0;
+            scaleAmt = -scrollTop / headerHeight + 1;
+        }
+        // Parallax total progress
+        headerMinHeight = toolbar.offsetHeight;
+        let progress = (maximumHeight - scrollTop - headerMinHeight) / (maximumHeight - headerMinHeight);
+        progress = Math.max(progress, 0);
+        // ion-header: set height
+        let targetHeight = maximumHeight - scrollTop;
+        targetHeight = Math.max(targetHeight, headerMinHeight);
+        console.log(lastScrollTop, ticking, overlayButtons, translateAmt, scaleAmt);
+    };
     return {
         ref: headerRef,
+        onScroll,
     };
 }
-exports.UseIonHeaderParallxInputResult = UseIonHeaderParallxInputResult;
+exports.useIonHeaderParallax = useIonHeaderParallax;
 //# sourceMappingURL=useIonicHeaderParallax.js.map

package.json

 {
   "name": "ionic-react-header-parallax",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A React Hook parallax effect for Ionic React <IonHeader> component",
@@ -5,0 +5,0 @@ "author": {

renovate.json

 {
-  "extends": [
-    "config:base"
-  ]
+  "extends": ["config:base"]
 }

src/useIonicHeaderParallax.ts

 import * as React from 'react'
 
-export type UseIonicHeaderParallxInput = {
+export type UseIonicHeaderParallaxInput = {
   image: string
@@ -10,7 +10,13 @@ expandedColor: string
 
-export type UseIonHeaderParallxInputResult = {
+export type UseIonHeaderParallaxInputResult = {
   ref: React.MutableRefObject<HTMLElement | null>
+  onScroll: () => void
 }
 
-export function UseIonHeaderParallxInputResult({}: UseIonicHeaderParallxInput): UseIonHeaderParallxInputResult {
+export function useIonHeaderParallax({
+  titleColor,
+  image,
+  expandedColor,
+  maximumHeight = 300,
+}: UseIonicHeaderParallaxInput): UseIonHeaderParallaxInputResult {
   const headerRef = React.useRef<HTMLElement>(null)
@@ -25,14 +31,14 @@
   let scrollContent: HTMLElement | null
-  // let headerHeight: any
-  // let headerMinHeight: number
-  // let translateAmt: any
-  // let scaleAmt: any
-  // let scrollTop: any
-  // let lastScrollTop: any
-  // let ticking: any
-  // let originalToolbarBgColor: string
+  let headerHeight: number
+  let headerMinHeight: number
+  let translateAmt: any
+  let scaleAmt: any
+  let scrollTop: any
+  let lastScrollTop: any
+  let ticking: any
+  let originalToolbarBgColor: string
   let overlayTitle: HTMLElement | null
   let ionTitle: HTMLElement | null
-  // let overlayButtons: HTMLElement[]
-  // let scrollContentPaddingTop: number
+  let overlayButtons: HTMLElement[]
+  let scrollContentPaddingTop: string | number
 
@@ -52,3 +58,3 @@ React.useEffect(() => {
   const initElements = () => {
-    if (!(headerRef && headerRef.current)) throw new ReferenceError('Ref is required')
+    if (!(headerRef && headerRef.current)) throw new ReferenceError('Ref is required to be set to <IonHeader />')
 
@@ -80,3 +86,3 @@ const parentElement = headerRef.current.parentElement
 
-    const ionContent = parentElement.querySelector('ion-content')
+    const ionContent = parentElement.querySelector('IonContent')
 
@@ -93,2 +99,6 @@ if (!ionContent) throw new Error('Parallax directive requires an <IonContent> element on the page to work.')
 
+    headerHeight = scrollContent.clientHeight
+
+    console!.log('headerHeight', headerHeight)
+
     // Create image overlay
@@ -127,9 +137,93 @@ imageOverlay = document.createElement('div')
 
-  const initStyles = () => {}
+  const initStyles = () => {
+    ticking = false
 
+    if (!scrollContent || !toolbar) {
+      return
+    }
+
+    // fetch styles
+
+    headerMinHeight = toolbar.offsetHeight
+
+    scrollContentPaddingTop = window.getComputedStyle(scrollContent, null).paddingTop.replace('px', '')
+    scrollContentPaddingTop = parseFloat(scrollContentPaddingTop)
+
+    if (!toolbarBackground) return
+
+    originalToolbarBgColor = window.getComputedStyle(toolbarBackground, null).backgroundColor
+
+    if (!originalToolbarBgColor) {
+      throw new Error('Error: toolbarBackround is null.')
+    }
+
+    // header and title
+
+    header.style.position = 'relative'
+
+    if (overlayTitle) {
+      // rerender here
+      overlayTitle.style.color = titleColor
+      overlayTitle.style.position = 'absolute'
+      overlayTitle.style.width = '100%'
+      overlayTitle.style.height = '100%'
+      overlayTitle.style.textAlign = 'center'
+    }
+
+    // color overlay
+    colorOverlay.style.backgroundColor = originalToolbarBgColor
+    colorOverlay.style.height = `${maximumHeight}px`
+    colorOverlay.style.position = 'absolute'
+    colorOverlay.style.top = `${-headerMinHeight * 0}px`
+    colorOverlay.style.left = '0'
+    colorOverlay.style.width = '100%'
+    colorOverlay.style.zIndex = '10'
+    colorOverlay.style.pointerEvents = 'none'
+
+    // image overlay
+
+    imageOverlay.style.backgroundColor = expandedColor
+
+    imageOverlay.style.backgroundImage = `url(${image || ''})`
+
+    imageOverlay.style.height = '100%'
+    imageOverlay.style.width = '100%'
+
+    imageOverlay.style.pointerEvents = 'none'
+    imageOverlay.style.backgroundSize = 'cover'
+    imageOverlay.style.backgroundPosition = 'center'
+  }
+
   const initEvents = () => {}
 
+  const onScroll = () => {
+    if (!scrollContent || !toolbar) {
+      return
+    }
+
+    scrollTop = scrollContent.scrollTop
+    if (scrollTop >= 0) {
+      translateAmt = scrollTop / 2
+      scaleAmt = 1
+    } else {
+      translateAmt = 0
+      scaleAmt = -scrollTop / headerHeight + 1
+    }
+
+    // Parallax total progress
+    headerMinHeight = toolbar.offsetHeight
+    let progress = (maximumHeight - scrollTop - headerMinHeight) / (maximumHeight - headerMinHeight)
+    progress = Math.max(progress, 0)
+
+    // ion-header: set height
+    let targetHeight = maximumHeight - scrollTop
+    targetHeight = Math.max(targetHeight, headerMinHeight)
+
+    console.log(lastScrollTop, ticking, overlayButtons, translateAmt, scaleAmt)
+  }
+
   return {
     ref: headerRef,
+    onScroll,
   }
 }

tsconfig.json

 {
   "compilerOptions": {
+    "jsx": "react",
     /* Basic Options */
@@ -4,0 +5,0 @@ // "incremental": true,                   /* Enable incremental compilation */

No alert changes

Improved metrics

Total package byte prevSize

33899

increased by1.95%

Lines of code

504

increased by8.62%

Worsened metrics

Number of package files

24

decreased by-14.29%

No dependency changes