Some progress #2014

web/components/src/Backgrounds/BackgroundContainer.tsx

@@ -1,20 +1,47 @@
-import { forwardRef, HTMLAttributes } from 'react'
+import { forwardRef, HTMLAttributes, memo, useContext, useEffect } from 'react'
 import type { BackgroundColours, ImageBackground } from '../../../types/types'
 import { ColouredContainer } from './ColouredContainer'
 import { ImageBackgroundContainer } from './ImageBackgroundContainer'
+import { BackgroundContext } from './BackgroundContext'
+import { useInView } from 'react-intersection-observer'
+import styled from 'styled-components'
 
 export type BackgroundContainerProps = {
   background?: {
     backgroundColor?: BackgroundColours
     imageBackground?: ImageBackground
   }
+  isTrueComponent?: Boolean
 } & HTMLAttributes<HTMLDivElement>
 
+const Wrapper = styled.div<{ isTrueComponent: Boolean }>`
+  ${({ isTrueComponent }) =>
+    isTrueComponent
+      ? `
+   padding-top: 25vh;
+   padding-bottom: 25vh;
+   `
+      : ''}
+`
 export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContainerProps>(function BackgroundContainer(
-  { background, style, children, className, ...rest },
+  { background, style, children, className, isTrueComponent = true, ...rest },
   ref,
 ) {
-  const Container = ({ children }: { children: React.ReactNode }) => {
+  const { setBackgroundContainerProps } = useContext(BackgroundContext)
+
+  const { ref: inViewRef, inView } = useInView({
+    rootMargin: '0px 0px',
+    threshold: 0.5,
+  })
+
+  useEffect(() => {
+    if (inView && isTrueComponent) {
+      console.log(background)
+      setBackgroundContainerProps({ background })
+    }
+  }, [background, inView, isTrueComponent])
+
+  const Container = memo(({ children }: { children: React.ReactNode }) => {
     return background?.imageBackground ? (
       <ImageBackgroundContainer
         ref={ref}
@@ -36,7 +63,11 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
         {children}
       </ColouredContainer>
     )
-  }
+  })
 
-  return <Container>{children}</Container>
+  return (
+    <Wrapper ref={inViewRef} isTrueComponent={isTrueComponent}>
+      <Container>{children}</Container>
+    </Wrapper>
+  )
 })

web/components/src/Backgrounds/BackgroundContext.tsx

@@ -0,0 +1,30 @@
+import { BackgroundContainerProps } from '@components'
+import { createContext, useState } from 'react'
+
+type Props = {
+  backgroundContainerProps: BackgroundContainerProps | undefined
+  setBackgroundContainerProps: React.Dispatch<React.SetStateAction<BackgroundContainerProps | undefined>>
+}
+
+type ProviderProps = {
+  children: React.ReactNode
+}
+
+export const BackgroundContext = createContext<Props>({
+  backgroundContainerProps: undefined,
+  setBackgroundContainerProps: () => {
+    return
+  },
+})
+
+export const BackgroundContextProvider = ({ children }: ProviderProps) => {
+  const [backgroundContainerProps, setBackgroundContainerProps] = useState({
+    background: { backgroundColor: 'White' },
+  } as BackgroundContainerProps | undefined)
+
+  return (
+    <BackgroundContext.Provider value={{ backgroundContainerProps, setBackgroundContainerProps }}>
+      {children}
+    </BackgroundContext.Provider>
+  )
+}

web/components/src/Backgrounds/ColouredContainer.tsx

@@ -9,10 +9,11 @@ type ColouredContainerProps = {
 } & HTMLAttributes<HTMLDivElement>
 type ColourContainerProps = {
   isInverted: boolean
+  isTrueComponent: boolean
 } & HTMLAttributes<HTMLDivElement>
 
 const ColourContainer = styled.div<ColourContainerProps>`
-  background-color: var(--background-color);
+  background-color: ${({ isTrueComponent }) => (isTrueComponent ? 'var(--background-color)' : 'transparent')};
   color: var(--color-on-background);
   ${({ isInverted }) => (isInverted ? inverted : normal)}
 `

web/components/src/Backgrounds/ImageBackgroundContainer.tsx

