[Summary view] [Print] [Text view]

   1  /**
   2   * @copyright  (C) 2021 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 Task 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 task type cards and check if
  16   * the plain text (HTML stripped out) representation of the task 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 task.
  19   *
  20   * This way we limit the displayed tasks 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 task, 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('comSchedulerSelectSearch');
  37  const elSearchContainer = document.getElementById('comSchedulerSelectSearchContainer');
  38  const elSearchHeader = document.getElementById('comSchedulerSelectTypeHeader');
  39  const elSearchResults = document.getElementById('comSchedulerSelectResultsContainer');
  40  const alertElement = document.querySelector('.tasks-alert');
  41  const elCards = [].slice.call(document.querySelectorAll('.comSchedulerSelectCard'));
  42  
  43  if (elSearch && elSearchContainer) {
  44    // Add the keyboard event listener which performs the live search in the cards
  45    elSearch.addEventListener('keyup', ({
  46      target
  47    }) => {
  48      /** @type {KeyboardEvent} event */
  49      const partialSearch = target.value;
  50      let hasSearchResults = false; // Save the search string into session storage
  51  
  52      if (typeof sessionStorage !== 'undefined') {
  53        sessionStorage.setItem('Joomla.com_scheduler.new.search', partialSearch);
  54      } // Iterate over all the task cards
  55  
  56  
  57      elCards.forEach(card => {
  58        // First remove the class which hide the task cards
  59        card.classList.remove('d-none'); // An empty search string means that we should show everything
  60  
  61        if (!partialSearch) {
  62          return;
  63        }
  64  
  65        const cardHeader = card.querySelector('.new-task-title');
  66        const cardBody = card.querySelector('.card-body');
  67        const title = cardHeader ? cardHeader.textContent : '';
  68        const description = cardBody ? cardBody.textContent : ''; // If the task title and description don’t match add a class to hide it.
  69  
  70        if (title && !title.toLowerCase().includes(partialSearch.toLowerCase()) && description && !description.toLowerCase().includes(partialSearch.toLowerCase())) {
  71          card.classList.add('d-none');
  72        } else {
  73          hasSearchResults = true;
  74        }
  75      });
  76  
  77      if (hasSearchResults || !partialSearch) {
  78        alertElement.classList.add('d-none');
  79        elSearchHeader.classList.remove('d-none');
  80        elSearchResults.classList.remove('d-none');
  81      } else {
  82        alertElement.classList.remove('d-none');
  83        elSearchHeader.classList.add('d-none');
  84        elSearchResults.classList.add('d-none');
  85      }
  86    }); // For reasons of progressive enhancement the search box is hidden by default.
  87  
  88    elSearchContainer.classList.remove('d-none'); // Focus the just show element
  89  
  90    elSearch.focus();
  91  
  92    try {
  93      if (typeof sessionStorage !== 'undefined') {
  94        // Load the search string from session storage
  95        elSearch.value = sessionStorage.getItem('Joomla.com_scheduler.new.search') || ''; // Trigger the keyboard handler event manually to initiate the search
  96  
  97        elSearch.dispatchEvent(new KeyboardEvent('keyup'));
  98      }
  99    } catch (e) {// This is probably Internet Explorer which doesn't support the KeyboardEvent constructor :(
 100    }
 101  }