WebSVN – Moodle – Diff – /course/amd/src/local/activitychooser/dialogue.js

  * @module     core_course/local/activitychooser/dialogue
  * @copyright  2019 Mihail Geshoski <mihail@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
-import $ from 'jquery';
+import Carousel from 'theme_boost/bootstrap/carousel';
 import * as ModalEvents from 'core/modal_events';
 import selectors from 'core_course/local/activitychooser/selectors';
 import * as Templates from 'core/templates';
 import {end, arrowLeft, arrowRight, home, enter, space} from 'core/key_codes';
 import {addIconToContainer} from 'core/loadingicon';
 import * as Repository from 'core_course/local/activitychooser/repository';
 import Notification from 'core/notification';
+import {debounce} from 'core/utils';
-import {debounce} from 'core/utils';
+import {getFirst} from 'core/normalise';
 const getPlugin = pluginName => import(pluginName);
 /**
  * Given an event from the main module 'page' navigate to it's help section via a carousel.
  *
  * @method showModuleHelp
- * @param {jQuery} carousel Our initialized carousel to manipulate
+ * @param {Element} carousel Our initialized carousel to manipulate
  * @param {Object} moduleData Data of the module to carousel to
  * @param {jQuery} modal We need to figure out if the current modal has a footer.
  */
 const showModuleHelp = (carousel, moduleData, modal = null) => {
     // If we have a real footer then we need to change temporarily.
     if (modal !== null && moduleData.showFooter === true) {
         modal.setFooter(Templates.render('core_course/local/activitychooser/footer_partial', moduleData));
+    }
-    const help = carousel.find(selectors.regions.help)[0];
+    const help = carousel.querySelector(selectors.regions.help);
     help.innerHTML = '';
     help.classList.add('m-auto');
             return help;
         })
         .catch(Notification.exception);
     // Move to the next slide, and resolve the transition promise when it's done.
-    carousel.one('slid.bs.carousel', () => {
+    carousel.addEventListener('slid.bs.carousel', () => {
         transitionPromiseResolver();
-    });
+    }, {once: true});
     // Trigger the transition between 'pages'.
