first commit

wp-content/themes/storefront/assets/js/admin/admin.js

@@ -0,0 +1,41 @@
+/* global ajaxurl, storefrontNUX */
+( function ( wp, $ ) {
+	'use strict';
+
+	if ( ! wp ) {
+		return;
+	}
+
+	/*
+	 * Ajax request that will hide the Storefront NUX admin notice or message.
+	 */
+	function dismissNux() {
+		$.ajax( {
+			type: 'POST',
+			url: ajaxurl,
+			data: {
+				nonce: storefrontNUX.nonce,
+				action: 'storefront_dismiss_notice',
+			},
+			dataType: 'json',
+		} );
+	}
+
+	$( function () {
+		// Dismiss notice
+		$( document ).on(
+			'click',
+			'.sf-notice-nux .notice-dismiss',
+			function () {
+				dismissNux();
+			}
+		);
+
+		// Dismiss notice inside theme page.
+		$( document ).on( 'click', '.sf-nux-dismiss-button', function () {
+			dismissNux();
+			$( '.storefront-intro-setup' ).hide();
+			$( '.storefront-intro-message' ).fadeIn( 'slow' );
+		} );
+	} );
+} )( window.wp, jQuery );

wp-content/themes/storefront/assets/js/admin/admin.min.js

@@ -0,0 +1 @@
+!function(n,o){"use strict";function t(){o.ajax({type:"POST",url:ajaxurl,data:{nonce:storefrontNUX.nonce,action:"storefront_dismiss_notice"},dataType:"json"})}n&&o(function(){o(document).on("click",".sf-notice-nux .notice-dismiss",function(){t()}),o(document).on("click",".sf-nux-dismiss-button",function(){t(),o(".storefront-intro-setup").hide(),o(".storefront-intro-message").fadeIn("slow")})})}(window.wp,jQuery);

wp-content/themes/storefront/assets/js/admin/customizer.js