@@ -13,20 +13,19 @@ type ImageContainerProps = {
 } & HTMLAttributes<HTMLDivElement>
 
 const ImageContainer = styled.div<ImageContainerProps>`
-  position: relative;
+  /*position: relative;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-image: ${({ imageUrl }) => (imageUrl ? `url(${imageUrl})` : '')};
-  ${({ isInverted }) => (isInverted ? inverted : normal)}
+  ${({ isInverted }) => (isInverted ? inverted : normal)}*/
 `
 
 const DEFAULT_MAX_WIDTH = 1920
 
 const AnimationWrapper = styled.div`
   /* Create View Timeline */
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1) 70%);
   section {
     width: 40vw;
     margin-right: 0;

web/package.json

@@ -81,7 +81,8 @@
     "swiper": "^9.2.3",
     "swr": "^1.3.0",
     "uuid": "^9.0.0",
-    "xml2js": "^0.6.0"
+    "xml2js": "^0.6.0",
+    "react-intersection-observer": "^9.6.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.16.0",

web/pageComponents/pageTemplates/MagazineIndexPage.tsx

@@ -81,7 +81,7 @@ const MagazineIndexPage = ({ isServerRendered = false, locale, pageData, slug, u
         {pageData?.hero.type !== HeroTypes.DEFAULT && title && (
           <SharedTitle sharedTitle={title} background={ingress.background} />
         )}
-        <BackgroundContainer background={ingress.background}>
+        <BackgroundContainer background={ingress.background} isTrueComponent={false}>
           <Intro>
             {ingress && (
               <IngressWrapper>

web/pageComponents/pageTemplates/News.tsx

@@ -223,7 +223,7 @@ const NewsPage = ({ data: news }: ArticleProps) => {
       <main>
         <article>
           <NewsLayout>
-            <Header background={'Slate Blue 95'}>
+            <Header background={'Slate Blue 95'} isTrueComponent={false}>
               <HeaderInner>
                 <StyledHeading level="h1" size="3xl">
                   {title}

web/pageComponents/pageTemplates/TopicPage.tsx

@@ -48,7 +48,7 @@ const TopicPage = ({ data }: TopicPageProps) => {
         pageTitle={data?.title}
       />
       <TopicPageLayout>
-        <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background} />
+        <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background?.backgroundColor} />
         {breadcrumbs && breadcrumbs?.enableBreadcrumbs && (
           <Breadcrumbs
             background={titleStyles.background}

web/pageComponents/pageTemplates/shared/FixedBackground.tsx

@@ -0,0 +1,52 @@
+import { BackgroundContext } from '@components/Backgrounds/BackgroundContext'
+import { useSanityLoader } from 'lib/hooks/useSanityLoader'
+import { useContext, forwardRef, HTMLAttributes, useEffect, useState, memo } from 'react'
+import styled from 'styled-components'
+import { getContainerColor } from '@utils/backgroundColours'
+
+type ContainerProps = {
+  imageUrl?: string
+  backgroundColor: String
+}
+const ImageContainer = styled.div<ContainerProps>`
+  position: relative;
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: ${({ color, imageUrl }) => `var(${color})`};
+  background-image: ${({ color, imageUrl }) =>
+    imageUrl ? `linear-gradient(to right, rgba(0, 0, 0, 0), var(${color}) 70%), url(${imageUrl})` : 'none'};
+  transition: all 0.5s ease-out;
+  //animation: reveal 5s;
+  /*@keyframes reveal {
+    from {
+      opacity: 0.2;
+    }
+    to {
+      opacity: 1;
+    }
+  }*/
+`
+
+export const FixedBackground = memo(
+  forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function FixedBackground(
+    { children, className, style, ...rest },
+    ref,
+  ) {
+    const { backgroundContainerProps } = useContext(BackgroundContext)
+    const background = backgroundContainerProps?.background
+
+    const styleVariant = getContainerColor(background?.backgroundColor || 'White')
+
+    let props = undefined
+    if (background?.imageBackground?.image) {
+      props = useSanityLoader(background?.imageBackground?.image, 1920, undefined)
+    }
+    return (
+      <ImageContainer imageUrl={props?.src} color={styleVariant}>
+        {children}
+      </ImageContainer>
+    )
+  }),
+)

web/pageComponents/pageTemplates/shared/SharedPageContent.tsx

@@ -21,6 +21,8 @@ import VideoPlayer from '../../shared/VideoPlayer'
 import VideoPlayerCarousel from '../../shared/VideoPlayerCarousel'
 import TextTeaser from '../../shared/textTeaser/TextTeaser'
 import KeyNumbers from '../../topicPages/KeyNumbers/KeyNumbers'
+import { memo, useMemo } from 'react'
+
 import {
   AnchorLinkData,
   TopicPageSchema,
@@ -51,6 +53,9 @@ import {
   KeyNumbersData,
 } from '../../../types/types'
 
+import { FixedBackground } from './FixedBackground'
+import { BackgroundContextProvider } from '@components/Backgrounds/BackgroundContext'
+
 // How could we do this for several different component types?
 type ComponentProps =
   | TeaserData
@@ -136,5 +141,10 @@ export const PageContent = ({ data }: PageContentProps) => {
         return null
     }
   })
-  return <>{content}</>
+
+  return (
+    <BackgroundContextProvider>
+      <FixedBackground>{content}</FixedBackground>
+    </BackgroundContextProvider>
+  )
 }

web/pageComponents/pageTemplates/shared/SharedTitle.tsx

@@ -13,7 +13,7 @@ const StyledHeading = styled(TitleText)`
 
 const SharedTitle = ({ sharedTitle, background }: SharedTitleProps) => {
   return (
-    <BackgroundContainer background={background}>
+    <BackgroundContainer background={background} isTrueComponent={false}>
       <StyledHeading value={sharedTitle} level="h1" size="3xl" />
     </BackgroundContainer>
   )

web/pageComponents/shared/Header.tsx

@@ -159,7 +159,7 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
     <HeaderRelative>
       <HeadTags slugs={slugs} />
       <TopbarOffset />
-      <BackgroundContainer>
+      <BackgroundContainer isTrueComponent={false}>
         <Topbar>
           <TopbarContainer>
             <LogoLinkInGrid />

web/pageComponents/shared/Hero/DefaultHero.tsx

@@ -54,7 +54,7 @@ export const DefaultHero = ({ title, image, isBigTitle, bigTitle }: Props) => {
         </>
       )}
       {!isBigTitle && <HeroBanner>{title && <StyledHeading value={title} level="h1" size="3xl" />}</HeroBanner>}
