Working Nav buttons

thimble-consulting · Sep 24, 2024 · f434648 · f434648
1 parent 16fc555
commit f434648
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 87 deletions.
diff --git a/src/components/clients/ClientPageArrowButtons.jsx b/src/components/clients/ClientPageArrowButtons.jsx
@@ -0,0 +1,70 @@
+import React from 'react'
+
+export const onNextButtonClick = (parallaxRef) => {
+ let currentPage = getCurrentPage(parallaxRef)
+ let pageIndex = 0
+ if (currentPage % 1 === 0) {
+ pageIndex = currentPage + 1;
+ } else {
+ pageIndex = Math.ceil(getCurrentPage(parallaxRef));
+ }
+ parallaxRef.current.scrollTo(pageIndex)
+}
+
+export const onPrevButtonClick = (parallaxRef) => {
+ let currentPage = getCurrentPage(parallaxRef)
+ let pageIndex = 0
+ if (currentPage % 1 === 0) {
+ pageIndex = currentPage - 1;
+ } else {
+ pageIndex = Math.floor(getCurrentPage(parallaxRef));
+ }
+ parallaxRef.current.scrollTo(pageIndex)
+}
+
+export const PrevButton = (props) => {
+ const { children, ...restProps } = props
+
+ return (
+ <button
+ className="embla__button embla__button--prev"
+ type="button"
+ {...restProps}
+ >
+ <svg className="embla__button__svg" viewBox="0 0 532 532">
+ <path
+ fill="currentColor"
+ d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+ />
+ </svg>
+ {children}
+ </button>
+ )
+}
+
+export const NextButton = (props) => {
+ const { children, ...restProps } = props
+
+ return (
+ <button
+ className="embla__button embla__button--next"
+ type="button"
+ {...restProps}
+ >
+ <svg className="embla__button__svg" viewBox="0 0 532 532">
+ <path
+ fill="currentColor"
+ d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
+ />
+ </svg>
+ {children}
+ </button>
+ )
+}
+
+export const getCurrentPage = (parallaxRef) => {
+ const containerHeight = parallaxRef.current.space
+ const scrollYProgressRAW = parallaxRef.current.current / containerHeight
+ const scrollYProgress = Math.round(scrollYProgressRAW * 10) / 10
+ return scrollYProgress;
+};
diff --git a/src/templates/clientPage.js b/src/templates/clientPage.js
@@ -6,6 +6,13 @@ import { GatsbyImage } from "gatsby-plugin-image";
 import Hero from "../components/Parallax/Hero.js";
 import Header from "../components/layout/Header.js";
 import ContactUsForm from "../components/ContactUsForm.js";
