10h30/full-screen-morphing-search
1
0
Fork 0
mirror of https://github.com/10h30/full-screen-morphing-search.git synced 2026-07-11 10:36:02 +09:00
Code Issues Packages Projects Releases Wiki Activity

Added/Changed code for better behaviour

Browse Source 
Explanation in comments
This commit is contained in:
LebCit
2018-12-03 21:29:33 +02:00
parent 389409556e
commit b334221454
1 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/full-screen-morphing-search.js
+35 -8
View File
@@ -1,7 +1,7 @@
// When the document is ready...
jQuery(document).ready(function ($) {
// Display the Full Screen search when The user focuses on a search field
// Display the Full Screen Morphing Search when The user focuses on a search field.
$('form[role=search] input').on('focus', function (event) {
// Prevent the default action
event.preventDefault();
@@ -9,26 +9,53 @@ jQuery(document).ready(function ($) {
// Display the Morphing Search Page
$('.morphsearch').addClass('open');
// Focus on the Morphing Search Input Field
$('.morphsearch input.morphsearch-input').focus();
/**
* 1- Focus on the Full Screen Morphing Search Input Field, but not if the site is being previewed in the Customizer.
* This first decision was taken because of weird behaviour in Chrome and Edge...
* 2- Focusing on the input of Full Screen Morphing Search Input Field by a setTimeout() to avoid a recursive function.
* The main function is called upon 'focus' on any $('form[role=search] input'),
* so if we focus directly on the .morphsearch-input it will be a recursive function
* since the two inputs are in a 'form[role=search]' !
* Recursive function :@see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Too_much_recursion
*
* The Customizer preview part is handled by a MutationObserver in customize-preview.js
*
*/
if (!fsmsp_vars.fsmsp_is_customize_preview) {
setTimeout(function () {
$('.morphsearch input.morphsearch-input').focus();
}, 500);
}
});
// Hide the Morphing Search Page when the user clicks the close span
// Hide the Full Screen Morphing Search Page when the user clicks the close span.
$('.morphsearch span.morphsearch-close').on('click', function (event) {
// Prevent the default event
event.preventDefault();
// Hide the Morphing Search Page
// Hide the Full Screen Morphing Search Page.
$('.morphsearch').removeClass('open');
});
// Hide the Morphing Search Page when the user press on the Escape key
// Hide the Full Screen Morphing Search Page when the user press on the Escape key.
/**
* Since outside the Customizer preview (on live site) the input is focus(),
* when we press the Esc button .morphsearch will close then reopen.
* Since it's focus(), pressing on Esc will close it but send another focus() after 500ms !
* To prevent this behaviour when the Esc button is pressed,
* we blur() all $('form[role=search] input') including $('.morphsearch input.morphsearch-input'),
* then we removeClass('open') from $('.morphsearch').
*
*/
$('.morphsearch').on('keydown', function (event) {
if (event.keyCode === 27) {
if (event.keyCode === 27 && !fsmsp_vars.fsmsp_is_customize_preview) {
$('form[role=search] input').blur();
$('.morphsearch').removeClass('open');
}
});
// Reset Morphing Search Input Value to Search...
// Reset Full Screen Morphing Search Input Value to Search...
$('input.search-field').val('');
});