fix: useIonicHeaderParallax hook

Author: ahmnouira

example/package.json

@@ -15,6 +15,7 @@
     "@types/react-router": "5.1.16",
     "@types/react-router-dom": "5.1.8",
     "babel-jest": "^26.6.0",
+    "ionic-react-header-parallax": "^0.0.8",
     "ionicons": "5.5.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -62,6 +63,6 @@
   },
   "description": "An Ionic project",
   "devDependencies": {
-    "jest": "26"
+    "jest": "26.6.0"
   }
 }

example/src/components/Lorem.css

@@ -1,11 +1,5 @@
-div {
-  padding: 8px;
-  margin-bottom: 12px;
-}
-
-p {
+.lorem {
   font-size: 16px;
   line-height: 22px;
   color: #8c8c8c;
-  margin: 0;
 }

example/src/components/Lorem.tsx

@@ -3,7 +3,7 @@ import './Lorem.css'
 export const Lorem: React.FC<{}> = ({}) => {
   return (
     <div>
-      <p>
+      <p className="lorem">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
         standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
         a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,

example/src/pages/Home.css

@@ -1,3 +0,0 @@
-* {
-  --ion-color-primary: #5f468c;
-}

example/src/pages/Home.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import {
   IonBackButton,
   IonButton,
@@ -12,9 +13,216 @@ import { Lorem } from '../components/Lorem'
 import './Home.css'
 
 const Home: React.FC = () => {
+  /** inputs **/
+  let maximumHeight = 350 // @input
+  const titleColor = '#AAA'
+  const expandedColor = '#313131'
+  const imageUrl = 'https://picsum.photos/1080'
+
+  /** styles */
+  const [ticking, setTicking] = React.useState<boolean>(false)
+
+  React.useEffect(() => {
+    setTimeout(async () => {
+      initElements()
+    }, 200)
+  }, [])
+
+  const initElements = () => {
+    // ion-header
+    const header = document.getElementsByTagName('ion-header')[0]
+    const parentElement = header.parentElement
+    if (!parentElement) throw new Error('No IonPage parent element')
+
+    // ion-toolbar
+    const toolbar = header.querySelector('ion-toolbar')
+    if (!toolbar) throw new Error('No <ion-toolbar>')
+
+    // ion-toolbar background
+    const toolbarShadowRoot = toolbar.shadowRoot
+    if (!toolbarShadowRoot) throw new Error('No shadow')
+    const toolbarBackground = toolbarShadowRoot.querySelector('.toolbar-background') as HTMLElement
+
+    if (!toolbarBackground) throw new Error('No .toolbar-background')
+
+    // ion-title
+    const ionTitle = toolbar.querySelector('ion-title')
+
+    // ion-buttons
+    const barButtons = header.querySelector('ion-buttons')
+
+    // ion-content
+    const ionContent = parentElement.querySelector('ion-content')
+    if (!ionContent) throw new Error('Parallax requires an <ion-content> element on the page to work.')
+    const scrollContent = ionContent.shadowRoot?.querySelector('.inner-scroll') as HTMLElement
+    if (!scrollContent) {
+      throw new Error('Parallax directive requires an <ion-content> element on the page to work.')
+    }
+
+    // create image overly
+    const imageOverlay = document.createElement('div')
+    imageOverlay.classList.add('image-overlay')
+    const colorOverlay = document.createElement('div')
+    colorOverlay.classList.add('color-overlay')
+    colorOverlay.appendChild(imageOverlay)
+    header.appendChild(colorOverlay)
+
+    const overlayTitle = ionTitle && (ionTitle.cloneNode(true) as HTMLElement)
+
+    if (overlayTitle) {
+      overlayTitle.classList.add('parallax-title')
+
+      setTimeout(() => {
+        if (overlayTitle.shadowRoot) {
+          const toolbarTitle = overlayTitle.shadowRoot.querySelector('.toolbar-title') as HTMLElement
+          toolbarTitle.style.pointerEvents = 'unset'
+        }
+      }, 200)
+    }
+
+    if (overlayTitle) {
+      imageOverlay.appendChild(overlayTitle)
+    }
+    if (barButtons) {
+      imageOverlay.appendChild(barButtons)
+    }
+
+    /***  initStyles ***/
+    // still in init use JS DOM
+    let headerHeight = scrollContent.clientHeight
+    setTicking(false)
+
+    // fetch styles
+    maximumHeight = parseFloat(maximumHeight.toString())
+    let headerMinHeight = toolbar.offsetHeight
+
+    let scrollContentPaddingTop: number = parseFloat(
+      window.getComputedStyle(scrollContent, null).paddingTop.replace('px', '')
+    )
+
+    const originalToolbarBgColor = window.getComputedStyle(toolbarBackground, null).backgroundColor
+    if (!originalToolbarBgColor) {
+      throw new Error('Error: toolbarBackround is null.')
+    }
+
+    // header and title
+    header.style.position = 'relative'
+
+    if (overlayTitle) {
+      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(${imageUrl})`
+    imageOverlay.style.height = '100%'
+    imageOverlay.style.width = '100%'
+    imageOverlay.style.pointerEvents = 'none'
+    imageOverlay.style.backgroundSize = 'cover'
+    imageOverlay.style.backgroundPosition = 'center'
+
+    // .toolbar-background
+    toolbarBackground.style.backgroundColor = originalToolbarBgColor
+
+    // .bar-buttons
+    if (barButtons) {
+      barButtons.style.pointerEvents = 'all'
+
+      Array.from(barButtons.children).forEach((btn) => {
+        console.log(btn, btn as HTMLElement)
+        const htmlBtn = btn as HTMLElement
+        htmlBtn.style.color = titleColor
+      })
+    }
+
+    // .scroll-content
+    if (scrollContent) {
+      scrollContent.setAttribute('parallax', '')
+      scrollContent.style.paddingTop = `${maximumHeight + scrollContentPaddingTop - headerMinHeight}px`
+    }
+
+    /** init events */
+    window.addEventListener(
+      'resize',
+      () => {
+        headerHeight = scrollContent.clientHeight
+      },
+      false
+    )
+
+    if (scrollContent) {
+      scrollContent.addEventListener('scroll', (e) => {
+        if (!ticking) {
+          window.requestAnimationFrame(() => {
+            // to do
+
+            const scrollTop = scrollContent.scrollTop
+            let translateAmt: number
+            let scaleAmt: number
+            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)
+
+            let targetHeight = maximumHeight - scrollTop
+            targetHeight = Math.max(targetHeight, headerMinHeight)
+
+            // .toolbar-background: change color
+            imageOverlay.style.height = `${targetHeight}px`
+            imageOverlay.style.opacity = `${progress}`
+            colorOverlay.style.height = `${targetHeight}px`
+            colorOverlay.style.opacity = targetHeight > headerMinHeight ? '1' : '0'
+            toolbarBackground.style.backgroundColor =
+              targetHeight > headerMinHeight ? 'transparent' : originalToolbarBgColor
+
+            // .bar-buttons
+            if (barButtons) {
+              if (targetHeight > headerMinHeight) {
+                imageOverlay.append(barButtons)
+                Array.from(barButtons.children).forEach((btn) => {
+                  const htmlBtn = btn as HTMLElement
+                  htmlBtn.style.color = titleColor
+                })
+              } else {
+                toolbar.append(barButtons)
+                Array.from(barButtons.children).forEach((btn) => {
+                  const htmlBtn = btn as HTMLElement
+                  htmlBtn.style.color = 'unset'
+                })
+              }
+            }
+          })
+        }
+        setTicking(true)
+      })
+    }
+  }
+
   return (
     <IonPage>
-      <IonHeader>
+      <IonHeader translucent>
         <IonToolbar mode="ios">
           <IonButtons slot="start">
             <IonBackButton defaultHref="/" />
@@ -26,7 +234,7 @@ const Home: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent fullscreen className="ion-padding">
+      <IonContent className="ion-padding">
         {Array(20)
           .fill(1)
           .map((el, index) => (

example/yarn.lock

@@ -5934,6 +5934,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+ionic-react-header-parallax@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ionic-react-header-parallax/-/ionic-react-header-parallax-0.0.8.tgz#c19c33cb3f917accf4233cc3c4858038a74d0ae5"
+  integrity sha512-ZyZyOadXaZqgk7J9zy6YOZDYmW5yOmAh96WCUsE9Uxxhwxz6e2NKk9xBtDjeReoB32CXtNaoEGHFCpoRBzH8WA==
+
 ionicons@5.5.3, ionicons@^5.1.2, ionicons@^5.5.3:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/ionicons/-/ionicons-5.5.3.tgz#33cfc4c8a590ac45895f2b10309ef4586ed244c1"
@@ -6406,7 +6411,7 @@ jest-circus@26.6.0:
     stack-utils "^2.0.2"
     throat "^5.0.0"
 
-jest-cli@^26.6.0, jest-cli@^26.6.3:
+jest-cli@^26.6.0:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
   integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
@@ -6811,15 +6816,6 @@ jest-worker@^26.5.0, jest-worker@^26.6.2:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest@26:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.3.tgz#40e8fdbe48f00dfa1f0ce8121ca74b88ac9148ef"
-  integrity sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==
-  dependencies:
-    "@jest/core" "^26.6.3"
-    import-local "^3.0.2"
-    jest-cli "^26.6.3"
-
 jest@26.6.0:
   version "26.6.0"
   resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.0.tgz#546b25a1d8c888569dbbe93cae131748086a4a25"

package.json

@@ -68,6 +68,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
+    "testing-library__dom": "^7.29.4-beta.1",
     "ts-jest": "^26",
     "ts-node": "^10.2.0",
     "typescript": "^4.3.5"