-      <ImageWrapper>{image && <DefaulHeroImage data={image} />}</ImageWrapper>
+      <ImageWrapper isTrueComponent={false}>{image && <DefaulHeroImage data={image} />}</ImageWrapper>
     </>
   )
 }

web/pageComponents/shared/Hero/FiftyFiftyHero.tsx

@@ -83,7 +83,7 @@ const HeroActionLink = ({ action, ...rest }: { action: LinkData }) => {
 export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBigTitle }: HeroType) => {
   return (
     <>
-      <StyledHero background={background}>
+      <StyledHero background={background} isTrueComponent={false}>
         <StyledMedia>
           {figure && (
             <Image

web/pageComponents/shared/siteMenu/TopbarDropdown.tsx

@@ -21,6 +21,7 @@ type Props = {
 export const TopbarDropdown = ({ isOpen, children, ...rest }: Props) => {
   return (
     <StyledTopbarDropdown
+      isTrueComponent={false}
       style={
         {
           '--display': isOpen ? 'block' : 'none',

web/pageComponents/topicPages/PromoTileArray.tsx

@@ -109,7 +109,7 @@ const PromoTileArray = ({ data, anchor }: { data: PromoTileArrayData; anchor?: s
           )
 
         return (
-          <StyledBackgroundContainer background={background} key={id}>
+          <StyledBackgroundContainer background={background} key={id} isTrueComponent={false}>
             <StyledCard type="promo" textOnly={!image} style={{ '--card-height': '100%' } as CSSProperties}>
               {image && (
                 <Media>

web/pageComponents/topicPages/promotions/MultipleEventCards.tsx

@@ -101,7 +101,7 @@ const MultipleEventCards = ({
         <Carousel horizontalPadding={true}>
           {data.map((item) => {
             return (
-              <StyledBackground key={item.id}>
+              <StyledBackground key={item.id} isTrueComponent={false}>
                 <StyledEventsCard data={item} hasSectionTitle={hasSectionTitle} key={item.id} />
               </StyledBackground>
             )

web/pageComponents/topicPages/promotions/MultiplePromotions.tsx

@@ -103,20 +103,20 @@ const MultiplePromotions = ({
       case 'news':
       case 'localNews':
         return (
-          <StyledBackground key={data.id}>
+          <StyledBackground key={data.id} isTrueComponent={false}>
             <StyledNewsCard data={data as CardData} key={data.id} />
           </StyledBackground>
         )
       case 'topics':
       case 'magazine':
         return (
-          <StyledBackground key={data.id}>
+          <StyledBackground key={data.id} isTrueComponent={false}>
             <StyledTopicPageCard data={data as CardData} key={data.id} />
           </StyledBackground>
         )
       case 'people':
         return (
-          <StyledBackground key={data.id}>
+          <StyledBackground key={data.id} isTrueComponent={false}>
             <StyledPeopleCard data={data as PeopleCardData} hasSectionTitle={hasSectionTitle} key={data.id} />
           </StyledBackground>
         )

web/pages/[[...slug]].tsx

@@ -14,7 +14,7 @@ import getIntl from '../common/helpers/getIntl'
 import { getRoutePaths } from '../common/helpers/getPaths'
 import getPageSlugs from '../common/helpers/getPageSlugs'
 import { getComponentsData } from '../lib/fetchData'
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useMemo } from 'react'
 import { PreviewContext } from '../lib/contexts/PreviewContext'
 
 const MagazinePage = dynamic(() => import('../pageComponents/pageTemplates/MagazinePage'))
@@ -33,7 +33,9 @@ export default function Page({ data, preview = false }: any) {
     setIsPreview(preview)
   }, [setIsPreview, preview])
 
-  const { pageData } = data
+  const { pageData } = useMemo(() => {
+    return data
+  }, [data])
 
   const slug = pageData?.slug
   if (!router.isFallback && !slug && !data?.queryParams?.id) {