Permalink
Browse files

MDL-34328: course resource "toolboxes" - performance rewrite

Use YUI event delegation to handle events in course resource "toolboxes" (sets of editing icons) rather than attaching event handlers to each individual button we care about.  Don't waste time setting the CSS cursor to what it already is, use .all() rather than replace_button() if we just need the node.

Section toolboxes could probably also be done this way to some extent, but the payoff may not be worth the effort - they're so minimal that they don't tend to cause issues.
  • Loading branch information...
1 parent 99cd723 commit e4db46b4d9130dc4f8c757b4e2e489ae507e35c8 @pauln pauln committed with andrewnicols Aug 24, 2012
Showing with 22 additions and 20 deletions.
  1. +22 −20 course/yui/toolboxes/toolboxes.js
View
42 course/yui/toolboxes/toolboxes.js
@@ -241,6 +241,17 @@ YUI.add('moodle-course-toolboxes', function(Y) {
initializer : function(config) {
this.setup_for_resource();
M.course.coursebase.register_module(this);
+
+ var prefix = CSS.ACTIVITYLI + ' ' + CSS.COMMANDSPAN + ' ';
+ Y.delegate('click', this.edit_resource_title, CSS.PAGECONTENT, prefix + CSS.EDITTITLE, this);
+ Y.delegate('click', this.move_left, CSS.PAGECONTENT, prefix + CSS.MOVELEFT, this);
+ Y.delegate('click', this.move_right, CSS.PAGECONTENT, prefix + CSS.MOVERIGHT, this);
+ Y.delegate('click', this.delete_resource, CSS.PAGECONTENT, prefix + CSS.DELETE, this);
+ Y.delegate('click', this.toggle_hide_resource, CSS.PAGECONTENT, prefix + CSS.HIDE, this);
+ Y.delegate('click', this.toggle_hide_resource, CSS.PAGECONTENT, prefix + CSS.SHOW, this);
+ Y.delegate('click', this.toggle_groupmode, CSS.PAGECONTENT, prefix + CSS.GROUPSNONE, this);
+ Y.delegate('click', this.toggle_groupmode, CSS.PAGECONTENT, prefix + CSS.GROUPSSEPARATE, this);
+ Y.delegate('click', this.toggle_groupmode, CSS.PAGECONTENT, prefix + CSS.GROUPSVISIBLE, this);
},
/**
@@ -252,43 +263,32 @@ YUI.add('moodle-course-toolboxes', function(Y) {
*/
setup_for_resource : function(baseselector) {
if (!baseselector) {
- var baseselector = CSS.PAGECONTENT + ' ' + CSS.ACTIVITYLI;;
+ var baseselector = CSS.PAGECONTENT + ' ' + CSS.ACTIVITYLI;
}
Y.all(baseselector).each(this._setup_for_resource, this);
},
_setup_for_resource : function(toolboxtarget) {
- // Edit Title
- this.replace_button(toolboxtarget, CSS.COMMANDSPAN + ' ' + CSS.EDITTITLE, this.edit_resource_title);
-
- // Move left and right
- this.replace_button(toolboxtarget, CSS.COMMANDSPAN + ' ' + CSS.MOVELEFT, this.move_left);
- this.replace_button(toolboxtarget, CSS.COMMANDSPAN + ' ' + CSS.MOVERIGHT, this.move_right);
-
- // Delete
- this.replace_button(toolboxtarget, CSS.COMMANDSPAN + ' ' + CSS.DELETE, this.delete_resource);
-
- // Show/Hide
- var showhide = this.replace_button(toolboxtarget, CSS.COMMANDSPAN + ' ' + CSS.HIDE, this.toggle_hide_resource);
- var shown = this.replace_button(toolboxtarget, CSS.COMMANDSPAN + ' ' + CSS.SHOW, this.toggle_hide_resource);
-
- showhide = showhide.concat(shown);
+ toolboxtarget = Y.one(toolboxtarget);
+ // "Disable" show/hide icons (change cursor to not look clickable) if section is hidden
+ var showhide = toolboxtarget.all(CSS.COMMANDSPAN + ' ' + CSS.HIDE);
+ showhide.concat(toolboxtarget.all(CSS.COMMANDSPAN + ' ' + CSS.SHOW));
showhide.each(function(node) {
var section = node.ancestor(CSS.SECTIONLI);
if (section && section.hasClass(CSS.SECTIONHIDDENCLASS)) {
node.setStyle('cursor', 'auto');
}
});
- // Change Group Mode
+ // Set groupmode attribute for use by this.toggle_groupmode()
var groups;
- groups = this.replace_button(toolboxtarget, CSS.COMMANDSPAN + ' ' + CSS.GROUPSNONE, this.toggle_groupmode);
+ groups = toolboxtarget.all(CSS.COMMANDSPAN + ' ' + CSS.GROUPSNONE);
groups.setAttribute('groupmode', this.GROUPS_NONE);
- groups = this.replace_button(toolboxtarget, CSS.COMMANDSPAN + ' ' + CSS.GROUPSSEPARATE, this.toggle_groupmode);
+ groups = toolboxtarget.all(CSS.COMMANDSPAN + ' ' + CSS.GROUPSSEPARATE);
groups.setAttribute('groupmode', this.GROUPS_SEPARATE);
- groups = this.replace_button(toolboxtarget, CSS.COMMANDSPAN + ' ' + CSS.GROUPSVISIBLE, this.toggle_groupmode);
+ groups = toolboxtarget.all(CSS.COMMANDSPAN + ' ' + CSS.GROUPSVISIBLE);
groups.setAttribute('groupmode', this.GROUPS_VISIBLE);
},
move_left : function(e) {
@@ -405,6 +405,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
};
var spinner = M.util.add_spinner(Y, element.one(CSS.SPINNERCOMMANDSPAN));
this.send_request(data, spinner);
+ return false; // Need to return false to stop the delegate for the new state firing
},
toggle_groupmode : function(e) {
// Prevent the default button action
@@ -460,6 +461,7 @@ YUI.add('moodle-course-toolboxes', function(Y) {
};
var spinner = M.util.add_spinner(Y, element.one(CSS.SPINNERCOMMANDSPAN));
this.send_request(data, spinner);
+ return false; // Need to return false to stop the delegate for the new state firing
},
/**
* Add the moveleft button

0 comments on commit e4db46b

Please sign in to comment.