@@ -0,0 +1,300 @@
+/* global _wpCustomizeSFGuidedTourSteps */
+( function ( wp, $ ) {
+	'use strict';
+
+	if ( ! wp || ! wp.customize ) {
+		return;
+	}
+
+	// Set up our namespace.
+	const api = wp.customize;
+
+	api.SFGuidedTourSteps = [];
+
+	if ( typeof _wpCustomizeSFGuidedTourSteps !== 'undefined' ) {
+		$.extend( api.SFGuidedTourSteps, _wpCustomizeSFGuidedTourSteps );
+	}
+
+	/**
+	 * wp.customize.SFGuidedTour
+	 *
+	 */
+	api.SFGuidedTour = {
+		$container: null,
+		currentStep: -1,
+
+		init() {
+			this._setupUI();
+		},
+
+		_setupUI() {
+			const self = this,
+				$wpCustomize = $( 'body.wp-customizer .wp-full-overlay' );
+
+			this.$container = $( '<div/>' ).addClass( 'sf-guided-tour' );
+
+			// Add guided tour div
+			$wpCustomize.prepend( this.$container );
+
+			// Add listeners
+			this._addListeners();
+
+			// Initial position
+			this.$container
+				.css(
+					! $( 'body' ).hasClass( 'rtl' ) ? 'left' : 'right',
+					$( '#customize-controls' ).width() + 10 + 'px'
+				)
+				.on( 'transitionend', function () {
+					self.$container.addClass( 'sf-loaded' );
+				} );
+
+			// Show first step
+			this._showNextStep();
+
+			$( document ).on(
+				'click',
+				'.sf-guided-tour-step .sf-nux-button',
+				function () {
+					self._showNextStep();
+					return false;
+				}
+			);
+
+			$( document ).on(
+				'click',
+				'.sf-guided-tour-step .sf-guided-tour-skip',
+				function () {
+					if ( self.currentStep === 0 ) {
+						self._hideTour( true );
+					} else {
+						self._showNextStep();
+					}
+
+					return false;
+				}
+			);
+		},
+
+		_addListeners() {
+			const self = this;
+
+			api.state( 'expandedSection' ).bind( function () {
+				self._adjustPosition();
+			} );
+
+			api.state( 'expandedPanel' ).bind( function () {
+				self._adjustPosition();
+			} );
+		},
+
+		_adjustPosition() {
+			const step = this._getCurrentStep();
+
+			if ( ! step ) {
+				return;
+			}
+
+			this.$container.removeClass( 'sf-inside-section' );
+
+			const expandedSection = api.state( 'expandedSection' ).get();
+			const expandedPanel = api.state( 'expandedPanel' ).get();
+
+			if ( expandedSection && step.section === expandedSection.id ) {
+				this._moveContainer(
+					$( expandedSection.container[ 1 ] ).find(
+						'.customize-section-title'
+					)
+				);
+				this.$container.addClass( 'sf-inside-section' );
+			} else if ( expandedSection === false && expandedPanel === false ) {
+				if ( this._isTourHidden() ) {
+					this._revealTour();
+				} else {
+					const selector = this._getSelector( step.section );
+					this._moveContainer( selector );
+				}
+			} else {
+				this._hideTour();
+			}
+		},
+
+		_hideTour( remove ) {
+			const self = this;
+
+			// Already hidden?
+			if ( this._isTourHidden() ) {
+				return;
+			}
+
+			const containerOffset = this.$container.offset();
+
+			this.$container.css( {
+				transform: '',
+				top: containerOffset.top,
+			} );
+
+			$( 'body' )
+				.addClass( 'sf-exiting' )
+				.on(
+					'animationend.storefront webkitAnimationEnd.storefront',
+					function () {
+						$( this )
+							.removeClass( 'sf-exiting' )
+							.off(
+								'animationend.storefront webkitAnimationEnd.storefront'
+							)
+							.addClass( 'sf-hidden' );
+						self.$container.hide();
+
+						if (
+							typeof remove !== 'undefined' &&
+							remove === true
+						) {
+							self._removeTour();
+						}
+					}
+				);
+		},
+
+		_revealTour() {
+			const self = this;
+
+			$( 'body' ).removeClass( 'sf-hidden' );
+
+			self.$container.show();
+
+			const containerOffset = this.$container.offset();
+			const offsetTop = parseInt( containerOffset.top, 10 );
+
+			$( 'body' )
+				.addClass( 'sf-entering' )
+				.on(
+					'animationend.storefront webkitAnimationEnd.storefront',
+					function () {
+						$( this )
+							.removeClass( 'sf-entering' )
+							.off(
+								'animationend.storefront webkitAnimationEnd.storefront'
+							);
+
+						self.$container.css( {
+							top: 'auto',
+							transform: 'translateY(' + offsetTop + 'px)',
+						} );
+					}
+				);
+		},
+
+		_removeTour() {
+			this.$container.remove();
+		},
+
+		_closeAllSections() {
+			api.section.each( function ( section ) {
+				section.collapse( { duration: 0 } );
+			} );
+
+			api.panel.each( function ( panel ) {
+				panel.collapse( { duration: 0 } );
+			} );
+		},
+
+		_showNextStep() {
+			if ( this._isLastStep() ) {
+				this._hideTour( true );
+				return;
+			}
+
+			this._closeAllSections();
+
+			// Get next step
+			const step = this._getNextStep();
+
+			// Convert line breaks to paragraphs
+			step.message = this._lineBreaksToParagraphs( step.message );
+
+			// Load template
+			const template = wp.template( 'sf-guided-tour-step' );
+
+			this.$container.removeClass( 'sf-first-step' );
+
+			if ( this.currentStep === 0 ) {
+				step.first_step = true;
+				this.$container.addClass( 'sf-first-step' );
+			}
+
+			if ( this._isLastStep() ) {
+				step.last_step = true;
+				this.$container.addClass( 'sf-last-step' );
+			}
+
+			this._moveContainer( this._getSelector( step.section ) );
+
+			this.$container.html( template( step ) );
+		},
+
+		_moveContainer( $selector ) {
+			const self = this;
+
+			if ( ! $selector ) {
+				return;
+			}
+
+			const position =
+				parseInt( $selector.offset().top, 10 ) +
+				$selector.height() / 2 -
+				44;
+
+			this.$container
+				.addClass( 'sf-moving' )
+				.css( {
+					transform: 'translateY(' + position + 'px)',
+				} )
+				.on( 'transitionend.storefront', function () {
+					self.$container.removeClass( 'sf-moving' );
+					self.$container.off( 'transitionend.storefront' );
+				} );
+		},
+
+		_getSelector( pointTo ) {
+			const sectionOrPanel = api.section( pointTo )
+				? api.section( pointTo )
+				: api.panel( pointTo );
+
+			// Check whether this is a section, panel, or a regular selector
+			if ( typeof sectionOrPanel !== 'undefined' ) {
+				return $( sectionOrPanel.container[ 0 ] );
+			}
+
+			return $( pointTo );
+		},
+
+		_getCurrentStep() {
+			return api.SFGuidedTourSteps[ this.currentStep ];
+		},
+
+		_getNextStep() {
+			this.currentStep = this.currentStep + 1;
+			return api.SFGuidedTourSteps[ this.currentStep ];
+		},
+
+		_isTourHidden() {
+			return $( 'body' ).hasClass( 'sf-hidden' ) ? true : false;
+		},
+
+		_isLastStep() {
+			return this.currentStep + 1 < api.SFGuidedTourSteps.length
+				? false
+				: true;
+		},
+
+		_lineBreaksToParagraphs( message ) {
+			return '<p>' + message.replace( '\n\n', '</p><p>' ) + '</p>';
+		},
+	};
+
+	$( document ).ready( function () {
+		api.SFGuidedTour.init();
+	} );
+} )( window.wp, jQuery );

wp-content/themes/storefront/assets/js/admin/customizer.min.js

