[ Index ] |
PHP Cross Reference of Joomla 4.2.2 documentation |
[Summary view] [Print] [Text view]
1 /** 2 * @copyright (C) 2020 Open Source Matters, Inc. <https://www.joomla.org> 3 * @license GNU General Public License version 2 or later; see LICENSE.txt 4 */ 5 6 /** 7 * Add a keyboard event listener to the Select a Module Type search element. 8 * 9 * IMPORTANT! This script is meant to be loaded deferred. This means that a. it's non-blocking 10 * (the browser can load it whenever) and b. it doesn't need an on DOMContentLoaded event handler 11 * because the browser is guaranteed to execute it only after the DOM content has loaded, the 12 * whole point of it being deferred. 13 * 14 * The search box has a keyboard handler that fires every time you press a keyboard button or send 15 * a keypress with a touch / virtual keyboard. We then iterate all module type cards and check if 16 * the plain text (HTML stripped out) representation of the module title or description partially 17 * matches the text you entered in the search box. If it doesn't we add a Bootstrap class to hide 18 * the module. 19 * 20 * This way we limit the displayed modules only to those searched. 21 * 22 * This feature follows progressive enhancement. The search box is hidden by default and only 23 * displayed when this JavaScript here executes. Furthermore, session storage is only used if it 24 * is available in the browser. That's a bit of a pain but makes sure things won't break in older 25 * browsers. 26 * 27 * Furthermore and to facilitate the user experience we auto-focus the search element which has a 28 * suitable title so that non-sighted users are not startled. This way we address both UX concerns 29 * and accessibility. 30 * 31 * Finally, the search string is saved into session storage on the assumption that the user is 32 * probably going to be creating multiple instances of the same module, one after another, as is 33 * typical when building a new Joomla! site. 34 */ 35 // Make sure the element exists i.e. a template override has not removed it. 36 const elSearch = document.getElementById('comModulesSelectSearch'); 37 const elSearchContainer = document.getElementById('comModulesSelectSearchContainer'); 38 const elSearchHeader = document.getElementById('comModulesSelectTypeHeader'); 39 const elSearchResults = document.getElementById('comModulesSelectResultsContainer'); 40 const alertElement = document.querySelector('.modules-alert'); 41 const elCards = [].slice.call(document.querySelectorAll('.comModulesSelectCard')); 42 43 if (elSearch && elSearchContainer) { 44 // Add the keyboard event listener which performs the live search in the cards 45 elSearch.addEventListener('keyup', event => { 46 /** @type {KeyboardEvent} event */ 47 const partialSearch = event.target.value; 48 let hasSearchResults = false; // Save the search string into session storage 49 50 if (typeof sessionStorage !== 'undefined') { 51 sessionStorage.setItem('Joomla.com_modules.new.search', partialSearch); 52 } // Iterate all the module cards 53 54 55 elCards.forEach(card => { 56 // First remove the class which hide the module cards 57 card.classList.remove('d-none'); // An empty search string means that we should show everything 58 59 if (!partialSearch) { 60 return; 61 } 62 63 const cardHeader = card.querySelector('.new-module-title'); 64 const cardBody = card.querySelector('.card-body'); 65 const title = cardHeader ? cardHeader.textContent : ''; 66 const description = cardBody ? cardBody.textContent : ''; // If the module title and description don’t match add a class to hide it. 67 68 if (title && !title.toLowerCase().includes(partialSearch.toLowerCase()) && description && !description.toLowerCase().includes(partialSearch.toLowerCase())) { 69 card.classList.add('d-none'); 70 } else { 71 hasSearchResults = true; 72 } 73 }); 74 75 if (hasSearchResults || !partialSearch) { 76 alertElement.classList.add('d-none'); 77 elSearchHeader.classList.remove('d-none'); 78 elSearchResults.classList.remove('d-none'); 79 } else { 80 alertElement.classList.remove('d-none'); 81 elSearchHeader.classList.add('d-none'); 82 elSearchResults.classList.add('d-none'); 83 } 84 }); // For reasons of progressive enhancement the search box is hidden by default. 85 86 elSearchContainer.classList.remove('d-none'); // Focus the just show element 87 88 elSearch.focus(); 89 90 try { 91 if (typeof sessionStorage !== 'undefined') { 92 // Load the search string from session storage 93 elSearch.value = sessionStorage.getItem('Joomla.com_modules.new.search') || ''; // Trigger the keyboard handler event manually to initiate the search 94 95 elSearch.dispatchEvent(new KeyboardEvent('keyup')); 96 } 97 } catch (e) {// This is probably Internet Explorer which doesn't support the KeyboardEvent constructor :( 98 } 99 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Wed Sep 7 05:41:13 2022 | Chilli.vc Blog - For Webmaster,Blog-Writer,System Admin and Domainer |