mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-17 21:49:15 +01:00
Code Issues Projects Releases Wiki Activity

MDL-36990 mod_feedback - migrated the yui dragdrop stuff into a yui module

Browse Source
This commit is contained in:
Andreas Grabs 2013-01-18 18:31:55 +01:00
parent c206a2b3fd
commit bdd694fd85
3 changed files with 239 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
mod/feedback/edit.php
View File

@ -160,20 +160,8 @@ $PAGE->set_title(format_string($feedback->name));
//Adding the javascript module for the items dragdrop.
if ($do_show == 'edit') {
$jsmodule = array(
'name' => 'mod_feedback',
'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);
$PAGE->requires->yui_module('moodle-mod_feedback-dragdrop', 'M.mod_feedback.init_dragdrop',
array(array('cmid' => $cm->id)));
}
echo $OUTPUT->header();

186
mod/feedback/module.js
View File

@ -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
View 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']
});