10h30/full-screen-morphing-search
1
0
Fork 0
mirror of https://github.com/10h30/full-screen-morphing-search.git synced 2026-06-05 15:08:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

Few CSS and JS corrections

Browse Source
This commit is contained in:
LebCit
2019-07-25 22:03:48 +03:00
parent 8c93bf3427
commit 9c0ea8a6ae
2 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/full-screen-morphing-search.css
+16
View File
@@ -73,6 +73,7 @@
height: 100%;
font-style: italic;
color: #ec5a62;
outline: none;
/* Using ID '#morphsearch' to avoid using !important */
}
@@ -158,6 +159,17 @@ input[type="search"] {
.morphsearch-submit:hover {
background-color: transparent;
box-shadow: none;
background-image: none;
border: none;
padding: 0;
}
.morphsearch-submit:active {
background-color: transparent;
box-shadow: none;
background-image: none;
border: none;
padding: 0;
}
/* 3- Hidding the Morphing Search Page once the .close class is added to the main div */
@@ -219,6 +231,10 @@ input[type="search"] {
color: #333;
margin-top: 4.5em;
width: 100%;
/* Firefox: old themes */
width: -moz-available;
/* Chrome: old themes */
width: -webkit-fill-available;
height: 0;
overflow: hidden;
padding: 0 10.5%;
assets/js/full-screen-morphing-search.js
+12 -10
View File
@@ -2,7 +2,7 @@
( function( $ ) {
// Display the Full Screen search when The user focuses on a search field.
$( 'form[role=search] input' ).on( 'focus', function( event ) {
$( 'form[role=search] input, form input[id=s]' ).on( 'focus', function( event ) {
// Prevent the default action.
event.preventDefault();
@@ -13,7 +13,7 @@
* 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'),
* The main function is called upon 'focus' on any $( 'form[role=search] input, form input[id=s]' ),
* 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
@@ -22,8 +22,8 @@
*
*/
if (!fsmsp_vars.fsmsp_is_customize_preview) {
setTimeout(function () {
$('#morphsearch > form > input.morphsearch-input').focus();
setTimeout( function() {
$( '#morphsearch > form > input.morphsearch-input' ).focus();
}, 500);
}
} );
@@ -34,6 +34,7 @@
event.preventDefault();
// Hide the Morphing Search Page.
$( 'form input[id=s]' ).blur();
$( '.morphsearch' ).removeClass( 'open' );
} );
@@ -44,20 +45,21 @@
* 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'),
* we blur() all $( 'form[role=search] input, form input[id=s]' ) including $('.morphsearch input.morphsearch-input'),
* then we removeClass('open') from $('.morphsearch').
*
*/
$('.morphsearch').on('keydown', function (event) {
if (event.keyCode === 27 && !fsmsp_vars.fsmsp_is_customize_preview) {
$('form[role=search] input').blur();
$('.morphsearch').removeClass('open');
$( '.morphsearch' ).on( 'keydown' , function( event ) {
if ( event.keyCode === 27 && !fsmsp_vars.fsmsp_is_customize_preview ) {
$( 'form[role=search] input, form input[id=s]' ).blur();
$( '.morphsearch' ).removeClass( 'open' );
}
});
// Reset Morphing Search Input Value to Search...
$('input.search-field').val('');
$( 'input.search-field' ).val('');
// Output default options' values !
if ( fsmsp_vars.fsmsp_options_does_not_exists ) {
// Output fsmsp_main_backgroung_color.