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.
This commit is contained in:
Paul Nicholls
committed by
Andrew Robert Nicols
Andrew Robert Nicols
parent
415af656b2
commit
d2ce925279
Vendored
+49
-38
@@ -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);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user