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