MDL-67883 core: Make core ready for MoodleNet.
[moodle.git] / course / amd / src / local / activitychooser / dialogue.js
CommitLineData
05b27f21
MM
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/**
17 * A type of dialogue used as for choosing options.
18 *
19 * @module core_course/local/chooser/dialogue
20 * @package core
21 * @copyright 2019 Mihail Geshoski <mihail@moodle.com>
22 * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
23 */
24
25import $ from 'jquery';
26import * as ModalEvents from 'core/modal_events';
27import selectors from 'core_course/local/activitychooser/selectors';
28import * as Templates from 'core/templates';
29import {end, arrowLeft, arrowRight, home, enter, space} from 'core/key_codes';
30import {addIconToContainer} from 'core/loadingicon';
6e1a4477
MM
31import * as Repository from 'core_course/local/activitychooser/repository';
32import Notification from 'core/notification';
f152b71d 33import {debounce} from 'core/utils';
16d77f18 34const getPlugin = pluginName => import(pluginName);
05b27f21
MM
35
36/**
37 * Given an event from the main module 'page' navigate to it's help section via a carousel.
38 *
39 * @method showModuleHelp
40 * @param {jQuery} carousel Our initialized carousel to manipulate
41 * @param {Object} moduleData Data of the module to carousel to
16d77f18 42 * @param {jQuery} modal We need to figure out if the current modal has a footer.
05b27f21 43 */
16d77f18
MM
44const showModuleHelp = (carousel, moduleData, modal = null) => {
45 // If we have a real footer then we need to change temporarily.
46 if (modal !== null && moduleData.showFooter === true) {
47 modal.setFooter(Templates.render('core_course/local/activitychooser/footer_partial', moduleData));
48 }
05b27f21
MM
49 const help = carousel.find(selectors.regions.help)[0];
50 help.innerHTML = '';
f2d033a2 51 help.classList.add('m-auto');
05b27f21
MM
52
53 // Add a spinner.
54 const spinnerPromise = addIconToContainer(help);
55
56 // Used later...
57 let transitionPromiseResolver = null;
58 const transitionPromise = new Promise(resolve => {
59 transitionPromiseResolver = resolve;
60 });
61
62 // Build up the html & js ready to place into the help section.
d2695ab2 63 const contentPromise = Templates.renderForPromise('core_course/local/activitychooser/help', moduleData);
05b27f21
MM
64
65 // Wait for the content to be ready, and for the transition to be complet.
66 Promise.all([contentPromise, spinnerPromise, transitionPromise])
67 .then(([{html, js}]) => Templates.replaceNodeContents(help, html, js))
68 .then(() => {
486abbcb 69 help.querySelector(selectors.regions.chooserSummary.header).focus();
05b27f21
MM
70 return help;
71 })
72 .catch(Notification.exception);
73
74 // Move to the next slide, and resolve the transition promise when it's done.
75 carousel.one('slid.bs.carousel', () => {
76 transitionPromiseResolver();
77 });
78 // Trigger the transition between 'pages'.
79 carousel.carousel('next');
80};
81
6e1a4477
MM
82/**
83 * Given a user wants to change the favourite state of a module we either add or remove the status.
84 * We also propergate this change across our map of modals.
85 *
86 * @method manageFavouriteState
87 * @param {HTMLElement} modalBody The DOM node of the modal to manipulate
88 * @param {HTMLElement} caller
89 * @param {Function} partialFavourite Partially applied function we need to manage favourite status
90 */
91const manageFavouriteState = async(modalBody, caller, partialFavourite) => {
92 const isFavourite = caller.dataset.favourited;
93 const id = caller.dataset.id;
94 const name = caller.dataset.name;
95 const internal = caller.dataset.internal;
96 // Switch on fave or not.
97 if (isFavourite === 'true') {
98 await Repository.unfavouriteModule(name, id);
99
100 partialFavourite(internal, false, modalBody);
101 } else {
102 await Repository.favouriteModule(name, id);
103
104 partialFavourite(internal, true, modalBody);
105 }
106
107};
108
05b27f21
MM
109/**
110 * Register chooser related event listeners.
111 *
112 * @method registerListenerEvents
113 * @param {Promise} modal Our modal that we are working with
114 * @param {Map} mappedModules A map of all of the modules we are working with with K: mod_name V: {Object}
6e1a4477 115 * @param {Function} partialFavourite Partially applied function we need to manage favourite status
16d77f18 116 * @param {Object} footerData Our base footer object.
05b27f21 117 */
16d77f18 118const registerListenerEvents = (modal, mappedModules, partialFavourite, footerData) => {
9f1bfca2 119 const bodyClickListener = async(e) => {
05b27f21
MM
120 if (e.target.closest(selectors.actions.optionActions.showSummary)) {
121 const carousel = $(modal.getBody()[0].querySelector(selectors.regions.carousel));
122
123 const module = e.target.closest(selectors.regions.chooserOption.container);
124 const moduleName = module.dataset.modname;
125 const moduleData = mappedModules.get(moduleName);
16d77f18
MM
126 // We need to know if the overall modal has a footer so we know when to show a real / vs fake footer.
127 moduleData.showFooter = modal.hasFooterContent();
128 showModuleHelp(carousel, moduleData, modal);
05b27f21
MM
129 }
130
6e1a4477
MM
131 if (e.target.closest(selectors.actions.optionActions.manageFavourite)) {
132 const caller = e.target.closest(selectors.actions.optionActions.manageFavourite);
9f1bfca2
MG
133 await manageFavouriteState(modal.getBody()[0], caller, partialFavourite);
134 const activeSectionId = modal.getBody()[0].querySelector(selectors.elements.activetab).getAttribute("href");
135 const sectionChooserOptions = modal.getBody()[0]
136 .querySelector(selectors.regions.getSectionChooserOptions(activeSectionId));
137 const firstChooserOption = sectionChooserOptions
138 .querySelector(selectors.regions.chooserOption.container);
139 toggleFocusableChooserOption(firstChooserOption, true);
16d77f18 140 initChooserOptionsKeyboardNavigation(modal.getBody()[0], mappedModules, sectionChooserOptions, modal);
6e1a4477
MM
141 }
142
05b27f21
MM
143 // From the help screen go back to the module overview.
144 if (e.target.matches(selectors.actions.closeOption)) {
145 const carousel = $(modal.getBody()[0].querySelector(selectors.regions.carousel));
146
147 // Trigger the transition between 'pages'.
148 carousel.carousel('prev');
149 carousel.on('slid.bs.carousel', () => {
150 const allModules = modal.getBody()[0].querySelector(selectors.regions.modules);
151 const caller = allModules.querySelector(selectors.regions.getModuleSelector(e.target.dataset.modname));
152 caller.focus();
153 });
154 }
f152b71d
MG
155
156 // The "clear search" button is triggered.
157 if (e.target.closest(selectors.actions.clearSearch)) {
158 // Clear the entered search query in the search bar and hide the search results container.
159 const searchInput = modal.getBody()[0].querySelector(selectors.actions.search);
160 searchInput.value = "";
161 searchInput.focus();
16d77f18
MM
162 toggleSearchResultsView(modal, mappedModules, searchInput.value);
163 }
164 };
165
166 // We essentially have two types of footer.
167 // A fake one that is handled within the template for chooser_help and then all of the stuff for
168 // modal.footer. We need to ensure we know exactly what type of footer we are using so we know what we
169 // need to manage. The below code handles a real footer going to a mnet carousel item.
170 const footerClickListener = async(e) => {
171 if (footerData.footer === true) {
172 const footerjs = await getPlugin(footerData.customfooterjs);
173 await footerjs.footerClickListener(e, footerData, modal);
f152b71d 174 }
05b27f21
MM
175 };
176
177 modal.getBodyPromise()
178
179 // The return value of getBodyPromise is a jquery object containing the body NodeElement.
180 .then(body => body[0])
181
182 // Set up the carousel.
183 .then(body => {
184 $(body.querySelector(selectors.regions.carousel))
185 .carousel({
186 interval: false,
187 pause: true,
188 keyboard: false
189 });
190
191 return body;
192 })
193
194 // Add the listener for clicks on the body.
195 .then(body => {
196 body.addEventListener('click', bodyClickListener);
197 return body;
198 })
199
f152b71d
MG
200 // Add a listener for an input change in the activity chooser's search bar.
201 .then(body => {
202 const searchInput = body.querySelector(selectors.actions.search);
203 // The search input is triggered.
204 searchInput.addEventListener('input', debounce(() => {
205 // Display the search results.
16d77f18 206 toggleSearchResultsView(modal, mappedModules, searchInput.value);
f152b71d
MG
207 }, 300));
208 return body;
209 })
210
05b27f21
MM
211 // Register event listeners related to the keyboard navigation controls.
212 .then(body => {
f152b71d
MG
213 // Get the active chooser options section.
214 const activeSectionId = body.querySelector(selectors.elements.activetab).getAttribute("href");
215 const sectionChooserOptions = body.querySelector(selectors.regions.getSectionChooserOptions(activeSectionId));
216 const firstChooserOption = sectionChooserOptions.querySelector(selectors.regions.chooserOption.container);
e146a2ca 217
f152b71d
MG
218 toggleFocusableChooserOption(firstChooserOption, true);
219 initTabsKeyboardNavigation(body);
16d77f18 220 initChooserOptionsKeyboardNavigation(body, mappedModules, sectionChooserOptions, modal);
e146a2ca 221
05b27f21
MM
222 return body;
223 })
224 .catch();
225
16d77f18
MM
226 modal.getFooterPromise()
227
228 // The return value of getBodyPromise is a jquery object containing the body NodeElement.
229 .then(footer => footer[0])
230 // Add the listener for clicks on the footer.
231 .then(footer => {
232 footer.addEventListener('click', footerClickListener);
233 return footer;
234 })
235 .catch();
05b27f21
MM
236};
237
238/**
f152b71d 239 * Initialise the keyboard navigation controls for the tab list items.
05b27f21 240 *
f152b71d 241 * @method initTabsKeyboardNavigation
c58c23d6 242 * @param {HTMLElement} body Our modal that we are working with
05b27f21 243 */
f152b71d 244const initTabsKeyboardNavigation = (body) => {
c58c23d6
MM
245 // Set up the tab handlers.
246 const favTabNav = body.querySelector(selectors.regions.favouriteTabNav);
247 const recommendedTabNav = body.querySelector(selectors.regions.recommendedTabNav);
248 const defaultTabNav = body.querySelector(selectors.regions.defaultTabNav);
e146a2ca
MM
249 const activityTabNav = body.querySelector(selectors.regions.activityTabNav);
250 const resourceTabNav = body.querySelector(selectors.regions.resourceTabNav);
251 const tabNavArray = [favTabNav, recommendedTabNav, defaultTabNav, activityTabNav, resourceTabNav];
c58c23d6 252 tabNavArray.forEach((element) => {
9f1bfca2
MG
253 return element.addEventListener('keydown', (e) => {
254 // The first visible navigation tab link.
255 const firstLink = e.target.parentElement.querySelector(selectors.elements.visibletabs);
256 // The last navigation tab link. It would always be the default activities tab link.
257 const lastLink = e.target.parentElement.lastElementChild;
c58c23d6
MM
258
259 if (e.keyCode === arrowRight) {
9f1bfca2 260 const nextLink = e.target.nextElementSibling;
c58c23d6 261 if (nextLink === null) {
9f1bfca2 262 e.target.tabIndex = -1;
c58c23d6
MM
263 firstLink.tabIndex = 0;
264 firstLink.focus();
9f1bfca2
MG
265 } else if (nextLink.classList.contains('d-none')) {
266 e.target.tabIndex = -1;
c58c23d6
MM
267 lastLink.tabIndex = 0;
268 lastLink.focus();
269 } else {
9f1bfca2
MG
270 e.target.tabIndex = -1;
271 nextLink.tabIndex = 0;
272 nextLink.focus();
c58c23d6
MM
273 }
274 }
275 if (e.keyCode === arrowLeft) {
9f1bfca2 276 const previousLink = e.target.previousElementSibling;
c58c23d6 277 if (previousLink === null) {
9f1bfca2 278 e.target.tabIndex = -1;
c58c23d6
MM
279 lastLink.tabIndex = 0;
280 lastLink.focus();
9f1bfca2
MG
281 } else if (previousLink.classList.contains('d-none')) {
282 e.target.tabIndex = -1;
c58c23d6
MM
283 firstLink.tabIndex = 0;
284 firstLink.focus();
285 } else {
9f1bfca2
MG
286 e.target.tabIndex = -1;
287 previousLink.tabIndex = 0;
288 previousLink.focus();
c58c23d6
MM
289 }
290 }
291 if (e.keyCode === home) {
9f1bfca2 292 e.target.tabIndex = -1;
c58c23d6
MM
293 firstLink.tabIndex = 0;
294 firstLink.focus();
295 }
296 if (e.keyCode === end) {
9f1bfca2 297 e.target.tabIndex = -1;
c58c23d6
MM
298 lastLink.tabIndex = 0;
299 lastLink.focus();
300 }
301 if (e.keyCode === space) {
302 e.preventDefault();
303 e.target.click();
304 }
305 });
306 });
f152b71d 307};
c58c23d6 308
f152b71d
MG
309/**
310 * Initialise the keyboard navigation controls for the chooser options.
311 *
312 * @method initChooserOptionsKeyboardNavigation
313 * @param {HTMLElement} body Our modal that we are working with
314 * @param {Map} mappedModules A map of all of the modules we are working with with K: mod_name V: {Object}
315 * @param {HTMLElement} chooserOptionsContainer The section that contains the chooser items
16d77f18 316 * @param {Object} modal Our created modal for the section
f152b71d 317 */
16d77f18 318const initChooserOptionsKeyboardNavigation = (body, mappedModules, chooserOptionsContainer, modal = null) => {
f152b71d 319 const chooserOptions = chooserOptionsContainer.querySelectorAll(selectors.regions.chooserOption.container);
05b27f21
MM
320
321 Array.from(chooserOptions).forEach((element) => {
9f1bfca2 322 return element.addEventListener('keydown', (e) => {
05b27f21
MM
323
324 // Check for enter/ space triggers for showing the help.
325 if (e.keyCode === enter || e.keyCode === space) {
326 if (e.target.matches(selectors.actions.optionActions.showSummary)) {
327 e.preventDefault();
328 const module = e.target.closest(selectors.regions.chooserOption.container);
329 const moduleName = module.dataset.modname;
330 const moduleData = mappedModules.get(moduleName);
331 const carousel = $(body.querySelector(selectors.regions.carousel));
332 carousel.carousel({
333 interval: false,
334 pause: true,
335 keyboard: false
336 });
16d77f18
MM
337
338 // We need to know if the overall modal has a footer so we know when to show a real / vs fake footer.
339 moduleData.showFooter = modal.hasFooterContent();
340 showModuleHelp(carousel, moduleData, modal);
05b27f21
MM
341 }
342 }
343
344 // Next.
345 if (e.keyCode === arrowRight) {
346 e.preventDefault();
347 const currentOption = e.target.closest(selectors.regions.chooserOption.container);
348 const nextOption = currentOption.nextElementSibling;
f152b71d 349 const firstOption = chooserOptionsContainer.firstElementChild;
05b27f21
MM
350 const toFocusOption = clickErrorHandler(nextOption, firstOption);
351 focusChooserOption(toFocusOption, currentOption);
352 }
353
354 // Previous.
355 if (e.keyCode === arrowLeft) {
356 e.preventDefault();
357 const currentOption = e.target.closest(selectors.regions.chooserOption.container);
358 const previousOption = currentOption.previousElementSibling;
f152b71d 359 const lastOption = chooserOptionsContainer.lastElementChild;
05b27f21
MM
360 const toFocusOption = clickErrorHandler(previousOption, lastOption);
361 focusChooserOption(toFocusOption, currentOption);
362 }
363
364 if (e.keyCode === home) {
365 e.preventDefault();
366 const currentOption = e.target.closest(selectors.regions.chooserOption.container);
f152b71d 367 const firstOption = chooserOptionsContainer.firstElementChild;
05b27f21
MM
368 focusChooserOption(firstOption, currentOption);
369 }
370
371 if (e.keyCode === end) {
372 e.preventDefault();
373 const currentOption = e.target.closest(selectors.regions.chooserOption.container);
f152b71d 374 const lastOption = chooserOptionsContainer.lastElementChild;
05b27f21
MM
375 focusChooserOption(lastOption, currentOption);
376 }
377 });
378 });
379};
380
381/**
382 * Focus on a chooser option element and remove the previous chooser element from the focus order
383 *
384 * @method focusChooserOption
385 * @param {HTMLElement} currentChooserOption The current chooser option element that we want to focus
f152b71d 386 * @param {HTMLElement|null} previousChooserOption The previous focused option element
05b27f21 387 */
f152b71d
MG
388const focusChooserOption = (currentChooserOption, previousChooserOption = null) => {
389 if (previousChooserOption !== null) {
390 toggleFocusableChooserOption(previousChooserOption, false);
05b27f21
MM
391 }
392
f152b71d 393 toggleFocusableChooserOption(currentChooserOption, true);
05b27f21
MM
394 currentChooserOption.focus();
395};
396
f152b71d
MG
397/**
398 * Add or remove a chooser option from the focus order.
399 *
400 * @method toggleFocusableChooserOption
401 * @param {HTMLElement} chooserOption The chooser option element which should be added or removed from the focus order
402 * @param {Boolean} isFocusable Whether the chooser element is focusable or not
403 */
404const toggleFocusableChooserOption = (chooserOption, isFocusable) => {
405 const chooserOptionLink = chooserOption.querySelector(selectors.actions.addChooser);
406 const chooserOptionHelp = chooserOption.querySelector(selectors.actions.optionActions.showSummary);
407 const chooserOptionFavourite = chooserOption.querySelector(selectors.actions.optionActions.manageFavourite);
408
409 if (isFocusable) {
410 // Set tabindex to 0 to add current chooser option element to the focus order.
411 chooserOption.tabIndex = 0;
412 chooserOptionLink.tabIndex = 0;
413 chooserOptionHelp.tabIndex = 0;
414 chooserOptionFavourite.tabIndex = 0;
415 } else {
416 // Set tabindex to -1 to remove the previous chooser option element from the focus order.
417 chooserOption.tabIndex = -1;
418 chooserOptionLink.tabIndex = -1;
419 chooserOptionHelp.tabIndex = -1;
420 chooserOptionFavourite.tabIndex = -1;
421 }
422};
423
05b27f21
MM
424/**
425 * Small error handling function to make sure the navigated to object exists
426 *
427 * @method clickErrorHandler
428 * @param {HTMLElement} item What we want to check exists
429 * @param {HTMLElement} fallback If we dont match anything fallback the focus
f152b71d 430 * @return {HTMLElement}
05b27f21
MM
431 */
432const clickErrorHandler = (item, fallback) => {
433 if (item !== null) {
434 return item;
435 } else {
436 return fallback;
437 }
438};
439
f152b71d
MG
440/**
441 * Render the search results in a defined container
442 *
443 * @method renderSearchResults
444 * @param {HTMLElement} searchResultsContainer The container where the data should be rendered
445 * @param {Object} searchResultsData Data containing the module items that satisfy the search criteria
446 */
447const renderSearchResults = async(searchResultsContainer, searchResultsData) => {
448 const templateData = {
449 'searchresultsnumber': searchResultsData.length,
450 'searchresults': searchResultsData
451 };
452 // Build up the html & js ready to place into the help section.
d2695ab2 453 const {html, js} = await Templates.renderForPromise('core_course/local/activitychooser/search_results', templateData);
f152b71d
MG
454 await Templates.replaceNodeContents(searchResultsContainer, html, js);
455};
456
457/**
458 * Toggle (display/hide) the search results depending on the value of the search query
459 *
460 * @method toggleSearchResultsView
16d77f18 461 * @param {Object} modal Our created modal for the section
f152b71d
MG
462 * @param {Map} mappedModules A map of all of the modules we are working with with K: mod_name V: {Object}
463 * @param {String} searchQuery The search query
464 */
16d77f18
MM
465const toggleSearchResultsView = async(modal, mappedModules, searchQuery) => {
466 const modalBody = modal.getBody()[0];
f152b71d
MG
467 const searchResultsContainer = modalBody.querySelector(selectors.regions.searchResults);
468 const chooserContainer = modalBody.querySelector(selectors.regions.chooser);
469 const clearSearchButton = modalBody.querySelector(selectors.elements.clearsearch);
470 const searchIcon = modalBody.querySelector(selectors.elements.searchicon);
471
472 if (searchQuery.length > 0) { // Search query is present.
473 const searchResultsData = searchModules(mappedModules, searchQuery);
474 await renderSearchResults(searchResultsContainer, searchResultsData);
475 const searchResultItemsContainer = searchResultsContainer.querySelector(selectors.regions.searchResultItems);
476 const firstSearchResultItem = searchResultItemsContainer.querySelector(selectors.regions.chooserOption.container);
477 if (firstSearchResultItem) {
478 // Set the first result item to be focusable.
479 toggleFocusableChooserOption(firstSearchResultItem, true);
480 // Register keyboard events on the created search result items.
16d77f18 481 initChooserOptionsKeyboardNavigation(modalBody, mappedModules, searchResultItemsContainer, modal);
f152b71d
MG
482 }
483 // Display the "clear" search button in the activity chooser search bar.
484 searchIcon.classList.add('d-none');
485 clearSearchButton.classList.remove('d-none');
486 // Hide the default chooser options container.
487 chooserContainer.setAttribute('hidden', 'hidden');
488 // Display the search results container.
489 searchResultsContainer.removeAttribute('hidden');
490 } else { // Search query is not present.
491 // Hide the "clear" search button in the activity chooser search bar.
492 clearSearchButton.classList.add('d-none');
493 searchIcon.classList.remove('d-none');
494 // Hide the search results container.
495 searchResultsContainer.setAttribute('hidden', 'hidden');
496 // Display the default chooser options container.
497 chooserContainer.removeAttribute('hidden');
498 }
499};
500
501/**
502 * Return the list of modules which have a name or description that matches the given search term.
503 *
504 * @method searchModules
505 * @param {Array} modules List of available modules
506 * @param {String} searchTerm The search term to match
507 * @return {Array}
508 */
509const searchModules = (modules, searchTerm) => {
510 if (searchTerm === '') {
511 return modules;
512 }
513 searchTerm = searchTerm.toLowerCase();
514 const searchResults = [];
515 modules.forEach((activity) => {
516 const activityName = activity.title.toLowerCase();
517 const activityDesc = activity.help.toLowerCase();
518 if (activityName.includes(searchTerm) || activityDesc.includes(searchTerm)) {
519 searchResults.push(activity);
520 }
521 });
522
523 return searchResults;
524};
525
f2d033a2
MM
526/**
527 * Set up our tabindex information across the chooser.
528 *
529 * @method setupKeyboardAccessibility
530 * @param {Promise} modal Our created modal for the section
531 * @param {Map} mappedModules A map of all of the built module information
532 */
533const setupKeyboardAccessibility = (modal, mappedModules) => {
534 modal.getModal()[0].tabIndex = -1;
535
536 modal.getBodyPromise().then(body => {
537 $(selectors.elements.tab).on('shown.bs.tab', (e) => {
538 const activeSectionId = e.target.getAttribute("href");
539 const activeSectionChooserOptions = body[0]
540 .querySelector(selectors.regions.getSectionChooserOptions(activeSectionId));
541 const firstChooserOption = activeSectionChooserOptions
542 .querySelector(selectors.regions.chooserOption.container);
543 const prevActiveSectionId = e.relatedTarget.getAttribute("href");
544 const prevActiveSectionChooserOptions = body[0]
545 .querySelector(selectors.regions.getSectionChooserOptions(prevActiveSectionId));
546
547 // Disable the focus of every chooser option in the previous active section.
548 disableFocusAllChooserOptions(prevActiveSectionChooserOptions);
549 // Enable the focus of the first chooser option in the current active section.
550 toggleFocusableChooserOption(firstChooserOption, true);
16d77f18 551 initChooserOptionsKeyboardNavigation(body[0], mappedModules, activeSectionChooserOptions, modal);
f2d033a2
MM
552 });
553 return;
554 }).catch(Notification.exception);
555};
556
f152b71d
MG
557/**
558 * Disable the focus of all chooser options in a specific container (section).
559 *
560 * @method disableFocusAllChooserOptions
561 * @param {HTMLElement} sectionChooserOptions The section that contains the chooser items
562 */
563const disableFocusAllChooserOptions = (sectionChooserOptions) => {
564 const allChooserOptions = sectionChooserOptions.querySelectorAll(selectors.regions.chooserOption.container);
565 allChooserOptions.forEach((chooserOption) => {
566 toggleFocusableChooserOption(chooserOption, false);
567 });
568};
569
05b27f21
MM
570/**
571 * Display the module chooser.
572 *
573 * @method displayChooser
f2d033a2 574 * @param {Promise} modalPromise Our created modal for the section
05b27f21 575 * @param {Array} sectionModules An array of all of the built module information
6e1a4477 576 * @param {Function} partialFavourite Partially applied function we need to manage favourite status
16d77f18 577 * @param {Object} footerData Our base footer object.
05b27f21 578 */
16d77f18 579export const displayChooser = (modalPromise, sectionModules, partialFavourite, footerData) => {
05b27f21
MM
580 // Make a map so we can quickly fetch a specific module's object for either rendering or searching.
581 const mappedModules = new Map();
582 sectionModules.forEach((module) => {
806e736a 583 mappedModules.set(module.componentname + '_' + module.link, module);
05b27f21
MM
584 });
585
586 // Register event listeners.
f2d033a2 587 modalPromise.then(modal => {
16d77f18 588 registerListenerEvents(modal, mappedModules, partialFavourite, footerData);
05b27f21 589
f2d033a2
MM
590 // We want to focus on the first chooser option element as soon as the modal is opened.
591 setupKeyboardAccessibility(modal, mappedModules);
05b27f21 592
f2d033a2
MM
593 // We want to focus on the action select when the dialog is closed.
594 modal.getRoot().on(ModalEvents.hidden, () => {
595 modal.destroy();
596 });
05b27f21 597
f2d033a2 598 return modal;
e146a2ca 599 }).catch();
05b27f21 600};