\r\n
\r\n );\r\n\r\n }\r\n\r\n}","import './css/index.css';\r\nimport React, { Component } from 'react';\r\nimport { array, string, bool, object } from 'prop-types';\r\nimport { createPortal } from 'react-dom';\r\nimport globalVPS from 'js/global-vps';\r\nimport focusTrap from 'js/focus-trap';\r\nimport SearchBox from 'components/search-box/component';\r\nimport SuggestedSearch from 'components/suggested-search/component';\r\n\r\nexport default class extends Component {\r\n\r\n static propTypes = {\r\n suggestedSearch: array,\r\n searchPagePath: string,\r\n endpoint: string,\r\n isOpen: bool,\r\n refocusElement: object.isRequired,\r\n wrapper: object.isRequired\r\n };\r\n\r\n constructor( props ) {\r\n\r\n super( props );\r\n\r\n this.state = {\r\n isSVP: globalVPS.current( 'small' ),\r\n isOpen: props.isOpen\r\n };\r\n\r\n this.unsub = null;\r\n this.pageBody = document.querySelector( 'body' );\r\n this.focusTrap = focusTrap( props.wrapper );\r\n\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this.setup();\r\n\r\n }\r\n\r\n componentDidUpdate( prevProps, prevState, snapshot ) {\r\n\r\n const didPropsChange = this.props !== prevProps;\r\n const didStateChange = this.state !== prevState;\r\n\r\n if ( didStateChange && !this.state.isOpen ) this.cleanup();\r\n\r\n if ( didPropsChange && !didStateChange ) {\r\n\r\n this.props.isOpen && this.setup();\r\n\r\n this.setState( {\r\n isOpen: this.props.isOpen\r\n } );\r\n\r\n }\r\n\r\n }\r\n\r\n setup = () => {\r\n\r\n this.unsub = globalVPS( 'small', ( state ) => {\r\n\r\n if ( this.state.isSVP === state.current ) return;\r\n\r\n this.setState( {\r\n isSVP: state.current\r\n } );\r\n\r\n } );\r\n\r\n this.focusTrap.on();\r\n this.pageBody.setAttribute( 'aria-hidden', true );\r\n\r\n };\r\n\r\n cleanup = () => {\r\n\r\n this.unsub();\r\n this.focusTrap.off();\r\n this.pageBody.setAttribute( 'aria-hidden', false );\r\n this.props.wrapper.classList.remove( 'expanded' );\r\n this.props.refocusElement.focus();\r\n\r\n };\r\n\r\n closeOverlay = () => {\r\n\r\n this.setState( { isOpen: false } );\r\n\r\n };\r\n\r\n renderOverlay = () => {\r\n\r\n const portal = createPortal(\r\n Featured Topics
\r\n- { links }
\r\n { !this.state.isSVP && Federal Reserve Bank Philadelphia }\r\n \r\n
\r\n \r\n
\r\n ,\r\n this.props.wrapper\r\n );\r\n\r\n this.props.wrapper.classList.add( 'expanded' );\r\n\r\n return portal;\r\n\r\n };\r\n\r\n render() {\r\n\r\n return this.state.isOpen ? this.renderOverlay() : null;\r\n\r\n }\r\n\r\n}","import './css/index.css';\r\nimport React from 'react';\r\nimport { render } from 'react-dom';\r\nimport globalVPS from 'js/global-vps';\r\nimport focusTrap from 'js/focus-trap';\r\nimport checkKeys from 'js/check-keys';\r\nimport Overlay from './overlay/index';\r\n\r\nexport default class {\r\n\r\n static name = 'global-nav';\r\n\r\n constructor( config ) {\r\n\r\n Object.assign( this, config );\r\n\r\n this.state = {\r\n smallNavOpen: false,\r\n smallNavActive: false\r\n };\r\n\r\n }\r\n\r\n ready() {\r\n\r\n this.menu = document.querySelector( '.nav-menu button' );\r\n this.navLinks = document.querySelector( '#nav-links' );\r\n this.navTopic = document.querySelector( '.nav-topic' );\r\n this.navTopicItems = document.querySelectorAll( '.nav-topic > li' );\r\n this.navInstitution = document.querySelector( '.nav-institution' );\r\n this.searchBox = document.querySelector( '.search-results .search-box' );\r\n this.focusTrap = focusTrap( this.element );\r\n\r\n this.setupOverlayWrapper();\r\n this.bindNavSearchElements();\r\n this.setNavSearchElement();\r\n this.setupVPSubscription();\r\n\r\n }\r\n\r\n /**\r\n * Update this component's options object\r\n *\r\n * @param {Object} options - The options to add/override.\r\n */\r\n setOptions = ( options ) => {\r\n\r\n Object.assign( this.options, options );\r\n\r\n };\r\n\r\n hasDisplay = ( element ) => {\r\n\r\n const style = document.defaultView.getComputedStyle( element );\r\n const value = style.getPropertyValue( 'display' );\r\n\r\n return !!value && value !== 'none';\r\n\r\n };\r\n\r\n setupVPSubscription = () => {\r\n\r\n globalVPS( ( state ) => {\r\n\r\n this.setNavSearchElement();\r\n this.moveInstitutionLinks( globalVPS.current( 'large' ) );\r\n\r\n if ( !globalVPS.current( 'large' ) ) {\r\n\r\n this.setupNavigation();\r\n\r\n }\r\n else if ( this.state.smallNavActive ) {\r\n\r\n this.moveInstitutionLinks( 'afterbegin' );\r\n this.cleanupNavigation();\r\n\r\n }\r\n\r\n } );\r\n\r\n };\r\n\r\n moveInstitutionLinks = () => {\r\n\r\n if ( globalVPS.current( 'large' ) ) {\r\n\r\n this.navLinks.insertBefore( this.navInstitution, this.navTopic );\r\n\r\n }\r\n\r\n else {\r\n\r\n this.navLinks.appendChild( this.navInstitution );\r\n\r\n }\r\n\r\n };\r\n\r\n setupOverlayWrapper = () => {\r\n\r\n this.overlayWrapper = document.createElement( 'div' );\r\n this.overlayWrapper.className = 'overlay-wrapper';\r\n document.body.insertAdjacentElement( 'beforeend', this.overlayWrapper );\r\n\r\n };\r\n\r\n handleSearch = ( e ) => {\r\n\r\n if ( !this.options.showSearchOverlay ) return this.searchBox.focus();\r\n\r\n render(\r\n \r\n\r\n
\r\n );\r\n\r\n};\r\n\r\nPersonListing.propTypes = {\r\n info: shape(\r\n {\r\n name: string,\r\n photo: string,\r\n jobTitle: string,\r\n url: string,\r\n section: string\r\n }\r\n )\r\n\r\n};\r\n\r\nexport default PersonListing;","import { arrayOf, shape, string } from 'prop-types';\r\nimport React from 'react';\r\nimport PersonListing from './person-listing';\r\n\r\nconst SectionListing = ( { title, people } ) => {\r\n\r\n return (\r\n <>\r\n { title && \r\n\r\n 
\r\n\r\n
\r\n\r\n \r\n\r\n \r\n\r\n
\r\n\r\n { title }
}\r\n\r\n\r\n\r\n
\r\n \r\n );\r\n\r\n};\r\n\r\nSectionListing.propTypes = {\r\n title: string,\r\n people: arrayOf(\r\n shape( {\r\n name: string,\r\n jobTitle: string,\r\n photo: string,\r\n section: string,\r\n lastName: string\r\n } )\r\n )\r\n};\r\nexport default SectionListing;","import { shape, object, bool, arrayOf, string } from 'prop-types';\r\nimport React from 'react';\r\nimport SectionListing from './section-listing';\r\n\r\nconst SectionGroupListing = ( { groups: { sections, groups }, showTitle } ) => {\r\n\r\n return (\r\n sections.map( ( title ) => \r\n\r\n
\r\n\r\n \r\n\r\n { people.map( ( p ) =>\r\n\r\n
\r\n\r\n \r\n
\r\n }\r\n { individuals.length > 0 &&\r\n \r\n
\r\n Sort by:
\r\n- \r\n { sort === 'lastName' ?
- Alphabetically : }\r\n { sort === 'section' ?
- Section : }\r\n