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