[Summary view] [Print] [Text view]

   1  YUI.add('moodle-mod_feedback-dragdrop', function(Y) {
   2      var DRAGDROPNAME = 'mod_feedback_dragdrop';
   3      var CSS = {
   4          OLDMOVE : 'span.feedback_item_command_move',
   5          OLDMOVEUP : 'span.feedback_item_command_moveup',
   6          OLDMOVEDOWN : 'span.feedback_item_command_movedown',
   7          DRAGAREA : '#feedback_dragarea',
   8          DRAGITEM : 'li.feedback_itemlist',
   9          DRAGLIST : '#feedback_dragarea ul#feedback_draglist',
  10          POSITIONLABEL : '.feedback_item_commands.position',
  11          ITEMBOX : '#feedback_item_box_',
  12          DRAGHANDLE : 'itemhandle'
  13      };
  14  
  15      var DRAGDROP = function() {
  16          DRAGDROP.superclass.constructor.apply(this, arguments);
  17      };
  18  
  19      Y.extend(DRAGDROP, M.core.dragdrop, {
  20  
  21          initializer : function(params) {
  22              //Static Vars
  23              this.cmid = params.cmid;
  24              this.goingUp = false, lastY = 0;
  25  
  26              var groups = ['feedbackitem'];
  27  
  28              handletitle = M.util.get_string('move_item', 'feedback');
  29              this.mydraghandle = this.get_drag_handle(handletitle, CSS.DRAGHANDLE, 'icon');
  30  
  31              //Get the list of li's in the lists and add the drag handle.
  32              basenode = Y.Node.one(CSS.DRAGLIST);
  33              listitems = basenode.all(CSS.DRAGITEM).each(function(v) {
  34                  item_id = this.get_node_id(v.get('id')); //Get the id of the feedback item.
  35                  item_box = Y.Node.one(CSS.ITEMBOX + item_id); //Get the current item box so we can add the drag handle.
  36                  v.insert(this.mydraghandle.cloneNode(true), item_box); //Insert the new handle into the item box.
  37              }, this);
  38  
  39              //We use a delegate to make all items draggable
  40              var del = new Y.DD.Delegate({
  41                  container: CSS.DRAGLIST,
  42                  nodes: CSS.DRAGITEM,
  43                  target: {
  44                      padding: '0 0 0 20'
  45                  },
  46                  handles: ['.' + CSS.DRAGHANDLE],
  47                  dragConfig: {groups: groups}
  48              });
  49  
  50              //Add plugins to the delegate
  51              del.dd.plug(Y.Plugin.DDProxy, {
  52                  // Don't move the node at the end of the drag
  53                  moveOnEnd: false,
  54                  cloneNode: true
  55              });
  56              del.dd.plug(Y.Plugin.DDConstrained, {
  57                  // Keep it inside the .course-content
  58                  constrain: CSS.DRAGAREA
  59              });
  60              del.dd.plug(Y.Plugin.DDWinScroll);
  61  
  62              //Listen for all drop:over events
  63              del.on('drop:over', this.drop_over_handler, this);
  64              //Listen for all drag:drag events
  65              del.on('drag:drag',  this.drag_drag_handler, this);
  66              //Listen for all drag:start events
  67              del.on('drag:start',  this.drag_start_handler, this);
  68              //Listen for a drag:end events
  69              del.on('drag:end',  this.drag_end_handler, this);
  70              //Listen for all drag:drophit events
  71              del.on('drag:drophit',  this.drag_drophit_handler, this);
  72              //Listen for all drag:dropmiss events
  73              del.on('drag:dropmiss',  this.drag_dropmiss_handler, this);
  74  
  75              // Remove all legacy move icons.
  76              Y.all(CSS.OLDMOVEUP).remove();
  77              Y.all(CSS.OLDMOVEDOWN).remove();
  78              Y.all(CSS.OLDMOVE).remove();
  79  
  80              //Create targets for drop.
  81              var droparea = Y.Node.one(CSS.DRAGLIST);
  82              var tar = new Y.DD.Drop({
  83                  groups: groups,
  84                  node: droparea
  85              });
  86  
  87          },
  88  
  89          /**
  90           * Handles the drop:over event.
  91           *
  92           * @param e the event
  93           * @return void
  94           */
  95          drop_over_handler : function(e) {
  96              //Get a reference to our drag and drop nodes
  97              var drag = e.drag.get('node'),
  98                  drop = e.drop.get('node');
  99  
 100              //Are we dropping on an li node?
 101              if (drop.get('tagName').toLowerCase() === 'li') {
 102                  //Are we not going up?
 103                  if (!this.goingUp) {
 104                      drop = drop.get('nextSibling');
 105                  }
 106                  //Add the node to this list
 107                  e.drop.get('node').get('parentNode').insertBefore(drag, drop);
 108                  //Resize this nodes shim, so we can drop on it later.
 109                  e.drop.sizeShim();
 110              }
 111          },
 112  
 113          /**
 114           * Handles the drag:drag event.
 115           *
 116           * @param e the event
 117           * @return void
 118           */
 119          drag_drag_handler : function(e) {
 120              //Get the last y point
 121              var y = e.target.lastXY[1];
 122              //Is it greater than the lastY var?
 123              if (y < this.lastY) {
 124                  //We are going up
 125                  this.goingUp = true;
 126              } else {
 127                  //We are going down.
 128                  this.goingUp = false;
 129              }
 130              //Cache for next check
 131              this.lastY = y;
 132          },
 133  
 134          /**
 135           * Handles the drag:start event.
 136           *
 137           * @param e the event
 138           * @return void
 139           */
 140          drag_start_handler : function(e) {
 141              //Get our drag object
 142              var drag = e.target;
 143  
 144              //Set some styles here
 145              drag.get('node').addClass('drag_target_active');
 146              drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
 147              drag.get('dragNode').addClass('drag_item_active');
 148              drag.get('dragNode').setStyles({
 149                  borderColor: drag.get('node').getStyle('borderColor'),
 150                  backgroundColor: drag.get('node').getStyle('backgroundColor')
 151              });
 152          },
 153  
 154          /**
 155           * Handles the drag:end event.
 156           *
 157           * @param e the event
 158           * @return void
 159           */
 160          drag_end_handler : function(e) {
 161              var drag = e.target;
 162              //Put our styles back
 163              drag.get('node').removeClass('drag_target_active');
 164          },
 165  
 166          /**
 167           * Handles the drag:drophit event.
 168           *
 169           * @param e the event
 170           * @return void
 171           */
 172          drag_drophit_handler : function(e) {
 173              var drop = e.drop.get('node'),
 174                  drag = e.drag.get('node');
 175              dragnode = Y.one(drag);
 176              //If we are not on an li, we must have been dropped on a ul.
 177              if (drop.get('tagName').toLowerCase() !== 'li') {
 178                  if (!drop.contains(drag)) {
 179                      drop.appendChild(drag);
 180                  }
 181                  myElements = '';
 182                  counter = 1;
 183                  drop.get('children').each(function(v) {
 184                      poslabeltext = '(' + M.util.get_string('position', 'feedback') + ':' + counter + ')';
 185                      poslabel = v.one(CSS.POSITIONLABEL);
 186                      poslabel.setHTML(poslabeltext);
 187                      myElements = myElements + ',' + this.get_node_id(v.get('id'));
 188                      counter++;
 189                  }, this);
 190                  var spinner = M.util.add_spinner(Y, dragnode);
 191                  this.save_item_order(this.cmid, myElements, spinner);
 192             }
 193          },
 194  
 195          /**
 196           * Save the new item order.
 197           *
 198           * @param cmid the coursemodule id
 199           * @param itemorder A comma separated list with item ids
 200           * @param spinner The spinner icon shown while saving
 201           * @return void
 202           */
 203          save_item_order : function(cmid, itemorder, spinner) {
 204  
 205              Y.io(M.cfg.wwwroot + '/mod/feedback/ajax.php', {
 206                  //The needed paramaters
 207                  data: {action: 'saveitemorder',
 208                         id: cmid,
 209                         itemorder: itemorder,
 210                         sesskey: M.cfg.sesskey
 211                  },
 212  
 213                  timeout: 5000, //5 seconds for timeout I think it is enough.
 214  
 215                  //Define the events.
 216                  on: {
 217                      start : function(transactionid) {
 218                          spinner.show();
 219                      },
 220                      success : function(transactionid, xhr) {
 221                          var response = xhr.responseText;
 222                          var ergebnis = Y.JSON.parse(response);
 223                          window.setTimeout(function(e) {
 224                              spinner.hide();
 225                          }, 250);
 226                      },
 227                      failure : function(transactionid, xhr) {
 228                          var msg = {
 229                              name : xhr.status+' '+xhr.statusText,
 230                              message : xhr.responseText
 231                          };
 232                          return new M.core.exception(msg);
 233                          //~ this.ajax_failure(xhr);
 234                          spinner.hide();
 235                      }
 236                  },
 237                  context:this
 238              });
 239          },
 240  
 241          /**
 242           * Returns the numeric id from the dom id of an item.
 243           *
 244           * @param id The dom id, f.g.: feedback_item_22
 245           * @return int
 246           */
 247          get_node_id : function(id) {
 248              return Number(id.replace(/feedback_item_/i, ''));
 249          }
 250  
 251      }, {
 252          NAME : DRAGDROPNAME,
 253          ATTRS : {
 254              cmid : {
 255                  value : 0
 256              }
 257          }
 258  
 259      });
 260  
 261      M.mod_feedback = M.mod_feedback || {};
 262      M.mod_feedback.init_dragdrop = function(params) {
 263          return new DRAGDROP(params);
 264      }
 265  
 266  }, '@VERSION@', {
 267      requires:['io', 'json-parse', 'dd-constrain', 'dd-proxy', 'dd-drop', 'dd-scroll', 'moodle-core-dragdrop', 'moodle-core-notification']
 268  });