@@ -0,0 +1 @@
+!function(s,n){"use strict";if(s&&s.customize){const i=s.customize;i.SFGuidedTourSteps=[],"undefined"!=typeof _wpCustomizeSFGuidedTourSteps&&n.extend(i.SFGuidedTourSteps,_wpCustomizeSFGuidedTourSteps),i.SFGuidedTour={$container:null,currentStep:-1,init(){this._setupUI()},_setupUI(){const t=this,e=n("body.wp-customizer .wp-full-overlay");this.$container=n("<div/>").addClass("sf-guided-tour"),e.prepend(this.$container),this._addListeners(),this.$container.css(n("body").hasClass("rtl")?"right":"left",n("#customize-controls").width()+10+"px").on("transitionend",function(){t.$container.addClass("sf-loaded")}),this._showNextStep(),n(document).on("click",".sf-guided-tour-step .sf-nux-button",function(){return t._showNextStep(),!1}),n(document).on("click",".sf-guided-tour-step .sf-guided-tour-skip",function(){return 0===t.currentStep?t._hideTour(!0):t._showNextStep(),!1})},_addListeners(){const t=this;i.state("expandedSection").bind(function(){t._adjustPosition()}),i.state("expandedPanel").bind(function(){t._adjustPosition()})},_adjustPosition(){var t,e,s=this._getCurrentStep();s&&(this.$container.removeClass("sf-inside-section"),e=i.state("expandedSection").get(),t=i.state("expandedPanel").get(),e&&s.section===e.id?(this._moveContainer(n(e.container[1]).find(".customize-section-title")),this.$container.addClass("sf-inside-section")):!1===e&&!1===t?this._isTourHidden()?this._revealTour():(e=this._getSelector(s.section),this._moveContainer(e)):this._hideTour())},_hideTour(t){const e=this;var s;this._isTourHidden()||(s=this.$container.offset(),this.$container.css({transform:"",top:s.top}),n("body").addClass("sf-exiting").on("animationend.storefront webkitAnimationEnd.storefront",function(){n(this).removeClass("sf-exiting").off("animationend.storefront webkitAnimationEnd.storefront").addClass("sf-hidden"),e.$container.hide(),void 0!==t&&!0===t&&e._removeTour()}))},_revealTour(){const t=this;n("body").removeClass("sf-hidden"),t.$container.show();var e=this.$container.offset();const s=parseInt(e.top,10);n("body").addClass("sf-entering").on("animationend.storefront webkitAnimationEnd.storefront",function(){n(this).removeClass("sf-entering").off("animationend.storefront webkitAnimationEnd.storefront"),t.$container.css({top:"auto",transform:"translateY("+s+"px)"})})},_removeTour(){this.$container.remove()},_closeAllSections(){i.section.each(function(t){t.collapse({duration:0})}),i.panel.each(function(t){t.collapse({duration:0})})},_showNextStep(){if(this._isLastStep())this._hideTour(!0);else{this._closeAllSections();const t=this._getNextStep(),e=(t.message=this._lineBreaksToParagraphs(t.message),s.template("sf-guided-tour-step"));this.$container.removeClass("sf-first-step"),0===this.currentStep&&(t.first_step=!0,this.$container.addClass("sf-first-step")),this._isLastStep()&&(t.last_step=!0,this.$container.addClass("sf-last-step")),this._moveContainer(this._getSelector(t.section)),this.$container.html(e(t))}},_moveContainer(t){const e=this;t&&(t=parseInt(t.offset().top,10)+t.height()/2-44,this.$container.addClass("sf-moving").css({transform:"translateY("+t+"px)"}).on("transitionend.storefront",function(){e.$container.removeClass("sf-moving"),e.$container.off("transitionend.storefront")}))},_getSelector(t){var e=i.section(t)?i.section(t):i.panel(t);return n(void 0!==e?e.container[0]:t)},_getCurrentStep(){return i.SFGuidedTourSteps[this.currentStep]},_getNextStep(){return this.currentStep=this.currentStep+1,i.SFGuidedTourSteps[this.currentStep]},_isTourHidden(){return!!n("body").hasClass("sf-hidden")},_isLastStep(){return!(this.currentStep+1<i.SFGuidedTourSteps.length)},_lineBreaksToParagraphs(t){return"<p>"+t.replace("\n\n","</p><p>")+"</p>"}},n(document).ready(function(){i.SFGuidedTour.init()})}}(window.wp,jQuery);

wp-content/themes/storefront/assets/js/admin/plugin-install.js

@@ -0,0 +1,47 @@
+( function ( wp, $ ) {
+	'use strict';
+
+	if ( ! wp ) {
+		return;
+	}
+
+	$( function () {
+		$( document ).on( 'click', '.sf-install-now', function ( event ) {
+			const $button = $( event.target );
+
+			if ( $button.hasClass( 'activate-now' ) ) {
+				return true;
+			}
+
+			event.preventDefault();
+
+			if (
+				$button.hasClass( 'updating-message' ) ||
+				$button.hasClass( 'button-disabled' )
+			) {
+				return;
+			}
+
+			if (
+				wp.updates.shouldRequestFilesystemCredentials &&
+				! wp.updates.ajaxLocked
+			) {
+				wp.updates.requestFilesystemCredentials( event );
+
+				$( document ).on( 'credential-modal-cancel', function () {
+					const $message = $( '.sf-install-now.updating-message' );
+
+					$message
+						.removeClass( 'updating-message' )
+						.text( wp.updates.l10n.installNow );
+
+					wp.a11y.speak( wp.updates.l10n.updateCancel, 'polite' );
+				} );
+			}
+
+			wp.updates.installPlugin( {
+				slug: $button.data( 'slug' ),
+			} );
+		} );
+	} );
+} )( window.wp, jQuery );

