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