MDL-32654 Improve course javascript status spinner

course/yui/dragdrop/dragdrop.js

@@ -2,6 +2,7 @@ YUI.add('moodle-course-dragdrop', function(Y) {
 
     var CSS = {
         ACTIVITY : 'activity',
+        COMMANDSPAN : 'span.commands',
         CONTENT : 'content',
         COURSECONTENT : 'course-content',
         EDITINGMOVE : 'editing_move',
@@ -313,6 +314,9 @@ YUI.add('moodle-course-dragdrop', function(Y) {
 
             var sectionselector = M.course.format.get_section_selector(Y);
 
+            // Add spinner if it not there
+            var spinner = M.util.add_spinner(Y, dragnode.one(CSS.COMMANDSPAN));
+
             var params = {};
 
             // Handle any variables which we must pass back through to
@@ -342,13 +346,18 @@ YUI.add('moodle-course-dragdrop', function(Y) {
                 on: {
                     start : function(tid) {
                         this.lock_drag_handle(drag, CSS.EDITINGMOVE);
+                        spinner.show();
                     },
                     success: function(tid, response) {
                         this.unlock_drag_handle(drag, CSS.EDITINGMOVE);
+                        window.setTimeout(function(e) {
+                            spinner.hide();
+                        }, 250);
                     },
                     failure: function(tid, response) {
                         this.ajax_failure(response);
                         this.unlock_drag_handle(drag, CSS.SECTIONHANDLE);
+                        spinner.hide();
                         // TODO: revert nodes location
                     }
                 },

course/yui/toolboxes/toolboxes.js

@@ -117,12 +117,11 @@ YUI.add('moodle-course-toolboxes', function(Y) {
          * Send a request using the REST API
          *
          * @param data The data to submit
-         * @param loadingiconat (optional) Show the loading icon spinner at the specified location (replaces text)
-         * @param lightbox (optional) A lightbox which may contain a section loader
+         * @param statusspinner (optional) A statusspinner which may contain a section loader
          * @param optionalconfig (optional) Any additional configuration to submit
          * @return response responseText field from responce
          */
-        send_request : function(data, loadingiconat, lightbox, optionalconfig) {
+        send_request : function(data, statusspinner, optionalconfig) {
             // Default data structure
             if (!data) {
                 data = {};
@@ -133,12 +132,6 @@ YUI.add('moodle-course-toolboxes', function(Y) {
                 data[varname] = pageparams[varname];
             }
 
-            // Make a note of the icon for displaying the loadingicon spinner
-            var originalicon;
-            if (loadingiconat) {
-                originalicon = loadingiconat.getAttribute('src');
-            }
-
             data.sesskey = M.cfg.sesskey;
             data.courseId = this.get('courseid');
 
@@ -157,25 +150,15 @@ YUI.add('moodle-course-toolboxes', function(Y) {
                                 new M.core.ajaxException(responsetext);
                             }
                         } catch (e) {}
-                        if (originalicon) {
-                            // Replace the spinner with the original icon We use a pause to give
-                            // positive feedback that something is happening
+                        if (statusspinner) {
                             window.setTimeout(function(e) {
-                                loadingiconat.setAttribute('src', originalicon);
-                            }, 250);
-                        }
-                        if (lightbox) {
-                            window.setTimeout(function(e) {
-                                lightbox.hide();
-                            }, 250);
+                                statusspinner.hide();
+                            }, 400);
                         }
                     },
                     failure : function(tid, response) {
-                        if (originalicon) {
-                            loadingiconat.setAttribute('src', originalicon);
-                        }
-                        if (lightbox) {
-                            lightbox.hide();
+                        if (statusspinner) {
+                            statusspinner.hide();
                         }
                         new M.core.ajaxException(response);
                     }
@@ -191,9 +174,8 @@ YUI.add('moodle-course-toolboxes', function(Y) {
                 }
             }
 
-            if (loadingiconat) {
-                loadingiconat.removeAttribute('innerHTML');
-                loadingiconat.set('src', M.util.image_url(WAITICON.pix, WAITICON.component));
+            if (statusspinner) {
+                statusspinner.show();
             }
 
             // Send the request
@@ -306,12 +288,12 @@ YUI.add('moodle-course-toolboxes', function(Y) {
             groups.setAttribute('groupmode', this.GROUPS_VISIBLE);
         },
         move_left : function(e) {
-            this.move_leftright(e, -1, CSS.MOVELEFT);
+            this.move_leftright(e, -1);
         },
         move_right : function(e) {
-            this.move_leftright(e, 1, CSS.MOVERIGHT);
+            this.move_leftright(e, 1);
         },
-        move_leftright : function(e, direction, buttonselector) {
+        move_leftright : function(e, direction) {
             // Get the element we're working on
             var element = e.target.ancestor(CSS.ACTIVITYLI);
 
@@ -336,14 +318,12 @@ YUI.add('moodle-course-toolboxes', function(Y) {
                 'value' : newindent,
                 'id'    : this.get_element_id(element)
             };
-            var editbutton = element.one(buttonselector + ' img');
-            this.send_request(data, editbutton);
+            var spinner = M.util.add_spinner(Y, element.one(CSS.COMMANDSPAN));
+            this.send_request(data, spinner);
 
             // Handle removal/addition of the moveleft button
             if (newindent == 0) {
-                window.setTimeout(function(e) {
-                    element.one(CSS.MOVELEFT).remove();
-                }, 250);
+                element.one(CSS.MOVELEFT).remove();
             } else if (newindent == 1 && oldindent == 0) {
                 this.add_moveleft(element);
             }
@@ -410,7 +390,8 @@ YUI.add('moodle-course-toolboxes', function(Y) {
                 'value' : value,
                 'id'    : this.get_element_id(element)
             };
-            this.send_request(data, button.one('img'));
+            var spinner = M.util.add_spinner(Y, element.one(CSS.COMMANDSPAN));
+            this.send_request(data, spinner);
         },
         toggle_groupmode : function(e) {
             // Get the element we're working on
@@ -461,7 +442,8 @@ YUI.add('moodle-course-toolboxes', function(Y) {
                 'value' : groupmode,
                 'id'    : this.get_element_id(element)
             };
-            this.send_request(data, icon);
+            var spinner = M.util.add_spinner(Y, element.one(CSS.COMMANDSPAN));
+            this.send_request(data, spinner);
         },
         /**
          * Add the moveleft button
@@ -574,7 +556,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
             var lightbox = M.util.add_lightbox(Y, section);
             lightbox.show();
 
-            var response = this.send_request(data, null, lightbox);
+            var response = this.send_request(data, lightbox);
 
             var activities = section.all(CSS.ACTIVITYLI);
             activities.each(function(node) {
@@ -642,7 +624,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
             };
             var lightbox = M.util.add_lightbox(Y, section);
             lightbox.show();
-            this.send_request(data, null, lightbox);
+            this.send_request(data, lightbox);
         }
     }, {
         NAME : 'course-section-toolbox',

lib/javascript-static.js

@@ -833,6 +833,31 @@ M.util.add_lightbox = function(Y, node) {
     return lightbox;
 }
 
+/**
+ * Appends a hidden spinner element to the specified node.
+ *
+ * @param {YUI} Y
+ * @param {Node} the node the spinner should be added to
+ * @return {Node} created spinner node
+ */
+M.util.add_spinner = function(Y, node) {
+    var WAITICON = {'pix':"i/loading_small",'component':'moodle'};
+
+    // Check if spinner is already there
+    if (node.one('.spinner')) {
+        return node.one('.spinner');
+    }
+
+    var spinner = Y.Node.create('<img />')
+        .setAttribute('src', M.util.image_url(WAITICON.pix, WAITICON.component))
+        .addClass('spinner')
+        .addClass('iconsmall')
+        .hide();
+
+    node.append(spinner);
+    return spinner;
+}
+
 //=== old legacy JS code, hopefully to be replaced soon by M.xx.yy and YUI3 code ===
 
 function checkall() {

lib/yui/dragdrop/dragdrop.js

@@ -1,6 +1,5 @@
 YUI.add('moodle-core-dragdrop', function(Y) {
-    var MOVEICON = {'pix':"i/move_2d",'component':'moodle'},
-    WAITICON = {'pix':"i/loading_small",'component':'moodle'};
+    var MOVEICON = {'pix':"i/move_2d",'component':'moodle'};
 
    /*
     * General DRAGDROP class, this should not be used directly,
@@ -50,22 +49,12 @@ YUI.add('moodle-core-dragdrop', function(Y) {
         },
 
         lock_drag_handle: function(drag, classname) {
-            // Disable dragging and change styles to reflect the change
+            // Disable dragging
             drag.removeHandle('.'+classname);
-            var dragnode = drag.get('node');
-            var handlenode = dragnode.one('.'+classname)
-                .setStyle('cursor', 'auto');
-            handlenode.one('img')
-                .set('src', M.util.image_url(WAITICON.pix, WAITICON.component));
         },
 
         unlock_drag_handle: function(drag, classname) {
-            // Enable dragging and change styles to normal
-            var dragnode = drag.get('node');
-            var handlenode = dragnode.one('.'+classname)
-                .setStyle('cursor', 'move');
-            handlenode.one('img')
-                .setAttribute('src', M.util.image_url(MOVEICON.pix, MOVEICON.component));
+            // Enable dragging
             drag.addHandle('.'+classname);
         },