first commit

admin/tool/moodlenet/amd/build/instance_form.min.js

@@ -0,0 +1,17 @@
+/**
+ * Our basic form manager for when a user either enters
+ * their profile url or just wants to browse.
+ *
+ * This file is a mishmash of JS functions we need for both the standalone (M3.7, M3.8)
+ * plugin & Moodle 3.9 functions. The 3.9 Functions have a base understanding that certain
+ * things exist i.e. directory structures for templates. When this feature goes 3.9+ only
+ * The goal is that we can quickly gut all AMD modules into bare JS files and use ES6 guidelines.
+ * Till then this will have to do.
+ *
+ * @module     tool_moodlenet/instance_form
+ * @copyright  2020 Mathew May <mathew.solutions>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define("tool_moodlenet/instance_form",["tool_moodlenet/validator","tool_moodlenet/selectors","core/loadingicon","core/templates","core/notification","jquery"],(function(Validator,Selectors,LoadingIcon,Templates,Notification,$){var chooserNavigateToMnet=function(showMoodleNet,footerData,carousel,modal){showMoodleNet.innerHTML="";var page,spinnerPromise=LoadingIcon.addIconToContainer(showMoodleNet),transitionPromiseResolver=null,transitionPromise=new Promise((resolve=>{transitionPromiseResolver=resolve}));$.when(spinnerPromise,transitionPromise).then((function(){Templates.replaceNodeContents(showMoodleNet,footerData.customcarouseltemplate,"")})).catch(Notification.exception),(page=showMoodleNet).addEventListener("click",(function(e){if(e.target.matches(Selectors.action.submit)){var input=page.querySelector('[data-var="mnet-link"]'),overlay=page.querySelector(Selectors.region.spinner),validationArea=document.querySelector(Selectors.region.validationArea);overlay.classList.remove("d-none");var spinner=LoadingIcon.addIconToContainerWithPromise(overlay);Validator.validation(input).then((function(result){spinner.resolve(),overlay.classList.add("d-none"),result.result?(input.classList.remove("is-invalid"),input.classList.add("is-valid"),validationArea.innerText=result.message,validationArea.classList.remove("text-danger"),validationArea.classList.add("text-success"),setTimeout((function(){window.location=result.domain}),1e3)):(input.classList.add("is-invalid"),validationArea.innerText=result.message,validationArea.classList.add("text-danger"))})).catch()}})),carousel.one("slid.bs.carousel",(function(){transitionPromiseResolver()})),carousel.carousel(2),modal.setFooter(Templates.render("tool_moodlenet/chooser_footer_close_mnet",{}))};return{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)),showMoodleNet=carousel.find(Selectors.region.moodleNet)[0];chooserNavigateToMnet(showMoodleNet,footerData,carousel,modal)}if(e.target.matches(Selectors.action.closeOption)){!function(carousel,modal,footerData){carousel.carousel(0),modal.setFooter(footerData.customfootertemplate)}($(modal.getBody()[0].querySelector(Selectors.region.carousel)),modal,footerData)}}}}));
+
+//# sourceMappingURL=instance_form.min.js.map

admin/tool/moodlenet/amd/build/select_page.min.js

@@ -0,0 +1,10 @@
+/**
+ * When returning to Moodle let the user select which course to add the resource to.
+ *
+ * @module     tool_moodlenet/select_page
+ * @copyright  2020 Mathew May <mathew.solutions>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define("tool_moodlenet/select_page",["core/ajax","core/templates","tool_moodlenet/selectors","core/notification"],(function(Ajax,Templates,Selectors,Notification){var importId,searchCourses=function(inputValue,page,areaReplace){var searchIcon=page.querySelector(Selectors.region.searchIcon),clearIcon=page.querySelector(Selectors.region.clearIcon);""!==inputValue?(searchIcon.classList.add("d-none"),clearIcon.parentElement.classList.remove("d-none")):(searchIcon.classList.remove("d-none"),clearIcon.parentElement.classList.add("d-none"));var args={searchvalue:inputValue};Ajax.call([{methodname:"tool_moodlenet_search_courses",args:args}])[0].then((function(result){return 0===result.courses.length?function(areaReplace){return Templates.renderPix("courses","tool_moodlenet").then((function(img){return img})).then((function(img){var temp=document.createElement("div");return temp.innerHTML=img.trim(),Templates.render("core_course/no-courses",{nocoursesimg:temp.firstChild.src})})).then((function(html,js){Templates.replaceNodeContents(areaReplace,html,js),areaReplace.classList.add("mx-auto"),areaReplace.classList.add("w-25")}))}(areaReplace):(result.courses.forEach((function(course){course.viewurl+="&id="+importId})),function(areaReplace,courses){return Templates.render("tool_moodlenet/view-cards",{courses:courses}).then((function(html,js){Templates.replaceNodeContents(areaReplace,html,js),areaReplace.classList.remove("mx-auto"),areaReplace.classList.remove("w-25")}))}(areaReplace,result.courses))})).catch(Notification.exception)},registerListenerEvents=function(page){var input=page.querySelector(Selectors.region.searchInput),courseArea=page.querySelector(Selectors.region.courses);page.querySelector(Selectors.region.clearIcon).addEventListener("click",(function(){input.value="",searchCourses("",page,courseArea)})),input.addEventListener("input",debounce((function(){searchCourses(input.value,page,courseArea)}),300))},addCourses=function(page){var courseArea=page.querySelector(Selectors.region.courses);searchCourses("",page,courseArea)},debounce=function(func,wait,immediate){var timeout;return function(){var context=this,args=arguments,later=function(){timeout=null,immediate||func.apply(context,args)},callNow=immediate&&!timeout;clearTimeout(timeout),timeout=setTimeout(later,wait),callNow&&func.apply(context,args)}};return{init:function(importIdString){importId=importIdString;var page=document.querySelector(Selectors.region.selectPage);registerListenerEvents(page),addCourses(page)}}}));
+
+//# sourceMappingURL=select_page.min.js.map

admin/tool/moodlenet/amd/build/selectors.min.js

@@ -0,0 +1,10 @@
+/**
+ * Define all of the selectors we will be using within MoodleNet plugin.
+ *
+ * @module     tool_moodlenet/selectors
+ * @copyright  2020 Mathew May <mathew.solutions>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define("tool_moodlenet/selectors",[],(function(){return{action:{browse:'[data-action="browse"]',submit:'[data-action="submit"]',showMoodleNet:'[data-action="show-moodlenet"]',closeOption:'[data-action="close-chooser-option-summary"]'},region:{clearIcon:'[data-region="clear-icon"]',courses:'[data-region="mnet-courses"]',instancePage:'[data-region="moodle-net"]',searchInput:'[data-region="search-input"]',searchIcon:'[data-region="search-icon"]',selectPage:'[data-region="moodle-net-select"]',spinner:'[data-region="spinner"]',validationArea:'[data-region="validation-area"]',carousel:'[data-region="carousel"]',moodleNet:'[data-region="pluginCarousel"]'}}}));
+
+//# sourceMappingURL=selectors.min.js.map

admin/tool/moodlenet/amd/build/selectors.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.min.js","sources":["../src/selectors.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using within MoodleNet plugin.\n *\n * @module     tool_moodlenet/selectors\n * @copyright  2020 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\ndefine([], function() {\n    return {\n        action: {\n            browse: '[data-action=\"browse\"]',\n            submit: '[data-action=\"submit\"]',\n            showMoodleNet: '[data-action=\"show-moodlenet\"]',\n            closeOption: '[data-action=\"close-chooser-option-summary\"]',\n        },\n        region: {\n            clearIcon: '[data-region=\"clear-icon\"]',\n            courses: '[data-region=\"mnet-courses\"]',\n            instancePage: '[data-region=\"moodle-net\"]',\n            searchInput: '[data-region=\"search-input\"]',\n            searchIcon: '[data-region=\"search-icon\"]',\n            selectPage: '[data-region=\"moodle-net-select\"]',\n            spinner: '[data-region=\"spinner\"]',\n            validationArea: '[data-region=\"validation-area\"]',\n            carousel: '[data-region=\"carousel\"]',\n            moodleNet: '[data-region=\"pluginCarousel\"]',\n        },\n    };\n});\n"],"names":["define","action","browse","submit","showMoodleNet","closeOption","region","clearIcon","courses","instancePage","searchInput","searchIcon","selectPage","spinner","validationArea","carousel","moodleNet"],"mappings":";;;;;;;AAsBAA,kCAAO,IAAI,iBACA,CACHC,OAAQ,CACJC,OAAQ,yBACRC,OAAQ,yBACRC,cAAe,iCACfC,YAAa,gDAEjBC,OAAQ,CACJC,UAAW,6BACXC,QAAS,+BACTC,aAAc,6BACdC,YAAa,+BACbC,WAAY,8BACZC,WAAY,oCACZC,QAAS,0BACTC,eAAgB,kCAChBC,SAAU,2BACVC,UAAW"}

admin/tool/moodlenet/amd/build/validator.min.js

@@ -0,0 +1,10 @@
+/**
+ * Our validator that splits the user's input then fires off to a webservice
+ *
+ * @module     tool_moodlenet/validator
+ * @copyright  2020 Mathew May <mathew.solutions>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define("tool_moodlenet/validator",["jquery","core/ajax","core/str","core/notification"],(function($,Ajax,Str,Notification){return{validation:function(inputElement){var inputValue=inputElement.value;return""!==inputValue&&inputValue.includes("@")||$.when(Str.get_string("profilevalidationerror","tool_moodlenet")).then((function(strings){return Promise.reject().catch((function(){return{result:!1,message:strings[0]}}))})).fail(Notification.exception),Ajax.call([{methodname:"tool_moodlenet_verify_webfinger",args:{profileurl:inputValue,course:inputElement.dataset.courseid,section:inputElement.dataset.sectionid}}])[0].then((function(result){return result})).catch()}}}));
+
+//# sourceMappingURL=validator.min.js.map

admin/tool/moodlenet/amd/build/validator.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validator.min.js","sources":["../src/validator.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Our validator that splits the user's input then fires off to a webservice\n *\n * @module     tool_moodlenet/validator\n * @copyright  2020 Mathew May <mathew.solutions>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\ndefine(['jquery', 'core/ajax', 'core/str', 'core/notification'], function($, Ajax, Str, Notification) {\n    /**\n     * Handle form validation\n     *\n     * @method validation\n     * @param {HTMLElement} inputElement The element the user entered text into.\n     * @return {Promise} Was the users' entry a valid profile URL?\n     */\n    var validation = function validation(inputElement) {\n        var inputValue = inputElement.value;\n\n        // They didn't submit anything or they gave us a simple string that we can't do anything with.\n        if (inputValue === \"\" || !inputValue.includes(\"@\")) {\n            // Create a promise and immediately reject it.\n            $.when(Str.get_string('profilevalidationerror', 'tool_moodlenet')).then(function(strings) {\n                return Promise.reject().catch(function() {\n                    return {result: false, message: strings[0]};\n                });\n            }).fail(Notification.exception);\n        }\n\n        return Ajax.call([{\n            methodname: 'tool_moodlenet_verify_webfinger',\n            args: {\n                profileurl: inputValue,\n                course: inputElement.dataset.courseid,\n                section: inputElement.dataset.sectionid\n            }\n        }])[0].then(function(result) {\n            return result;\n        }).catch();\n    };\n    return {\n        validation: validation,\n    };\n});\n"],"names":["define","$","Ajax","Str","Notification","validation","inputElement","inputValue","value","includes","when","get_string","then","strings","Promise","reject","catch","result","message","fail","exception","call","methodname","args","profileurl","course","dataset","courseid","section","sectionid"],"mappings":";;;;;;;AAsBAA,kCAAO,CAAC,SAAU,YAAa,WAAY,sBAAsB,SAASC,EAAGC,KAAMC,IAAKC,oBAgC7E,CACHC,WAzBa,SAAoBC,kBAC7BC,WAAaD,aAAaE,YAGX,KAAfD,YAAsBA,WAAWE,SAAS,MAE1CR,EAAES,KAAKP,IAAIQ,WAAW,yBAA0B,mBAAmBC,MAAK,SAASC,gBACtEC,QAAQC,SAASC,OAAM,iBACnB,CAACC,QAAQ,EAAOC,QAASL,QAAQ,UAE7CM,KAAKf,aAAagB,WAGlBlB,KAAKmB,KAAK,CAAC,CACdC,WAAY,kCACZC,KAAM,CACFC,WAAYjB,WACZkB,OAAQnB,aAAaoB,QAAQC,SAC7BC,QAAStB,aAAaoB,QAAQG,cAElC,GAAGjB,MAAK,SAASK,eACVA,UACRD"}

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

@@ -0,0 +1,167 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Our basic form manager for when a user either enters
+ * their profile url or just wants to browse.
+ *
+ * This file is a mishmash of JS functions we need for both the standalone (M3.7, M3.8)
+ * plugin & Moodle 3.9 functions. The 3.9 Functions have a base understanding that certain
+ * things exist i.e. directory structures for templates. When this feature goes 3.9+ only
+ * The goal is that we can quickly gut all AMD modules into bare JS files and use ES6 guidelines.
+ * Till then this will have to do.
+ *
+ * @module     tool_moodlenet/instance_form
+ * @copyright  2020 Mathew May <mathew.solutions>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+define(['tool_moodlenet/validator',
+        'tool_moodlenet/selectors',
+        'core/loadingicon',
+        'core/templates',
+        'core/notification',
+        'jquery'],
+    function(Validator,
+             Selectors,
+             LoadingIcon,
+             Templates,
+             Notification,
+             $) {
+
+    /**
+     * Add the event listeners to our form.
+     *
+     * @method registerListenerEvents
+     * @param {HTMLElement} page The whole page element for our form area
+     */
+    var registerListenerEvents = function registerListenerEvents(page) {
+        page.addEventListener('click', function(e) {
+
+            // Our fake submit button / browse button.
+            if (e.target.matches(Selectors.action.submit)) {
+                var input = page.querySelector('[data-var="mnet-link"]');
+                var overlay = page.querySelector(Selectors.region.spinner);
+                var validationArea = document.querySelector(Selectors.region.validationArea);
+
+                overlay.classList.remove('d-none');
+                var spinner = LoadingIcon.addIconToContainerWithPromise(overlay);
+                Validator.validation(input)
+                    .then(function(result) {
+                        spinner.resolve();
+                        overlay.classList.add('d-none');
+                        if (result.result) {
+                            input.classList.remove('is-invalid'); // Just in case the class has been applied already.
+                            input.classList.add('is-valid');
+                            validationArea.innerText = result.message;
+                            validationArea.classList.remove('text-danger');
+                            validationArea.classList.add('text-success');
+                            // Give the user some time to see their input is valid.
+                            setTimeout(function() {
+                                window.location = result.domain;
+                            }, 1000);
+                        } else {
+                            input.classList.add('is-invalid');
+                            validationArea.innerText = result.message;
+                            validationArea.classList.add('text-danger');
+                        }
+                        return;
+                }).catch();
+            }
+        });
+    };
+
+    /**
+     * Given a user wishes to see the MoodleNet profile url form transition them there.
+     *
+     * @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 {jQuery} modal Our modal instance to manage
+     */
+    var chooserNavigateToMnet = function(showMoodleNet, footerData, carousel, modal) {
+        showMoodleNet.innerHTML = '';
+
+        // Add a spinner.
+        var spinnerPromise = LoadingIcon.addIconToContainer(showMoodleNet);
+
+        // Used later...
+        var transitionPromiseResolver = null;
+        var transitionPromise = new Promise(resolve => {
+            transitionPromiseResolver = resolve;
+        });
+
+        $.when(
+            spinnerPromise,
+            transitionPromise
+        ).then(function() {
+                Templates.replaceNodeContents(showMoodleNet, footerData.customcarouseltemplate, '');
+                return;
+        }).catch(Notification.exception);
+
+        // We apply our handlers in here to minimise plugin dependency in the Chooser.
+        registerListenerEvents(showMoodleNet);
+
+        // Move to the next slide, and resolve the transition promise when it's done.
+        carousel.one('slid.bs.carousel', function() {
+            transitionPromiseResolver();
+        });
+        // Trigger the transition between 'pages'.
+        carousel.carousel(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 {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);
+        modal.setFooter(footerData.customfootertemplate);
+    };
+
+        /**
+         * Create the custom listener that would handle anything in the footer.
+         *
+         * @param {Event} e The event being triggered.
+         * @param {Object} footerData The data generated from the exporter.
+         * @param {Object} modal The chooser modal.
+         */
+    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];
+
+            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));
+
+            chooserNavigateFromMnet(carousel, modal, footerData);
+        }
+    };
+
+    return {
+        footerClickListener: footerClickListener
+    };
+});

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

