From cfbbaec29a3d9569f7a49306173782de2ff7b8be Mon Sep 17 00:00:00 2001 From: LebCit Date: Sat, 9 Jan 2021 02:47:33 +0200 Subject: [PATCH] Main JS file without jQuery only vanilla JS. --- assets/js/full-screen-morphing-search.js | 260 ++++++++++++----------- 1 file changed, 133 insertions(+), 127 deletions(-) diff --git a/assets/js/full-screen-morphing-search.js b/assets/js/full-screen-morphing-search.js index 8a02eb1..0f19f1b 100644 --- a/assets/js/full-screen-morphing-search.js +++ b/assets/js/full-screen-morphing-search.js @@ -1,138 +1,144 @@ -// When the document is ready... -( function( $ ) { +/** + * Main JavaScript file. + * + * Handles the effect for any WordPress search input that morphs into a fullscreen overlay. Renders Customizer choices. + * + * @author LebCit. + * @since 3.3 + */ - // Target any search input containing any default [attribute=value] of get_search_form(). - let $searchInput = $( 'form' ).find( 'input, button' ).filter( '[type=search], [class=search-field], [name=s], [id=s], [type=submit]' ); +'use strict'; - // Display the Full Screen search when The user focuses on a search field. - $searchInput.on( 'focus', function( event ) { - // Prevent the default action. - event.preventDefault(); +// Target any search input containing any default [attribute=value] of get_search_form(). +let searchInputs = document.querySelectorAll('input[type=search], input[class=search-field], input[name=s], input[id=s]'); - // Display the Morphing Search Page. - $( '.morphsearch' ).addClass( 'open' ); - - /** - * 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 $searchInput, - * so if we focus directly on the .morphsearch-input it will be a recursive function - * since the two inputs are in a $searchInput ! - * 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 > form > input.morphsearch-input' ).focus(); - }, 500); - } - } ); - - // Hide the 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. - $searchInput.blur(); - $( '.morphsearch' ).removeClass( 'open' ); - } ); - - /** - * Hide the 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 $searchInput 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 ) { - $searchInput.blur(); - $( '.morphsearch' ).removeClass( 'open' ); - } +// Display the Full Screen search when The user focuses on a search field. +const morphSearch = document.getElementById('morphsearch'); +const morphSearchInputField = document.getElementById('morphsearch-input'); +for (const searchInput of searchInputs) { + searchInput.addEventListener('click', () => { + morphSearch.classList.add('open'); + // Focus on the Full Screen Morphing Search Input Field. + setTimeout(function () { + morphSearchInputField.focus(); + }, 500); }); +} - // Clear Search Input Value - $( 'input' ).filter( '[name=s]' ).val(''); +// Hide the Morphing Search Page when the user clicks the close span. +const morphSearchCloseSpan = document.querySelector('.morphsearch-close'); +morphSearchCloseSpan.addEventListener('click', () => { + for (const searchInput of searchInputs) { + searchInput.blur(); + } + morphSearch.classList.remove('open'); +}); - // Output default options' values ! - if ( fsmsp_vars.fsmsp_options_does_not_exists ) { +// Hide the Morphing Search Page when the user press on the Escape key. +morphSearch.addEventListener('keydown', function (event) { + if (event.key === 'Escape') { + for (const searchInput of searchInputs) { + searchInput.blur(); + } + morphSearch.classList.remove('open'); + } +}); - // Output fsmsp_main_background_color. - $( '#morphsearch, div.morphsearch-content' ).css( 'background-color', '#f1f1f1' ); +let fsmspBackgrounds = document.querySelectorAll('#morphsearch, div.morphsearch-content'), + fsmspHeadings = document.querySelectorAll('div.dummy-column h2'), + fsmspColumns = document.querySelectorAll('div.dummy-media-object'), + fsmspLinks = document.querySelectorAll('div.dummy-media-object h3 a'); - // Output fsmsp_close_icon_color. - document.querySelectorAll( 'span.morphsearch-close' )[0].style.setProperty( "--morphsearch-close-background", '#000' ); - - // Output fsmsp_search_text_color. - document.querySelectorAll( 'input.morphsearch-input' )[0].style.setProperty( "--morphsearch-input-placeholder", '#c2c2c2' ); - - // Output fsmsp_input_text_color. - $( '#morphsearch .morphsearch-input' ).css( 'color', '#ec5a62' ); - - // Output fsmsp_magnifier_submit_color. - $( '#Capa_1 path' ).css( 'fill', '#ddd' ); - - // Output fsmsp_headings_color. - $( 'div.dummy-column h2' ).css( 'color', '#c2c2c2' ); - - // Output fsmsp_columns_background_color. - $( 'div.dummy-media-object' ).css( 'background', '#ebebeb' ); - $( 'div.dummy-media-object' ).mouseout( function() { - $(this).css( 'background', '#ebebeb' ); - // Output fsmsp_links_color. - $(this).find( 'h3 a' ).css( 'color', '#b2b2b2' ); - }); - - // Output fsmsp_columns_hover_background_color. - $( 'div.dummy-media-object' ).mouseover( function() { - $(this).css( 'background', '#e4e4e5' ); - // Output fsmsp_links_hover_color. - $(this).find( 'h3 a' ).css( 'color', '#ec5a62' ); - }); - - // Output fsmsp_links_color. - $( '.dummy-media-object h3 a' ).css( 'color', '#b2b2b2' ); - - // Output fsmsp_search_form_text. - $( 'form.morphsearch-form' ).children().first().attr( 'placeholder', 'Search...' ); - - } else { - - $( '#morphsearch, div.morphsearch-content' ).css( 'background-color', fsmsp_vars.fsmsp_main_background_color ); - - document.querySelectorAll( 'span.morphsearch-close' )[0].style.setProperty( "--morphsearch-close-background", fsmsp_vars.fsmsp_close_icon_color ); - - document.querySelectorAll( 'input.morphsearch-input' )[0].style.setProperty( "--morphsearch-input-placeholder", fsmsp_vars.fsmsp_search_text_color ); - - $( '#morphsearch .morphsearch-input' ).css( 'color', fsmsp_vars.fsmsp_input_text_color ); - - $( '#Capa_1 path' ).css( 'fill', fsmsp_vars.fsmsp_magnifier_submit_color ); - - $( 'div.dummy-column h2' ).css( 'color', fsmsp_vars.fsmsp_headings_color ); - - $( 'div.dummy-media-object' ).css( 'background', fsmsp_vars.fsmsp_columns_background_color ); - $( 'div.dummy-media-object' ).mouseout( function() { - $(this).css( 'background', fsmsp_vars.fsmsp_columns_background_color ); - $(this).find( 'h3 a' ).css( 'color', fsmsp_vars.fsmsp_links_color ); - }); - - $( 'div.dummy-media-object' ).mouseover( function() { - $(this).css( 'background', fsmsp_vars.fsmsp_columns_hover_background_color ); - $(this).find( 'h3 a' ).css( 'color', fsmsp_vars.fsmsp_links_hover_color ); - }); - - $( '.dummy-media-object h3 a' ).css( 'color', fsmsp_vars.fsmsp_links_color ); - - $( 'form.morphsearch-form' ).children().first().attr( 'placeholder', fsmsp_vars.fsmsp_search_form_text ); +// Output default options' values ! +if (fsmsp_vars.fsmsp_options_does_not_exists) { + // Output fsmsp_main_background_color. + for (let fsmspBackground of fsmspBackgrounds) { + fsmspBackground.style.backgroundColor = '#f1f1f1'; } -} )( jQuery ); \ No newline at end of file + // Output fsmsp_close_icon_color. + document.querySelector('span.morphsearch-close').style.setProperty("--morphsearch-close-background", '#000'); + + // Output fsmsp_search_text_color. + morphSearchInputField.style.setProperty("--morphsearch-input-placeholder", '#c2c2c2'); + + // Output fsmsp_input_text_color. + morphSearchInputField.style.color = '#ec5a62'; + + // Output fsmsp_magnifier_submit_color. + document.querySelector('#Capa_1 path').setAttribute('fill', '#ddd'); + + // Output fsmsp_headings_color. + for (let fsmspHeading of fsmspHeadings) { + fsmspHeading.style.color = '#c2c2c2'; + } + + for (let fsmspColumn of fsmspColumns) { + + // Output fsmsp_columns_background_color. + fsmspColumn.style.background = '#ebebeb'; + + fsmspColumn.addEventListener("mouseover", function () { + // Output fsmsp_columns_hover_background_color. + this.style.background = '#e4e4e5'; + // Output fsmsp_links_hover_color. + this.lastElementChild.firstElementChild.style.color = '#ec5a62'; + }); + + fsmspColumn.addEventListener("mouseout", function () { + this.style.background = '#ebebeb'; + // Output fsmsp_links_color. + this.lastElementChild.firstElementChild.style.color = '#b2b2b2'; + }); + } + + // Output fsmsp_links_color. + for (let fsmspLink of fsmspLinks) { + fsmspLink.style.color = '#b2b2b2'; + } + + // Output fsmsp_search_form_text. + morphSearchInputField.placeholder = 'Search...'; + + +} else { + + for (let fsmspBackground of fsmspBackgrounds) { + fsmspBackground.style.backgroundColor = fsmsp_vars.fsmsp_main_background_color; + } + + document.querySelector('span.morphsearch-close').style.setProperty("--morphsearch-close-background", fsmsp_vars.fsmsp_close_icon_color); + + morphSearchInputField.style.setProperty("--morphsearch-input-placeholder", fsmsp_vars.fsmsp_search_text_color); + + morphSearchInputField.style.color = fsmsp_vars.fsmsp_input_text_color; + + document.querySelector('#Capa_1 path').setAttribute('fill', fsmsp_vars.fsmsp_magnifier_submit_color); + + for (let fsmspHeading of fsmspHeadings) { + fsmspHeading.style.color = fsmsp_vars.fsmsp_headings_color; + } + + for (let fsmspColumn of fsmspColumns) { + + fsmspColumn.style.background = fsmsp_vars.fsmsp_columns_background_color; + + fsmspColumn.addEventListener("mouseover", function () { + this.style.background = fsmsp_vars.fsmsp_columns_hover_background_color; + this.lastElementChild.firstElementChild.style.color = fsmsp_vars.fsmsp_links_hover_color; + }); + + fsmspColumn.addEventListener("mouseout", function () { + this.style.background = fsmsp_vars.fsmsp_columns_background_color; + this.lastElementChild.firstElementChild.style.color = fsmsp_vars.fsmsp_links_color + }); + } + + for (let fsmspLink of fsmspLinks) { + fsmspLink.style.color = fsmsp_vars.fsmsp_links_color; + } + + morphSearchInputField.placeholder = fsmsp_vars.fsmsp_search_form_text; + +} \ No newline at end of file