[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   * Toggles the display of inline help DIVs
   8   *
   9   * @param {String} toggleClass The class name of the DIVs to toggle display for
  10   */
  11  Joomla.toggleInlineHelp = toggleClass => {
  12    [].slice.call(document.querySelectorAll(`div.$toggleClass}`)).forEach(elDiv => {
  13      // Toggle the visibility of the node by toggling the 'd-none' Bootstrap class.
  14      elDiv.classList.toggle('d-none'); // The ID of the description whose visibility is toggled.
  15  
  16      const myId = elDiv.id; // The ID of the control described by this node (same ID, minus the '-desc' suffix).
  17  
  18      const controlId = myId ? myId.substr(0, myId.length - 5) : null; // Get the control described by this node.
  19  
  20      const elControl = controlId ? document.getElementById(controlId) : null; // Is this node hidden?
  21  
  22      const isHidden = elDiv.classList.contains('d-none'); // If we do not have a control we will exit early
  23  
  24      if (!controlId || !elControl) {
  25        return;
  26      } // Unset the aria-describedby attribute in the control when the description is hidden and vice–versa.
  27  
  28  
  29      if (isHidden && elControl.hasAttribute('aria-describedby')) {
  30        elControl.removeAttribute('aria-describedby');
  31      } else if (!isHidden) {
  32        elControl.setAttribute('aria-describedby', myId);
  33      }
  34    });
  35  }; // Initialisation. Clicking on anything with the button-inlinehelp class will toggle the inline help.
  36  
  37  
  38  [].slice.call(document.querySelectorAll('.button-inlinehelp')).forEach(elToggler => {
  39    // The class of the DIVs to toggle visibility on is defined by the data-class attribute of the click target.
  40    const toggleClass = elToggler.dataset.class ?? 'hide-aware-inline-help';
  41    const collection = document.getElementsByClassName(toggleClass); // no description => hide inlinehelp button
  42  
  43    if (collection.length === 0) {
  44      elToggler.classList.add('d-none');
  45      return;
  46    } // Add the click handler.
  47  
  48  
  49    elToggler.addEventListener('click', event => {
  50      event.preventDefault();
  51      Joomla.toggleInlineHelp(toggleClass);
  52    });
  53  });