[Summary view] [Print] [Text view]

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