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