grade/amd/src/bulkactions/edit/tree/move_options_tree.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.  * Keyboard navigation and aria-tree compatibility for the grade move options.
  18.  *
  19.  * @module     core_grades/bulkactions/edit/tree/move_options_tree
  20.  * @copyright  2023 Mihail Geshoski <mihail@moodle.com>
  21.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  24. import Tree from 'core/tree';
  25. import {getList} from 'core/normalise';
  27. /** @constant {Object} The object containing the relevant selectors. */
  28. const Selectors = {
  29.     moveOptionsTree: '#destination-selector [role="tree"]',
  30.     moveOption: '#destination-selector [role="treeitem"]',
  31.     toggleGroupLink: '#destination-selector .collapse-list-link',
  32. };
  34. export default class MoveOptionsTree extends Tree {
  36.     /** @property {function|null} afterSelectMoveOptionCallback Callback function to run after selecting a move option. */
  37.     afterSelectMoveOptionCallback = null;
  39.     /** @property {HTMLElement|null} selectedMoveOption The selected move option. */
  40.     selectedMoveOption = null;
  42.     /**
  43.      * The class constructor.
  44.      *
  45.      * @param {function|null} afterSelectMoveOptionCallback Callback function used to define actions that should be run
  46.      *                                                      after selecting a move option.
  47.      * @returns {void}
  48.      */
  49.     constructor(afterSelectMoveOptionCallback) {
  50.         super(Selectors.moveOptionsTree);
  51.         this.afterSelectMoveOptionCallback = afterSelectMoveOptionCallback;
  52.     }
  54.     /**
  55.      * Handle a key down event.
  56.      *
  57.      * @method handleKeyDown
  58.      * @param {Event} e The event.
  59.      */
  60.     handleKeyDown(e) {
  61.         // If the user presses enter or space, select the item.
  62.         if (e.keyCode === this.keys.enter || e.keyCode === this.keys.space) {
  63.             this.selectMoveOption(e.target);
  64.         } else { // Otherwise, let the default behaviour happen.
  65.             super.handleKeyDown(e);
  66.         }
  67.     }
  69.     /**
  70.      * Handle an item click.
  71.      *
  72.      * @param {Event} event The click event.
  73.      * @param {jQuery} item The item clicked.
  74.      * @returns {void}
  75.      */
  76.     handleItemClick(event, item) {
  77.         const isToggleGroupLink = event.target.closest(Selectors.toggleGroupLink);
  78.         // If the click is on the toggle group (chevron) link, let the default behaviour happen.
  79.         if (isToggleGroupLink) {
  80.             super.handleItemClick(event, item);
  81.             return;
  82.         }
  83.         // If the click is on the item itself, select it.
  84.         this.selectMoveOption(getList(item)[0]);
  85.     }
  87.     /**
  88.      * Select a move option.
  89.      *
  90.      * @method selectMoveOption
  91.      * @param {HTMLElement} moveOption The move option to select.
  92.      */
  93.     selectMoveOption(moveOption) {
  94.         // Create the cache of the visible items.
  95.         this.refreshVisibleItemsCache();
  96.         // Deselect all the move options.
  97.         document.querySelectorAll(Selectors.moveOption).forEach(item => {
  98.             item.dataset.selected = "false";
  99.         });
  100.         // Select and set the focus on the specified move option.
  101.         moveOption.dataset.selected = "true";
  102.         this.selectedMoveOption = moveOption;
  103.         moveOption.focus();
  104.         // Call the callback function if it is defined.
  105.         if (typeof this.afterSelectMoveOptionCallback === 'function') {
  106.             this.afterSelectMoveOptionCallback();
  107.         }
  108.     }
  109. }