mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 00:46:50 +02:00
MDL-36990 mod_feedback - migrated the yui dragdrop stuff into a yui module
This commit is contained in:
Andreas Grabs
parent
c206a2b3fd
commit
bdd694fd85
3 changed files with 239 additions and 200 deletions
|
|
@ -160,20 +160,8 @@ $PAGE->set_title(format_string($feedback->name));
|
||||||
|
|
||||||
//Adding the javascript module for the items dragdrop.
|
//Adding the javascript module for the items dragdrop.
|
||||||
if ($do_show == 'edit') {
|
if ($do_show == 'edit') {
|
||||||
$jsmodule = array(
|
$PAGE->requires->yui_module('moodle-mod_feedback-dragdrop', 'M.mod_feedback.init_dragdrop',
|
||||||
'name' => 'mod_feedback',
|
array(array('cmid' => $cm->id)));
|
||||||
'fullpath' => '/mod/feedback/module.js',
|
|
||||||
'requires' => array('io', 'json-parse', 'dd-constrain', 'dd-proxy', 'dd-drop'),
|
|
||||||
'strings' => array(array('pluginname', 'feedback'),
|
|
||||||
array('move_item', 'feedback'),
|
|
||||||
array('position', 'feedback'))
|
|
||||||
);
|
|
||||||
|
|
||||||
$ajaxscript = $CFG->httpswwwroot.'/mod/feedback/ajax.php';
|
|
||||||
$PAGE->requires->js_init_call('M.mod_feedback.init', array($cm->id,
|
|
||||||
sesskey()),
|
|
||||||
false,
|
|
||||||
$jsmodule);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
echo $OUTPUT->header();
|
echo $OUTPUT->header();
|
||||||
|
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
M.mod_feedback = {};
|
|
||||||
M.mod_feedback.init = function(Y, id, sesskey) {
|
|
||||||
//Listen for all drop:over events
|
|
||||||
Y.DD.DDM.on('drop:over', function(e) {
|
|
||||||
//Get a reference to our drag and drop nodes
|
|
||||||
var drag = e.drag.get('node'),
|
|
||||||
drop = e.drop.get('node');
|
|
||||||
|
|
||||||
//Are we dropping on an li node?
|
|
||||||
if (drop.get('tagName').toLowerCase() === 'li') {
|
|
||||||
//Are we not going up?
|
|
||||||
if (!goingUp) {
|
|
||||||
drop = drop.get('nextSibling');
|
|
||||||
}
|
|
||||||
//Add the node to this list
|
|
||||||
e.drop.get('node').get('parentNode').insertBefore(drag, drop);
|
|
||||||
//Resize this nodes shim, so we can drop on it later.
|
|
||||||
e.drop.sizeShim();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//Listen for all drag:drag events
|
|
||||||
Y.DD.DDM.on('drag:drag', function(e) {
|
|
||||||
//Get the last y point
|
|
||||||
var y = e.target.lastXY[1];
|
|
||||||
//Is it greater than the lastY var?
|
|
||||||
if (y < lastY) {
|
|
||||||
//We are going up
|
|
||||||
goingUp = true;
|
|
||||||
} else {
|
|
||||||
//We are going down.
|
|
||||||
goingUp = false;
|
|
||||||
}
|
|
||||||
//Cache for next check
|
|
||||||
lastY = y;
|
|
||||||
});
|
|
||||||
//Listen for all drag:start events
|
|
||||||
Y.DD.DDM.on('drag:start', function(e) {
|
|
||||||
//Get our drag object
|
|
||||||
var drag = e.target;
|
|
||||||
//Set some styles here
|
|
||||||
drag.get('node').setStyle('opacity', '.25');
|
|
||||||
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
|
|
||||||
drag.get('dragNode').setStyles({
|
|
||||||
opacity: '.5',
|
|
||||||
borderColor: drag.get('node').getStyle('borderColor'),
|
|
||||||
backgroundColor: drag.get('node').getStyle('backgroundColor')
|
|
||||||
});
|
|
||||||
});
|
|
||||||
//Listen for a drag:end events
|
|
||||||
Y.DD.DDM.on('drag:end', function(e) {
|
|
||||||
var drag = e.target;
|
|
||||||
//Put our styles back
|
|
||||||
drag.get('node').setStyles({
|
|
||||||
visibility: '',
|
|
||||||
opacity: '1'
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
//Listen for all drag:drophit events
|
|
||||||
Y.DD.DDM.on('drag:drophit', function(e) {
|
|
||||||
var drop = e.drop.get('node'),
|
|
||||||
drag = e.drag.get('node');
|
|
||||||
dragnode = Y.one(drag);
|
|
||||||
//If we are not on an li, we must have been dropped on a ul.
|
|
||||||
if (drop.get('tagName').toLowerCase() !== 'li') {
|
|
||||||
if (!drop.contains(drag)) {
|
|
||||||
drop.appendChild(drag);
|
|
||||||
}
|
|
||||||
myElements = '';
|
|
||||||
counter = 1;
|
|
||||||
drop.get('children').each(function(v, k) {
|
|
||||||
poslabeltext = '(' + M.util.get_string('position', 'feedback') + ':' + counter + ')';
|
|
||||||
poslabel = v.one('.feedback_item_commands.position');
|
|
||||||
poslabel.setHTML(poslabeltext);
|
|
||||||
myElements = myElements + ',' + get_node_id(v.get('id'));
|
|
||||||
counter++;
|
|
||||||
});
|
|
||||||
var spinner = M.util.add_spinner(Y, dragnode);
|
|
||||||
saveposition(Y, this, id, myElements, sesskey, spinner);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//Static Vars
|
|
||||||
var goingUp = false, lastY = 0;
|
|
||||||
|
|
||||||
//Get the list of li's in the lists and make them draggable.
|
|
||||||
var listitems = Y.Node.all('#feedback_dragarea ul li.feedback_itemlist');
|
|
||||||
listitems.each(function(v, k) { //Make each item draggable.
|
|
||||||
var dd = new Y.DD.Drag({
|
|
||||||
node: v,
|
|
||||||
target: {
|
|
||||||
padding: '0 0 0 20'
|
|
||||||
}
|
|
||||||
}).plug(Y.Plugin.DDProxy, {
|
|
||||||
moveOnEnd: false
|
|
||||||
}).plug(Y.Plugin.DDConstrained, {
|
|
||||||
constrain2node: '#feedback_dragarea' //Prevent dragging outside the dragarea.
|
|
||||||
});
|
|
||||||
|
|
||||||
item_id = get_node_id(v.get('id')); //Get the id of the feedback item.
|
|
||||||
item_box = Y.Node.one('#feedback_item_box_' + item_id); //Get the current item box so we can add the drag handle.
|
|
||||||
handletitle = M.util.get_string('move_item', 'feedback');
|
|
||||||
mydraghandle = get_drag_handle(handletitle, 'itemhandle');
|
|
||||||
v.insert(mydraghandle, item_box); //Insert the new handle into the item box.
|
|
||||||
dd.addHandle(mydraghandle); //Now we add the handle to the drag object, so the box only can be moved with this handle.
|
|
||||||
});
|
|
||||||
// Remove all legacy move icons.
|
|
||||||
Y.Node.all('span.feedback_item_command_moveup').each(function(v, k) {
|
|
||||||
v.remove();
|
|
||||||
});;
|
|
||||||
Y.Node.all('span.feedback_item_command_movedown').each(function(v, k) {
|
|
||||||
v.remove();
|
|
||||||
});;
|
|
||||||
Y.Node.all('span.feedback_item_command_move').each(function(v, k) {
|
|
||||||
v.remove();
|
|
||||||
});;
|
|
||||||
|
|
||||||
//Create targets for drop.
|
|
||||||
var droparea = Y.Node.one('#feedback_dragarea ul#feedback_draglist');
|
|
||||||
var tar = new Y.DD.Drop({
|
|
||||||
node: droparea
|
|
||||||
});
|
|
||||||
|
|
||||||
// Here we save the new itemorder.
|
|
||||||
function saveposition(Y, objekt, id, itemorder, sesskey, spinner){
|
|
||||||
|
|
||||||
Y.io(M.cfg.wwwroot + '/mod/feedback/ajax.php', {
|
|
||||||
//The needed paramaters
|
|
||||||
data: {action: 'saveitemorder',
|
|
||||||
id: id,
|
|
||||||
itemorder: itemorder,
|
|
||||||
sesskey: sesskey
|
|
||||||
},
|
|
||||||
|
|
||||||
timeout: 5000, //5 seconds for timeout I think it is enough.
|
|
||||||
|
|
||||||
//Define the events.
|
|
||||||
on: {
|
|
||||||
start : function(transactionid) {
|
|
||||||
spinner.show();
|
|
||||||
},
|
|
||||||
success: function(transactionid, xhr) {
|
|
||||||
var response = xhr.responseText;
|
|
||||||
var ergebnis = Y.JSON.parse(response);
|
|
||||||
window.setTimeout(function(e) {
|
|
||||||
spinner.hide();
|
|
||||||
}, 250);
|
|
||||||
},
|
|
||||||
failure: function() {
|
|
||||||
window.setTimeout(function(e) {
|
|
||||||
spinner.hide();
|
|
||||||
}, 250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
//This returns the numeric id from the dom id.
|
|
||||||
function get_node_id(id) {
|
|
||||||
return Number(id.replace(/feedback_item_/i, ''));
|
|
||||||
};
|
|
||||||
|
|
||||||
//This creates a new drag handle and return it as a new node.
|
|
||||||
function get_drag_handle(title, handleclass) {
|
|
||||||
var moveicon = {
|
|
||||||
pix: "i/move_2d",
|
|
||||||
largepix: "i/dragdrop",
|
|
||||||
component: 'moodle'
|
|
||||||
};
|
|
||||||
|
|
||||||
var iconname = moveicon.largepix;
|
|
||||||
var dragicon = Y.Node.create('<img />')
|
|
||||||
.setStyle('cursor', 'move')
|
|
||||||
.setAttrs({
|
|
||||||
'src' : M.util.image_url(iconname, moveicon.component),
|
|
||||||
'alt' : title,
|
|
||||||
'class' : handleclass
|
|
||||||
});
|
|
||||||
|
|
||||||
var dragelement = Y.Node.create('<span></span>')
|
|
||||||
.setAttribute('title', title);
|
|
||||||
dragelement.appendChild(dragicon);
|
|
||||||
return dragelement;
|
|
||||||
};
|
|
||||||
|
|
||||||
};
|
|
||||||
237
mod/feedback/yui/dragdrop/dragdrop.js
vendored
Normal file
237
mod/feedback/yui/dragdrop/dragdrop.js
vendored
Normal file
|
|
@ -0,0 +1,237 @@
|
||||||
|
YUI.add('moodle-mod_feedback-dragdrop', function(Y) {
|
||||||
|
var DRAGDROPNAME = 'mod_feedback_dragdrop';
|
||||||
|
|
||||||
|
var DRAGDROP = function() {
|
||||||
|
DRAGDROP.superclass.constructor.apply(this, arguments);
|
||||||
|
};
|
||||||
|
|
||||||
|
Y.extend(DRAGDROP, Y.Base, {
|
||||||
|
|
||||||
|
event:null,
|
||||||
|
|
||||||
|
initializer : function(params) {
|
||||||
|
var cmid = params.cmid;
|
||||||
|
|
||||||
|
//Listen for all drop:over events
|
||||||
|
Y.DD.DDM.on('drop:over', function(e) {
|
||||||
|
//Get a reference to our drag and drop nodes
|
||||||
|
var drag = e.drag.get('node'),
|
||||||
|
drop = e.drop.get('node');
|
||||||
|
|
||||||
|
//Are we dropping on an li node?
|
||||||
|
if (drop.get('tagName').toLowerCase() === 'li') {
|
||||||
|
//Are we not going up?
|
||||||
|
if (!goingUp) {
|
||||||
|
drop = drop.get('nextSibling');
|
||||||
|
}
|
||||||
|
//Add the node to this list
|
||||||
|
e.drop.get('node').get('parentNode').insertBefore(drag, drop);
|
||||||
|
//Resize this nodes shim, so we can drop on it later.
|
||||||
|
e.drop.sizeShim();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//Listen for all drag:drag events
|
||||||
|
Y.DD.DDM.on('drag:drag', function(e) {
|
||||||
|
//Get the last y point
|
||||||
|
var y = e.target.lastXY[1];
|
||||||
|
//Is it greater than the lastY var?
|
||||||
|
if (y < lastY) {
|
||||||
|
//We are going up
|
||||||
|
goingUp = true;
|
||||||
|
} else {
|
||||||
|
//We are going down.
|
||||||
|
goingUp = false;
|
||||||
|
}
|
||||||
|
//Cache for next check
|
||||||
|
lastY = y;
|
||||||
|
});
|
||||||
|
//Listen for all drag:start events
|
||||||
|
Y.DD.DDM.on('drag:start', function(e) {
|
||||||
|
//Get our drag object
|
||||||
|
var drag = e.target;
|
||||||
|
//Set some styles here
|
||||||
|
drag.get('node').setStyle('opacity', '.25');
|
||||||
|
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
|
||||||
|
drag.get('dragNode').setStyles({
|
||||||
|
opacity: '.5',
|
||||||
|
borderColor: drag.get('node').getStyle('borderColor'),
|
||||||
|
backgroundColor: drag.get('node').getStyle('backgroundColor')
|
||||||
|
});
|
||||||
|
});
|
||||||
|
//Listen for a drag:end events
|
||||||
|
Y.DD.DDM.on('drag:end', function(e) {
|
||||||
|
var drag = e.target;
|
||||||
|
//Put our styles back
|
||||||
|
drag.get('node').setStyles({
|
||||||
|
visibility: '',
|
||||||
|
opacity: '1'
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
//Listen for all drag:drophit events
|
||||||
|
Y.DD.DDM.on('drag:drophit', function(e) {
|
||||||
|
var drop = e.drop.get('node'),
|
||||||
|
drag = e.drag.get('node');
|
||||||
|
dragnode = Y.one(drag);
|
||||||
|
//If we are not on an li, we must have been dropped on a ul.
|
||||||
|
if (drop.get('tagName').toLowerCase() !== 'li') {
|
||||||
|
if (!drop.contains(drag)) {
|
||||||
|
drop.appendChild(drag);
|
||||||
|
}
|
||||||
|
myElements = '';
|
||||||
|
counter = 1;
|
||||||
|
drop.get('children').each(function(v) {
|
||||||
|
poslabeltext = '(' + M.util.get_string('position', 'feedback') + ':' + counter + ')';
|
||||||
|
poslabel = v.one('.feedback_item_commands.position');
|
||||||
|
poslabel.setHTML(poslabeltext);
|
||||||
|
myElements = myElements + ',' + this.get_node_id(v.get('id'));
|
||||||
|
counter++;
|
||||||
|
}, this);
|
||||||
|
var spinner = M.util.add_spinner(Y, dragnode);
|
||||||
|
this.saveposition(cmid, myElements, spinner);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
//Static Vars
|
||||||
|
var goingUp = false, lastY = 0;
|
||||||
|
|
||||||
|
//Get the list of li's in the lists and make them draggable.
|
||||||
|
listitems = Y.Node.all('#feedback_dragarea ul li.feedback_itemlist');
|
||||||
|
|
||||||
|
listitems.each(function(v) { //Make each item draggable.
|
||||||
|
var dd = new Y.DD.Drag({
|
||||||
|
node: v,
|
||||||
|
target: {
|
||||||
|
padding: '0 0 0 20'
|
||||||
|
}
|
||||||
|
}).plug(Y.Plugin.DDProxy, {
|
||||||
|
moveOnEnd: false
|
||||||
|
}).plug(Y.Plugin.DDConstrained, {
|
||||||
|
constrain2node: '#feedback_dragarea' //Prevent dragging outside the dragarea.
|
||||||
|
});
|
||||||
|
|
||||||
|
item_id = this.get_node_id(v.get('id')); //Get the id of the feedback item.
|
||||||
|
item_box = Y.Node.one('#feedback_item_box_' + item_id); //Get the current item box so we can add the drag handle.
|
||||||
|
handletitle = M.util.get_string('move_item', 'feedback');
|
||||||
|
mydraghandle = this.get_drag_handle(handletitle, 'itemhandle');
|
||||||
|
v.insert(mydraghandle, item_box); //Insert the new handle into the item box.
|
||||||
|
dd.addHandle(mydraghandle); //Now we add the handle to the drag object, so the box only can be moved with this handle.
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
// Remove all legacy move icons.
|
||||||
|
Y.Node.all('span.feedback_item_command_moveup').each(function(v, k) {
|
||||||
|
v.remove();
|
||||||
|
});;
|
||||||
|
Y.Node.all('span.feedback_item_command_movedown').each(function(v, k) {
|
||||||
|
v.remove();
|
||||||
|
});;
|
||||||
|
Y.Node.all('span.feedback_item_command_move').each(function(v, k) {
|
||||||
|
v.remove();
|
||||||
|
});;
|
||||||
|
|
||||||
|
//Create targets for drop.
|
||||||
|
var droparea = Y.Node.one('#feedback_dragarea ul#feedback_draglist');
|
||||||
|
var tar = new Y.DD.Drop({
|
||||||
|
node: droparea
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new drag handle and return it as a new node.
|
||||||
|
*
|
||||||
|
* @param title The title of the drag icon
|
||||||
|
* @param handleclass The css class for the drag handle
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
get_drag_handle : function(title, handleclass) {
|
||||||
|
var moveicon = {
|
||||||
|
pix: "i/move_2d",
|
||||||
|
largepix: "i/dragdrop",
|
||||||
|
component: 'moodle'
|
||||||
|
};
|
||||||
|
|
||||||
|
var iconname = moveicon.largepix;
|
||||||
|
var dragicon = Y.Node.create('<img />')
|
||||||
|
.setStyle('cursor', 'move')
|
||||||
|
.setAttrs({
|
||||||
|
'src' : M.util.image_url(iconname, moveicon.component),
|
||||||
|
'alt' : title,
|
||||||
|
'class' : handleclass
|
||||||
|
});
|
||||||
|
|
||||||
|
var dragelement = Y.Node.create('<span></span>')
|
||||||
|
.setAttribute('title', title);
|
||||||
|
dragelement.appendChild(dragicon);
|
||||||
|
return dragelement;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save the new item order.
|
||||||
|
*
|
||||||
|
* @param cmid the coursemodule id
|
||||||
|
* @param itemorder A comma separated list with item ids
|
||||||
|
* @param spinner The spinner icon shown while saving
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
saveposition : function(cmid, itemorder, spinner) {
|
||||||
|
|
||||||
|
Y.io(M.cfg.wwwroot + '/mod/feedback/ajax.php', {
|
||||||
|
//The needed paramaters
|
||||||
|
data: {action: 'saveitemorder',
|
||||||
|
id: cmid,
|
||||||
|
itemorder: itemorder,
|
||||||
|
sesskey: M.cfg.sesskey
|
||||||
|
},
|
||||||
|
|
||||||
|
timeout: 5000, //5 seconds for timeout I think it is enough.
|
||||||
|
|
||||||
|
//Define the events.
|
||||||
|
on: {
|
||||||
|
start : function(transactionid) {
|
||||||
|
spinner.show();
|
||||||
|
},
|
||||||
|
success: function(transactionid, xhr) {
|
||||||
|
var response = xhr.responseText;
|
||||||
|
var ergebnis = Y.JSON.parse(response);
|
||||||
|
window.setTimeout(function(e) {
|
||||||
|
spinner.hide();
|
||||||
|
}, 250);
|
||||||
|
},
|
||||||
|
failure: function() {
|
||||||
|
window.setTimeout(function(e) {
|
||||||
|
spinner.hide();
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the numeric id from the dom id of an item.
|
||||||
|
*
|
||||||
|
* @param id The dom id, f.g.: feedback_item_22
|
||||||
|
* @return int
|
||||||
|
*/
|
||||||
|
get_node_id : function(id) {
|
||||||
|
return Number(id.replace(/feedback_item_/i, ''));
|
||||||
|
}
|
||||||
|
|
||||||
|
}, {
|
||||||
|
NAME : DRAGDROPNAME,
|
||||||
|
ATTRS : {
|
||||||
|
cmid : {
|
||||||
|
value : 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
M.mod_feedback = M.mod_feedback || {};
|
||||||
|
M.mod_feedback.init_dragdrop = function(params) {
|
||||||
|
return new DRAGDROP(params);
|
||||||
|
}
|
||||||
|
|
||||||
|
}, '@VERSION@', {
|
||||||
|
requires:['io', 'json-parse', 'dd-constrain', 'dd-proxy', 'dd-drop']
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue