/** * @copyright (C) 2021 Open Source Matters, Inc. <https://www.joomla.org> * @license GNU General Public License version 2 or later; see LICENSE.txt */ /** * Toggles the display of inline help DIVs * * @param {String} toggleClass The class name of the DIVs to toggle display for */ Joomla.toggleInlineHelp = toggleClass => { [].slice.call(document.querySelectorAll(`div.${toggleClass}`)).forEach(elDiv => { // Toggle the visibility of the node by toggling the 'd-none' Bootstrap class. elDiv.classList.toggle('d-none'); // The ID of the description whose visibility is toggled. const myId = elDiv.id; // The ID of the control described by this node (same ID, minus the '-desc' suffix). const controlId = myId ? myId.substr(0, myId.length - 5) : null; // Get the control described by this node. const elControl = controlId ? document.getElementById(controlId) : null; // Is this node hidden? const isHidden = elDiv.classList.contains('d-none'); // If we do not have a control we will exit early if (!controlId || !elControl) { return; } // Unset the aria-describedby attribute in the control when the description is hidden and vice–versa. if (isHidden && elControl.hasAttribute('aria-describedby')) { elControl.removeAttribute('aria-describedby'); } else if (!isHidden) { elControl.setAttribute('aria-describedby', myId); } }); }; // Initialisation. Clicking on anything with the button-inlinehelp class will toggle the inline help. [].slice.call(document.querySelectorAll('.button-inlinehelp')).forEach(elToggler => { // The class of the DIVs to toggle visibility on is defined by the data-class attribute of the click target. const toggleClass = elToggler.dataset.class ?? 'hide-aware-inline-help'; const collection = document.getElementsByClassName(toggleClass); // no description => hide inlinehelp button if (collection.length === 0) { elToggler.classList.add('d-none'); return; } // Add the click handler. elToggler.addEventListener('click', event => { event.preventDefault(); Joomla.toggleInlineHelp(toggleClass); }); });