[Summary view] [Print] [Text view]

   1  /* global Console */
   2  
   3  /**
   4   * Drag and Drop handler
   5   *
   6   * @namespace M.course.management
   7   * @class DragDrop
   8   * @constructor
   9   * @extends Base
  10   */
  11  function DragDrop(config) {
  12      Console.superclass.constructor.apply(this, [config]);
  13  }
  14  DragDrop.NAME = 'moodle-course-management-dd';
  15  DragDrop.CSS_PREFIX = 'management-dd';
  16  DragDrop.ATTRS = {
  17      /**
  18       * The management console this drag and drop has been set up for.
  19       * @attribute console
  20       * @type Console
  21       * @writeOnce
  22       */
  23      console: {
  24          writeOnce: 'initOnly'
  25      }
  26  };
  27  DragDrop.prototype = {
  28      /**
  29       * True if the user is dragging a course upwards.
  30       * @property goingup
  31       * @protected
  32       * @default false
  33       */
  34      goingup: false,
  35  
  36      /**
  37       * The last Y position of the course being dragged
  38       * @property lasty
  39       * @protected
  40       * @default null
  41       */
  42      lasty: null,
  43  
  44      /**
  45       * The sibling above the course being dragged currently (tracking its original position).
  46       *
  47       * @property previoussibling
  48       * @protected
  49       * @default false
  50       */
  51      previoussibling: null,
  52  
  53      /**
  54       * Initialises the DragDrop instance.
  55       * @method initializer
  56       */
  57      initializer: function() {
  58          var managementconsole = this.get('console'),
  59              container = managementconsole.get('element'),
  60              categorylisting = container.one('#category-listing'),
  61              courselisting = container.one('#course-listing > .course-listing'),
  62              categoryul = (categorylisting) ? categorylisting.one('ul.ml') : null,
  63              courseul = (courselisting) ? courselisting.one('ul.ml') : null,
  64              canmoveoutof = (courselisting) ? courselisting.getData('canmoveoutof') : false,
  65              contstraint = (canmoveoutof) ? container : courseul;
  66  
  67          if (!courseul) {
  68              // No course listings found.
  69              return false;
  70          }
  71  
  72          courseul.all('> li').each(function(li) {
  73              this.initCourseListing(li, contstraint);
  74          }, this);
  75          courseul.setData('dd', new Y.DD.Drop({
  76              node: courseul
  77          }));
  78          if (canmoveoutof && categoryul) {
  79              // Category UL may not be there if viewmode is just courses.
  80              categoryul.all('li > div').each(function(div) {
  81                  this.initCategoryListitem(div);
  82              }, this);
  83          }
  84          Y.DD.DDM.on('drag:start', this.dragStart, this);
  85          Y.DD.DDM.on('drag:end', this.dragEnd, this);
  86          Y.DD.DDM.on('drag:drag', this.dragDrag, this);
  87          Y.DD.DDM.on('drop:over', this.dropOver, this);
  88          Y.DD.DDM.on('drop:enter', this.dropEnter, this);
  89          Y.DD.DDM.on('drop:exit', this.dropExit, this);
  90          Y.DD.DDM.on('drop:hit', this.dropHit, this);
  91  
  92      },
  93  
  94      /**
  95       * Initialises a course listing.
  96       * @method initCourseListing
  97       * @param Node
  98       */
  99      initCourseListing: function(node, contstraint) {
 100          node.setData('dd', new Y.DD.Drag({
 101              node: node,
 102              target: {
 103                  padding: '0 0 0 20'
 104              }
 105          }).addHandle(
 106              '.drag-handle'
 107          ).plug(Y.Plugin.DDProxy, {
 108              moveOnEnd: false,
 109              borderStyle: false
 110          }).plug(Y.Plugin.DDConstrained, {
 111              constrain2node: contstraint
 112          }));
 113      },
 114  
 115      /**
 116       * Initialises a category listing.
 117       * @method initCategoryListitem
 118       * @param Node
 119       */
 120      initCategoryListitem: function(node) {
 121          node.setData('dd', new Y.DD.Drop({
 122              node: node
 123          }));
 124      },
 125  
 126      /**
 127       * Dragging has started.
 128       * @method dragStart
 129       * @private
 130       * @param {EventFacade} e
 131       */
 132      dragStart: function(e) {
 133          var drag = e.target,
 134              node = drag.get('node'),
 135              dragnode = drag.get('dragNode');
 136          node.addClass('course-being-dragged');
 137          dragnode.addClass('course-being-dragged-proxy').set('innerHTML', node.one('a.coursename').get('innerHTML'));
 138          this.previoussibling = node.get('previousSibling');
 139      },
 140  
 141      /**
 142       * Dragging has ended.
 143       * @method dragEnd
 144       * @private
 145       * @param {EventFacade} e
 146       */
 147      dragEnd: function(e) {
 148          var drag = e.target,
 149              node = drag.get('node');
 150          node.removeClass('course-being-dragged');
 151          this.get('console').get('element').all('#category-listing li.highlight').removeClass('highlight');
 152      },
 153  
 154      /**
 155       * Dragging in progress.
 156       * @method dragDrag
 157       * @private
 158       * @param {EventFacade} e
 159       */
 160      dragDrag: function(e) {
 161          var y = e.target.lastXY[1];
 162          if (y < this.lasty) {
 163              this.goingup = true;
 164          } else {
 165              this.goingup = false;
 166          }
 167          this.lasty = y;
 168      },
 169  
 170      /**
 171       * The course has been dragged over a drop target.
 172       * @method dropOver
 173       * @private
 174       * @param {EventFacade} e
 175       */
 176      dropOver: function(e) {
 177          // Get a reference to our drag and drop nodes
 178          var drag = e.drag.get('node'),
 179              drop = e.drop.get('node'),
 180              tag = drop.get('tagName').toLowerCase();
 181          if (tag === 'li' && drop.hasClass('listitem-course')) {
 182              if (!this.goingup) {
 183                  drop = drop.get('nextSibling');
 184                  if (!drop) {
 185                      drop = e.drop.get('node');
 186                      drop.get('parentNode').append(drag);
 187                      return false;
 188                  }
 189              }
 190              drop.get('parentNode').insertBefore(drag, drop);
 191              e.drop.sizeShim();
 192          }
 193      },
 194  
 195      /**
 196       * The course has been dragged over a drop target.
 197       * @method dropEnter
 198       * @private
 199       * @param {EventFacade} e
 200       */
 201      dropEnter: function(e) {
 202          var drop = e.drop.get('node'),
 203              tag = drop.get('tagName').toLowerCase();
 204          if (tag === 'div') {
 205              drop.ancestor('li.listitem-category').addClass('highlight');
 206          }
 207      },
 208  
 209      /**
 210       * The course has been dragged off a drop target.
 211       * @method dropExit
 212       * @private
 213       * @param {EventFacade} e
 214       */
 215      dropExit: function(e) {
 216          var drop = e.drop.get('node'),
 217              tag = drop.get('tagName').toLowerCase();
 218          if (tag === 'div') {
 219              drop.ancestor('li.listitem-category').removeClass('highlight');
 220          }
 221      },
 222  
 223      /**
 224       * The course has been dropped on a target.
 225       * @method dropHit
 226       * @private
 227       * @param {EventFacade} e
 228       */
 229      dropHit: function(e) {
 230          var drag = e.drag.get('node'),
 231              drop = e.drop.get('node'),
 232              iscategory = (drop.ancestor('.listitem-category') !== null),
 233              iscourse = !iscategory && (drop.test('.listitem-course')),
 234              managementconsole = this.get('console'),
 235              categoryid,
 236              category,
 237              courseid,
 238              course,
 239              aftercourseid,
 240              previoussibling,
 241              previousid;
 242  
 243          if (!drag.test('.listitem-course')) {
 244              Y.log('It was not a course being dragged.', 'warn', 'moodle-course-management');
 245              return false;
 246          }
 247          courseid = drag.getData('id');
 248          if (iscategory) {
 249              categoryid = drop.ancestor('.listitem-category').getData('id');
 250              Y.log('Course ' + courseid + ' dragged into category ' + categoryid);
 251              category = managementconsole.getCategoryById(categoryid);
 252              if (category) {
 253                  course = managementconsole.getCourseById(courseid);
 254                  if (course) {
 255                      category.moveCourseTo(course);
 256                  }
 257              }
 258          } else if (iscourse || drop.ancestor('#course-listing')) {
 259              course = managementconsole.getCourseById(courseid);
 260              previoussibling = drag.get('previousSibling');
 261              aftercourseid = (previoussibling) ? previoussibling.getData('id') || 0 : 0;
 262              previousid = (this.previoussibling) ? this.previoussibling.getData('id') : 0;
 263              if (aftercourseid !== previousid) {
 264                  course.moveAfter(aftercourseid, previousid);
 265              }
 266          } else {
 267              Y.log('Course dropped over unhandled target.', 'info', 'moodle-course-management');
 268          }
 269      }
 270  };
 271  Y.extend(DragDrop, Y.Base, DragDrop.prototype);