course/yui/dragdrop/dragdrop.js

   1 YUI.add('moodle-course-dragdrop', function(Y) {
   2
   3     var CSS = {
   4         ACTIVITY : 'activity',
   5         COMMANDSPAN : '.commands',
   6         CONTENT : 'content',
   7         COURSECONTENT : 'course-content',
   8         EDITINGMOVE : 'editing_move',
   9         ICONCLASS : 'iconsmall',
  10         JUMPMENU : 'jumpmenu',
  11         LEFT : 'left',
  12         LIGHTBOX : 'lightbox',
  13         MOVEDOWN : 'movedown',
  14         MOVEUP : 'moveup',
  15         PAGECONTENT : 'page-content',
  16         RIGHT : 'right',
  17         SECTION : 'section',
  18         SECTIONADDMENUS : 'section_add_menus',
  19         SECTIONHANDLE : 'section-handle',
  20         SUMMARY : 'summary',
  21         SECTIONDRAGGABLE: 'sectiondraggable'
  22     };
  23
  24     var DRAGSECTION = function() {
  25         DRAGSECTION.superclass.constructor.apply(this, arguments);
  26     };
  27     Y.extend(DRAGSECTION, M.core.dragdrop, {
  28         sectionlistselector : null,
  29
  30         initializer : function(params) {
  31             // Set group for parent class
  32             this.groups = [ CSS.SECTIONDRAGGABLE ];
  33             this.samenodeclass = M.course.format.get_sectionwrapperclass();
  34             this.parentnodeclass = M.course.format.get_containerclass();
  35
  36             // Check if we are in single section mode
  37             if (Y.Node.one('.'+CSS.JUMPMENU)) {
  38                 return false;
  39             }
  40             // Initialise sections dragging
  41             this.sectionlistselector = M.course.format.get_section_wrapper(Y);
  42             if (this.sectionlistselector) {
  43                 this.sectionlistselector = '.'+CSS.COURSECONTENT+' '+this.sectionlistselector;
  44
  45                 this.setup_for_section(this.sectionlistselector);
  46
  47                 // Make each li element in the lists of sections draggable
  48                 var del = new Y.DD.Delegate({
  49                     container: '.'+CSS.COURSECONTENT,
  50                     nodes: '.' + CSS.SECTIONDRAGGABLE,
  51                     target: true,
  52                     handles: ['.'+CSS.LEFT],
  53                     dragConfig: {groups: this.groups}
  54                 });
  55                 del.dd.plug(Y.Plugin.DDProxy, {
  56                     // Don't move the node at the end of the drag
  57                     moveOnEnd: false
  58                 });
  59                 del.dd.plug(Y.Plugin.DDConstrained, {
  60                     // Keep it inside the .course-content
  61                     constrain: '#'+CSS.PAGECONTENT,
  62                     stickY: true
  63                 });
  64                 del.dd.plug(Y.Plugin.DDWinScroll);
  65             }
  66         },
  67
  68          /**
  69          * Apply dragdrop features to the specified selector or node that refers to section(s)
  70          *
  71          * @param baseselector The CSS selector or node to limit scope to
  72          * @return void
  73          */
  74         setup_for_section : function(baseselector) {
  75             Y.Node.all(baseselector).each(function(sectionnode) {
  76                 // Determine the section ID
  77                 var sectionid = Y.Moodle.core_course.util.section.getId(sectionnode);
  78
  79                 // We skip the top section as it is not draggable
  80                 if (sectionid > 0) {
  81                     // Remove move icons
  82                     var movedown = sectionnode.one('.'+CSS.RIGHT+' a.'+CSS.MOVEDOWN);
  83                     var moveup = sectionnode.one('.'+CSS.RIGHT+' a.'+CSS.MOVEUP);
  84
  85                     // Add dragger icon
  86                     var title = M.util.get_string('movesection', 'moodle', sectionid);
  87                     var cssleft = sectionnode.one('.'+CSS.LEFT);
  88
  89                     if ((movedown || moveup) && cssleft) {
  90                         cssleft.setStyle('cursor', 'move');
  91                         cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE, 'icon', true));
  92
  93                         if (moveup) {
  94                             moveup.remove();
  95                         }
  96                         if (movedown) {
  97                             movedown.remove();
  98                         }
  99
 100                         // This section can be moved - add the class to indicate this to Y.DD.
 101                         sectionnode.addClass(CSS.SECTIONDRAGGABLE);
 102                     }
 103                 }
 104             }, this);
 105         },
 106
 107         /*
 108          * Drag-dropping related functions
 109          */
 110         drag_start : function(e) {
 111             // Get our drag object
 112             var drag = e.target;
 113             // Creat a dummy structure of the outer elemnents for clean styles application
 114             var containernode = Y.Node.create('<'+M.course.format.get_containernode()+'></'+M.course.format.get_containernode()+'>');
 115             containernode.addClass(M.course.format.get_containerclass());
 116             var sectionnode = Y.Node.create('<'+ M.course.format.get_sectionwrappernode()+'></'+ M.course.format.get_sectionwrappernode()+'>');
 117             sectionnode.addClass( M.course.format.get_sectionwrapperclass());
 118             sectionnode.setStyle('margin', 0);
 119             sectionnode.setContent(drag.get('node').get('innerHTML'));
 120             containernode.appendChild(sectionnode);
 121             drag.get('dragNode').setContent(containernode);
 122             drag.get('dragNode').addClass(CSS.COURSECONTENT);
 123         },
 124
 125         drag_dropmiss : function(e) {
 126             // Missed the target, but we assume the user intended to drop it
 127             // on the last last ghost node location, e.drag and e.drop should be
 128             // prepared by global_drag_dropmiss parent so simulate drop_hit(e).
 129             this.drop_hit(e);
 130         },
 131
 132         drop_hit : function(e) {
 133             var drag = e.drag;
 134             // Get a reference to our drag node
 135             var dragnode = drag.get('node');
 136             var dropnode = e.drop.get('node');
 137             // Prepare some variables
 138             var dragnodeid = Y.Moodle.core_course.util.section.getId(dragnode);
 139             var dropnodeid = Y.Moodle.core_course.util.section.getId(dropnode);
 140
 141             var loopstart = dragnodeid;
 142             var loopend = dropnodeid;
 143
 144             if (this.goingup) {
 145                 loopstart = dropnodeid;
 146                 loopend = dragnodeid;
 147             }
 148
 149             // Get the list of nodes
 150             drag.get('dragNode').removeClass(CSS.COURSECONTENT);
 151             var sectionlist = Y.Node.all(this.sectionlistselector);
 152
 153             // Add lightbox if it not there
 154             var lightbox = M.util.add_lightbox(Y, dragnode);
 155
 156             var params = {};
 157
 158             // Handle any variables which we must pass back through to
 159             var pageparams = this.get('config').pageparams;
 160             for (varname in pageparams) {
 161                 params[varname] = pageparams[varname];
 162             }
 163
 164             // Prepare request parameters
 165             params.sesskey = M.cfg.sesskey;
 166             params.courseId = this.get('courseid');
 167             params['class'] = 'section';
 168             params.field = 'move';
 169             params.id = dragnodeid;
 170             params.value = dropnodeid;
 171
 172             // Do AJAX request
 173             var uri = M.cfg.wwwroot + this.get('ajaxurl');
 174
 175             Y.io(uri, {
 176                 method: 'POST',
 177                 data: params,
 178                 on: {
 179                     start : function(tid) {
 180                         lightbox.show();
 181                     },
 182                     success: function(tid, response) {
 183                         // Update section titles, we can't simply swap them as
 184                         // they might have custom title
 185                         try {
 186                             var responsetext = Y.JSON.parse(response.responseText);
 187                             if (responsetext.error) {
 188                                 new M.core.ajaxException(responsetext);
 189                             }
 190                             M.course.format.process_sections(Y, sectionlist, responsetext, loopstart, loopend);
 191                         } catch (e) {}
 192
 193                         // Classic bubble sort algorithm is applied to the section
 194                         // nodes between original drag node location and the new one.
 195                         do {
 196                             var swapped = false;
 197                             for (var i = loopstart; i <= loopend; i++) {
 198                                 if (Y.Moodle.core_course.util.section.getId(sectionlist.item(i-1)) > Y.Moodle.core_course.util.section.getId(sectionlist.item(i))) {
 199                                     // Swap section id
 200                                     var sectionid = sectionlist.item(i-1).get('id');
 201                                     sectionlist.item(i-1).set('id', sectionlist.item(i).get('id'));
 202                                     sectionlist.item(i).set('id', sectionid);
 203                                     // See what format needs to swap
 204                                     M.course.format.swap_sections(Y, i-1, i);
 205                                     // Update flag
 206                                     swapped = true;
 207                                 }
 208                             }
 209                             loopend = loopend - 1;
 210                         } while (swapped);
 211
 212                         // Finally, hide the lightbox
 213                         window.setTimeout(function(e) {
 214                             lightbox.hide();
 215                         }, 250);
 216                     },
 217                     failure: function(tid, response) {
 218                         this.ajax_failure(response);
 219                         lightbox.hide();
 220                     }
 221                 },
 222                 context:this
 223             });
 224         }
 225
 226     }, {
 227         NAME : 'course-dragdrop-section',
 228         ATTRS : {
 229             courseid : {
 230                 value : null
 231             },
 232             ajaxurl : {
 233                 'value' : 0
 234             },
 235             config : {
 236                 'value' : 0
 237             }
 238         }
 239     });
 240
 241     var DRAGRESOURCE = function() {
 242         DRAGRESOURCE.superclass.constructor.apply(this, arguments);
 243     };
 244     Y.extend(DRAGRESOURCE, M.core.dragdrop, {
 245         initializer : function(params) {
 246             // Set group for parent class
 247             this.groups = ['resource'];
 248             this.samenodeclass = CSS.ACTIVITY;
 249             this.parentnodeclass = CSS.SECTION;
 250             this.resourcedraghandle = this.get_drag_handle(M.str.moodle.move, CSS.EDITINGMOVE, CSS.ICONCLASS);
 251
 252             // Go through all sections
 253             var sectionlistselector = M.course.format.get_section_selector(Y);
 254             if (sectionlistselector) {
 255                 sectionlistselector = '.'+CSS.COURSECONTENT+' '+sectionlistselector;
 256                 this.setup_for_section(sectionlistselector);
 257
 258                 // Initialise drag & drop for all resources/activities
 259                 var nodeselector = sectionlistselector.slice(CSS.COURSECONTENT.length+2)+' li.'+CSS.ACTIVITY;
 260                 var del = new Y.DD.Delegate({
 261                     container: '.'+CSS.COURSECONTENT,
 262                     nodes: nodeselector,
 263                     target: true,
 264                     handles: ['.' + CSS.EDITINGMOVE],
 265                     dragConfig: {groups: this.groups}
 266                 });
 267                 del.dd.plug(Y.Plugin.DDProxy, {
 268                     // Don't move the node at the end of the drag
 269                     moveOnEnd: false,
 270                     cloneNode: true
 271                 });
 272                 del.dd.plug(Y.Plugin.DDConstrained, {
 273                     // Keep it inside the .course-content
 274                     constrain: '#'+CSS.PAGECONTENT
 275                 });
 276                 del.dd.plug(Y.Plugin.DDWinScroll);
 277
 278                 M.course.coursebase.register_module(this);
 279                 M.course.dragres = this;
 280             }
 281         },
 282
 283          /**
 284          * Apply dragdrop features to the specified selector or node that refers to section(s)
 285          *
 286          * @param baseselector The CSS selector or node to limit scope to
 287          * @return void
 288          */
 289         setup_for_section : function(baseselector) {
 290             Y.Node.all(baseselector).each(function(sectionnode) {
 291                 var resources = sectionnode.one('.'+CSS.CONTENT+' ul.'+CSS.SECTION);
 292                 // See if resources ul exists, if not create one
 293                 if (!resources) {
 294                     var resources = Y.Node.create('<ul></ul>');
 295                     resources.addClass(CSS.SECTION);
 296                     sectionnode.one('.'+CSS.CONTENT+' div.'+CSS.SUMMARY).insert(resources, 'after');
 297                 }
 298                 resources.setAttribute('data-draggroups', this.groups.join(' '));
 299                 // Define empty ul as droptarget, so that item could be moved to empty list
 300                 var tar = new Y.DD.Drop({
 301                     node: resources,
 302                     groups: this.groups,
 303                     padding: '20 0 20 0'
 304                 });
 305
 306                 // Initialise each resource/activity in this section
 307                 this.setup_for_resource('#'+sectionnode.get('id')+' li.'+CSS.ACTIVITY);
 308             }, this);
 309         },
 310         /**
 311          * Apply dragdrop features to the specified selector or node that refers to resource(s)
 312          *
 313          * @param baseselector The CSS selector or node to limit scope to
 314          * @return void
 315          */
 316         setup_for_resource : function(baseselector) {
 317             Y.Node.all(baseselector).each(function(resourcesnode) {
 318                 // Replace move icons
 319                 var move = resourcesnode.one('a.'+CSS.EDITINGMOVE);
 320                 if (move) {
 321                     move.replace(this.resourcedraghandle.cloneNode(true));
 322                 }
 323             }, this);
 324         },
 325
 326         drag_start : function(e) {
 327             // Get our drag object
 328             var drag = e.target;
 329             drag.get('dragNode').setContent(drag.get('node').get('innerHTML'));
 330             drag.get('dragNode').all('img.iconsmall').setStyle('vertical-align', 'baseline');
 331         },
 332
 333         drag_dropmiss : function(e) {
 334             // Missed the target, but we assume the user intended to drop it
 335             // on the last last ghost node location, e.drag and e.drop should be
 336             // prepared by global_drag_dropmiss parent so simulate drop_hit(e).
 337             this.drop_hit(e);
 338         },
 339
 340         drop_hit : function(e) {
 341             var drag = e.drag;
 342             // Get a reference to our drag node
 343             var dragnode = drag.get('node');
 344             var dropnode = e.drop.get('node');
 345
 346             // Add spinner if it not there
 347             var spinner = M.util.add_spinner(Y, dragnode.one(CSS.COMMANDSPAN));
 348
 349             var params = {};
 350
 351             // Handle any variables which we must pass back through to
 352             var pageparams = this.get('config').pageparams;
 353             for (varname in pageparams) {
 354                 params[varname] = pageparams[varname];
 355             }
 356
 357             // Prepare request parameters
 358             params.sesskey = M.cfg.sesskey;
 359             params.courseId = this.get('courseid');
 360             params['class'] = 'resource';
 361             params.field = 'move';
 362             params.id = Number(Y.Moodle.core_course.util.cm.getId(dragnode));
 363             params.sectionId = Y.Moodle.core_course.util.section.getId(dropnode.ancestor(M.course.format.get_section_wrapper(Y), true));
 364
 365             if (dragnode.next()) {
 366                 params.beforeId = Number(Y.Moodle.core_course.util.cm.getId(dragnode.next()));
 367             }
 368
 369             // Do AJAX request
 370             var uri = M.cfg.wwwroot + this.get('ajaxurl');
 371
 372             Y.io(uri, {
 373                 method: 'POST',
 374                 data: params,
 375                 on: {
 376                     start : function(tid) {
 377                         this.lock_drag_handle(drag, CSS.EDITINGMOVE);
 378                         spinner.show();
 379                     },
 380                     success: function(tid, response) {
 381                         var responsetext = Y.JSON.parse(response.responseText);
 382                         var params = {element: dragnode, visible: responsetext.visible};
 383                         M.course.coursebase.invoke_function('set_visibility_resource_ui', params);
 384                         this.unlock_drag_handle(drag, CSS.EDITINGMOVE);
 385                         window.setTimeout(function(e) {
 386                             spinner.hide();
 387                         }, 250);
 388                     },
 389                     failure: function(tid, response) {
 390                         this.ajax_failure(response);
 391                         this.unlock_drag_handle(drag, CSS.SECTIONHANDLE);
 392                         spinner.hide();
 393                         // TODO: revert nodes location
 394                     }
 395                 },
 396                 context:this
 397             });
 398         }
 399     }, {
 400         NAME : 'course-dragdrop-resource',
 401         ATTRS : {
 402             courseid : {
 403                 value : null
 404             },
 405             ajaxurl : {
 406                 'value' : 0
 407             },
 408             config : {
 409                 'value' : 0
 410             }
 411         }
 412     });
 413
 414     M.course = M.course || {};
 415     M.course.init_resource_dragdrop = function(params) {
 416         new DRAGRESOURCE(params);
 417     }
 418     M.course.init_section_dragdrop = function(params) {
 419         new DRAGSECTION(params);
 420     }
 421 }, '@VERSION@', {requires:['base', 'node', 'io', 'dom', 'dd', 'dd-scroll', 'moodle-core-dragdrop', 'moodle-core-notification', 'moodle-course-coursebase', 'moodle-course-util']});