[Summary view] [Print] [Text view]

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