MDL-67818 check: Rename renderer to be less generic
[moodle.git] / course / yui / src / dragdrop / js / section.js
1 /**
2  * Section drag and drop.
3  *
4  * @class M.course.dragdrop.section
5  * @constructor
6  * @extends M.core.dragdrop
7  */
8 var DRAGSECTION = function() {
9     DRAGSECTION.superclass.constructor.apply(this, arguments);
10 };
11 Y.extend(DRAGSECTION, M.core.dragdrop, {
12     sectionlistselector: null,
14     initializer: function() {
15         // Set group for parent class
16         this.groups = [CSS.SECTIONDRAGGABLE];
17         this.samenodeclass = M.course.format.get_sectionwrapperclass();
18         this.parentnodeclass = M.course.format.get_containerclass();
20         // Check if we are in single section mode
21         if (Y.Node.one('.' + CSS.JUMPMENU)) {
22             return false;
23         }
24         // Initialise sections dragging
25         this.sectionlistselector = M.course.format.get_section_wrapper(Y);
26         if (this.sectionlistselector) {
27             this.sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + this.sectionlistselector;
29             this.setup_for_section(this.sectionlistselector);
31             // Make each li element in the lists of sections draggable
32             var del = new Y.DD.Delegate({
33                 container: '.' + CSS.COURSECONTENT,
34                 nodes: '.' + CSS.SECTIONDRAGGABLE,
35                 target: true,
36                 handles: ['.' + CSS.LEFT],
37                 dragConfig: {groups: this.groups}
38             });
39             del.dd.plug(Y.Plugin.DDProxy, {
40                 // Don't move the node at the end of the drag
41                 moveOnEnd: false
42             });
43             del.dd.plug(Y.Plugin.DDConstrained, {
44                 // Keep it inside the .course-content
45                 constrain: '#' + CSS.PAGECONTENT,
46                 stickY: true
47             });
48             del.dd.plug(Y.Plugin.DDWinScroll);
49         }
50     },
52      /**
53      * Apply dragdrop features to the specified selector or node that refers to section(s)
54      *
55      * @method setup_for_section
56      * @param {String} baseselector The CSS selector or node to limit scope to
57      */
58     setup_for_section: function(baseselector) {
59         Y.Node.all(baseselector).each(function(sectionnode) {
60             // Determine the section ID
61             var sectionid = Y.Moodle.core_course.util.section.getId(sectionnode);
63             // We skip the top section as it is not draggable
64             if (sectionid > 0) {
65                 // Remove move icons
66                 var movedown = sectionnode.one('.' + CSS.RIGHT + ' a.' + CSS.MOVEDOWN);
67                 var moveup = sectionnode.one('.' + CSS.RIGHT + ' a.' + CSS.MOVEUP);
69                 // Add dragger icon
70                 var title = M.util.get_string('movesection', 'moodle', sectionid);
71                 var cssleft = sectionnode.one('.' + CSS.LEFT);
73                 if ((movedown || moveup) && cssleft) {
74                     cssleft.setStyle('cursor', 'move');
75                     cssleft.appendChild(this.get_drag_handle(title, CSS.SECTIONHANDLE, 'icon', true));
77                     if (moveup) {
78                         if (moveup.previous('br')) {
79                             moveup.previous('br').remove();
80                         } else if (moveup.next('br')) {
81                             moveup.next('br').remove();
82                         }
84                         if (moveup.ancestor('.section_action_menu') && moveup.ancestor().get('nodeName').toLowerCase() == 'li') {
85                             moveup.ancestor().remove();
86                         } else {
87                             moveup.remove();
88                         }
89                     }
90                     if (movedown) {
91                         if (movedown.previous('br')) {
92                             movedown.previous('br').remove();
93                         } else if (movedown.next('br')) {
94                             movedown.next('br').remove();
95                         }
97                         var movedownParentType = movedown.ancestor().get('nodeName').toLowerCase();
98                         if (movedown.ancestor('.section_action_menu') && movedownParentType == 'li') {
99                             movedown.ancestor().remove();
100                         } else {
101                             movedown.remove();
102                         }
103                     }
105                     // This section can be moved - add the class to indicate this to Y.DD.
106                     sectionnode.addClass(CSS.SECTIONDRAGGABLE);
107                 }
108             }
109         }, this);
110     },
112     /*
113      * Drag-dropping related functions
114      */
115     drag_start: function(e) {
116         // Get our drag object
117         var drag = e.target;
118         // Creat a dummy structure of the outer elemnents for clean styles application
119         var containernode = Y.Node.create('<' + M.course.format.get_containernode() +
120                 '></' + M.course.format.get_containernode() + '>');
121         containernode.addClass(M.course.format.get_containerclass());
122         var sectionnode = Y.Node.create('<' + M.course.format.get_sectionwrappernode() +
123                 '></' + M.course.format.get_sectionwrappernode() + '>');
124         sectionnode.addClass(M.course.format.get_sectionwrapperclass());
125         sectionnode.setStyle('margin', 0);
126         sectionnode.setContent(drag.get('node').get('innerHTML'));
127         containernode.appendChild(sectionnode);
128         drag.get('dragNode').setContent(containernode);
129         drag.get('dragNode').addClass(CSS.COURSECONTENT);
130     },
132     drag_dropmiss: function(e) {
133         // Missed the target, but we assume the user intended to drop it
134         // on the last last ghost node location, e.drag and e.drop should be
135         // prepared by global_drag_dropmiss parent so simulate drop_hit(e).
136         this.drop_hit(e);
137     },
139     get_section_index: function(node) {
140         var sectionlistselector = '.' + CSS.COURSECONTENT + ' ' + M.course.format.get_section_selector(Y),
141             sectionList = Y.all(sectionlistselector),
142             nodeIndex = sectionList.indexOf(node),
143             zeroIndex = sectionList.indexOf(Y.one('#section-0'));
145         return (nodeIndex - zeroIndex);
146     },
148     drop_hit: function(e) {
149         var drag = e.drag;
151         // Get references to our nodes and their IDs.
152         var dragnode = drag.get('node'),
153             dragnodeid = Y.Moodle.core_course.util.section.getId(dragnode),
154             loopstart = dragnodeid,
156             dropnodeindex = this.get_section_index(dragnode),
157             loopend = dropnodeindex;
159         if (dragnodeid === dropnodeindex) {
160             Y.log("Skipping move - same location moving " + dragnodeid + " to " + dropnodeindex, 'debug', 'moodle-course-dragdrop');
161             return;
162         }
164         Y.log("Moving from position " + dragnodeid + " to position " + dropnodeindex, 'debug', 'moodle-course-dragdrop');
166         if (loopstart > loopend) {
167             // If we're going up, we need to swap the loop order
168             // because loops can't go backwards.
169             loopstart = dropnodeindex;
170             loopend = dragnodeid;
171         }
173         // Get the list of nodes.
174         drag.get('dragNode').removeClass(CSS.COURSECONTENT);
175         var sectionlist = Y.Node.all(this.sectionlistselector);
177         // Add a lightbox if it's not there.
178         var lightbox = M.util.add_lightbox(Y, dragnode);
180         // Handle any variables which we must pass via AJAX.
181         var params = {},
182             pageparams = this.get('config').pageparams,
183             varname;
185         for (varname in pageparams) {
186             if (!pageparams.hasOwnProperty(varname)) {
187                 continue;
188             }
189             params[varname] = pageparams[varname];
190         }
192         // Prepare request parameters
193         params.sesskey = M.cfg.sesskey;
194         params.courseId = this.get('courseid');
195         params['class'] = 'section';
196         params.field = 'move';
197         params.id = dragnodeid;
198         params.value = dropnodeindex;
200         // Perform the AJAX request.
201         var uri = M.cfg.wwwroot + this.get('ajaxurl');
202         Y.io(uri, {
203             method: 'POST',
204             data: params,
205             on: {
206                 start: function() {
207                     lightbox.show();
208                 },
209                 success: function(tid, response) {
210                     // Update section titles, we can't simply swap them as
211                     // they might have custom title
212                     try {
213                         var responsetext = Y.JSON.parse(response.responseText);
214                         if (responsetext.error) {
215                             new M.core.ajaxException(responsetext);
216                         }
217                         M.course.format.process_sections(Y, sectionlist, responsetext, loopstart, loopend);
218                     } catch (e) {
219                         // Ignore.
220                     }
222                     // Update all of the section IDs - first unset them, then set them
223                     // to avoid duplicates in the DOM.
224                     var index;
226                     // Classic bubble sort algorithm is applied to the section
227                     // nodes between original drag node location and the new one.
228                     var swapped = false;
229                     do {
230                         swapped = false;
231                         for (index = loopstart; index <= loopend; index++) {
232                             if (Y.Moodle.core_course.util.section.getId(sectionlist.item(index - 1)) >
233                                         Y.Moodle.core_course.util.section.getId(sectionlist.item(index))) {
234                                 Y.log("Swapping " + Y.Moodle.core_course.util.section.getId(sectionlist.item(index - 1)) +
235                                         " with " + Y.Moodle.core_course.util.section.getId(sectionlist.item(index)));
236                                 // Swap section id.
237                                 var sectionid = sectionlist.item(index - 1).get('id');
238                                 sectionlist.item(index - 1).set('id', sectionlist.item(index).get('id'));
239                                 sectionlist.item(index).set('id', sectionid);
241                                 // See what format needs to swap.
242                                 M.course.format.swap_sections(Y, index - 1, index);
244                                 // Update flag.
245                                 swapped = true;
246                             }
247                         }
248                         loopend = loopend - 1;
249                     } while (swapped);
251                     window.setTimeout(function() {
252                         lightbox.hide();
253                     }, 250);
254                 },
256                 failure: function(tid, response) {
257                     this.ajax_failure(response);
258                     lightbox.hide();
259                 }
260             },
261             context: this
262         });
263     }
265 }, {
266     NAME: 'course-dragdrop-section',
267     ATTRS: {
268         courseid: {
269             value: null
270         },
271         ajaxurl: {
272             value: 0
273         },
274         config: {
275             value: 0
276         }
277     }
278 });
280 M.course = M.course || {};
281 M.course.init_section_dragdrop = function(params) {
282     new DRAGSECTION(params);
283 };