MDL-75669 theme_boost: Fix BS5 related JS

- Migrate Boostrap components related JS from JQuery to vanilla JS.
- Migrate Boostrap components related Events from JQuery to vanilla JS.

admin/tool/componentlibrary/content/library/moodle-javascript.md

@@ -30,15 +30,13 @@ In order for this to work you need to use the JavaScript syntax used in core Mus
 {{#js}}
 require(
 [
-    'jquery',
     'theme_boost/toast',
 ],
 function(
-    $,
     Toast
 ) {
-    var root = $('#toasttest');
-    root.toast('show');
+    const toastTrigger = document.getElementById('toasttest');
+    new Toast(toastTrigger).show();
 });
 {{/js}}
 {{< /example >}}

admin/tool/moodlenet/amd/src/instance_form.js

@@ -33,13 +33,15 @@ define(['tool_moodlenet/validator',
         'core/loadingicon',
         'core/templates',
         'core/notification',
-        'jquery'],
+        'jquery',
+        'theme_boost/bootstrap/carousel'],
     function(Validator,
              Selectors,
              LoadingIcon,
              Templates,
              Notification,
-             $) {
+             $,
+             Carousel) {
 
     /**
      * Add the event listeners to our form.
@@ -78,7 +80,7 @@ define(['tool_moodlenet/validator',
                             validationArea.classList.add('text-danger');
                         }
                         return;
-                }).catch();
+                }).catch(Notification.exception);
             }
         });
     };
@@ -89,7 +91,7 @@ define(['tool_moodlenet/validator',
      * @method chooserNavigateToMnet
      * @param {HTMLElement} showMoodleNet The chooser's area for ment
      * @param {Object} footerData Our footer object to render out
-     * @param {jQuery} carousel Our carousel instance to manage
+     * @param {Element} carousel Our carousel instance to manage
      * @param {jQuery} modal Our modal instance to manage
      */
     var chooserNavigateToMnet = function(showMoodleNet, footerData, carousel, modal) {
@@ -116,25 +118,25 @@ define(['tool_moodlenet/validator',
         registerListenerEvents(showMoodleNet);
 
         // Move to the next slide, and resolve the transition promise when it's done.
-        carousel.one('slid.bs.carousel', function() {
+        carousel.addEventListener('slid.bs.carousel', function() {
             transitionPromiseResolver();
-        });
+        }, {once: true});
         // Trigger the transition between 'pages'.
-        carousel.carousel(2);
+        Carousel.getInstance(carousel).to(2);
         modal.setFooter(Templates.render('tool_moodlenet/chooser_footer_close_mnet', {}));
     };
 
     /**
      * Given a user no longer wishes to see the MoodleNet profile url form transition them from there.
      *
      * @method chooserNavigateFromMnet
-     * @param {jQuery} carousel Our carousel instance to manage
+     * @param {Element} carousel Our carousel instance to manage
      * @param {jQuery} modal Our modal instance to manage
      * @param {Object} footerData Our footer object to render out
      */
     var chooserNavigateFromMnet = function(carousel, modal, footerData) {
         // Trigger the transition between 'pages'.
-        carousel.carousel(0);
+        Carousel.getInstance(carousel).to(0);
         modal.setFooter(footerData.customfootertemplate);
     };
 
@@ -148,14 +150,14 @@ define(['tool_moodlenet/validator',
     var footerClickListener = function(e, footerData, modal) {
         if (e.target.matches(Selectors.action.showMoodleNet) || e.target.closest(Selectors.action.showMoodleNet)) {
             e.preventDefault();
-            const carousel = $(modal.getBody()[0].querySelector(Selectors.region.carousel));
-            const showMoodleNet = carousel.find(Selectors.region.moodleNet)[0];
+            const carousel = modal.getBody()[0].querySelector(Selectors.region.carousel);
+            const showMoodleNet = carousel.querySelector(Selectors.region.moodleNet);
 
             chooserNavigateToMnet(showMoodleNet, footerData, carousel, modal);
         }
         // From the help screen go back to the module overview.
         if (e.target.matches(Selectors.action.closeOption)) {
-            const carousel = $(modal.getBody()[0].querySelector(Selectors.region.carousel));
+            const carousel = modal.getBody()[0].querySelector(Selectors.region.carousel);
 
             chooserNavigateFromMnet(carousel, modal, footerData);
         }