[Summary view] [Print] [Text view]

   1  /**
   2   * Resource drag and drop.
   3   *
   4   * @class M.course.dragdrop.resource
   5   * @constructor
   6   * @extends M.core.dragdrop
   7   */
   8  var DRAGRESOURCE = function() {
   9      DRAGRESOURCE.superclass.constructor.apply(this, arguments);
  10  };
  11  Y.extend(DRAGRESOURCE, M.core.dragdrop, {
  12      initializer: function() {
  13          // Set group for parent class
  14          this.groups = ['resource'];
  15          this.samenodeclass = CSS.ACTIVITY;
  16          this.parentnodeclass = CSS.SECTION;
  17          this.resourcedraghandle = this.get_drag_handle(M.util.get_string('movecoursemodule', 'moodle'),
  18                  CSS.EDITINGMOVE, CSS.ICONCLASS, true);
  19  
  20          this.samenodelabel = {
  21              identifier: 'afterresource',
  22              component: 'moodle'
  23          };
  24          this.parentnodelabel = {
  25              identifier: 'totopofsection',
  26              component: 'moodle'
  27          };
  28  
  29          // Go through all sections
  30          var sectionlistselector = M.course.format.get_section_selector(Y);
  31          if (sectionlistselector) {
  32              sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + sectionlistselector;
  33              this.setup_for_section(sectionlistselector);
  34  
  35              // Initialise drag & drop for all resources/activities
  36              var nodeselector = sectionlistselector.slice(CSS.COURSECONTENT.length + 2) + ' li.' + CSS.ACTIVITY;
  37              var del = new Y.DD.Delegate({
  38                  container: '.' + CSS.COURSECONTENT,
  39                  nodes: nodeselector,
  40                  target: true,
  41                  handles: ['.' + CSS.EDITINGMOVE],
  42                  dragConfig: {groups: this.groups}
  43              });
  44              del.dd.plug(Y.Plugin.DDProxy, {
  45                  // Don't move the node at the end of the drag
  46                  moveOnEnd: false,
  47                  cloneNode: true
  48              });
  49              del.dd.plug(Y.Plugin.DDConstrained, {
  50                  // Keep it inside the .course-content
  51                  constrain: '#' + CSS.PAGECONTENT
  52              });
  53              del.dd.plug(Y.Plugin.DDWinScroll);
  54  
  55              M.course.coursebase.register_module(this);
  56              M.course.dragres = this;
  57          }
  58      },
  59  
  60      /**
  61       * Apply dragdrop features to the specified selector or node that refers to section(s)
  62       *
  63       * @method setup_for_section
  64       * @param {String} baseselector The CSS selector or node to limit scope to
  65       */
  66      setup_for_section: function(baseselector) {
  67          Y.Node.all(baseselector).each(function(sectionnode) {
  68              var resources = sectionnode.one('.' + CSS.CONTENT + ' ul.' + CSS.SECTION);
  69              // See if resources ul exists, if not create one
  70              if (!resources) {
  71                  resources = Y.Node.create('<ul></ul>');
  72                  resources.addClass(CSS.SECTION);
  73                  sectionnode.one('.' + CSS.CONTENT + ' div.' + CSS.SUMMARY).insert(resources, 'after');
  74              }
  75              resources.setAttribute('data-draggroups', this.groups.join(' '));
  76              // Define empty ul as droptarget, so that item could be moved to empty list
  77              new Y.DD.Drop({
  78                  node: resources,
  79                  groups: this.groups,
  80                  padding: '20 0 20 0'
  81              });
  82  
  83              // Initialise each resource/activity in this section
  84              this.setup_for_resource('#' + sectionnode.get('id') + ' li.' + CSS.ACTIVITY);
  85          }, this);
  86      },
  87  
  88      /**
  89       * Apply dragdrop features to the specified selector or node that refers to resource(s)
  90       *
  91       * @method setup_for_resource
  92       * @param {String} baseselector The CSS selector or node to limit scope to
  93       */
  94      setup_for_resource: function(baseselector) {
  95          Y.Node.all(baseselector).each(function(resourcesnode) {
  96              var draggroups = resourcesnode.getData('draggroups');
  97              if (!draggroups) {
  98                  // This Drop Node has not been set up. Configure it now.
  99                  resourcesnode.setAttribute('data-draggroups', this.groups.join(' '));
 100                  // Define empty ul as droptarget, so that item could be moved to empty list
 101                  new Y.DD.Drop({
 102                      node: resourcesnode,
 103                      groups: this.groups,
 104                      padding: '20 0 20 0'
 105                  });
 106              }
 107  
 108              // Replace move icons
 109              var move = resourcesnode.one('a.' + CSS.EDITINGMOVE);
 110              if (move) {
 111                  move.replace(this.resourcedraghandle.cloneNode(true));
 112              }
 113          }, this);
 114      },
 115  
 116      drag_start: function(e) {
 117          // Get our drag object
 118          var drag = e.target;
 119          drag.get('dragNode').setContent(drag.get('node').get('innerHTML'));
 120          drag.get('dragNode').all('img.iconsmall').setStyle('vertical-align', 'baseline');
 121      },
 122  
 123      drag_dropmiss: function(e) {
 124          // Missed the target, but we assume the user intended to drop it
 125          // on the last last ghost node location, e.drag and e.drop should be
 126          // prepared by global_drag_dropmiss parent so simulate drop_hit(e).
 127          this.drop_hit(e);
 128      },
 129  
 130      drop_hit: function(e) {
 131          var drag = e.drag;
 132          // Get a reference to our drag node
 133          var dragnode = drag.get('node');
 134          var dropnode = e.drop.get('node');
 135  
 136          // Add spinner if it not there
 137          var actionarea = dragnode.one(CSS.ACTIONAREA);
 138          var spinner = M.util.add_spinner(Y, actionarea);
 139  
 140          var params = {};
 141  
 142          // Handle any variables which we must pass back through to
 143          var pageparams = this.get('config').pageparams;
 144          var varname;
 145          for (varname in pageparams) {
 146              params[varname] = pageparams[varname];
 147          }
 148  
 149          // Prepare request parameters
 150          params.sesskey = M.cfg.sesskey;
 151          params.courseId = this.get('courseid');
 152          params['class'] = 'resource';
 153          params.field = 'move';
 154          params.id = Number(Y.Moodle.core_course.util.cm.getId(dragnode));
 155          params.sectionId = Y.Moodle.core_course.util.section.getId(dropnode.ancestor(M.course.format.get_section_wrapper(Y), true));
 156  
 157          if (dragnode.next()) {
 158              params.beforeId = Number(Y.Moodle.core_course.util.cm.getId(dragnode.next()));
 159          }
 160  
 161          // Do AJAX request
 162          var uri = M.cfg.wwwroot + this.get('ajaxurl');
 163  
 164          Y.io(uri, {
 165              method: 'POST',
 166              data: params,
 167              on: {
 168                  start: function() {
 169                      this.lock_drag_handle(drag, CSS.EDITINGMOVE);
 170                      spinner.show();
 171                  },
 172                  success: function(tid, response) {
 173                      var responsetext = Y.JSON.parse(response.responseText);
 174                      var params = {element: dragnode, visible: responsetext.visible};
 175                      M.course.coursebase.invoke_function('set_visibility_resource_ui', params);
 176                      this.unlock_drag_handle(drag, CSS.EDITINGMOVE);
 177                      window.setTimeout(function() {
 178                          spinner.hide();
 179                      }, 250);
 180                  },
 181                  failure: function(tid, response) {
 182                      this.ajax_failure(response);
 183                      this.unlock_drag_handle(drag, CSS.SECTIONHANDLE);
 184                      spinner.hide();
 185                      // TODO: revert nodes location
 186                  }
 187              },
 188              context: this
 189          });
 190      }
 191  }, {
 192      NAME: 'course-dragdrop-resource',
 193      ATTRS: {
 194          courseid: {
 195              value: null
 196          },
 197          ajaxurl: {
 198              value: 0
 199          },
 200          config: {
 201              value: 0
 202          }
 203      }
 204  });
 205  
 206  M.course = M.course || {};
 207  M.course.init_resource_dragdrop = function(params) {
 208      new DRAGRESOURCE(params);
 209  };