From d2ce925279aceaff0458a7c0b7fcc35115bdfb5d Mon Sep 17 00:00:00 2001
From: Paul Nicholls <paul.nicholls@canterbury.ac.nz>
Date: Fri, 24 Aug 2012 15:23:03 +1200
Subject: [PATCH] MDL-34328: course dragdrop - performance rewrite

Use YUI's DragDrop delegates for course dragdrop, rather than initialising a Drag object for each individual section and each individual activity/resource.  Also, clone a single drag handle for activities/resources, rather than repeatedly creating a whole new one with the same parameters for each activity/resource.
---
 course/yui/dragdrop/dragdrop.js | 87 +++++++++++++++++++--------------
 1 file changed, 49 insertions(+), 38 deletions(-)

diff --git a/course/yui/dragdrop/dragdrop.js b/course/yui/dragdrop/dragdrop.js
index 431408d1ae1..fc93fbed48b 100644
--- a/course/yui/dragdrop/dragdrop.js
+++ b/course/yui/dragdrop/dragdrop.js
@@ -41,6 +41,26 @@ YUI.add('moodle-course-dragdrop', function(Y) {
             if (this.sectionlistselector) {
                 this.sectionlistselector = '.'+CSS.COURSECONTENT+' '+this.sectionlistselector;
                 this.setup_for_section(this.sectionlistselector);
+
+                // Make each li element in the lists of sections draggable
+                var nodeselector = this.sectionlistselector.slice(CSS.COURSECONTENT.length+2);
+                var del = new Y.DD.Delegate({
+                    container: '.'+CSS.COURSECONTENT,
+                    nodes: nodeselector,
+                    target: true,
+                    handles: ['.'+CSS.LEFT],
+                    dragConfig: {groups: this.groups}
+                });
+                del.dd.plug(Y.Plugin.DDProxy, {
+                    // Don't move the node at the end of the drag
+                    moveOnEnd: false
+                });
+                del.dd.plug(Y.Plugin.DDConstrained, {
+                    // Keep it inside the .course-content
+                    constrain: '#'+CSS.PAGECONTENT,
+                    stickY: true
+                });
+                del.dd.plug(Y.Plugin.DDWinScroll);
             }
         },
 
@@ -76,22 +96,6 @@ YUI.add('moodle-course-dragdrop', function(Y) {
                         if (movedown) {
                             movedown.remove();
                         }
-
-                        // Make each li element in the lists of sections draggable
-                        var dd = new Y.DD.Drag({
-                            node: sectionnode,
-                            // Make each li a Drop target too
-                            groups: this.groups,
-                            target: true,
-                            handles: ['.'+CSS.LEFT]
-                        }).plug(Y.Plugin.DDProxy, {
-                            // Don't move the node at the end of the drag
-                            moveOnEnd: false
-                        }).plug(Y.Plugin.DDConstrained, {
-                            // Keep it inside the .course-content
-                            constrain: '#'+CSS.PAGECONTENT,
-                            stickY: true
-                        }).plug(Y.Plugin.DDWinScroll);
                     }
                 }
             }, this);
@@ -244,12 +248,33 @@ YUI.add('moodle-course-dragdrop', function(Y) {
             this.groups = ['resource'];
             this.samenodeclass = CSS.ACTIVITY;
             this.parentnodeclass = CSS.SECTION;
+            this.resourcedraghandle = this.get_drag_handle(M.str.moodle.move, CSS.EDITINGMOVE, CSS.ICONCLASS);
 
             // Go through all sections
             var sectionlistselector = M.course.format.get_section_selector(Y);
             if (sectionlistselector) {
                 sectionlistselector = '.'+CSS.COURSECONTENT+' '+sectionlistselector;
                 this.setup_for_section(sectionlistselector);
+
+                // Initialise drag & drop for all resources/activities
+                var nodeselector = sectionlistselector.slice(CSS.COURSECONTENT.length+2)+' li.'+CSS.ACTIVITY;
+                var del = new Y.DD.Delegate({
+                    container: '.'+CSS.COURSECONTENT,
+                    nodes: nodeselector,
+                    target: true,
+                    handles: ['.' + CSS.EDITINGMOVE],
+                    dragConfig: {groups: this.groups}
+                });
+                del.dd.plug(Y.Plugin.DDProxy, {
+                    // Don't move the node at the end of the drag
+                    moveOnEnd: false
+                });
+                del.dd.plug(Y.Plugin.DDConstrained, {
+                    // Keep it inside the .course-content
+                    constrain: '#'+CSS.PAGECONTENT
+                });
+                del.dd.plug(Y.Plugin.DDWinScroll);
+
                 M.course.coursebase.register_module(this);
                 M.course.dragres = this;
             }
@@ -269,15 +294,15 @@ YUI.add('moodle-course-dragdrop', function(Y) {
                     var resources = Y.Node.create('<ul></ul>');
                     resources.addClass(CSS.SECTION);
                     sectionnode.one('.'+CSS.CONTENT+' div.'+CSS.SUMMARY).insert(resources, 'after');
+                    // Define empty ul as droptarget, so that item could be moved to empty list
+                    var tar = new Y.DD.Drop({
+                        node: resources,
+                        groups: this.groups,
+                        padding: '20 0 20 0'
+                    });
                 }
 
-                // Define each ul as droptarget, so that item could be moved to empty list
-                var tar = new Y.DD.Drop({
-                    node: resources,
-                    groups: this.groups,
-                    padding: '20 0 20 0'
-                });
-                // Go through each li element and make them draggable
+                // Initialise each resource/activity in this section
                 this.setup_for_resource('#'+sectionnode.get('id')+' li.'+CSS.ACTIVITY);
             }, this);
         },
@@ -292,21 +317,7 @@ YUI.add('moodle-course-dragdrop', function(Y) {
                 // Replace move icons
                 var move = resourcesnode.one('a.'+CSS.EDITINGMOVE);
                 if (move) {
-                    move.replace(this.get_drag_handle(M.str.moodle.move, CSS.EDITINGMOVE, CSS.ICONCLASS));
-                    // Make each li element in the lists of sections draggable
-                    var dd = new Y.DD.Drag({
-                        node: resourcesnode,
-                        groups: this.groups,
-                        // Make each li a Drop target too
-                        target: true,
-                        handles: ['.' + CSS.EDITINGMOVE]
-                    }).plug(Y.Plugin.DDProxy, {
-                        // Don't move the node at the end of the drag
-                        moveOnEnd: false
-                    }).plug(Y.Plugin.DDConstrained, {
-                        // Keep it inside the .course-content
-                        constrain: '#'+CSS.PAGECONTENT
-                    }).plug(Y.Plugin.DDWinScroll);
+                    move.replace(this.resourcedraghandle.cloneNode(true));
                 }
             }, this);
         },