@nutrafol/popup-helper

Nutrafol popup helper

Development

• make changes
• change version +1 in package.json (example 2.3.4)

{
  "name": "@nutrafol/popup-helper",
  "version": "1.2.3"
...

• NOTE: keep same version if you dont want to publish changes (pipeline would fail)
• commit and push
• pipeline will auto publish (make sure correct FOLDER set in bitbucket-pipelines.yml)
• see pipe https://bitbucket.org/nutrafol/npm/addon/pipelines/home

Usage

• modify package.json in your project to match the latest published version

...
"@nutrafol/nutrafol-ui-kit": "1.2.3",
"@nutrafol/popup-helper": "2.3.4",
 ...

• run install npm i

Functionality

• makes tabbing trapped within a modal DOM
• makes Close button focused on open

- blocks arrow key events (we allow use arrow key in forms)

• prevents background scroll/zoom on mobiles
• closes modal on Escape
• restores focus on a clicked active link on close

Config object

wrapper (string, required) popup wrapper DOM id

closeEl (string) close button DOM id

desktopEl (string) desktopEl DOM id - if you have separate desktop content

mobileEl (string) mobileEl DOM id - if you have separate mobile content

fullScreenMobile (bool, default false) wipe body under mobile popup, prevents zoom out of modal_

preventTouch (bool, default false) allow touch scroll only, disallow pinch zoom

Usage Example

import popupHelper from "@nutrafol/popup-helper";

const OurNetworkQuotes = (data) => {

  const [activeDoctorIndex, setActiveDoctorIndex] = useState(null)

  useEffect(() => {
    popupHelper.trackActiveElement()
  }, [])

  const setActiveDoctorIndexProxy = (i) => {
    if(i !== null) {
      popupHelper.onOpen({
        wrapper: "DrModal",
        desktopEl: "DrModalDesktop",
        mobileEl: "DrModalMobile",
        closeEl: popupHelper.isMobile() ? "CloseWrapper" : "CloseWrapperMobile"
      })
    } else {
      popupHelper.onClose()
    }
    setActiveDoctorIndex(i);
  }
  const renderQuotes = data.quotes.map((item, i) => {
    const quotePreview = previewBuilder(item.quote);
    return (
      <React.Fragment key={i}>
        <Quote className="show-md-up">
          {quotePreview ?
            <Blockquote>“{quotePreview}...“ <ReadMore onClick={() => setActiveDoctorIndexProxy(i)}/></Blockquote> : ''
          }
          <QuoteAuthor>
            <p className="title">{item.title}</p>
            <p className="clinic">{item.clinic}</p>
            <p className="location">{item.location}</p>
          </QuoteAuthor>
        </Quote>
        {activeDoctorIndex === i &&
        <>
          <ModalOverlay onClick={() => setActiveDoctorIndexProxy(null)}/>
          <DrModal id={`DrModal`}>
            <ModalBody id={`DrModalDesktop`} className="show-md-up flex">
              <QuoteBox width={[1, null, 2 / 3]}>
                <ModalHeader>
                  <CloseWrapper id={`CloseWrapper`} onClick={() => setActiveDoctorIndexProxy(null)}>
                    <CloseIcon/>
                  </CloseWrapper>
                </ModalHeader>
                <ModalQuote>
                  “{item.quote}“
                </ModalQuote>
              </QuoteBox>
            </ModalBody>
            <ModalBody id={`DrModalMobile`} className="hide-md-up mobile">
              <ModalHeader>
                <CloseWrapper id={`CloseWrapperMobile`} onClick={() => setActiveDoctorIndexProxy(null)}>
                  <CloseIcon/>
                </CloseWrapper>
              </ModalHeader>
              <QuoteBox>
                <ModalQuote className="mobile">
                  “{item.quote}“
                </ModalQuote>
              </QuoteBox>
              <AuthorBoxMobile>
                <GatsbyImage filename={item.image} alt={item.title} classes="doctor-image"/>
                <p className="title">{item.title}</p>
                <p className="clinic">{item.clinic} <br/> {item.location}</p>
              </AuthorBoxMobile>
            </ModalBody>
          </DrModal>
        </>
        }
      </React.Fragment>
    )
  })




  return (
    <OurNetworkQuotesWrap>
      <Quotes className="container">
        {renderQuotes}
      </Quotes>
    </OurNetworkQuotesWrap>
  )
}