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