Merge branch 'MDL-63937-master' of https://github.com/HuongNV13/moodle

lib/amd/build/loadingicon.min.js

@@ -0,0 +1 @@
+define(["jquery","core/templates"],function(a,b){var c={LOADING:"core/loading"},d=function(){return b.render(c.LOADING,{})},e=function(b){return d().then(function(c){var d=a(c).hide();return b.append(d),d.fadeIn(150),d})},f=function(b,c){return d().then(function(d){var e=a(d).hide();return b.append(e),e.fadeIn(150),a.when(e.promise(),c)}).then(function(a){return a.fadeOut(100).promise()}).then(function(a){a.remove()})},g=function(b){var c=a.Deferred();return f(b,c),c};return{getIcon:d,addIconToContainer:e,addIconToContainerWithPromise:g,addIconToContainerRemoveOnCompletion:f}});

lib/amd/src/form-autocomplete.js

@@ -24,7 +24,9 @@
  * @since      3.0
  */
 /* globals require: false */
-define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification'], function($, log, str, templates, notification) {
+define(
+    ['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification', 'core/loadingicon'],
+function($, log, str, templates, notification, LoadingIcon) {
 
     // Private functions and variables.
     /** @var {Object} KEYS - List of keycode constants. */
@@ -555,6 +557,10 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      */
     var updateAjax = function(e, options, state, originalSelect, ajaxHandler) {
         var pendingPromise = addPendingJSPromise('updateAjax');
+        // We need to show the indicator outside of the hidden select list.
+        // So we get the parent id of the hidden select list.
+        var parentElement = $(document.getElementById(state.selectId)).parent();
+        LoadingIcon.addIconToContainerRemoveOnCompletion(parentElement, pendingPromise);
 
         // Get the query to pass to the ajax function.
         var query = $(e.currentTarget).val();

lib/amd/src/loadingicon.js

@@ -0,0 +1,110 @@
+// 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/>.
+
+/**
+ * Contain the logic for the loading icon.
+ *
+ * @module     core/loading_icon
+ * @class      loading_icon
+ * @package    core
+ * @copyright  2019 Andrew Nicols <andrew@nicols.co.uk>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/templates'], function($, Templates) {
+    var TEMPLATES = {
+        LOADING: 'core/loading',
+    };
+
+    var getIcon = function() {
+        return Templates.render(TEMPLATES.LOADING, {});
+    };
+
+    /**
+     * Add a loading icon to the end of the specified container and return an unresolved promise.
+     *
+     * Resolution of the returned promise causes the icon to be faded out and removed.
+     *
+     * @method  addIconToContainer
+     * @param   {jQuery}  container  The element to add the spinner to
+     * @return  {Promise} The Promise used to create the icon.
+     */
+    var addIconToContainer = function(container) {
+        return getIcon()
+        .then(function(html) {
+            var loadingIcon = $(html).hide();
+            container.append(loadingIcon);
+            loadingIcon.fadeIn(150);
+
+            return loadingIcon;
+        });
+    };
+
+    /**
+     * Add a loading icon to the end of the specified container and return an unresolved promise.
+     *
+     * Resolution of the returned promise causes the icon to be faded out and removed.
+     *
+     * @method  addIconToContainerWithPromise
+     * @param   {jQuery}  container  The element to add the spinner to
+     * @param   {Promise} loadingIconPromise The jQuery Promise which determines the removal of the icon
+     * @return  {jQuery}  The Promise used to create and then remove the icon.
+     */
+    var addIconToContainerRemoveOnCompletion = function(container, loadingIconPromise) {
+        return getIcon()
+        .then(function(html) {
+            var loadingIcon = $(html).hide();
+            container.append(loadingIcon);
+            loadingIcon.fadeIn(150);
+
+            return $.when(loadingIcon.promise(), loadingIconPromise);
+        })
+        .then(function(loadingIcon) {
+            // Once the content has finished loading and
+            // the loading icon has been shown then we can
+            // fade the icon away to reveal the content.
+            return loadingIcon.fadeOut(100).promise();
+        })
+        .then(function(loadingIcon) {
+            loadingIcon.remove();
+
+            return;
+        });
+    };
+
+    /**
+     * Add a loading icon to the end of the specified container and return an unresolved promise.
+     *
+     * Resolution of the returned promise causes the icon to be faded out and removed.
+     *
+     * @method  addIconToContainerWithPromise
+     * @param   {jQuery}  container  The element to add the spinner to
+     * @return  {Promise} A jQuery Promise to resolve when ready
+     */
+    var addIconToContainerWithPromise = function(container) {
+        var loadingIconPromise = $.Deferred();
+
+        addIconToContainerRemoveOnCompletion(container, loadingIconPromise);
+
+        return loadingIconPromise;
+    };
+
+    return {
+        getIcon: getIcon,
+        addIconToContainer: addIconToContainer,
+        addIconToContainerWithPromise: addIconToContainerWithPromise,
+        addIconToContainerRemoveOnCompletion: addIconToContainerRemoveOnCompletion,
+    };
+
+});

theme/boost/scss/moodle/forms.scss

@@ -327,6 +327,13 @@ fieldset.coursesearchbox label {
     top: 0.2em;
     left: -1.5em;
     cursor: pointer;
+
+    .loading-icon {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: $white;
+    }
 }
 
 .form-autocomplete-selection:focus {

theme/boost/style/moodle.css

@@ -14774,6 +14774,11 @@ fieldset.coursesearchbox label {
   top: 0.2em;
   left: -1.5em;
   cursor: pointer; }
+  .form-autocomplete-downarrow .loading-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #fff; }
 
 .form-autocomplete-selection:focus {
   outline: none; }