wp-content/themes/storefront/assets/js/admin/plugin-install.min.js

@@ -0,0 +1 @@
+!function(t,a){"use strict";t&&a(function(){a(document).on("click",".sf-install-now",function(e){const s=a(e.target);if(s.hasClass("activate-now"))return!0;e.preventDefault(),s.hasClass("updating-message")||s.hasClass("button-disabled")||(t.updates.shouldRequestFilesystemCredentials&&!t.updates.ajaxLocked&&(t.updates.requestFilesystemCredentials(e),a(document).on("credential-modal-cancel",function(){const e=a(".sf-install-now.updating-message");e.removeClass("updating-message").text(t.updates.l10n.installNow),t.a11y.speak(t.updates.l10n.updateCancel,"polite")})),t.updates.installPlugin({slug:s.data("slug")}))})})}(window.wp,jQuery);

wp-content/themes/storefront/assets/js/footer.js

@@ -0,0 +1,58 @@
+/**
+ * footer.js
+ *
+ * Adds a class required to reveal the search in the handheld footer bar.
+ * Also hides the handheld footer bar when an input is focused.
+ */
+( function () {
+	// Wait for DOM to be ready.
+	// eslint-disable-next-line @wordpress/no-global-event-listener
+	document.addEventListener( 'DOMContentLoaded', function () {
+		if (
+			document.getElementsByClassName( 'storefront-handheld-footer-bar' )
+				.length === 0
+		) {
+			return;
+		}
+
+		// Add class to footer search when clicked.
+		[].forEach.call(
+			document.querySelectorAll(
+				'.storefront-handheld-footer-bar .search > a'
+			),
+			function ( anchor ) {
+				anchor.addEventListener( 'click', function ( event ) {
+					anchor.parentElement.classList.toggle( 'active' );
+					event.preventDefault();
+				} );
+			}
+		);
+
+		// Add focus class to body when an input field is focused.
+		// This is used to hide the Handheld Footer Bar when an input is focused.
+		const footerBar = document.getElementsByClassName(
+			'storefront-handheld-footer-bar'
+		);
+		const forms = document.forms;
+		const isFocused = function ( focused ) {
+			return function ( event ) {
+				if ( !! focused && event.target.tabIndex !== -1 ) {
+					document.body.classList.add( 'sf-input-focused' );
+				} else {
+					document.body.classList.remove( 'sf-input-focused' );
+				}
+			};
+		};
+
+		if ( footerBar.length && forms.length ) {
+			for ( let i = 0; i < forms.length; i++ ) {
+				if ( footerBar[ 0 ].contains( forms[ i ] ) ) {
+					continue;
+				}
+
+				forms[ i ].addEventListener( 'focus', isFocused( true ), true );
+				forms[ i ].addEventListener( 'blur', isFocused( false ), true );
+			}
+		}
+	} );
+} )();

wp-content/themes/storefront/assets/js/footer.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){if(0!==document.getElementsByClassName("storefront-handheld-footer-bar").length){[].forEach.call(document.querySelectorAll(".storefront-handheld-footer-bar .search > a"),function(t){t.addEventListener("click",function(e){t.parentElement.classList.toggle("active"),e.preventDefault()})});const n=document.getElementsByClassName("storefront-handheld-footer-bar"),o=document.forms;function t(t){return function(e){t&&-1!==e.target.tabIndex?document.body.classList.add("sf-input-focused"):document.body.classList.remove("sf-input-focused")}}if(n.length&&o.length)for(let e=0;e<o.length;e++)n[0].contains(o[e])||(o[e].addEventListener("focus",t(!0),!0),o[e].addEventListener("blur",t(!1),!0))}});

wp-content/themes/storefront/assets/js/homepage.js

