{"version":3,"file":"343.0030c6607d99012ad130.js","mappings":"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","sources":["webpack://cmhr-witness-blanket-rails/./app/webpack/client/components/pages/BearWitness/index.tsx"],"sourcesContent":["import React, { useState, useEffect, lazy } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\nimport { useTranslation } from 'react-i18next';\nimport { useInView } from 'react-intersection-observer';\n\nimport { selectIsMobile } from '../../../store/ui/uiSlice';\n\nimport { MosaicImage } from '../../shared/MosaicImage';\nimport Copy from '../../shared/Copy';\nimport a11yKeyDown from '../../utils/a11yKeyDown';\nimport useShareData from '../../utils/useShareData';\nimport useScrollLocation from '../../utils/useScrollLocation';\nimport useSkipLinks from '../../utils/useSkipLinks';\n\nimport woodDiamond from '../../../../images/bear_witness/wood-diamond.svg';\nimport chevron from '../../../../images/bear_witness/chevron.png';\n\nimport PageTitle from '../../shared/PageTitle';\n\nconst Connect = lazy(() => import('../../shared/Connect'));\n\nexport default function BearWitness() {\n  const { t } = useTranslation();\n  const isMobile = useSelector(selectIsMobile);\n  const navigate = useNavigate();\n  useShareData({ title: t('bear_witness.title') });\n  useScrollLocation();\n  useSkipLinks();\n\n  const [mosaicQuoteRef, mosaicQuoteInView] = useInView({\n    triggerOnce: true,\n    rootMargin: '0px',\n    threshold: 0.5,\n  });\n  const [diamondRef, diamondInView] = useInView({\n    triggerOnce: true,\n    rootMargin: '-100px 0px',\n  });\n\n  const [delayComplete, setDelayComplete] = useState(false);\n\n  const openLink = (el: HTMLAnchorElement) => {\n    if (el.tagName === 'A') {\n      const href = el.getAttribute('href') || '';\n      if (href.indexOf('mailto:') === -1) {\n        if (href.startsWith('/')) {\n          navigate(href);\n        } else {\n          window.open(href, '_blank');\n        }\n      }\n    }\n  };\n\n  const onClickLink = (e: React.SyntheticEvent<HTMLElement>) => {\n    e.preventDefault();\n    openLink(e.target as HTMLAnchorElement);\n  };\n\n  const onKeyDownLink = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (a11yKeyDown(e)) {\n      e.preventDefault();\n      openLink(e.target as HTMLAnchorElement);\n    }\n  };\n\n  useEffect(() => {\n    const timeoutRef = setTimeout(() => {\n      setDelayComplete(true);\n    }, 5000);\n\n    return () => {\n      clearTimeout(timeoutRef);\n    };\n  }, []);\n\n  const bearWitnessMosaic = (\n    <div className=\"bear-witness-mosaic\" role=\"img\" aria-label={t('bear_witness.mosaic_aria')}>\n      {isMobile ? (\n        <>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopLeft\" img=\"imgTopLeftMob\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgLeft\" img=\"imgLeftMob\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomLeft\" img=\"imgBottomLeftMob\" />\n          </div>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopMidLeft\" img=\"imgTopMidLeftMob\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomMidLeft\" img=\"imgBottomMidLeftMob\" />\n          </div>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopCenter\" img=\"imgTopCenterMob\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomCenter\" img=\"imgBottomCenterMob\" />\n          </div>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopMidRight\" img=\"imgTopMidRightMob\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgCenter\" img=\"imgCenterMob\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomMidRight\" img=\"imgBottomMidRightMob\" />\n          </div>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopRight\" img=\"imgTopRightMob\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgRight\" img=\"imgRightMob\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomRight\" img=\"imgBottomRightMob\" />\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopLeft\" img=\"imgTopLeft\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgLeft\" img=\"imgLeft\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomLeft\" img=\"imgBottomLeft\" />\n          </div>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopMidLeft\" img=\"imgTopMidLeft\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomMidLeft\" img=\"imgBottomMidLeft\" />\n          </div>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopCenter\" img=\"imgTopCenter\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomCenter\" img=\"imgBottomCenter\" />\n          </div>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopMidRight\" img=\"imgTopMidRight\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgCenter\" img=\"imgCenter\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomMidRight\" img=\"imgBottomMidRight\" />\n          </div>\n          <div className=\"am-bw-mos__mosaic-column\">\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgTopRight\" img=\"imgTopRight\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgRight\" img=\"imgRight\" />\n            <MosaicImage story=\"bw\" mosaic=\"mosaic\" classModifier=\"imgBottomRight\" img=\"imgBottomRight\" />\n          </div>\n        </>\n      )}\n    </div>\n  );\n\n  return (\n    <>\n      {/* eslint-disable react/no-danger */}\n      <PageTitle title={t('bear_witness.title')} pageId=\"bw\" headingClasses={['title', 'animate-fadein']}>\n        {bearWitnessMosaic}\n      </PageTitle>\n      <div\n        className={`quote-container ${mosaicQuoteInView && delayComplete ? 'animate-fadein-mosaic-quote' : ''}`}\n        ref={mosaicQuoteRef}\n      >\n        <div className=\"quote-text\">{t('bear_witness.intro_quote')}</div>\n        <div className=\"quote-source\">{t('bear_witness.artist_name')}</div>\n        <div className=\"source-title\">{t('artist_title')}</div>\n      </div>\n      <Copy htmlString={t('bear_witness.copy_1')} />\n      <div className=\"animated-quote-container\">\n        <img className={`top-chevron ${diamondInView ? 'animate-slide-down' : ''}`} src={chevron} alt=\"\" />\n        <img\n          ref={diamondRef}\n          className={`diamond ${diamondInView ? 'animate-fadein-grow' : ''}`}\n          src={woodDiamond}\n          alt=\"\"\n        />\n        <div className={`animated-quote-text-container ${diamondInView ? 'animate-fadein-quote' : ''}`}>\n          <div className=\"animated-quote-text\">{t('bear_witness.animated_quote')}</div>\n          <div className=\"animated-quote-source\">{t('bear_witness.artist_name')}</div>\n          <div className=\"animated-source-title\">{t('artist_title')}</div>\n        </div>\n        <img className={`bottom-chevron ${diamondInView ? 'animate-slide-up' : ''}`} src={chevron} alt=\"\" />\n      </div>\n      {/* eslint-disable react/no-danger, jsx-a11y/control-has-associated-label */}\n      <div\n        className=\"copy-container narrow-container\"\n        role=\"button\"\n        tabIndex={-1}\n        onClick={onClickLink}\n        onKeyDown={onKeyDownLink}\n        dangerouslySetInnerHTML={{ __html: t('bear_witness.copy_2') }}\n      />\n      <div className=\"narrow-container safety-title\">{t('bear_witness.safety_title')}</div>\n      <Copy htmlString={t('bear_witness.copy_3')} />\n\n      <Connect />\n    </>\n  );\n}\n"],"names":["Connect","lazy","BearWitness","t","useTranslation","isMobile","useSelector","selectIsMobile","navigate","useNavigate","useShareData","title","useScrollLocation","useSkipLinks","useInView","triggerOnce","rootMargin","threshold","mosaicQuoteRef","mosaicQuoteInView","diamondRef","diamondInView","useState","delayComplete","setDelayComplete","openLink","el","tagName","href","getAttribute","indexOf","startsWith","window","open","useEffect","timeoutRef","setTimeout","clearTimeout","bearWitnessMosaic","className","role","story","mosaic","classModifier","img","pageId","headingClasses","ref","htmlString","src","chevron","alt","woodDiamond","tabIndex","onClick","e","preventDefault","target","onKeyDown","a11yKeyDown","dangerouslySetInnerHTML","__html"],"sourceRoot":""}