+import {
+ PrevButton,
+ NextButton,
+ onNextButtonClick,
+ onPrevButtonClick,
+ getCurrentPage
+} from "../components/clients/ClientPageArrowButtons.jsx"
 
 export default function Index({pageContext}) {
  const { client } = pageContext
@@ -59,87 +66,90 @@ export default function Index({pageContext}) {
  }, [])
 
  return (
- <Parallax pages={PAGES} ref={parallaxRef} >
- <Header className="max-w-6xl mx-auto px-4 md:px-6 lg:px-8" />
- <ContactUsForm />
- <Hero client={client}></Hero>
- <ParallaxLayer
- sticky={{ start: HERO_OFFSET, end: PAGES }}
- style={{
- width: "40%",
- inset: "0% 0% 0% 100%",
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'flex-end',
- justifySelf: 'end',
- zIndex: zIndexOffset++,
- right: 0,
- }}
- >
- <div className="mr-20 w-full">
- {logo(imgProps)}
- </div>
- </ParallaxLayer>
-
- <ParallaxLayer
- style={{
- width: "full",
- height: "1rem",
- display: 'flex',
- alignItems: 'start',
- justifyContent: 'center',
- zIndex: PAGES + 10,
- }}
- className="subHeader"
- sticky={{ start: HERO_OFFSET, end: PAGES }}>
- <div className="flex bg-gray-100 py-8 px-20 w-full uppercase text-xl font-light tracking-wider text-gray-800">
- {transitions((style, i) => {
- const Page = subHeadings[i]
- return <Page style={style} />
- })}
- </div>
- </ParallaxLayer>
- {client.sections.map(section => {
- return (
- <>
- {section.parallaxLayers.map((parallaxLayer, index) => {
- return(
- <ParallaxLayer
- style={{
- width: "60%",
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- textAlign: "center",
- zIndex: zIndexOffset++,
- }}
- // sticky={{
- // start: parallaxLayer.parallaxParams.stickyStart,
- // end: parallaxLayer.parallaxParams.stickyEnd
- // }}>
-
- offset={ parallaxLayer.parallaxParams.stickyStart }>
- <div className={`flex flex-col justify-around gap-10 mx-20`}>
- {parallaxLayer.content.map((paragraph, index) => {
- index++;
- return(
- <div
- style={{
- zIndex: index,
- }}
- className="slideText">
- {paragraph}
- </div>
- )
- })}
- </div>
- </ParallaxLayer>
- )
+ <>
+ <div className='fixed bottom-0 right-0 z-50 flex p-5'>
+ <PrevButton onClick={(e) => onPrevButtonClick(parallaxRef)} className='p-5' />
+ <NextButton onClick={(e) => onNextButtonClick(parallaxRef)} className='p-5' />
+ </div>
+ <Parallax pages={PAGES} ref={parallaxRef} className='snap-y snap-mandatory'>
+ <Header className="max-w-6xl mx-auto px-4 md:px-6 lg:px-8" />
+ <ContactUsForm />
+ <Hero client={client}></Hero>
+
+ <ParallaxLayer
+ sticky={{ start: HERO_OFFSET, end: PAGES }}
+ style={{
+ width: "40%",
+ inset: "0% 0% 0% 100%",
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ justifySelf: 'end',
+ zIndex: zIndexOffset++,
+ right: 0,
+ }}
+ >
+ <div className="mr-20 w-full">
+ {logo(imgProps)}
+ </div>
+ </ParallaxLayer>
+
+ <ParallaxLayer
+ style={{
+ width: "full",
+ height: "1rem",
+ display: 'flex',
+ alignItems: 'start',
+ justifyContent: 'center',
+ zIndex: PAGES + 10,
+ }}
+ className="subHeader"
+ sticky={{ start: HERO_OFFSET, end: PAGES }}>
+ <div className="flex bg-gray-100 py-8 px-20 w-full uppercase text-xl font-light tracking-wider text-gray-800">
+ {transitions((style, i) => {
+ const Page = subHeadings[i]
+ return <Page style={style} />
  })}
- </>
- )
- })}
- </Parallax>
+ </div>
+ </ParallaxLayer>
+ {client.sections.map(section => {
+ return (
+ <>
+ {section.parallaxLayers.map((parallaxLayer, index) => {
+ return(
+ <ParallaxLayer
+ style={{
+ width: "60%",
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ textAlign: "center",
+ zIndex: zIndexOffset++,
+ }}
+
+ offset={ parallaxLayer.parallaxParams.stickyStart }>
+ <div className={`flex flex-col justify-around gap-10 mx-20`}>
+ {parallaxLayer.content.map((paragraph, index) => {
+ index++;
+ return(
+ <div
+ style={{
+ zIndex: index,
+ }}
+ className="slideText">
+ {paragraph}
+ </div>
+ )
+ })}
+ </div>
+ </ParallaxLayer>
+ )
+ })}
+ </>
+ )
+ })}
+ </Parallax>
+ </>
  )
 }
 
@@ -179,10 +189,3 @@ const getTransitionConfig = (subHeaderNum, previousSubHeader) => {
  };
  }
 };
-
-const getCurrentPage = (parallaxRef) => {
- const containerHeight = parallaxRef.current.space
- const scrollYProgressRAW = parallaxRef.current.current / containerHeight
- const scrollYProgress = Math.round(scrollYProgressRAW * 10) / 10
- return scrollYProgress;
-};