@penskemediacorp/larva-js 1.24.1 → 1.26.0

package/src/interface/MegaMenu/MegaMenu.js

@@ -1,11 +1,10 @@
-
 export default class MegaMenu {
 	constructor( el ) {
 		this.el = el;
-		this.inputs = [ ... this.el.querySelectorAll( 'input' ) ];
+		this.inputs = [ ...this.el.querySelectorAll( 'input' ) ];
 		this.container = document.documentElement;
 
-		this.inputs.forEach( input => {
+		this.inputs.forEach( ( input ) => {
 			input.addEventListener( 'focus', () => this.handleFocus( input ) );
 		} );
 
@@ -24,7 +23,6 @@ export default class MegaMenu {
 	 * @return {void}
 	 */
 	trapFocus( modal ) {
-
 		/**
 		 * .js-MegaMenu class has been added twice in the template, we may remove this check after removing
 		 * this other class from div.mega-menu__main from all themes.
@@ -33,11 +31,14 @@ export default class MegaMenu {
 			return;
 		}
 
-		const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+		const focusableElements =
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 
-		const firstFocusableElement = modal.querySelectorAll( focusableElements )[ 0 ];
+		const firstFocusableElement =
+			modal.querySelectorAll( focusableElements )[ 0 ];
 		const focusableContent = modal.querySelectorAll( focusableElements );
-		const lastFocusableElement = focusableContent[ focusableContent.length - 1 ];
+		const lastFocusableElement =
+			focusableContent[ focusableContent.length - 1 ];
 
 		/**
 		 * Handle keydown event.
@@ -47,24 +48,32 @@ export default class MegaMenu {
 		 * @return {void}
 		 */
 		const handleKeyDown = ( event ) => {
-			let isTabPressed = event.key === 'Tab' || event.keyCode === 9;
+			const isTabPressed = event.key === 'Tab' || event.keyCode === 9;
 
 			if ( ! isTabPressed ) {
 				return;
 			}
 
-			if ( event.shiftKey ) { // shift + tab combination
-				if ( document.activeElement === firstFocusableElement && lastFocusableElement ) {
+			if ( event.shiftKey ) {
+				// shift + tab combination
+				if (
+					document.activeElement === firstFocusableElement &&
+					lastFocusableElement
+				) {
 					lastFocusableElement.focus();
 					event.preventDefault();
 				}
-			} else { // tab key
-				if ( document.activeElement === lastFocusableElement && firstFocusableElement ) {
+			} else {
+				// tab key
+				if (
+					document.activeElement === lastFocusableElement &&
+					firstFocusableElement
+				) {
 					firstFocusableElement.focus();
 					event.preventDefault();
 				}
 			}
-		}
+		};
 
 		document.addEventListener( 'keydown', handleKeyDown );
 	}

package/src/interface/MegaMenu/index.js

@@ -1,14 +1,14 @@
 import MegaMenu from './MegaMenu.js';
 
 export default function initMegaMenu() {
-	const megaMenus = [ ... document.querySelectorAll( '.js-MegaMenu' ) ];
-	const triggers = [ ... document.querySelectorAll( '.js-MegaMenu-Trigger' ) ];
+	const megaMenus = [ ...document.querySelectorAll( '.js-MegaMenu' ) ];
+	const triggers = [ ...document.querySelectorAll( '.js-MegaMenu-Trigger' ) ];
 
 	let lastFocusedElement;
 
-	megaMenus.forEach( el => el.pmcMegaMenu = new MegaMenu( el ) );
+	megaMenus.forEach( ( el ) => ( el.pmcMegaMenu = new MegaMenu( el ) ) );
 
-	triggers.forEach( trigger => {
+	triggers.forEach( ( trigger ) => {
 		trigger.addEventListener( 'click', openOrCloseMegaMenu );
 	} );
 
@@ -19,21 +19,23 @@ export default function initMegaMenu() {
 	} );
 
 	function openOrCloseMegaMenu() {
-		let isMegaOpen = document.documentElement.classList.contains( 'is-mega-open' );
+		const isMegaOpen =
+			document.documentElement.classList.contains( 'is-mega-open' );
 
 		// This is a very brittle focus switching solution.
 		// @TODO: Move this into the MegaMenu class.
 		const menu = document.querySelector( '.js-MegaMenu' );
 		const focusableElementsString = 'input, [tabindex="0"]';
-		const focusableElements = [ ... menu.querySelectorAll( focusableElementsString ) ];
+		const focusableElements = [
+			...menu.querySelectorAll( focusableElementsString ),
+		];
 
 		if ( ! isMegaOpen ) {
 			document.documentElement.classList.add( 'is-mega-open' );
 
-			if ( focusableElements[0] !== document.activeElement ) {
-
-				setTimeout( function() {
-					focusableElements[0].focus();
+			if ( focusableElements[ 0 ] !== document.activeElement ) {
+				setTimeout( function () {
+					focusableElements[ 0 ].focus();
 				}, 100 );
 			}
 

package/src/interface/MobileHeightToggle/MobileHeightToggle.js

@@ -40,11 +40,13 @@ export default class MobileHeightToggle {
 	}
 
 	onClick( e ) {
-
 		if ( undefined !== this.el.pmcMobileHeightToggle ) {
-
 			// Bubble event
-			if ( e.target.classList.contains( 'lrv-js-MobileHeightToggle-trigger' ) ) {
+			if (
+				e.target.classList.contains(
+					'lrv-js-MobileHeightToggle-trigger'
+				)
+			) {
 				this.toggle( e );
 			}
 		}
@@ -60,5 +62,4 @@ export default class MobileHeightToggle {
 			this.isExpanded = false;
 		}
 	}
-
 }

package/src/interface/MobileHeightToggle/MobileHeightToggle.test.js

@@ -6,34 +6,37 @@ import initMobileHeightToggles from './index';
 const TABLET = 768;
 
 describe( 'MobileHeightToggle', () => {
-
-	it('starts with an initially closed state', () => {
-		const dropdown = new MobileHeightToggle( document.querySelector( '.test' ) ); 
+	it( 'starts with an initially closed state', () => {
+		const dropdown = new MobileHeightToggle(
+			document.querySelector( '.test' )
+		);
 		assert.equal( dropdown.isExpanded, false );
-	});
+	} );
 
 	it( 'adds the class is expanded when trigger is clicked', () => {
-
-		document.querySelector('.test').innerHTML = `
+		document.querySelector( '.test' ).innerHTML = `
 			<div class="lrv-js-MobileHeightToggle">
 				<div class="lrv-js-MobileHeightToggle-trigger"></div>
 				<div class="lrv-js-MobileHeightToggle-target"></div>
 			</div>
 		`;
 
-		const dropdown = new MobileHeightToggle( document.querySelector( '.lrv-js-MobileHeightToggle' ) ); 
+		const dropdown = new MobileHeightToggle(
+			document.querySelector( '.lrv-js-MobileHeightToggle' )
+		);
 
-		dropdown.toggle({ 
-			preventDefault: () => {}, 
-			target: document.querySelector( '.lrv-js-MobileHeightToggle-trigger' ) 
-		});
+		dropdown.toggle( {
+			preventDefault: () => {},
+			target: document.querySelector(
+				'.lrv-js-MobileHeightToggle-trigger'
+			),
+		} );
 
 		assert.equal( dropdown.el.classList.contains( 'is-expanded' ), true );
-	});
+	} );
 
 	it( 'does not initialize MobileHeightToggles on tablet', () => {
-
-		document.querySelector('.test').innerHTML = `
+		document.querySelector( '.test' ).innerHTML = `
 			<div class="lrv-js-MobileHeightToggle">
 				<div class="lrv-js-MobileHeightToggle-trigger"></div>
 				<div class="lrv-js-MobileHeightToggle-target"></div>
@@ -43,13 +46,12 @@ describe( 'MobileHeightToggle', () => {
 		initMobileHeightToggles( TABLET + 1 );
 
 		const el = document.querySelector( '.lrv-js-MobileHeightToggle' );
-		
+
 		assert.equal( el.pmcMobileHeightToggle, undefined );
-	});
+	} );
 
 	it( 'does initialize MobileHeightToggles on below tablet', () => {
-
-		document.querySelector('.test').innerHTML = `
+		document.querySelector( '.test' ).innerHTML = `
 			<div class="lrv-js-MobileHeightToggle">
 				<div class="lrv-js-MobileHeightToggle-trigger"></div>
 				<div class="lrv-js-MobileHeightToggle-target"></div>
@@ -61,6 +63,5 @@ describe( 'MobileHeightToggle', () => {
 		const el = document.querySelector( '.lrv-js-MobileHeightToggle' );
 
 		assert.notEqual( el.pmcMobileHeightToggle, undefined );
-	});
-
-});
+	} );
+} );

package/src/interface/MobileHeightToggle/index.js

@@ -2,17 +2,18 @@ import MobileHeightToggle from './MobileHeightToggle';
 
 // Initialize all Dropdowns.
 
-export default function( width ) {
-	const dropdowns = [ ... document.querySelectorAll( '.lrv-js-MobileHeightToggle' ) ];
-
-	dropdowns.forEach( el => {
+export default function ( width ) {
+	const dropdowns = [
+		...document.querySelectorAll( '.lrv-js-MobileHeightToggle' ),
+	];
 
+	dropdowns.forEach( ( el ) => {
 		if ( 768 > width && undefined === el.pmcMobileHeightToggle ) {
-			new MobileHeightToggle( el );	
+			new MobileHeightToggle( el );
 		}
-		
+
 		if ( 768 <= width && undefined !== el.pmcMobileHeightToggle ) {
 			el.pmcMobileHeightToggle.destroy();
 		}
-	});
-};
+	} );
+}

package/src/interface/Navigable/Navigable.js

@@ -1,34 +1,41 @@
 /**
  * Navigable
- * 
+ *
  * Allows o-nav object to be accessible/navigable by keyboard tab.
- * 
+ *
  * The HTML attributes required for the navigation to work:
  * - class lrv-js-Navigable to initiate the module, on a `nav` element
  */
 
 export default class Navigable {
-
-	constructor( el ) {	
-		this.el            = el;
-		this.oNavList      = el.querySelector( '.o-nav__list' );
-		this.oNavListItems = [ ...el.querySelectorAll( '.o-nav__list-item a' ) ];
+	constructor( el ) {
+		this.el = el;
+		this.oNavList = el.querySelector( '.o-nav__list' );
+		this.oNavListItems = [
+			...el.querySelectorAll( '.o-nav__list-item a' ),
+		];
 
 		this.el.addEventListener( 'focus', this.onFocus.bind( this ) );
 		this.el.addEventListener( 'focusout', this.onFocusOut.bind( this ) );
 		this.el.addEventListener( 'keyup', this.onKeyup.bind( this ) );
-		
+
 		if ( this.oNavListItems.length ) {
 			this.oNavListItems.forEach( ( oNavListItem ) => {
-				oNavListItem.addEventListener( 'focus', this.onFocusListItem.bind( this ) );
-				oNavListItem.addEventListener( 'focusout', this.onFocusOutListItem.bind( this ) );
+				oNavListItem.addEventListener(
+					'focus',
+					this.onFocusListItem.bind( this )
+				);
+				oNavListItem.addEventListener(
+					'focusout',
+					this.onFocusOutListItem.bind( this )
+				);
 			} );
 		}
 	}
 
 	onFocus() {
 		this.oNavList.style.visibility = 'visible';
-		this.oNavList.style.opacity    = '1';
+		this.oNavList.style.opacity = '1';
 	}
 
 	onFocusOut( event ) {
@@ -36,22 +43,26 @@ export default class Navigable {
 			return;
 		}
 		this.oNavList.style.visibility = 'hidden';
-		this.oNavList.style.opacity    = '0';
+		this.oNavList.style.opacity = '0';
 	}
-	
+
 	onFocusListItem( event ) {
-		event.currentTarget.classList.add( 'lrv-u-background-color-brand-primary' );
+		event.currentTarget.classList.add(
+			'lrv-u-background-color-brand-primary'
+		);
 	}
 
 	onFocusOutListItem( event ) {
-		event.currentTarget.classList.remove( 'lrv-u-background-color-brand-primary' );
+		event.currentTarget.classList.remove(
+			'lrv-u-background-color-brand-primary'
+		);
 	}
 
 	onKeyup( event ) {
 		// Hide nav if Escape key is pressed.
-		if ( "Escape" === event.key ) {
+		if ( 'Escape' === event.key ) {
 			this.oNavList.style.visibility = 'hidden';
-			this.oNavList.style.opacity    = '0';
-		}	
+			this.oNavList.style.opacity = '0';
+		}
 	}
 }

package/src/interface/Navigable/index.js

@@ -4,6 +4,6 @@ export default function initNavigable() {
 	const oNavs = [ ...document.querySelectorAll( '.lrv-js-Navigable' ) ];
 
 	if ( oNavs.length ) {
-		oNavs.forEach( oNav => new Navigable( oNav ) );
+		oNavs.forEach( ( oNav ) => new Navigable( oNav ) );
 	}
 }

package/src/interface/PopOver/PopOver.js

@@ -1,43 +1,43 @@
 export default class PopOver {
-	constructor(el) {
+	constructor( el ) {
 		this.el = el;
 		this.isOpen = false;
-		this.target = this.el.querySelector('.js-PopOver-target');
+		this.target = this.el.querySelector( '.js-PopOver-target' );
 
 		// Close PopOver on ESC.
-		document.addEventListener('keydown', () => {
+		document.addEventListener( 'keydown', () => {
 			this.closePopOver();
-		});
+		} );
 
 		// Open PopOver on mouseover.
-		this.el.addEventListener('mouseover', () => {
+		this.el.addEventListener( 'mouseover', () => {
 			this.openPopOver();
-		});
+		} );
 
 		// Open PopOver on mouseover.
-		this.el.addEventListener('mouseout', () => {
+		this.el.addEventListener( 'mouseout', () => {
 			this.closePopOver();
-		});
+		} );
 
 		// Open PopOver on focus.
-		this.el.addEventListener('focus', () => {
+		this.el.addEventListener( 'focus', () => {
 			this.openPopOver();
-		});
+		} );
 
 		// Open PopOver on blur.
-		this.el.addEventListener('blur', () => {
+		this.el.addEventListener( 'blur', () => {
 			this.closePopOver();
-		});
+		} );
 	}
 
 	openPopOver() {
 		this.isOpen = true;
-		this.target.classList.add('js-PopOver-is-opened');
+		this.target.classList.add( 'js-PopOver-is-opened' );
 	}
 
 	closePopOver() {
-		if (this.isOpen) {
-			this.target.classList.remove('js-PopOver-is-opened');
+		if ( this.isOpen ) {
+			this.target.classList.remove( 'js-PopOver-is-opened' );
 		}
 	}
 }

package/src/interface/PopOver/index.js

@@ -1,9 +1,9 @@
 import PopOver from './PopOver.js';
 
 export default function initPopOver() {
-	const searches = [...document.querySelectorAll('.js-PopOver')];
+	const searches = [ ...document.querySelectorAll( '.js-PopOver' ) ];
 
-	searches.forEach((el) => {
-		return new PopOver(el);
-	});
+	searches.forEach( ( el ) => {
+		return new PopOver( el );
+	} );
 }

package/src/interface/ProfileFilter/ProfileFilter.js

@@ -24,11 +24,17 @@ export default class ProfileFilter {
 		this.el.pmcProfileFilter = this;
 
 		// UI
-		this.resultContainer = this.el.querySelector( '.js-ProfileFilter-results' );
+		this.resultContainer = this.el.querySelector(
+			'.js-ProfileFilter-results'
+		);
 		this.form = this.el.querySelector( '.js-ProfileFilter-form' );
-		this.loadMoreButton = this.el.querySelector( '.js-ProfileFilter-loadMore' );
+		this.loadMoreButton = this.el.querySelector(
+			'.js-ProfileFilter-loadMore'
+		);
 
-		this.submitButton = this.form.querySelector( '.js-ProfileFilter-submit' );
+		this.submitButton = this.form.querySelector(
+			'.js-ProfileFilter-submit'
+		);
 
 		// Event handlers
 		this.onSubmit = this.onSubmit.bind( this );
@@ -41,7 +47,9 @@ export default class ProfileFilter {
 		this.actionUrl = this.form.getAttribute( 'action' );
 
 		// The endpoint where we will fetch the posts
-		this.restUrlBase = window.location.origin + '/wp-json/pmc_core/v1/pmc_core_modules/pmc-profiles';
+		this.restUrlBase =
+			window.location.origin +
+			'/wp-json/pmc_core/v1/pmc_core_modules/pmc-profiles';
 
 		// Object to hold the data from which we will create the request URL.
 		// This should be created fresh each time it is used with this.setQueryObject
@@ -53,15 +61,15 @@ export default class ProfileFilter {
 		if ( undefined !== window.wp ) {
 			this.template = wp.template( 'profile-card' );
 		}
-
 	}
 
 	getCheckedBoxes() {
-		return [ ... this.form.querySelectorAll( 'input[type="checkbox"]:checked' ) ];
+		return [
+			...this.form.querySelectorAll( 'input[type="checkbox"]:checked' ),
+		];
 	}
 
 	setQueryObject( url = false ) {
-
 		const els = this.getCheckedBoxes();
 
 		// Get query from checkboxes, if they are checked,
@@ -76,12 +84,11 @@ export default class ProfileFilter {
 	}
 
 	setQueryObjectFromCheckboxes( els ) {
-		let obj = {};
+		const obj = {};
 
 		els.map( ( el ) => {
-
 			// If the key doesn't exist, create it
-			let key = el.getAttribute( 'name' );
+			const key = el.getAttribute( 'name' );
 
 			if ( ! ( key in obj ) ) {
 				obj[ key ] = [];
@@ -96,19 +103,19 @@ export default class ProfileFilter {
 
 	// filterQueryString should be window.location.search, e.g. ?filter_top200location=scottdale&filter_sourceofwealth=money
 	setQueryObjectFromUrl( filterQueryString ) {
-		let queryObject = {};
+		const queryObject = {};
 
-		let params = new URLSearchParams( filterQueryString );
+		const params = new URLSearchParams( filterQueryString );
 
 		params.forEach( ( value, key ) => {
-			let values = value.split( ',' );
+			const values = value.split( ',' );
 
 			if ( ! ( key in queryObject ) ) {
 				queryObject[ key ] = [];
 			}
 
 			queryObject[ key ] = [];
-			queryObject[ key ].push( ... values );
+			queryObject[ key ].push( ...values );
 		} );
 
 		this.queryObject = Object.assign( {}, queryObject );
@@ -119,9 +126,12 @@ export default class ProfileFilter {
 	}
 
 	getRestEndpointUrl() {
-
 		// REST params do not have filter_ prefix, so replace with empty string
-		return this.restUrlBase + '?' + this.createQueryStringFromObject().replace( /filter_/g, '' );
+		return (
+			this.restUrlBase +
+			'?' +
+			this.createQueryStringFromObject().replace( /filter_/g, '' )
+		);
 	}
 
 	updateActionAttr() {
@@ -140,7 +150,6 @@ export default class ProfileFilter {
 		// If fetch is supported, fetch posts from REST API endpoint, otherwise
 		// we use default form behavior and window will reload to the action URL
 		if ( window.fetch ) {
-
 			e.preventDefault();
 
 			// TODO: add better error handling - output result of e in updateResults
@@ -161,11 +170,13 @@ export default class ProfileFilter {
 	}
 
 	fetchData() {
-		let url = this.getRestEndpointUrl();
+		const url = this.getRestEndpointUrl();
 
-		const response = fetch( url ).then( ( result ) => {
-			return result.json();
-		} ).catch( e => e );
+		const response = fetch( url )
+			.then( ( result ) => {
+				return result.json();
+			} )
+			.catch( ( e ) => e );
 
 		return response;
 	}
@@ -176,7 +187,7 @@ export default class ProfileFilter {
 
 	updateWindowUrl() {
 		const url = '?' + this.createQueryStringFromObject();
-		let obj = this.queryObject;
+		const obj = this.queryObject;
 
 		if ( window.history.pushState ) {
 			window.history.pushState( obj, '', url );
@@ -184,7 +195,6 @@ export default class ProfileFilter {
 	}
 
 	updateResults( posts, shouldClearResults = true ) {
-
 		this.maybeHideLoadMore( this.maxPages );
 
 		// TODO: better as maybeClearResults func
@@ -194,16 +204,15 @@ export default class ProfileFilter {
 
 		this.updateWindowUrl();
 
-		if ( undefined === posts[0].name ) {
-
+		if ( undefined === posts[ 0 ].name ) {
 			// Update with "No posts found" text and exit
-			this.resultContainer.innerHTML = posts[0];
+			this.resultContainer.innerHTML = posts[ 0 ];
 			return;
 		}
 
-		posts.forEach( post => {
-			let tmpl = this.template( post );
-			let li = document.createElement( 'li' );
+		posts.forEach( ( post ) => {
+			const tmpl = this.template( post );
+			const li = document.createElement( 'li' );
 			li.innerHTML = tmpl;
 
 			// TODO: this should be removed upon finding solution for escaping {{data.url}} as an attribute
@@ -217,19 +226,15 @@ export default class ProfileFilter {
 	}
 
 	maybeHideLoadMore() {
-
 		const isHidden = this.loadMoreButton.classList.contains( 'a-hidden' );
 
 		if ( this.maxPages > this.page ) {
 			if ( isHidden ) {
 				this.loadMoreButton.classList.remove( 'a-hidden' );
 			}
-		} else {
-			if ( ! isHidden ) {
-				this.loadMoreButton.classList.add( 'a-hidden' );
-			}
+		} else if ( ! isHidden ) {
+			this.loadMoreButton.classList.add( 'a-hidden' );
 		}
-
 	}
 
 	increasePage() {