@@ -0,0 +1,59 @@
+/**
+ * homepage.js
+ *
+ * Handles behaviour of the homepage featured image
+ */
+( function () {
+	/**
+	 * Set hero content dimensions / layout
+	 * Run adaptive backgrounds and set colors
+	 */
+	// eslint-disable-next-line @wordpress/no-global-event-listener
+	document.addEventListener( 'DOMContentLoaded', function () {
+		const homepageContent = document.querySelector(
+			'.page-template-template-homepage .type-page.has-post-thumbnail'
+		);
+
+		if ( ! homepageContent ) {
+			// Only apply layout to the homepage content component if it exists on the page
+			return;
+		}
+
+		const entries = homepageContent.querySelectorAll(
+			'.entry-title, .entry-content'
+		);
+		for ( let i = 0; i < entries.length; i++ ) {
+			entries[ i ].classList.add( 'loaded' );
+		}
+
+		const siteMain = document.querySelector( '.site-main' );
+		const htmlDirValue = document.documentElement.getAttribute( 'dir' );
+
+		const updateDimensions = function () {
+			if ( updateDimensions._tick ) {
+				window.cancelAnimationFrame( updateDimensions._tick );
+			}
+
+			updateDimensions._tick = window.requestAnimationFrame( function () {
+				updateDimensions._tick = null;
+
+				// Make the homepage content full width and centrally aligned.
+				// eslint-disable-next-line @wordpress/no-global-event-listener
+				homepageContent.style.width = window.innerWidth + 'px';
+
+				if ( htmlDirValue !== 'rtl' ) {
+					homepageContent.style.marginLeft =
+						-siteMain.getBoundingClientRect().left + 'px';
+				} else {
+					homepageContent.style.marginRight =
+						-siteMain.getBoundingClientRect().left + 'px';
+				}
+			} );
+		};
+
+		// On window resize, set hero content dimensions / layout.
+		// eslint-disable-next-line @wordpress/no-global-event-listener
+		window.addEventListener( 'resize', updateDimensions );
+		updateDimensions();
+	} );
+} )();

wp-content/themes/storefront/assets/js/homepage.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){const t=document.querySelector(".page-template-template-homepage .type-page.has-post-thumbnail");if(t){const e=t.querySelectorAll(".entry-title, .entry-content");for(let t=0;t<e.length;t++)e[t].classList.add("loaded");const n=document.querySelector(".site-main"),i=document.documentElement.getAttribute("dir"),o=function(){o._tick&&window.cancelAnimationFrame(o._tick),o._tick=window.requestAnimationFrame(function(){o._tick=null,t.style.width=window.innerWidth+"px","rtl"!==i?t.style.marginLeft=-n.getBoundingClientRect().left+"px":t.style.marginRight=-n.getBoundingClientRect().left+"px"})};window.addEventListener("resize",o),o()}});

wp-content/themes/storefront/assets/js/navigation.js

