reportbuilder/amd/src/sidebar.js

  1. // This file is part of Moodle - http://moodle.org/
  2. //
  3. // Moodle is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // Moodle is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16. /**
  17.  * Report builder sidebar component
  18.  *
  19.  * @module      core_reportbuilder/sidebar
  20.  * @copyright   2021 Paul Holden <paulh@moodle.com>
  21.  * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  24. import Pending from 'core/pending';
  25. import {debounce} from 'core/utils';
  26. import * as reportSelectors from 'core_reportbuilder/local/selectors';
  28. const DEBOUNCE_TIMER = 250;
  30. const CLASSES = {
  31.     EXPANDED: 'show',
  32.     COLLAPSED: 'collapsed',
  33.     HIDE: 'd-none',
  34. };
  36. /**
  37.  * Initialise module
  38.  *
  39.  * @param {Event} event
  40.  * @param {Element} sidebarMenu
  41.  */
  42. const sidebarCardFilter = (event, sidebarMenu) => {
  43.     const pendingPromise = new Pending('core_reportbuilder/sidebar:cardFilter');
  45.     const sidebarCards = sidebarMenu.querySelectorAll(reportSelectors.regions.sidebarCard);
  46.     const sidebarItems = sidebarMenu.querySelectorAll(reportSelectors.regions.sidebarItem);
  47.     const searchTerm = event.target.value.toLowerCase();
  49.     // Toggle items according to match against search term.
  50.     sidebarItems.forEach(item => {
  51.         const itemContent = item.textContent.toLowerCase();
  52.         item.classList.toggle(CLASSES.HIDE, !itemContent.includes(searchTerm));
  53.     });
  55.     // Toggle cards according to whether they have any visible items.
  56.     sidebarCards.forEach(card => {
  57.         const visibleItems = card.querySelectorAll(`${reportSelectors.regions.sidebarItem}:not(.${CLASSES.HIDE})`);
  58.         card.classList.toggle(CLASSES.HIDE, !visibleItems.length);
  60.         expandCard(card);
  61.     });
  63.     pendingPromise.resolve();
  64. };
  66. /**
  67.  * Show a collapsed card.
  68.  * This function simulates the behaviour of JQuery show method on a collapsible element.
  69.  *
  70.  * @param {Element} card
  71.  */
  72. const expandCard = (card) => {
  73.     let cardButton = card.querySelector('[data-toggle="collapse"]');
  74.     if (cardButton.classList.contains(CLASSES.COLLAPSED)) {
  75.         cardButton.classList.remove(CLASSES.COLLAPSED);
  76.         cardButton.setAttribute('aria-expanded', "true");
  77.         let cardContent = card.querySelector(cardButton.dataset.target);
  78.         cardContent.classList.add(CLASSES.EXPANDED);
  79.     }
  80. };
  82. /**
  83.  * Initialise module
  84.  *
  85.  * @param {string} selectorId
  86.  */
  87. export const init = (selectorId) => {
  88.     const sidebarMenu = document.querySelector(selectorId + reportSelectors.regions.sidebarMenu);
  89.     const sidebarSearch = sidebarMenu.querySelector(reportSelectors.actions.sidebarSearch);
  91.     // Debounce the event listener to allow the user to finish typing.
  92.     const sidebarSearchDebounce = debounce(sidebarCardFilter, DEBOUNCE_TIMER);
  93.     sidebarSearch.addEventListener('keyup', event => {
  94.         const pendingPromise = new Pending('core_reportbuilder/sidebar:keyup');
  96.         sidebarSearchDebounce(event, sidebarMenu);
  97.         setTimeout(() => {
  98.             pendingPromise.resolve();
  99.         }, DEBOUNCE_TIMER);
  100.     });
  101. };