@penskemediacorp/larva-js 0.7.0 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@penskemediacorp/larva-js",
-	"version": "0.7.0",
+	"version": "0.7.4",
 	"description": "Larva JS patterns.",
 	"author": "laras126 <laras126@gmail.com>",
 	"homepage": "https://github.com/penske-media-corp/pmc-larva#readme",
@@ -26,5 +26,5 @@
 		"webpack": "^4.43.0",
 		"webpack-cli": "^3.3.12"
 	},
-	"gitHead": "4f647cfb574dcae8905f806957c7dfa75420dbbe"
+	"gitHead": "87d72c42360db2e0d2aeac4eda0b5dfdd5734b35"
 }

package/src/interface/ExpandableSearch/ExpandableSearch.js

@@ -0,0 +1,63 @@
+export default class ExpandableSearch {
+	constructor(el) {
+		this.el = el;
+		this.isOpen = false;
+		this.trigger = this.el.querySelector('.js-ExpandableSearch-trigger');
+		this.target = this.el.querySelector('.js-ExpandableSearch-target');
+		this.targetInput = this.target.querySelector('input');
+
+		this.trigger.addEventListener('click', () => {
+			this.toggleSearch();
+		});
+
+		// TODO: remove these event listeners when search is closed.
+
+		// Collapse search on ESC.
+		document.addEventListener('keydown', (e) => {
+			if (27 === e.keyCode) {
+				this.collapseSearch();
+			}
+		});
+
+		// Collapse search on body click, outside of search el.
+		document.body.addEventListener('click', (e) => {
+			if (!this.el.contains(e.target)) {
+				this.collapseSearch();
+			}
+		});
+
+		// Collapse search when focus leaves search el.
+		document.addEventListener('focusin', () => {
+			// eslint-disable-next-line @wordpress/no-global-active-element
+			if (!this.el.contains(document.activeElement) && this.isOpen) {
+				this.collapseSearch();
+			}
+		});
+	}
+
+	updateState() {
+		this.isOpen = this.isOpen ? false : true;
+	}
+
+	toggleSearch() {
+		this.target.toggleAttribute('hidden');
+		this.target.classList.toggle('js-fade-is-out');
+		this.target.classList.toggle('js-fade-is-in');
+		this.trigger.classList.toggle('is-ExpandableSearch-open');
+
+		this.updateState();
+
+		// Switch focus to input if it is opened
+		if (this.isOpen) {
+			this.targetInput.focus();
+		}
+	}
+
+	// Switch focus back to trigger when search is closed.
+	collapseSearch() {
+		if (this.isOpen) {
+			this.toggleSearch();
+			this.trigger.focus();
+		}
+	}
+}

package/src/interface/ExpandableSearch/index.js

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

package/src/interface/Header/Header.js

@@ -0,0 +1,124 @@
+// Copied from Vibe
+export default class Header {
+	constructor(el) {
+		this.el = el;
+		this.el.pmcHeader = this;
+		this.container = document.documentElement;
+
+		this.initSticky();
+
+		// Uncomment when ready to work on search.
+		this.initSearch();
+	}
+
+	destroy() {
+		this.destroySticky();
+
+		this.destroySearch();
+		delete this.el.pmcHeader;
+	}
+
+	get stickyClass() {
+		return this.el.dataset.headerStickyClass || 'is-sticky';
+	}
+
+	get readyClass() {
+		return this.el.dataset.headerReadyClass || 'is-header-ready';
+	}
+
+	get searchClass() {
+		return this.el.dataset.headerSearchClass || 'is-search-expanded';
+	}
+
+	initSticky() {
+		if (window.IntersectionObserver) {
+			this.observerOptions = {
+				root: null,
+				rootMargin: '350px',
+				threshold: [1.0],
+			};
+
+			this.toggleSticky = this.toggleSticky.bind(this);
+
+			// eslint-disable-next-line no-undef
+			this.observer = new IntersectionObserver(
+				this.toggleSticky,
+				this.observerOptions
+			);
+			this.observer.observe(this.el);
+
+			// Delay the initialization of the transition effects on the header.
+			this.container.classList.add(this.readyClass);
+		}
+	}
+
+	destroySticky() {
+		if (window.IntersectionObserver) {
+			this.observer.disconnect();
+			this.container.classList.remove(this.stickyClass, this.readyClass);
+		}
+	}
+
+	toggleSticky(entries) {
+		if (window.IntersectionObserver) {
+			entries.forEach((entry) => {
+				const ratio = entry.intersectionRatio;
+
+				if (1 === ratio) {
+					this.container.classList.remove(this.stickyClass);
+				} else if (1 > ratio) {
+					this.container.classList.add(this.stickyClass);
+				}
+			});
+		}
+	}
+
+	initSearch() {
+		// TODO: Note to @Lara Schenck that this should be updated to be a class, probably
+		this.searchTrigger = this.el.querySelector(
+			'[data-header-search-trigger]'
+		);
+
+		if (null === this.searchTrigger) {
+			return;
+		}
+
+		this.expandSearch = this.expandSearch.bind(this);
+		this.collapseSearch = this.collapseSearch.bind(this);
+		this.searchTrigger.addEventListener('click', this.expandSearch);
+	}
+
+	destroySearch() {
+		document.body.removeEventListener('click', this.collapseSearch);
+		this.searchTrigger.removeEventListener('click', this.expandSearch);
+		this.container.classList.remove(this.searchClass);
+	}
+
+	expandSearch(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		this.container.classList.add(this.searchClass);
+
+		this.searchTrigger.removeEventListener('click', this.expandSearch);
+
+		// Delay new event listener set up to prevent immediate search form collapsing.
+		setTimeout(
+			() => document.body.addEventListener('click', this.collapseSearch),
+			1
+		);
+	}
+
+	collapseSearch(e) {
+		// Do not collapse if the search form element was clicked.
+		if (
+			e.target === this.searchTrigger ||
+			this.searchTrigger.contains(e.target)
+		) {
+			return;
+		}
+
+		this.container.classList.remove(this.searchClass);
+		this.searchTrigger.addEventListener('click', this.expandSearch);
+		document.body.removeEventListener('click', this.collapseSearch);
+	}
+}

package/src/interface/Header/index.js

@@ -0,0 +1,7 @@
+import Header from './Header.js';
+
+export default function initHeader() {
+	// TODO: For Lara, This maybe should be turned into a class
+	const headers = [...document.querySelectorAll('.js-Header')];
+	headers.forEach((el) => (el.pmcHeader = new Header(el)));
+}