48 lines
1.5 KiB
JavaScript
48 lines
1.5 KiB
JavaScript
/**
|
|
* 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.
|
|
document.addEventListener( 'DOMContentLoaded', function() {
|
|
if ( 0 === document.getElementsByClassName( 'storefront-handheld-footer-bar' ).length ) {
|
|
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.
|
|
var footer_bar = document.getElementsByClassName( 'storefront-handheld-footer-bar' );
|
|
var forms = document.forms;
|
|
var 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 ( footer_bar.length && forms.length ) {
|
|
for ( var i = 0; i < forms.length; i++ ) {
|
|
if ( footer_bar[0].contains( forms[ i ] ) ) {
|
|
continue;
|
|
}
|
|
|
|
forms[ i ].addEventListener( 'focus', isFocused( true ), true );
|
|
forms[ i ].addEventListener( 'blur', isFocused( false ), true );
|
|
}
|
|
}
|
|
} );
|
|
} )();
|