@@ -0,0 +1,209 @@
+/* global storefrontScreenReaderText */
+
+/**
+ * navigation.js
+ *
+ * Handles toggling the navigation menu for small screens.
+ * Also adds a focus class to parent li's for accessibility.
+ */
+( function () {
+	// eslint-disable-next-line @wordpress/no-global-event-listener
+	document.addEventListener( 'DOMContentLoaded', function () {
+		const container = document.getElementById( 'site-navigation' );
+		if ( ! container ) {
+			return;
+		}
+
+		const button = container.querySelector( 'button' );
+
+		if ( ! button ) {
+			return;
+		}
+
+		const menu = container.querySelector( 'ul' );
+
+		// Hide menu toggle button if menu is empty and return early.
+		if ( ! menu ) {
+			button.style.display = 'none';
+			return;
+		}
+
+		button.setAttribute( 'aria-expanded', 'false' );
+		menu.setAttribute( 'aria-expanded', 'false' );
+		menu.classList.add( 'nav-menu' );
+
+		button.addEventListener( 'click', function () {
+			container.classList.toggle( 'toggled' );
+			const expanded = container.classList.contains( 'toggled' )
+				? 'true'
+				: 'false';
+			button.setAttribute( 'aria-expanded', expanded );
+			menu.setAttribute( 'aria-expanded', expanded );
+		} );
+
+		// Add dropdown toggle that displays child menu items.
+		const handheld = document.getElementsByClassName(
+			'handheld-navigation'
+		);
+
+		if ( handheld.length > 0 ) {
+			[].forEach.call(
+				handheld[ 0 ].querySelectorAll(
+					'.menu-item-has-children > a, .page_item_has_children > a'
+				),
+				function ( anchor ) {
+					// Add dropdown toggle that displays child menu items
+					const btn = document.createElement( 'button' );
+					btn.setAttribute( 'aria-expanded', 'false' );
+					btn.classList.add( 'dropdown-toggle' );
+
+					const btnSpan = document.createElement( 'span' );
+					btnSpan.classList.add( 'screen-reader-text' );
+					btnSpan.appendChild(
+						document.createTextNode(
+							storefrontScreenReaderText.expand
+						)
+					);
+
+					btn.appendChild( btnSpan );
+
+					anchor.parentNode.insertBefore( btn, anchor.nextSibling );
+
+					// Set the active submenu dropdown toggle button initial state
+					if (
+						anchor.parentNode.classList.contains(
+							'current-menu-ancestor'
+						)
+					) {
+						btn.setAttribute( 'aria-expanded', 'true' );
+						btn.classList.add( 'toggled-on' );
+						btn.nextElementSibling.classList.add( 'toggled-on' );
+					}
+
+					// Add event listener
+					btn.addEventListener( 'click', function () {
+						btn.classList.toggle( 'toggled-on' );
+
+						// Remove text inside span
+						while ( btnSpan.firstChild ) {
+							btnSpan.removeChild( btnSpan.firstChild );
+						}
+
+						const expanded = btn.classList.contains( 'toggled-on' );
+
+						btn.setAttribute( 'aria-expanded', expanded );
+						btnSpan.appendChild(
+							document.createTextNode(
+								expanded
+									? storefrontScreenReaderText.collapse
+									: storefrontScreenReaderText.expand
+							)
+						);
+						btn.nextElementSibling.classList.toggle( 'toggled-on' );
+					} );
+				}
+			);
+		}
+
+		// Add focus class to parents of sub-menu anchors.
+		[].forEach.call(
+			document.querySelectorAll(
+				'.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a'
+			),
+			function ( anchor ) {
+				anchor.addEventListener( 'focus', function () {
+					// Remove focus class from other sub-menus previously open.
+					const elems = document.querySelectorAll( '.focus' );
+
+					[].forEach.call( elems, function ( el ) {
+						if ( ! el.contains( anchor ) ) {
+							el.classList.remove( 'focus' );
+
+							// Remove blocked class, if it exists.
+							if ( el.firstChild && el.firstChild.classList ) {
+								el.firstChild.classList.remove( 'blocked' );
+							}
+						}
+					} );
+
+					// Add focus class.
+					const li = anchor.parentNode;
+
+					li.classList.add( 'focus' );
+				} );
+			}
+		);
+
+		// Ensure the dropdowns close when user taps outside the site header
+		[].forEach.call(
+			document.querySelectorAll( 'body #page > :not( .site-header )' ),
+			function ( element ) {
+				element.addEventListener( 'click', function () {
+					[].forEach.call(
+						document.querySelectorAll( '.focus, .blocked' ),
+						function ( el ) {
+							el.classList.remove( 'focus' );
+							el.classList.remove( 'blocked' );
+						}
+					);
+				} );
+			}
+		);
+
+		// Add an identifying class to dropdowns when on a touch device
+		// This is required to switch the dropdown hiding method from a negative `left` value to `display: none`.
+		if (
+			( 'ontouchstart' in window || window.navigator.maxTouchPoints ) &&
+			window.innerWidth > 767
+		) {
+			[].forEach.call(
+				document.querySelectorAll(
+					'.site-header ul ul, .site-header-cart .widget_shopping_cart'
+				),
+				function ( element ) {
+					element.classList.add( 'sub-menu--is-touch-device' );
+				}
+			);
+
+			// Add blocked class to links that open sub-menus, and prevent from navigating away on first touch.
+			let acceptClick = false;
+
+			[].forEach.call(
+				document.querySelectorAll(
+					'.site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a'
+				),
+				function ( anchor ) {
+					anchor.addEventListener( 'click', function ( event ) {
+						if (
+							anchor.classList.contains( 'blocked' ) &&
+							acceptClick === false
+						) {
+							event.preventDefault();
+						}
+
+						acceptClick = false;
+					} );
+
+					anchor.addEventListener( 'pointerup', function ( event ) {
+						if (
+							anchor.classList.contains( 'blocked' ) ||
+							event.pointerType === 'mouse'
+						) {
+							acceptClick = true;
+						} else if (
+							( anchor.className === 'cart-contents' &&
+								anchor.parentNode.nextElementSibling &&
+								anchor.parentNode.nextElementSibling.textContent.trim() !==
+									'' ) ||
+							anchor.nextElementSibling
+						) {
+							anchor.classList.add( 'blocked' );
+						} else {
+							acceptClick = true;
+						}
+					} );
+				}
+			);
+		}
+	} );
+} )();

wp-content/themes/storefront/assets/js/navigation.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){const t=document.getElementById("site-navigation");if(t){const n=t.querySelector("button");if(n){const a=t.querySelector("ul");if(a){n.setAttribute("aria-expanded","false"),a.setAttribute("aria-expanded","false"),a.classList.add("nav-menu"),n.addEventListener("click",function(){t.classList.toggle("toggled");var e=t.classList.contains("toggled")?"true":"false";n.setAttribute("aria-expanded",e),a.setAttribute("aria-expanded",e)});const e=document.getElementsByClassName("handheld-navigation");if(0<e.length&&[].forEach.call(e[0].querySelectorAll(".menu-item-has-children > a, .page_item_has_children > a"),function(e){const t=document.createElement("button"),n=(t.setAttribute("aria-expanded","false"),t.classList.add("dropdown-toggle"),document.createElement("span"));n.classList.add("screen-reader-text"),n.appendChild(document.createTextNode(storefrontScreenReaderText.expand)),t.appendChild(n),e.parentNode.insertBefore(t,e.nextSibling),e.parentNode.classList.contains("current-menu-ancestor")&&(t.setAttribute("aria-expanded","true"),t.classList.add("toggled-on"),t.nextElementSibling.classList.add("toggled-on")),t.addEventListener("click",function(){for(t.classList.toggle("toggled-on");n.firstChild;)n.removeChild(n.firstChild);var e=t.classList.contains("toggled-on");t.setAttribute("aria-expanded",e),n.appendChild(document.createTextNode(e?storefrontScreenReaderText.collapse:storefrontScreenReaderText.expand)),t.nextElementSibling.classList.toggle("toggled-on")})}),[].forEach.call(document.querySelectorAll(".site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a"),function(n){n.addEventListener("focus",function(){var e=document.querySelectorAll(".focus");[].forEach.call(e,function(e){e.contains(n)||(e.classList.remove("focus"),e.firstChild&&e.firstChild.classList&&e.firstChild.classList.remove("blocked"))});const t=n.parentNode;t.classList.add("focus")})}),[].forEach.call(document.querySelectorAll("body #page > :not( .site-header )"),function(e){e.addEventListener("click",function(){[].forEach.call(document.querySelectorAll(".focus, .blocked"),function(e){e.classList.remove("focus"),e.classList.remove("blocked")})})}),("ontouchstart"in window||window.navigator.maxTouchPoints)&&767<window.innerWidth){[].forEach.call(document.querySelectorAll(".site-header ul ul, .site-header-cart .widget_shopping_cart"),function(e){e.classList.add("sub-menu--is-touch-device")});let n=!1;[].forEach.call(document.querySelectorAll(".site-header .menu-item > a, .site-header .page_item > a, .site-header-cart a"),function(t){t.addEventListener("click",function(e){t.classList.contains("blocked")&&!1===n&&e.preventDefault(),n=!1}),t.addEventListener("pointerup",function(e){!t.classList.contains("blocked")&&"mouse"!==e.pointerType&&("cart-contents"===t.className&&t.parentNode.nextElementSibling&&""!==t.parentNode.nextElementSibling.textContent.trim()||t.nextElementSibling)?t.classList.add("blocked"):n=!0})})}}else n.style.display="none"}}});