-    carousel.carousel('next');
+    Carousel.getInstance(carousel).next();
 };
 /**
  * @param {Map} mappedModules A map of all of the modules we are working with with K: mod_name V: {Object}
  * @param {Function} partialFavourite Partially applied function we need to manage favourite status
  * @param {Object} footerData Our base footer object.
  */
 const registerListenerEvents = (modal, mappedModules, partialFavourite, footerData) => {
+    const modalBody = getFirst(modal.getBody());
     const bodyClickListener = async(e) => {
         if (e.target.closest(selectors.actions.optionActions.showSummary)) {
-            const carousel = $(modal.getBody()[0].querySelector(selectors.regions.carousel));
+            const carousel = modalBody.querySelector(selectors.regions.carousel);
             const module = e.target.closest(selectors.regions.chooserOption.container);
             const moduleName = module.dataset.modname;
             const moduleData = mappedModules.get(moduleName);
             showModuleHelp(carousel, moduleData, modal);
+        }
         if (e.target.closest(selectors.actions.optionActions.manageFavourite)) {
             const caller = e.target.closest(selectors.actions.optionActions.manageFavourite);
-            await manageFavouriteState(modal.getBody()[0], caller, partialFavourite);
+            await manageFavouriteState(modalBody, caller, partialFavourite);
-            const activeSectionId = modal.getBody()[0].querySelector(selectors.elements.activetab).getAttribute("href");
+            const activeSectionId = modalBody.querySelector(selectors.elements.activetab).getAttribute("href");
-            const sectionChooserOptions = modal.getBody()[0]
+            const sectionChooserOptions = modalBody
                 .querySelector(selectors.regions.getSectionChooserOptions(activeSectionId));
             const firstChooserOption = sectionChooserOptions
                 .querySelector(selectors.regions.chooserOption.container);
             toggleFocusableChooserOption(firstChooserOption, true);
-            initChooserOptionsKeyboardNavigation(modal.getBody()[0], mappedModules, sectionChooserOptions, modal);
+            initChooserOptionsKeyboardNavigation(modalBody, mappedModules, sectionChooserOptions, modal);
+        }
         // From the help screen go back to the module overview.
         if (e.target.matches(selectors.actions.closeOption)) {
-            const carousel = $(modal.getBody()[0].querySelector(selectors.regions.carousel));
+            const carousel = modalBody.querySelector(selectors.regions.carousel);
             // Trigger the transition between 'pages'.
-            carousel.carousel('prev');
+            Carousel.getInstance(carousel).prev();
-            carousel.on('slid.bs.carousel', () => {
+            carousel.addEventListener('slid.bs.carousel', () => {
-                const allModules = modal.getBody()[0].querySelector(selectors.regions.modules);
+                const allModules = modalBody.querySelector(selectors.regions.modules);
                 const caller = allModules.querySelector(selectors.regions.getModuleSelector(e.target.dataset.modname));
                 caller.focus();
             });
+        }
         // The "clear search" button is triggered.
         if (e.target.closest(selectors.actions.clearSearch)) {
             // Clear the entered search query in the search bar and hide the search results container.
-            const searchInput = modal.getBody()[0].querySelector(selectors.actions.search);
+            const searchInput = modalBody.querySelector(selectors.actions.search);
             searchInput.value = "";
     // The return value of getBodyPromise is a jquery object containing the body NodeElement.
     .then(body => body[0])
     // Set up the carousel.
     .then(body => {
-        $(body.querySelector(selectors.regions.carousel))
+        const carousel = document.querySelector(selectors.regions.carousel);
-            .carousel({
+        new Carousel(carousel, {
                 interval: false,
                 pause: true,
                 keyboard: false
-            });
+        });
         return body;
         toggleFocusableChooserOption(firstChooserOption, true);
         initChooserOptionsKeyboardNavigation(body, mappedModules, sectionChooserOptions, modal);
         return body;
     })
-    .catch();
+    .catch(Notification.exception);
     modal.getFooterPromise()
     // The return value of getBodyPromise is a jquery object containing the body NodeElement.
     .then(footer => footer[0])
     // Add the listener for clicks on the footer.
     .then(footer => {
         footer.addEventListener('click', footerClickListener);
         return footer;
     })
-    .catch();
+    .catch(Notification.exception);
 };
                 if (e.target.matches(selectors.actions.optionActions.showSummary)) {
                     e.preventDefault();
                     const module = e.target.closest(selectors.regions.chooserOption.container);
                     const moduleName = module.dataset.modname;
                     const moduleData = mappedModules.get(moduleName);
-                    const carousel = $(body.querySelector(selectors.regions.carousel));
+                    const carousel = document.querySelector(selectors.regions.carousel);
-                    carousel.carousel({
+                    new Carousel({
                         interval: false,
                         pause: true,
                         keyboard: false
                     });
  */
 const setupKeyboardAccessibility = (modal, mappedModules) => {
     modal.getModal()[0].tabIndex = -1;
+    modal.getBodyPromise().then(body => {
-    modal.getBodyPromise().then(body => {
+        document.querySelectorAll(selectors.elements.tab).forEach((tab) => {
-        $(selectors.elements.tab).on('shown.bs.tab', (e) => {
+            tab.addEventListener('shown.bs.tab', (e) => {
-            const activeSectionId = e.target.getAttribute("href");
+                const activeSectionId = e.target.getAttribute("href");
-            const activeSectionChooserOptions = body[0]
+                const activeSectionChooserOptions = body[0]
-                .querySelector(selectors.regions.getSectionChooserOptions(activeSectionId));
+                    .querySelector(selectors.regions.getSectionChooserOptions(activeSectionId));
-            const firstChooserOption = activeSectionChooserOptions
+                const firstChooserOption = activeSectionChooserOptions
-                .querySelector(selectors.regions.chooserOption.container);
+                    .querySelector(selectors.regions.chooserOption.container);
-            const prevActiveSectionId = e.relatedTarget.getAttribute("href");
+                const prevActiveSectionId = e.relatedTarget.getAttribute("href");
-            const prevActiveSectionChooserOptions = body[0]
+                const prevActiveSectionChooserOptions = body[0]
-                .querySelector(selectors.regions.getSectionChooserOptions(prevActiveSectionId));
+                    .querySelector(selectors.regions.getSectionChooserOptions(prevActiveSectionId));
-            // Disable the focus of every chooser option in the previous active section.
+                // Disable the focus of every chooser option in the previous active section.
-            disableFocusAllChooserOptions(prevActiveSectionChooserOptions);
+                disableFocusAllChooserOptions(prevActiveSectionChooserOptions);
-            // Enable the focus of the first chooser option in the current active section.
+                // Enable the focus of the first chooser option in the current active section.
-            toggleFocusableChooserOption(firstChooserOption, true);
+                toggleFocusableChooserOption(firstChooserOption, true);
+                initChooserOptionsKeyboardNavigation(body[0], mappedModules, activeSectionChooserOptions, modal);
-            initChooserOptionsKeyboardNavigation(body[0], mappedModules, activeSectionChooserOptions, modal);
+            });
         });
         return;
     }).catch(Notification.exception);
         modal.getRoot().on(ModalEvents.hidden, () => {
             modal.destroy();
         });
         return modal;
-    }).catch();
+    }).catch(Notification.exception);

Proyectos de Subversion Moodle

(root)/course/amd/src/local/activitychooser/dialogue.js – Rev 1 → 1441