@@ -0,0 +1,197 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * When returning to Moodle let the user select which course to add the resource to.
+ *
+ * @module     tool_moodlenet/select_page
+ * @copyright  2020 Mathew May <mathew.solutions>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+define([
+    'core/ajax',
+    'core/templates',
+    'tool_moodlenet/selectors',
+    'core/notification'
+], function(
+    Ajax,
+    Templates,
+    Selectors,
+    Notification
+) {
+    /**
+     * @var {string} The id corresponding to the import.
+     */
+    var importId;
+
+    /**
+     * Set up the page.
+     *
+     * @method init
+     * @param {string} importIdString the string ID of the import.
+     */
+    var init = function(importIdString) {
+        importId = importIdString;
+        var page = document.querySelector(Selectors.region.selectPage);
+        registerListenerEvents(page);
+        addCourses(page);
+    };
+
+    /**
+     * Renders the 'no-courses' template.
+     *
+     * @param {HTMLElement} areaReplace the DOM node to replace.
+     * @returns {Promise}
+     */
+    var renderNoCourses = function(areaReplace) {
+        return Templates.renderPix('courses', 'tool_moodlenet').then(function(img) {
+            return img;
+        }).then(function(img) {
+            var temp = document.createElement('div');
+            temp.innerHTML = img.trim();
+            return Templates.render('core_course/no-courses', {
+                nocoursesimg: temp.firstChild.src
+            });
+        }).then(function(html, js) {
+            Templates.replaceNodeContents(areaReplace, html, js);
+            areaReplace.classList.add('mx-auto');
+            areaReplace.classList.add('w-25');
+            return;
+        });
+    };
+
+    /**
+     * Render the course cards for those supplied courses.
+     *
+     * @param {HTMLElement} areaReplace the DOM node to replace.
+     * @param {Array<courses>} courses the courses to render.
+     * @returns {Promise}
+     */
+    var renderCourses = function(areaReplace, courses) {
+        return Templates.render('tool_moodlenet/view-cards', {
+            courses: courses
+        }).then(function(html, js) {
+            Templates.replaceNodeContents(areaReplace, html, js);
+            areaReplace.classList.remove('mx-auto');
+            areaReplace.classList.remove('w-25');
+            return;
+        });
+    };
+
+    /**
+     * For a given input, the page & what to replace fetch courses and manage icons too.
+     *
+     * @method searchCourses
+     * @param {string} inputValue What to search for
+     * @param {HTMLElement} page The whole page element for our page
+     * @param {HTMLElement} areaReplace The Element to replace the contents of
+     */
+    var searchCourses = function(inputValue, page, areaReplace) {
+        var searchIcon = page.querySelector(Selectors.region.searchIcon);
+        var clearIcon = page.querySelector(Selectors.region.clearIcon);
+
+        if (inputValue !== '') {
+            searchIcon.classList.add('d-none');
+            clearIcon.parentElement.classList.remove('d-none');
+        } else {
+            searchIcon.classList.remove('d-none');
+            clearIcon.parentElement.classList.add('d-none');
+        }
+        var args = {
+            searchvalue: inputValue,
+        };
+        Ajax.call([{
+            methodname: 'tool_moodlenet_search_courses',
+            args: args
+        }])[0].then(function(result) {
+            if (result.courses.length === 0) {
+                return renderNoCourses(areaReplace);
+            } else {
+                // Add the importId to the course link
+                result.courses.forEach(function(course) {
+                    course.viewurl += '&id=' + importId;
+                });
+                return renderCourses(areaReplace, result.courses);
+            }
+        }).catch(Notification.exception);
+    };
+
+    /**
+     * Add the event listeners to our page.
+     *
+     * @method registerListenerEvents
+     * @param {HTMLElement} page The whole page element for our page
+     */
+    var registerListenerEvents = function(page) {
+        var input = page.querySelector(Selectors.region.searchInput);
+        var courseArea = page.querySelector(Selectors.region.courses);
+        var clearIcon = page.querySelector(Selectors.region.clearIcon);
+        clearIcon.addEventListener('click', function() {
+            input.value = '';
+            searchCourses('', page, courseArea);
+        });
+
+        input.addEventListener('input', debounce(function() {
+            searchCourses(input.value, page, courseArea);
+        }, 300));
+    };
+
+    /**
+     * Fetch the courses to show the user. We use the same WS structure & template as the search for consistency.
+     *
+     * @method addCourses
+     * @param {HTMLElement} page The whole page element for our course page
+     */
+    var addCourses = function(page) {
+        var courseArea = page.querySelector(Selectors.region.courses);
+        searchCourses('', page, courseArea);
+    };
+
+    /**
+     * Define our own debounce function as Moodle 3.7 does not have it.
+     *
+     * @method debounce
+     * @from underscore.js
+     * @copyright 2009-2020 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+     * @licence MIT
+     * @param {function} func The function we want to keep calling
+     * @param {number} wait Our timeout
+     * @param {boolean} immediate Do we want to apply the function immediately
+     * @return {function}
+     */
+    var debounce = function(func, wait, immediate) {
+        var timeout;
+        return function() {
+            var context = this;
+            var args = arguments;
+            var later = function() {
+                timeout = null;
+                if (!immediate) {
+                    func.apply(context, args);
+                }
+            };
+            var callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) {
+                func.apply(context, args);
+            }
+        };
+    };
+    return {
+        init: init,
+    };
+});

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

