MDL-40759 dragdrop: Use a pix icon renderer for drag handles.

This commit is contained in:
Damyon Wiese 2016-12-20 15:19:14 +08:00
parent d3d2f09cef
commit e6bf10c772
21 changed files with 70 additions and 100 deletions

View File

@ -28,8 +28,6 @@ Y.extend(DRAGREORDER, M.core.dragdrop, {
this.samenodeclass = args.sameNodeClass;
this.parentnodeclass = args.parentNodeClass;
this.draghandleinsertclass = args.dragHandleInsertClass;
this.draghandle = this.get_drag_handle(args.dragHandleText,
CSS.EDITINGMOVE, CSS.ICONCLASS, true);
this.samenodelabel = args.sameNodeLabel;
this.parentnodelabel = args.parentNodeLabel;
@ -49,7 +47,8 @@ Y.extend(DRAGREORDER, M.core.dragdrop, {
.all('.' + args.dragHandleInsertClass)
.each(
function(node) {
node.insert(this.draghandle.cloneNode(true));
var draghandle = this.get_drag_handle(args.dragHandleText, CSS.EDITINGMOVE, CSS.ICONCLASS, true);
node.insert(draghandle);
}, this);
},

View File

@ -1 +1 @@
YUI.add("moodle-tool_lp-dragdrop-reorder",function(e,t){var n=function(){n.superclass.constructor.apply(this,arguments)},r={EDITINGMOVE:"editing_move",ICONCLASS:"iconsmall"};e.extend(n,M.core.dragdrop,{initializer:function(t){if(e.one("."+t.parentNodeClass).all("."+t.dragHandleInsertClass).size()<=1)return;this.groups=[t.group],this.samenodeclass=t.sameNodeClass,this.parentnodeclass=t.parentNodeClass,this.draghandleinsertclass=t.dragHandleInsertClass,this.draghandle=this.get_drag_handle(t.dragHandleText,r.EDITINGMOVE,r.ICONCLASS,!0),this.samenodelabel=t.sameNodeLabel,this.parentnodelabel=t.parentNodeLabel,this.callback=t.callback;var n=new e.DD.Delegate({container:"."+t.parentNodeClass,nodes:"."+t.sameNodeClass,target:!0,handles:["."+r.EDITINGMOVE],dragConfig:{groups:this.groups}});n.dd.plug(e.Plugin.DDProxy),e.one("."+t.parentNodeClass).all("."+t.dragHandleInsertClass).each(function(e){e.insert(this.draghandle.cloneNode(!0))},this)},drop_hit:function(e){this.callback(e)}},{NAME:"tool_lp-dragdrop-reorder",ATTRS:{}}),M.tool_lp=M.tool_lp||{},M.tool_lp.dragdrop_reorder=function(e){return new n(e)}},"@VERSION@",{requires:["moodle-core-dragdrop"]});
YUI.add("moodle-tool_lp-dragdrop-reorder",function(e,t){var n=function(){n.superclass.constructor.apply(this,arguments)},r={EDITINGMOVE:"editing_move",ICONCLASS:"iconsmall"};e.extend(n,M.core.dragdrop,{initializer:function(t){if(e.one("."+t.parentNodeClass).all("."+t.dragHandleInsertClass).size()<=1)return;this.groups=[t.group],this.samenodeclass=t.sameNodeClass,this.parentnodeclass=t.parentNodeClass,this.draghandleinsertclass=t.dragHandleInsertClass,this.samenodelabel=t.sameNodeLabel,this.parentnodelabel=t.parentNodeLabel,this.callback=t.callback;var n=new e.DD.Delegate({container:"."+t.parentNodeClass,nodes:"."+t.sameNodeClass,target:!0,handles:["."+r.EDITINGMOVE],dragConfig:{groups:this.groups}});n.dd.plug(e.Plugin.DDProxy),e.one("."+t.parentNodeClass).all("."+t.dragHandleInsertClass).each(function(e){var n=this.get_drag_handle(t.dragHandleText,r.EDITINGMOVE,r.ICONCLASS,!0);e.insert(n)},this)},drop_hit:function(e){this.callback(e)}},{NAME:"tool_lp-dragdrop-reorder",ATTRS:{}}),M.tool_lp=M.tool_lp||{},M.tool_lp.dragdrop_reorder=function(e){return new n(e)}},"@VERSION@",{requires:["moodle-core-dragdrop"]});

View File

@ -28,8 +28,6 @@ Y.extend(DRAGREORDER, M.core.dragdrop, {
this.samenodeclass = args.sameNodeClass;
this.parentnodeclass = args.parentNodeClass;
this.draghandleinsertclass = args.dragHandleInsertClass;
this.draghandle = this.get_drag_handle(args.dragHandleText,
CSS.EDITINGMOVE, CSS.ICONCLASS, true);
this.samenodelabel = args.sameNodeLabel;
this.parentnodelabel = args.parentNodeLabel;
@ -49,7 +47,8 @@ Y.extend(DRAGREORDER, M.core.dragdrop, {
.all('.' + args.dragHandleInsertClass)
.each(
function(node) {
node.insert(this.draghandle.cloneNode(true));
var draghandle = this.get_drag_handle(args.dragHandleText, CSS.EDITINGMOVE, CSS.ICONCLASS, true);
node.insert(draghandle);
}, this);
},

View File

@ -26,8 +26,6 @@ Y.extend(DRAGREORDER, M.core.dragdrop, {
this.samenodeclass = args.sameNodeClass;
this.parentnodeclass = args.parentNodeClass;
this.draghandleinsertclass = args.dragHandleInsertClass;
this.draghandle = this.get_drag_handle(args.dragHandleText,
CSS.EDITINGMOVE, CSS.ICONCLASS, true);
this.samenodelabel = args.sameNodeLabel;
this.parentnodelabel = args.parentNodeLabel;
@ -47,7 +45,8 @@ Y.extend(DRAGREORDER, M.core.dragdrop, {
.all('.' + args.dragHandleInsertClass)
.each(
function(node) {
node.insert(this.draghandle.cloneNode(true));
var draghandle = this.get_drag_handle(args.dragHandleText, CSS.EDITINGMOVE, CSS.ICONCLASS, true);
node.insert(draghandle);
}, this);
},

View File

@ -329,8 +329,6 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
this.groups = ['resource'];
this.samenodeclass = CSS.ACTIVITY;
this.parentnodeclass = CSS.SECTION;
this.resourcedraghandle = this.get_drag_handle(M.util.get_string('movecoursemodule', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true);
this.samenodelabel = {
identifier: 'afterresource',
@ -424,7 +422,8 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
var move = resourcesnode.one('a.' + CSS.EDITINGMOVE);
if (move) {
var sr = move.getData('sr');
move.replace(this.resourcedraghandle.cloneNode(true).setAttribute('data-sectionreturn', sr));
move.replace(this.get_drag_handle(M.util.get_string('movecoursemodule', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true).setAttribute('data-sectionreturn', sr));
}
}, this);
},

File diff suppressed because one or more lines are too long

View File

@ -325,8 +325,6 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
this.groups = ['resource'];
this.samenodeclass = CSS.ACTIVITY;
this.parentnodeclass = CSS.SECTION;
this.resourcedraghandle = this.get_drag_handle(M.util.get_string('movecoursemodule', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true);
this.samenodelabel = {
identifier: 'afterresource',
@ -420,7 +418,8 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
var move = resourcesnode.one('a.' + CSS.EDITINGMOVE);
if (move) {
var sr = move.getData('sr');
move.replace(this.resourcedraghandle.cloneNode(true).setAttribute('data-sectionreturn', sr));
move.replace(this.get_drag_handle(M.util.get_string('movecoursemodule', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true).setAttribute('data-sectionreturn', sr));
}
}, this);
},

View File

@ -14,8 +14,6 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
this.groups = ['resource'];
this.samenodeclass = CSS.ACTIVITY;
this.parentnodeclass = CSS.SECTION;
this.resourcedraghandle = this.get_drag_handle(M.util.get_string('movecoursemodule', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true);
this.samenodelabel = {
identifier: 'afterresource',
@ -109,7 +107,8 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
var move = resourcesnode.one('a.' + CSS.EDITINGMOVE);
if (move) {
var sr = move.getData('sr');
move.replace(this.resourcedraghandle.cloneNode(true).setAttribute('data-sectionreturn', sr));
move.replace(this.get_drag_handle(M.util.get_string('movecoursemodule', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true).setAttribute('data-sectionreturn', sr));
}
}, this);
},

View File

@ -897,13 +897,10 @@ BLOCKREGION.prototype = {
* @method change_block_move_icons
*/
change_block_move_icons: function(manager) {
var handle, icon;
var handle;
this.get('node').all('.' + CSS.BLOCK + ' a.' + CSS.EDITINGMOVE).each(function(moveicon) {
moveicon.setStyle('cursor', 'move');
handle = manager.get_drag_handle(moveicon.getAttribute('title'), '', 'icon', true);
icon = handle.one('img');
icon.addClass('iconsmall');
icon.removeClass('icon');
moveicon.replace(handle);
});
},

File diff suppressed because one or more lines are too long

View File

@ -890,13 +890,10 @@ BLOCKREGION.prototype = {
* @method change_block_move_icons
*/
change_block_move_icons: function(manager) {
var handle, icon;
var handle;
this.get('node').all('.' + CSS.BLOCK + ' a.' + CSS.EDITINGMOVE).each(function(moveicon) {
moveicon.setStyle('cursor', 'move');
handle = manager.get_drag_handle(moveicon.getAttribute('title'), '', 'icon', true);
icon = handle.one('img');
icon.addClass('iconsmall');
icon.removeClass('icon');
moveicon.replace(handle);
});
},

View File

@ -144,6 +144,7 @@ Y.extend(DRAGDROP, Y.Base, {
// Make the accessible drag/drop respond to a single click.
this.listeners.push(Y.one(Y.config.doc.body).delegate('click', this.global_keydown,
'.' + MOVEICON.cssclass, this));
},
/**
@ -163,25 +164,10 @@ Y.extend(DRAGDROP, Y.Base, {
* @param {String} title The title on the drag handle
* @param {String} classname The name of the class to add to the node
* wrapping the drag icon
* @param {String} [iconclass] The class to add to the icon
* @param {Boolean} [large=false] whether to use the larger version of
* the drag icon
* @param {String} iconclass Additional class to add to the icon.
* @return Node The built drag handle.
*/
get_drag_handle: function(title, classname, iconclass, large) {
var iconname = MOVEICON.pix;
if (large) {
iconname = MOVEICON.largepix;
}
var dragicon = Y.Node.create('<img />')
.setStyle('cursor', 'move')
.setAttrs({
'src': M.util.image_url(iconname, MOVEICON.component),
'alt': title
});
if (iconclass) {
dragicon.addClass(iconclass);
}
get_drag_handle: function(title, classname, iconclass) {
var dragelement = Y.Node.create('<span></span>')
.addClass(classname)
@ -189,9 +175,17 @@ Y.extend(DRAGDROP, Y.Base, {
.setAttribute('tabIndex', 0)
.setAttribute('data-draggroups', this.groups)
.setAttribute('role', 'button');
dragelement.appendChild(dragicon);
dragelement.addClass(MOVEICON.cssclass);
window.require(['core/templates'], function(Templates) {
var dragicon = Y.Node.create(Templates.renderPix('i/move_2d', 'core'));
dragicon.addClass('moodle-core-dragdrop-draghandle').setStyle('cursor', 'move');
if (typeof iconclass != 'undefined') {
dragicon.addClass(iconclass);
}
dragelement.appendChild(dragicon);
}.bind(this));
return dragelement;
},

File diff suppressed because one or more lines are too long

View File

@ -144,6 +144,7 @@ Y.extend(DRAGDROP, Y.Base, {
// Make the accessible drag/drop respond to a single click.
this.listeners.push(Y.one(Y.config.doc.body).delegate('click', this.global_keydown,
'.' + MOVEICON.cssclass, this));
},
/**
@ -163,25 +164,10 @@ Y.extend(DRAGDROP, Y.Base, {
* @param {String} title The title on the drag handle
* @param {String} classname The name of the class to add to the node
* wrapping the drag icon
* @param {String} [iconclass] The class to add to the icon
* @param {Boolean} [large=false] whether to use the larger version of
* the drag icon
* @param {String} iconclass Additional class to add to the icon.
* @return Node The built drag handle.
*/
get_drag_handle: function(title, classname, iconclass, large) {
var iconname = MOVEICON.pix;
if (large) {
iconname = MOVEICON.largepix;
}
var dragicon = Y.Node.create('<img />')
.setStyle('cursor', 'move')
.setAttrs({
'src': M.util.image_url(iconname, MOVEICON.component),
'alt': title
});
if (iconclass) {
dragicon.addClass(iconclass);
}
get_drag_handle: function(title, classname, iconclass) {
var dragelement = Y.Node.create('<span></span>')
.addClass(classname)
@ -189,9 +175,17 @@ Y.extend(DRAGDROP, Y.Base, {
.setAttribute('tabIndex', 0)
.setAttribute('data-draggroups', this.groups)
.setAttribute('role', 'button');
dragelement.appendChild(dragicon);
dragelement.addClass(MOVEICON.cssclass);
window.require(['core/templates'], function(Templates) {
var dragicon = Y.Node.create(Templates.renderPix('i/move_2d', 'core'));
dragicon.addClass('moodle-core-dragdrop-draghandle').setStyle('cursor', 'move');
if (typeof iconclass != 'undefined') {
dragicon.addClass(iconclass);
}
dragelement.appendChild(dragicon);
}.bind(this));
return dragelement;
},

View File

@ -98,13 +98,10 @@ BLOCKREGION.prototype = {
* @method change_block_move_icons
*/
change_block_move_icons: function(manager) {
var handle, icon;
var handle;
this.get('node').all('.' + CSS.BLOCK + ' a.' + CSS.EDITINGMOVE).each(function(moveicon) {
moveicon.setStyle('cursor', 'move');
handle = manager.get_drag_handle(moveicon.getAttribute('title'), '', 'icon', true);
icon = handle.one('img');
icon.addClass('iconsmall');
icon.removeClass('icon');
moveicon.replace(handle);
});
},

View File

@ -142,6 +142,7 @@ Y.extend(DRAGDROP, Y.Base, {
// Make the accessible drag/drop respond to a single click.
this.listeners.push(Y.one(Y.config.doc.body).delegate('click', this.global_keydown,
'.' + MOVEICON.cssclass, this));
},
/**
@ -161,25 +162,10 @@ Y.extend(DRAGDROP, Y.Base, {
* @param {String} title The title on the drag handle
* @param {String} classname The name of the class to add to the node
* wrapping the drag icon
* @param {String} [iconclass] The class to add to the icon
* @param {Boolean} [large=false] whether to use the larger version of
* the drag icon
* @param {String} iconclass Additional class to add to the icon.
* @return Node The built drag handle.
*/
get_drag_handle: function(title, classname, iconclass, large) {
var iconname = MOVEICON.pix;
if (large) {
iconname = MOVEICON.largepix;
}
var dragicon = Y.Node.create('<img />')
.setStyle('cursor', 'move')
.setAttrs({
'src': M.util.image_url(iconname, MOVEICON.component),
'alt': title
});
if (iconclass) {
dragicon.addClass(iconclass);
}
get_drag_handle: function(title, classname, iconclass) {
var dragelement = Y.Node.create('<span></span>')
.addClass(classname)
@ -187,9 +173,17 @@ Y.extend(DRAGDROP, Y.Base, {
.setAttribute('tabIndex', 0)
.setAttribute('data-draggroups', this.groups)
.setAttribute('role', 'button');
dragelement.appendChild(dragicon);
dragelement.addClass(MOVEICON.cssclass);
window.require(['core/templates'], function(Templates) {
var dragicon = Y.Node.create(Templates.renderPix('i/move_2d', 'core'));
dragicon.addClass('moodle-core-dragdrop-draghandle').setStyle('cursor', 'move');
if (typeof iconclass != 'undefined') {
dragicon.addClass(iconclass);
}
dragelement.appendChild(dragicon);
}.bind(this));
return dragelement;
},

View File

@ -22,13 +22,13 @@ YUI.add('moodle-mod_feedback-dragdrop', function(Y) {
var groups = ['feedbackitem'];
handletitle = M.util.get_string('move_item', 'feedback');
this.mydraghandle = this.get_drag_handle(handletitle, CSS.DRAGHANDLE, 'icon');
//Get the list of li's in the lists and add the drag handle.
basenode = Y.Node.one(CSS.DRAGLIST);
listitems = basenode.all(CSS.DRAGITEM).each(function(v) {
var item_id = this.get_node_id(v.get('id')); //Get the id of the feedback item.
v.append(this.mydraghandle.cloneNode(true)); // Insert the new handle into the item box.
var mydraghandle = this.get_drag_handle(handletitle, CSS.DRAGHANDLE, 'icon');
v.append(mydraghandle); // Insert the new handle into the item box.
}, this);
//We use a delegate to make all items draggable

View File

@ -316,7 +316,6 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
this.groups = ['resource'];
this.samenodeclass = CSS.ACTIVITY;
this.parentnodeclass = CSS.SECTION;
this.resourcedraghandle = this.get_drag_handle(M.util.get_string('move', 'moodle'), CSS.EDITINGMOVE, CSS.ICONCLASS, true);
this.samenodelabel = {
identifier: 'dragtoafter',
@ -386,7 +385,9 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
// Replace move icons
var move = resourcesnode.one('a.' + CSS.EDITINGMOVE);
if (move) {
move.replace(this.resourcedraghandle.cloneNode(true));
var resourcedraghandle = this.get_drag_handle(M.util.get_string('move', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true);
move.replace(resourcedraghandle);
}
}, this);
},

File diff suppressed because one or more lines are too long

View File

@ -310,7 +310,6 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
this.groups = ['resource'];
this.samenodeclass = CSS.ACTIVITY;
this.parentnodeclass = CSS.SECTION;
this.resourcedraghandle = this.get_drag_handle(M.util.get_string('move', 'moodle'), CSS.EDITINGMOVE, CSS.ICONCLASS, true);
this.samenodelabel = {
identifier: 'dragtoafter',
@ -380,7 +379,9 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
// Replace move icons
var move = resourcesnode.one('a.' + CSS.EDITINGMOVE);
if (move) {
move.replace(this.resourcedraghandle.cloneNode(true));
var resourcedraghandle = this.get_drag_handle(M.util.get_string('move', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true);
move.replace(resourcedraghandle);
}
}, this);
},

View File

@ -15,7 +15,6 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
this.groups = ['resource'];
this.samenodeclass = CSS.ACTIVITY;
this.parentnodeclass = CSS.SECTION;
this.resourcedraghandle = this.get_drag_handle(M.util.get_string('move', 'moodle'), CSS.EDITINGMOVE, CSS.ICONCLASS, true);
this.samenodelabel = {
identifier: 'dragtoafter',
@ -85,7 +84,9 @@ Y.extend(DRAGRESOURCE, M.core.dragdrop, {
// Replace move icons
var move = resourcesnode.one('a.' + CSS.EDITINGMOVE);
if (move) {
move.replace(this.resourcedraghandle.cloneNode(true));
var resourcedraghandle = this.get_drag_handle(M.util.get_string('move', 'moodle'),
CSS.EDITINGMOVE, CSS.ICONCLASS, true);
move.replace(resourcedraghandle);
}
}, this);
},