diff --git a/course/yui/dragdrop/dragdrop.js b/course/yui/dragdrop/dragdrop.js index 595252d0c77..ddedece2101 100644 --- a/course/yui/dragdrop/dragdrop.js +++ b/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 } }, diff --git a/course/yui/toolboxes/toolboxes.js b/course/yui/toolboxes/toolboxes.js index 20d70c517d0..ddfd78cfe02 100644 --- a/course/yui/toolboxes/toolboxes.js +++ b/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', diff --git a/lib/javascript-static.js b/lib/javascript-static.js index f2666474058..28820888898 100644 --- a/lib/javascript-static.js +++ b/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('') + .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() { diff --git a/lib/yui/dragdrop/dragdrop.js b/lib/yui/dragdrop/dragdrop.js index 1e9ac86f9e0..930f60042f3 100644 --- a/lib/yui/dragdrop/dragdrop.js +++ b/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); },