wp-content/themes/storefront/assets/js/sticky-add-to-cart.js

@@ -0,0 +1,92 @@
+/*global storefront_sticky_add_to_cart_params */
+( function () {
+	// eslint-disable-next-line @wordpress/no-global-event-listener
+	document.addEventListener( 'DOMContentLoaded', function () {
+		const stickyAddToCart = document.getElementsByClassName(
+			'storefront-sticky-add-to-cart'
+		);
+
+		if ( ! stickyAddToCart.length ) {
+			return;
+		}
+
+		// eslint-disable-next-line camelcase
+		if ( typeof storefront_sticky_add_to_cart_params === 'undefined' ) {
+			return;
+		}
+
+		const trigger = document.getElementsByClassName(
+			storefront_sticky_add_to_cart_params.trigger_class
+		);
+
+		if ( trigger.length > 0 ) {
+			const stickyAddToCartToggle = function () {
+				if (
+					trigger[ 0 ].getBoundingClientRect().top +
+						trigger[ 0 ].scrollHeight <
+					0
+				) {
+					stickyAddToCart[ 0 ].classList.add(
+						'storefront-sticky-add-to-cart--slideInDown'
+					);
+					stickyAddToCart[ 0 ].classList.remove(
+						'storefront-sticky-add-to-cart--slideOutUp'
+					);
+				} else if (
+					stickyAddToCart[ 0 ].classList.contains(
+						'storefront-sticky-add-to-cart--slideInDown'
+					)
+				) {
+					stickyAddToCart[ 0 ].classList.add(
+						'storefront-sticky-add-to-cart--slideOutUp'
+					);
+					stickyAddToCart[ 0 ].classList.remove(
+						'storefront-sticky-add-to-cart--slideInDown'
+					);
+				}
+			};
+
+			stickyAddToCartToggle();
+
+			// eslint-disable-next-line @wordpress/no-global-event-listener
+			window.addEventListener( 'scroll', function () {
+				stickyAddToCartToggle();
+			} );
+
+			// Get product id
+			let productId = null;
+
+			document.body.classList.forEach( function ( item ) {
+				if ( item.substring( 0, 7 ) === 'postid-' ) {
+					productId = item.replace( /[^0-9]/g, '' );
+				}
+			} );
+
+			if ( productId ) {
+				const product = document.getElementById(
+					'product-' + productId
+				);
+
+				if ( product ) {
+					if (
+						! product.classList.contains( 'product-type-simple' ) &&
+						! product.classList.contains( 'product-type-external' )
+					) {
+						const selectOptions = document.getElementsByClassName(
+							'storefront-sticky-add-to-cart__content-button'
+						);
+
+						selectOptions[ 0 ].addEventListener( 'click', function (
+							event
+						) {
+							event.preventDefault();
+							document
+								.getElementById( 'product-' + productId )
+								.scrollIntoView();
+						} );
+					}
+				}
+			}
+		}
+	} );
+} )();

