[Summary view] [Print] [Text view]

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