@penskemediacorp/larva-js 1.20.0 → 1.27.1

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() {

package/src/interface/ProfileFilter/__test__/ProfileFilter.test.js

@@ -30,34 +30,34 @@ describe( 'initProfileFilter', () => {
 	initProfileFilter();
 
 	it( 'initializes the class', () => {
-		let obj = document.querySelector( '.js-ProfileFilter' ).pmcProfileFilter;
+		const obj =
+			document.querySelector( '.js-ProfileFilter' ).pmcProfileFilter;
 
 		assert.equal( typeof obj, 'object' );
 	} );
-
 } );
 
 describe( 'ProfileFilter', () => {
-	var pf = new ProfileFilter( document.querySelector( '.js-ProfileFilter' ) );
+	const pf = new ProfileFilter(
+		document.querySelector( '.js-ProfileFilter' )
+	);
 
-	var allCheckboxes = [ ... document.querySelectorAll( 'input[type="checkbox"]' ) ];
+	const allCheckboxes = [
+		...document.querySelectorAll( 'input[type="checkbox"]' ),
+	];
 
-	var checkedBoxes = [
-		allCheckboxes[2], // top200location, new-york
-		allCheckboxes[4], // collectingarea, llamas
-		allCheckboxes[5]  // collectingarea, coffee
+	const checkedBoxes = [
+		allCheckboxes[ 2 ], // top200location, new-york
+		allCheckboxes[ 4 ], // collectingarea, llamas
+		allCheckboxes[ 5 ], // collectingarea, coffee
 	];
 
 	it( 'gets initial query from url', () => {
-
 		// let obj = document.querySelector( '.js-ProfileFilter' ).pmcProfileFilter;
 		const windowLocationSearchMock = '?filter_top200year=2020%2C2019';
 		const expectedObject = {
-			'page': 1,
-			'filter_top200year': [
-				'2020',
-				'2019'
-			]
+			page: 1,
+			filter_top200year: [ '2020', '2019' ],
 		};
 
 		pf.setQueryObject( windowLocationSearchMock );
@@ -89,14 +89,9 @@ describe( 'ProfileFilter', () => {
 
 	it( 'creates an object with the names/values from checked boxes', () => {
 		const expectedObject = {
-			'filter_top200location': [
-				'new-york'
-			],
-			'filter_collectingarea': [
-				'llamas',
-				'coffee'
-			],
-			'page': 1
+			filter_top200location: [ 'new-york' ],
+			filter_collectingarea: [ 'llamas', 'coffee' ],
+			page: 1,
 		};
 
 		pf.setQueryObject();
@@ -106,13 +101,16 @@ describe( 'ProfileFilter', () => {
 	} );
 
 	it( 'creates query string from the object', () => {
-		const expectedUrl = 'filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
+		const expectedUrl =
+			'filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
 
 		assert.equal( pf.createQueryStringFromObject(), expectedUrl );
 	} );
 
 	it( 'updates the action URL', () => {
-		const expectedUrl = pf.actionUrl + '?filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
+		const expectedUrl =
+			pf.actionUrl +
+			'?filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
 
 		pf.updateActionAttr();
 
@@ -120,21 +118,25 @@ describe( 'ProfileFilter', () => {
 	} );
 
 	it( 'gets url to fetch from rest api', () => {
-		const expectedUrl = pf.restUrlBase + '?top200location=new-york&collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
+		const expectedUrl =
+			pf.restUrlBase +
+			'?top200location=new-york&collectingarea=llamas%2Ccoffee&page=1'; // comma is encoded
 
 		assert.equal( pf.getRestEndpointUrl(), expectedUrl );
 	} );
 
 	it( 'increments the paged value when clicked', () => {
-
 		pf.increasePage();
 
 		assert.equal( pf.page, 2 );
 	} );
 
 	it( 'updates the fetch url with new paged value', () => {
-		const expectedUrl = pf.restUrlBase + '?top200location=new-york&collectingarea=llamas%2Ccoffee&page=2'; // comma is encoded
-		const searchUrlStub = '?filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1';
+		const expectedUrl =
+			pf.restUrlBase +
+			'?top200location=new-york&collectingarea=llamas%2Ccoffee&page=2'; // comma is encoded
+		const searchUrlStub =
+			'?filter_top200location=new-york&filter_collectingarea=llamas%2Ccoffee&page=1';
 
 		pf.setQueryObject( searchUrlStub ); // This would be called by loadMoreClick
 
@@ -145,14 +147,19 @@ describe( 'ProfileFilter', () => {
 		pf.maxPages = 2; // this.queryObject.page is currently 2
 		pf.maybeHideLoadMore();
 
-		assert.equal( pf.loadMoreButton.classList.contains( 'a-hidden' ), true );
+		assert.equal(
+			pf.loadMoreButton.classList.contains( 'a-hidden' ),
+			true
+		);
 	} );
 
 	it( 'shows load more if there are more pages', () => {
 		pf.maxPages = 6; // this.queryObject.page is currently 2
 		pf.maybeHideLoadMore();
 
-		assert.equal( pf.loadMoreButton.classList.contains( 'a-hidden' ), false );
+		assert.equal(
+			pf.loadMoreButton.classList.contains( 'a-hidden' ),
+			false
+		);
 	} );
-
 } );

package/src/interface/ProfileFilter/index.js

@@ -1,6 +1,6 @@
 import ProfileFilter from './ProfileFilter';
 
 export default function initProfileFilter() {
-	const filters = [ ... document.querySelectorAll( '.js-ProfileFilter' ) ];
-	filters.forEach( el => el.ProfileFilter = new ProfileFilter( el ) );
+	const filters = [ ...document.querySelectorAll( '.js-ProfileFilter' ) ];
+	filters.forEach( ( el ) => ( el.ProfileFilter = new ProfileFilter( el ) ) );
 }

package/src/interface/SelectNav/SelectNav.js

@@ -10,25 +10,27 @@
  * It is build to work with the patterns `o-select-nav` and `c-select-option`
  *
  * @since 11-22-2019
-*/
+ */
 
 export default class SelectNav {
-
 	constructor( el ) {
-
 		this.el = el;
 
 		this.selectEl = el.querySelector( '.js-SelectNav-select' );
 
 		// If there is a class js-SelectNav-redirect, then only redirect.
 		if ( el.classList.contains( 'js-SelectNav-redirect' ) ) {
-			this.selectEl.addEventListener( 'change', this.onChange.bind( this ) );
+			this.selectEl.addEventListener(
+				'change',
+				this.onChange.bind( this )
+			);
 		}
-
 	}
 
 	onChange() {
-		const redirectTo = this.selectEl.options[ this.selectEl.selectedIndex ].dataset.selectUrl;
+		const redirectTo =
+			this.selectEl.options[ this.selectEl.selectedIndex ].dataset
+				.selectUrl;
 		if ( redirectTo ) {
 			window.location.href = redirectTo;
 		}

package/src/interface/SelectNav/index.js

@@ -2,8 +2,7 @@ import SelectNav from './SelectNav';
 
 // Initialize all SelectNav.
 export default function initSelectNav() {
+	const SelectNavs = [ ...document.querySelectorAll( '.js-SelectNav' ) ];
 
-	const SelectNavs = [ ... document.querySelectorAll( '.js-SelectNav' ) ];
-
-	SelectNavs.forEach( el => new SelectNav( el ) );
+	SelectNavs.forEach( ( el ) => new SelectNav( el ) );
 }

package/src/interface/SideSkinAd/SideSkinAd.js

@@ -9,13 +9,11 @@
  * Use a counter to ensure this script only runs one time.
  **/
 
-
 import removeDesktopXlClasses from '../../utils/removeDesktopXlClasses';
 
 // TODO: Should refactor to follow our exporting classes pattern, and
 // include the conditions from index.js in the class
 export default function reflowForSideSkinAd() {
-
 	if ( undefined === window.pmc_side_skin_classes_removed ) {
 		document.documentElement.classList.add( 'has-side-skins' );
 		removeDesktopXlClasses();