Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

MDL-36990 mod_feedback - migrated the yui dragdrop stuff into a yui m…

…odule
  • Loading branch information...
commit bdd694fd859e678f5948fd61c3b220c289bc8a72 1 parent c206a2b
Andreas Grabs grabs authored
16 mod/feedback/edit.php
View
@@ -160,20 +160,8 @@
//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
@@ -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
View
@@ -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']
+});
Please sign in to comment.
Something went wrong with that request. Please try again.