d7d8d4e89d9b5f21f1fe58f8a8bfd5e383edc6a7
[moodle.git] / course / yui / dragdrop / dragdrop.js
1 YUI.add('moodle-course-dragdrop', function(Y) {
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     };
24     var DRAGSECTION = function() {
25         DRAGSECTION.superclass.constructor.apply(this, arguments);
26     };
27     Y.extend(DRAGSECTION, M.core.dragdrop, {
28         sectionlistselector : null,
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();
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;
45                 this.setup_for_section(this.sectionlistselector);
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         },
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);
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);
85                     // Add dragger icon
86                     var title = M.util.get_string('movesection', 'moodle', sectionid);
87                     var cssleft = sectionnode.one('.'+CSS.LEFT);
89                     if ((movedown || moveup) && cssleft) {
90                         cssleft.setStyle('cursor', 'move');
91                         cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE, 'icon', true));
93                         if (moveup) {
94                             moveup.remove();
95                         }
96                         if (movedown) {
97                             movedown.remove();
98                         }
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         },
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         },
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         },
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);
141             var loopstart = dragnodeid;
142             var loopend = dropnodeid;
144             if (this.goingup) {
145                 loopstart = dropnodeid;
146                 loopend = dragnodeid;
147             }
149             // Get the list of nodes
150             drag.get('dragNode').removeClass(CSS.COURSECONTENT);
151             var sectionlist = Y.Node.all(this.sectionlistselector);
153             // Add lightbox if it not there
154             var lightbox = M.util.add_lightbox(Y, dragnode);
156             var params = {};
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             }
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;
172             // Do AJAX request
173             var uri = M.cfg.wwwroot + this.get('ajaxurl');
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) {}
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);
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         }
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     });
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);
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);
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);
278                 M.course.coursebase.register_module(this);
279                 M.course.dragres = this;
280             }
281         },
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                 });
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         },
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         },
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         },
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');
346             // Add spinner if it not there
347             var spinner = M.util.add_spinner(Y, dragnode.one(CSS.COMMANDSPAN));
349             var params = {};
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             }
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));
365             if (dragnode.next()) {
366                 params.beforeId = Number(Y.Moodle.core_course.util.cm.getId(dragnode.next()));
367             }
369             // Do AJAX request
370             var uri = M.cfg.wwwroot + this.get('ajaxurl');
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     });
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']});