From e4db46b4d9130dc4f8c757b4e2e489ae507e35c8 Mon Sep 17 00:00:00 2001
From: Paul Nicholls <paul.nicholls@canterbury.ac.nz>
Date: Fri, 24 Aug 2012 15:50:08 +1200
Subject: [PATCH] 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.
---
 course/yui/toolboxes/toolboxes.js | 42 ++++++++++++++++---------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/course/yui/toolboxes/toolboxes.js b/course/yui/toolboxes/toolboxes.js
index 024785ebf4b..321ce8c0820 100644
--- a/course/yui/toolboxes/toolboxes.js
+++ b/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,27 +263,16 @@ 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)) {
@@ -280,15 +280,15 @@ YUI.add('moodle-course-toolboxes', function(Y) {
                 }
             });
 
-            // 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