wp-content/themes/storefront/assets/js/sticky-add-to-cart.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){const t=document.getElementsByClassName("storefront-sticky-add-to-cart");if(t.length&&"undefined"!=typeof storefront_sticky_add_to_cart_params){const e=document.getElementsByClassName(storefront_sticky_add_to_cart_params.trigger_class);if(0<e.length){const n=function(){e[0].getBoundingClientRect().top+e[0].scrollHeight<0?(t[0].classList.add("storefront-sticky-add-to-cart--slideInDown"),t[0].classList.remove("storefront-sticky-add-to-cart--slideOutUp")):t[0].classList.contains("storefront-sticky-add-to-cart--slideInDown")&&(t[0].classList.add("storefront-sticky-add-to-cart--slideOutUp"),t[0].classList.remove("storefront-sticky-add-to-cart--slideInDown"))};n(),window.addEventListener("scroll",function(){n()});let s=null;if(document.body.classList.forEach(function(t){"postid-"===t.substring(0,7)&&(s=t.replace(/[^0-9]/g,""))}),s){const o=document.getElementById("product-"+s);if(o&&!o.classList.contains("product-type-simple")&&!o.classList.contains("product-type-external")){const c=document.getElementsByClassName("storefront-sticky-add-to-cart__content-button");c[0].addEventListener("click",function(t){t.preventDefault(),document.getElementById("product-"+s).scrollIntoView()})}}}}});

wp-content/themes/storefront/assets/js/woocommerce/extensions/brands.js

@@ -0,0 +1,46 @@
+/**
+ * brands.js
+ *
+ * Adds sticky functionality to the brands index.
+ */
+( function () {
+	// eslint-disable-next-line @wordpress/no-global-event-listener
+	document.addEventListener( 'DOMContentLoaded', function () {
+		const brandsAZ = document.getElementsByClassName( 'brands_index' );
+
+		if ( ! brandsAZ.length ) {
+			return;
+		}
+
+		const adminBar = document.body.classList.contains( 'admin-bar' )
+				? 32
+				: 0,
+			brandsContainerHeight = document.getElementById( 'brands_a_z' )
+				.scrollHeight,
+			brandsAZHeight = brandsAZ[ 0 ].scrollHeight + 40;
+
+		const stickyBrandsAZ = function () {
+			if (
+				window.innerWidth > 768 &&
+				brandsAZ[ 0 ].getBoundingClientRect().top < 0
+			) {
+				brandsAZ[ 0 ].style.paddingTop =
+					Math.min(
+						Math.abs( brandsAZ[ 0 ].getBoundingClientRect().top ) +
+							20 +
+							adminBar,
+						brandsContainerHeight - brandsAZHeight
+					) + 'px';
+			} else {
+				brandsAZ[ 0 ].style.paddingTop = 0;
+			}
+		};
+
+		stickyBrandsAZ();
+
+		// eslint-disable-next-line @wordpress/no-global-event-listener
+		window.addEventListener( 'scroll', function () {
+			stickyBrandsAZ();
+		} );
+	} );
+} )();

wp-content/themes/storefront/assets/js/woocommerce/extensions/brands.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){const n=document.getElementsByClassName("brands_index");if(n.length){const t=document.body.classList.contains("admin-bar")?32:0,e=document.getElementById("brands_a_z").scrollHeight,d=n[0].scrollHeight+40,o=function(){768<window.innerWidth&&n[0].getBoundingClientRect().top<0?n[0].style.paddingTop=Math.min(Math.abs(n[0].getBoundingClientRect().top)+20+t,e-d)+"px":n[0].style.paddingTop=0};o(),window.addEventListener("scroll",function(){o()})}});

wp-content/themes/storefront/assets/js/woocommerce/header-cart.js

@@ -0,0 +1,33 @@
+/**
+ * Makes the header cart content scrollable if the height of the dropdown exceeds the window height.
+ * Mouseover is used as items can be added to the cart via ajax and we'll need to recheck.
+ */
+( function () {
+	if (
+		document.body.classList.contains( 'woocommerce-cart' ) ||
+		document.body.classList.contains( 'woocommerce-checkout' ) ||
+		window.innerWidth < 768 ||
+		! document.getElementById( 'site-header-cart' )
+	) {
+		return;
+	}
+
+	// eslint-disable-next-line @wordpress/no-global-event-listener
+	window.addEventListener( 'load', function () {
+		const cart = document.querySelector( '.site-header-cart' );
+
+		cart.addEventListener( 'mouseover', function () {
+			const windowHeight = window.outerHeight,
+				cartBottomPos =
+					this.querySelector(
+						'.widget_shopping_cart_content'
+					).getBoundingClientRect().bottom + this.offsetHeight,
+				cartList = this.querySelector( '.cart_list' );
+
+			if ( cartBottomPos > windowHeight ) {
+				cartList.style.maxHeight = '15em';
+				cartList.style.overflowY = 'auto';
+			}
+		} );
+	} );
+} )();

wp-content/themes/storefront/assets/js/woocommerce/header-cart.min.js

@@ -0,0 +1 @@
+document.body.classList.contains("woocommerce-cart")||document.body.classList.contains("woocommerce-checkout")||window.innerWidth<768||!document.getElementById("site-header-cart")||window.addEventListener("load",function(){const e=document.querySelector(".site-header-cart");e.addEventListener("mouseover",function(){const e=window.outerHeight,t=this.querySelector(".widget_shopping_cart_content").getBoundingClientRect().bottom+this.offsetHeight,o=this.querySelector(".cart_list");e<t&&(o.style.maxHeight="15em",o.style.overflowY="auto")})});