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