JSPM – @nutrafol/popup-helper@0.1.15

Package Exports

@nutrafol/popup-helper
@nutrafol/popup-helper/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nutrafol/popup-helper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>
  )
}

@nutrafol/popup-helper