@@ -0,0 +1,44 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Define all of the selectors we will be using within MoodleNet plugin.
+ *
+ * @module     tool_moodlenet/selectors
+ * @copyright  2020 Mathew May <mathew.solutions>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define([], function() {
+    return {
+        action: {
+            browse: '[data-action="browse"]',
+            submit: '[data-action="submit"]',
+            showMoodleNet: '[data-action="show-moodlenet"]',
+            closeOption: '[data-action="close-chooser-option-summary"]',
+        },
+        region: {
+            clearIcon: '[data-region="clear-icon"]',
+            courses: '[data-region="mnet-courses"]',
+            instancePage: '[data-region="moodle-net"]',
+            searchInput: '[data-region="search-input"]',
+            searchIcon: '[data-region="search-icon"]',
+            selectPage: '[data-region="moodle-net-select"]',
+            spinner: '[data-region="spinner"]',
+            validationArea: '[data-region="validation-area"]',
+            carousel: '[data-region="carousel"]',
+            moodleNet: '[data-region="pluginCarousel"]',
+        },
+    };
+});

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

@@ -0,0 +1,58 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Our validator that splits the user's input then fires off to a webservice
+ *
+ * @module     tool_moodlenet/validator
+ * @copyright  2020 Mathew May <mathew.solutions>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/ajax', 'core/str', 'core/notification'], function($, Ajax, Str, Notification) {
+    /**
+     * Handle form validation
+     *
+     * @method validation
+     * @param {HTMLElement} inputElement The element the user entered text into.
+     * @return {Promise} Was the users' entry a valid profile URL?
+     */
+    var validation = function validation(inputElement) {
+        var inputValue = inputElement.value;
+
+        // They didn't submit anything or they gave us a simple string that we can't do anything with.
+        if (inputValue === "" || !inputValue.includes("@")) {
+            // Create a promise and immediately reject it.
+            $.when(Str.get_string('profilevalidationerror', 'tool_moodlenet')).then(function(strings) {
+                return Promise.reject().catch(function() {
+                    return {result: false, message: strings[0]};
+                });
+            }).fail(Notification.exception);
+        }
+
+        return Ajax.call([{
+            methodname: 'tool_moodlenet_verify_webfinger',
+            args: {
+                profileurl: inputValue,
+                course: inputElement.dataset.courseid,
+                section: inputElement.dataset.sectionid
+            }
+        }])[0].then(function(result) {
+            return result;
+        }).catch();
+    };
+    return {
+        validation: validation,
+    };
+});