[Summary view] [Print] [Text view]

   1  /**
   2   * Section drag and drop.
   3   *
   4   * @class M.course.dragdrop.section
   5   * @constructor
   6   * @extends M.core.dragdrop
   7   */
   8  var DRAGSECTION = function() {
   9      DRAGSECTION.superclass.constructor.apply(this, arguments);
  10  };
  11  Y.extend(DRAGSECTION, M.core.dragdrop, {
  12      sectionlistselector: null,
  13  
  14      initializer: function() {
  15          // Set group for parent class
  16          this.groups = [CSS.SECTIONDRAGGABLE];
  17          this.samenodeclass = M.course.format.get_sectionwrapperclass();
  18          this.parentnodeclass = M.course.format.get_containerclass();
  19  
  20          // Check if we are in single section mode
  21          if (Y.Node.one('.' + CSS.JUMPMENU)) {
  22              return false;
  23          }
  24          // Initialise sections dragging
  25          this.sectionlistselector = M.course.format.get_section_wrapper(Y);
  26          if (this.sectionlistselector) {
  27              this.sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + this.sectionlistselector;
  28  
  29              this.setup_for_section(this.sectionlistselector);
  30  
  31              // Make each li element in the lists of sections draggable
  32              var del = new Y.DD.Delegate({
  33                  container: '.' + CSS.COURSECONTENT,
  34                  nodes: '.' + CSS.SECTIONDRAGGABLE,
  35                  target: true,
  36                  handles: ['.' + CSS.LEFT],
  37                  dragConfig: {groups: this.groups}
  38              });
  39              del.dd.plug(Y.Plugin.DDProxy, {
  40                  // Don't move the node at the end of the drag
  41                  moveOnEnd: false
  42              });
  43              del.dd.plug(Y.Plugin.DDConstrained, {
  44                  // Keep it inside the .course-content
  45                  constrain: '#' + CSS.PAGECONTENT,
  46                  stickY: true
  47              });
  48              del.dd.plug(Y.Plugin.DDWinScroll);
  49          }
  50      },
  51  
  52       /**
  53       * Apply dragdrop features to the specified selector or node that refers to section(s)
  54       *
  55       * @method setup_for_section
  56       * @param {String} baseselector The CSS selector or node to limit scope to
  57       */
  58      setup_for_section: function(baseselector) {
  59          Y.Node.all(baseselector).each(function(sectionnode) {
  60              // Determine the section ID
  61              var sectionid = Y.Moodle.core_course.util.section.getId(sectionnode);
  62  
  63              // We skip the top section as it is not draggable
  64              if (sectionid > 0) {
  65                  // Remove move icons
  66                  var movedown = sectionnode.one('.' + CSS.RIGHT + ' a.' + CSS.MOVEDOWN);
  67                  var moveup = sectionnode.one('.' + CSS.RIGHT + ' a.' + CSS.MOVEUP);
  68  
  69                  // Add dragger icon
  70                  var title = M.util.get_string('movesection', 'moodle', sectionid);
  71                  var cssleft = sectionnode.one('.' + CSS.LEFT);
  72  
  73                  if ((movedown || moveup) && cssleft) {
  74                      cssleft.setStyle('cursor', 'move');
  75                      cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE, 'icon', true));
  76  
  77                      if (moveup) {
  78                          if (moveup.previous('br')) {
  79                              moveup.previous('br').remove();
  80                          } else if (moveup.next('br')) {
  81                              moveup.next('br').remove();
  82                          }
  83  
  84                          if (moveup.ancestor('.section_action_menu')) {
  85                              moveup.ancestor('li').remove();
  86                          } else {
  87                              moveup.remove();
  88                          }
  89                      }
  90                      if (movedown) {
  91                          if (movedown.previous('br')) {
  92                              movedown.previous('br').remove();
  93                          } else if (movedown.next('br')) {
  94                              movedown.next('br').remove();
  95                          }
  96  
  97                          if (movedown.ancestor('.section_action_menu')) {
  98                              movedown.ancestor('li').remove();
  99                          } else {
 100                              movedown.remove();
 101                          }
 102                      }
 103  
 104                      // This section can be moved - add the class to indicate this to Y.DD.
 105                      sectionnode.addClass(CSS.SECTIONDRAGGABLE);
 106                  }
 107              }
 108          }, this);
 109      },
 110  
 111      /*
 112       * Drag-dropping related functions
 113       */
 114      drag_start: function(e) {
 115          // Get our drag object
 116          var drag = e.target;
 117          // Creat a dummy structure of the outer elemnents for clean styles application
 118          var containernode = Y.Node.create('<' + M.course.format.get_containernode() +
 119                  '></' + M.course.format.get_containernode() + '>');
 120          containernode.addClass(M.course.format.get_containerclass());
 121          var sectionnode = Y.Node.create('<' + M.course.format.get_sectionwrappernode() +
 122                  '></' + M.course.format.get_sectionwrappernode() + '>');
 123          sectionnode.addClass(M.course.format.get_sectionwrapperclass());
 124          sectionnode.setStyle('margin', 0);
 125          sectionnode.setContent(drag.get('node').get('innerHTML'));
 126          containernode.appendChild(sectionnode);
 127          drag.get('dragNode').setContent(containernode);
 128          drag.get('dragNode').addClass(CSS.COURSECONTENT);
 129      },
 130  
 131      drag_dropmiss: function(e) {
 132          // Missed the target, but we assume the user intended to drop it
 133          // on the last last ghost node location, e.drag and e.drop should be
 134          // prepared by global_drag_dropmiss parent so simulate drop_hit(e).
 135          this.drop_hit(e);
 136      },
 137  
 138      get_section_index: function(node) {
 139          var sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + M.course.format.get_section_selector(Y),
 140              sectionList = Y.all(sectionlistselector),
 141              nodeIndex = sectionList.indexOf(node),
 142              zeroIndex = sectionList.indexOf(Y.one('#section-0'));
 143  
 144          return (nodeIndex - zeroIndex);
 145      },
 146  
 147      drop_hit: function(e) {
 148          var drag = e.drag;
 149  
 150          // Get references to our nodes and their IDs.
 151          var dragnode = drag.get('node'),
 152              dragnodeid = Y.Moodle.core_course.util.section.getId(dragnode),
 153              loopstart = dragnodeid,
 154  
 155              dropnodeindex = this.get_section_index(dragnode),
 156              loopend = dropnodeindex;
 157  
 158          if (dragnodeid === dropnodeindex) {
 159              Y.log("Skipping move - same location moving " + dragnodeid + " to " + dropnodeindex, 'debug', 'moodle-course-dragdrop');
 160              return;
 161          }
 162  
 163          Y.log("Moving from position " + dragnodeid + " to position " + dropnodeindex, 'debug', 'moodle-course-dragdrop');
 164  
 165          if (loopstart > loopend) {
 166              // If we're going up, we need to swap the loop order
 167              // because loops can't go backwards.
 168              loopstart = dropnodeindex;
 169              loopend = dragnodeid;
 170          }
 171  
 172          // Get the list of nodes.
 173          drag.get('dragNode').removeClass(CSS.COURSECONTENT);
 174          var sectionlist = Y.Node.all(this.sectionlistselector);
 175  
 176          // Add a lightbox if it's not there.
 177          var lightbox = M.util.add_lightbox(Y, dragnode);
 178  
 179          // Handle any variables which we must pass via AJAX.
 180          var params = {},
 181              pageparams = this.get('config').pageparams,
 182              varname;
 183  
 184          for (varname in pageparams) {
 185              if (!pageparams.hasOwnProperty(varname)) {
 186                  continue;
 187              }
 188              params[varname] = pageparams[varname];
 189          }
 190  
 191          // Prepare request parameters
 192          params.sesskey = M.cfg.sesskey;
 193          params.courseId = this.get('courseid');
 194          params['class'] = 'section';
 195          params.field = 'move';
 196          params.id = dragnodeid;
 197          params.value = dropnodeindex;
 198  
 199          // Perform the AJAX request.
 200          var uri = M.cfg.wwwroot + this.get('ajaxurl');
 201          Y.io(uri, {
 202              method: 'POST',
 203              data: params,
 204              on: {
 205                  start: function() {
 206                      lightbox.show();
 207                  },
 208                  success: function(tid, response) {
 209                      // Update section titles, we can't simply swap them as
 210                      // they might have custom title
 211                      try {
 212                          var responsetext = Y.JSON.parse(response.responseText);
 213                          if (responsetext.error) {
 214                              new M.core.ajaxException(responsetext);
 215                          }
 216                          M.course.format.process_sections(Y, sectionlist, responsetext, loopstart, loopend);
 217                      } catch (e) {
 218                          // Ignore.
 219                      }
 220  
 221                      // Update all of the section IDs - first unset them, then set them
 222                      // to avoid duplicates in the DOM.
 223                      var index;
 224  
 225                      // Classic bubble sort algorithm is applied to the section
 226                      // nodes between original drag node location and the new one.
 227                      var swapped = false;
 228                      do {
 229                          swapped = false;
 230                          for (index = loopstart; index <= loopend; index++) {
 231                              if (Y.Moodle.core_course.util.section.getId(sectionlist.item(index - 1)) >
 232                                          Y.Moodle.core_course.util.section.getId(sectionlist.item(index))) {
 233                                  Y.log("Swapping " + Y.Moodle.core_course.util.section.getId(sectionlist.item(index - 1)) +
 234                                          " with " + Y.Moodle.core_course.util.section.getId(sectionlist.item(index)));
 235                                  // Swap section id.
 236                                  var sectionid = sectionlist.item(index - 1).get('id');
 237                                  sectionlist.item(index - 1).set('id', sectionlist.item(index).get('id'));
 238                                  sectionlist.item(index).set('id', sectionid);
 239  
 240                                  // See what format needs to swap.
 241                                  M.course.format.swap_sections(Y, index - 1, index);
 242  
 243                                  // Update flag.
 244                                  swapped = true;
 245                              }
 246                          }
 247                          loopend = loopend - 1;
 248                      } while (swapped);
 249  
 250                      window.setTimeout(function() {
 251                          lightbox.hide();
 252                      }, 250);
 253                  },
 254  
 255                  failure: function(tid, response) {
 256                      this.ajax_failure(response);
 257                      lightbox.hide();
 258                  }
 259              },
 260              context: this
 261          });
 262      }
 263  
 264  }, {
 265      NAME: 'course-dragdrop-section',
 266      ATTRS: {
 267          courseid: {
 268              value: null
 269          },
 270          ajaxurl: {
 271              value: 0
 272          },
 273          config: {
 274              value: 0
 275          }
 276      }
 277  });
 278  
 279  M.course = M.course || {};
 280  M.course.init_section_dragdrop = function(params) {
 281      new DRAGSECTION(params);
 282  };