MDL-47368 core JS: dragdrop click move fills the dom with divs
[moodle.git] / lib / yui / src / dragdrop / js / dragdrop.js
1 /**
2  * The core drag and drop module for Moodle which extends the YUI drag and
3  * drop functionality with additional features.
4  *
5  * @module moodle-core-dragdrop
6  */
7 var MOVEICON = {
8     pix: "i/move_2d",
9     largepix: "i/dragdrop",
10     component: 'moodle',
11     cssclass: 'moodle-core-dragdrop-draghandle'
12 };
14 /**
15  * General DRAGDROP class, this should not be used directly,
16  * it is supposed to be extended by your class
17  *
18  * @class M.core.dragdrop
19  * @constructor
20  * @extends Base
21  */
22 var DRAGDROP = function() {
23     DRAGDROP.superclass.constructor.apply(this, arguments);
24 };
26 Y.extend(DRAGDROP, Y.Base, {
27     /**
28      * Whether the item is being moved upwards compared with the last
29      * location.
30      *
31      * @property goingup
32      * @type Boolean
33      * @default null
34      */
35     goingup: null,
37     /**
38      * Whether the item is being moved upwards compared with the start
39      * point.
40      *
41      * @property absgoingup
42      * @type Boolean
43      * @default null
44      */
45     absgoingup: null,
47     /**
48      * The class for the object.
49      *
50      * @property samenodeclass
51      * @type String
52      * @default null
53      */
54     samenodeclass: null,
56     /**
57      * The class on the parent of the item being moved.
58      *
59      * @property parentnodeclass
60      * @type String
61      * @default
62      */
63     parentnodeclass: null,
65     /**
66      * The label to use with keyboard drag/drop to describe items of the same Node.
67      *
68      * @property samenodelabel
69      * @type Object
70      * @default null
71      */
72     samenodelabel : null,
74     /**
75      * The label to use with keyboard drag/drop to describe items of the parent Node.
76      *
77      * @property samenodelabel
78      * @type Object
79      * @default null
80      */
81     parentnodelabel : null,
83     /**
84      * The groups for this instance.
85      *
86      * @property groups
87      * @type Array
88      * @default []
89      */
90     groups: [],
92     /**
93      * The previous drop location.
94      *
95      * @property lastdroptarget
96      * @type Node
97      * @default null
98      */
99     lastdroptarget: null,
101     /**
102      * The initializer which sets up the move action.
103      *
104      * @method initializer
105      * @protected
106      */
107     initializer: function() {
108         // Listen for all drag:start events.
109         Y.DD.DDM.on('drag:start', this.global_drag_start, this);
111         // Listen for all drag:end events.
112         Y.DD.DDM.on('drag:end', this.global_drag_end, this);
114         // Listen for all drag:drag events.
115         Y.DD.DDM.on('drag:drag', this.global_drag_drag, this);
117         // Listen for all drop:over events.
118         Y.DD.DDM.on('drop:over', this.global_drop_over, this);
120         // Listen for all drop:hit events.
121         Y.DD.DDM.on('drop:hit', this.global_drop_hit, this);
123         // Listen for all drop:miss events.
124         Y.DD.DDM.on('drag:dropmiss', this.global_drag_dropmiss, this);
126         // Add keybaord listeners for accessible drag/drop
127         Y.one(Y.config.doc.body).delegate('key', this.global_keydown,
128                 'down:32, enter, esc', '.' + MOVEICON.cssclass, this);
130         // Make the accessible drag/drop respond to a single click.
131         Y.one(Y.config.doc.body).delegate('click', this.global_keydown,
132                 '.' + MOVEICON.cssclass , this);
133     },
135     /**
136      * Build a new drag handle Node.
137      *
138      * @method get_drag_handle
139      * @param {String} title The title on the drag handle
140      * @param {String} classname The name of the class to add to the node
141      * wrapping the drag icon
142      * @param {String} [iconclass] The class to add to the icon
143      * @param {Boolean} [large=false] whether to use the larger version of
144      * the drag icon
145      * @return Node The built drag handle.
146      */
147     get_drag_handle: function(title, classname, iconclass, large) {
148         var iconname = MOVEICON.pix;
149         if (large) {
150             iconname = MOVEICON.largepix;
151         }
152         var dragicon = Y.Node.create('<img />')
153             .setStyle('cursor', 'move')
154             .setAttrs({
155                 'src': M.util.image_url(iconname, MOVEICON.component),
156                 'alt': title
157             });
158         if (iconclass) {
159             dragicon.addClass(iconclass);
160         }
162         var dragelement = Y.Node.create('<span></span>')
163             .addClass(classname)
164             .setAttribute('title', title)
165             .setAttribute('tabIndex', 0)
166             .setAttribute('data-draggroups', this.groups)
167             .setAttribute('role', 'button');
168         dragelement.appendChild(dragicon);
169         dragelement.addClass(MOVEICON.cssclass);
171         return dragelement;
172     },
174     lock_drag_handle: function(drag, classname) {
175         drag.removeHandle('.'+classname);
176     },
178     unlock_drag_handle: function(drag, classname) {
179         drag.addHandle('.'+classname);
180         drag.get('activeHandle').focus();
181     },
183     ajax_failure: function(response) {
184         var e = {
185             name: response.status+' '+response.statusText,
186             message: response.responseText
187         };
188         return new M.core.exception(e);
189     },
191     in_group: function(target) {
192         var ret = false;
193         Y.each(this.groups, function(v) {
194             if (target._groups[v]) {
195                 ret = true;
196             }
197         }, this);
198         return ret;
199     },
200     /*
201         * Drag-dropping related functions
202         */
203     global_drag_start: function(e) {
204         // Get our drag object
205         var drag = e.target;
206         // Check that drag object belongs to correct group
207         if (!this.in_group(drag)) {
208             return;
209         }
210         // Set some general styles here
211         drag.get('node').setStyle('opacity', '.25');
212         drag.get('dragNode').setStyles({
213             opacity: '.75',
214             borderColor: drag.get('node').getStyle('borderColor'),
215             backgroundColor: drag.get('node').getStyle('backgroundColor')
216         });
217         drag.get('dragNode').empty();
218         this.drag_start(e);
219     },
221     global_drag_end: function(e) {
222         var drag = e.target;
223         // Check that drag object belongs to correct group
224         if (!this.in_group(drag)) {
225             return;
226         }
227         //Put our general styles back
228         drag.get('node').setStyles({
229             visibility: '',
230             opacity: '1'
231         });
232         this.drag_end(e);
233     },
235     global_drag_drag: function(e) {
236         var drag = e.target,
237             info = e.info;
239         // Check that drag object belongs to correct group
240         if (!this.in_group(drag)) {
241             return;
242         }
244         // Note, we test both < and > situations here. We don't want to
245         // effect a change in direction if the user is only moving side
246         // to side with no Y position change.
248         // Detect changes in the position relative to the start point.
249         if (info.start[1] < info.xy[1]) {
250             // We are going up if our final position is higher than our start position.
251             this.absgoingup = true;
253         } else if (info.start[1] > info.xy[1]) {
254             // Otherwise we're going down.
255             this.absgoingup = false;
256         }
258         // Detect changes in the position relative to the last movement.
259         if (info.delta[1] < 0) {
260             // We are going up if our final position is higher than our start position.
261             this.goingup = true;
263         } else if (info.delta[1] > 0) {
264             // Otherwise we're going down.
265             this.goingup = false;
266         }
268         this.drag_drag(e);
269     },
271     global_drop_over: function(e) {
272         // Check that drop object belong to correct group.
273         if (!e.drop || !e.drop.inGroup(this.groups)) {
274             return;
275         }
277         // Get a reference to our drag and drop nodes.
278         var drag = e.drag.get('node'),
279             drop = e.drop.get('node');
281         // Save last drop target for the case of missed target processing.
282         this.lastdroptarget = e.drop;
284         // Are we dropping within the same parent node?
285         if (drop.hasClass(this.samenodeclass)) {
286             var where;
288             if (this.goingup) {
289                 where = "before";
290             } else {
291                 where = "after";
292             }
294             // Add the node contents so that it's moved, otherwise only the drag handle is moved.
295             drop.insert(drag, where);
296         } else if ((drop.hasClass(this.parentnodeclass) || drop.test('[data-droptarget="1"]')) && !drop.contains(drag)) {
297             // We are dropping on parent node and it is empty
298             if (this.goingup) {
299                 drop.append(drag);
300             } else {
301                 drop.prepend(drag);
302             }
303         }
304         this.drop_over(e);
305     },
307     global_drag_dropmiss: function(e) {
308         // drag:dropmiss does not have e.drag and e.drop properties
309         // we substitute them for the ease of use. For e.drop we use,
310         // this.lastdroptarget (ghost node we use for indicating where to drop)
311         e.drag = e.target;
312         e.drop = this.lastdroptarget;
313         // Check that drag object belongs to correct group
314         if (!this.in_group(e.drag)) {
315             return;
316         }
317         // Check that drop object belong to correct group
318         if (!e.drop || !e.drop.inGroup(this.groups)) {
319             return;
320         }
321         this.drag_dropmiss(e);
322     },
324     global_drop_hit: function(e) {
325         // Check that drop object belong to correct group
326         if (!e.drop || !e.drop.inGroup(this.groups)) {
327             return;
328         }
329         this.drop_hit(e);
330     },
332     /**
333      * This is used to build the text for the heading of the keyboard
334      * drag drop menu and the text for the nodes in the list.
335      * @method find_element_text
336      * @param {Node} n The node to start searching for a valid text node.
337      * @return {string} The text of the first text-like child node of n.
338      */
339     find_element_text: function(n) {
340         // The valid node types to get text from.
341         var nodes = n.all('h2, h3, h4, h5, span, p, div.no-overflow, div.dimmed_text');
342         var text = '';
344         nodes.each(function () {
345             if (text === '') {
346                 if (Y.Lang.trim(this.get('text')) !== '') {
347                     text = this.get('text');
348                 }
349             }
350         });
352         if (text !== '') {
353             return text;
354         }
355         return M.util.get_string('emptydragdropregion', 'moodle');
356     },
358     /**
359      * This is used to initiate a keyboard version of a drag and drop.
360      * A dialog will open listing all the valid drop targets that can be selected
361      * using tab, tab, tab, enter.
362      * @method global_start_keyboard_drag
363      * @param {Event} e The keydown / click event on the grab handle.
364      * @param {Node} dragcontainer The resolved draggable node (an ancestor of the drag handle).
365      * @param {Node} draghandle The node that triggered this action.
366      */
367     global_start_keyboard_drag: function(e, draghandle, dragcontainer) {
368         M.core.dragdrop.keydragcontainer = dragcontainer;
369         M.core.dragdrop.keydraghandle = draghandle;
371         // Get the name of the thing to move.
372         var nodetitle = this.find_element_text(dragcontainer);
373         var dialogtitle = M.util.get_string('movecontent', 'moodle', nodetitle);
375         // Build the list of drop targets.
376         var droplist = Y.Node.create('<ul></ul>');
377         droplist.addClass('dragdrop-keyboard-drag');
378         var listitem;
379         var listitemtext;
381         // Search for possible drop targets.
382         var droptargets = Y.all('.' + this.samenodeclass + ', .' + this.parentnodeclass);
384         droptargets.each(function (node) {
385             var validdrop = false, labelroot = node;
386             if (node.drop && node.drop.inGroup(this.groups) && node.drop.get('node') !== dragcontainer) {
387                 // This is a drag and drop target with the same class as the grabbed node.
388                 validdrop = true;
389             } else {
390                 var elementgroups = node.getAttribute('data-draggroups').split(' ');
391                 var i, j;
392                 for (i = 0; i < elementgroups.length; i++) {
393                     for (j = 0; j < this.groups.length; j++) {
394                         if (elementgroups[i] === this.groups[j]) {
395                             // This is a parent node of the grabbed node (used for dropping in empty sections).
396                             validdrop = true;
397                             // This node will have no text - so we get the first valid text from the parent.
398                             labelroot = node.get('parentNode');
399                             break;
400                         }
401                     }
402                     if (validdrop) {
403                         break;
404                     }
405                 }
406             }
408             if (validdrop) {
409                 // It is a valid drop target - create a list item for it.
410                 listitem = Y.Node.create('<li></li>');
411                 listlink = Y.Node.create('<a></a>');
412                 nodetitle = this.find_element_text(labelroot);
414                 if (this.samenodelabel && node.hasClass(this.samenodeclass)) {
415                     listitemtext = M.util.get_string(this.samenodelabel.identifier, this.samenodelabel.component, nodetitle);
416                 } else if (this.parentnodelabel && node.hasClass(this.parentnodeclass)) {
417                     listitemtext = M.util.get_string(this.parentnodelabel.identifier, this.parentnodelabel.component, nodetitle);
418                 } else {
419                     listitemtext = M.util.get_string('tocontent', 'moodle', nodetitle);
420                 }
421                 listlink.setContent(listitemtext);
423                 // Add a data attribute so we can get the real drop target.
424                 listlink.setAttribute('data-drop-target', node.get('id'));
425                 // Allow tabbing to the link.
426                 listlink.setAttribute('tabindex', '0');
428                 // Set the event listeners for enter, space or click.
429                 listlink.on('click', this.global_keyboard_drop, this);
430                 listlink.on('key', this.global_keyboard_drop, 'down:enter,32', this);
432                 // Add to the list or drop targets.
433                 listitem.append(listlink);
434                 droplist.append(listitem);
435             }
436         }, this);
438         // Create the dialog for the interaction.
439         M.core.dragdrop.dropui = new M.core.dialogue({
440             headerContent: dialogtitle,
441             bodyContent: droplist,
442             draggable: true,
443             visible: true,
444             center: true,
445             modal: true
446         });
448         M.core.dragdrop.dropui.after('visibleChange', function(e) {
449             // After the dialogue has been closed, we call the cancel function. This will
450             // ensure that tidying up happens (e.g. focusing on the start Node).
451             if (e.prevVal && !e.newVal) {
452                 this.global_cancel_keyboard_drag();
453             }
454         }, this);
456         // Focus the first drop target.
457         if (droplist.one('a')) {
458             droplist.one('a').focus();
459         }
460     },
462     /**
463      * This is used as a simulated drag/drop event in order to prevent any
464      * subtle bugs from creating a real instance of a drag drop event. This means
465      * there are no state changes in the Y.DD.DDM and any undefined functions
466      * will trigger an obvious and fatal error.
467      * The end result is that we call all our drag/drop handlers but do not bubble the
468      * event to anyone else.
469      *
470      * The functions/properties implemented in the wrapper are:
471      * e.target
472      * e.drag
473      * e.drop
474      * e.drag.get('node')
475      * e.drop.get('node')
476      * e.drag.addHandle()
477      * e.drag.removeHandle()
478      *
479      * @method simulated_drag_drop_event
480      * @param {Node} dragnode The drag container node
481      * @param {Node} dropnode The node to initiate the drop on
482      */
483     simulated_drag_drop_event: function(dragnode, dropnode) {
485         // Subclass for wrapping both drag and drop.
486         var DragDropWrapper = function(node) {
487             this.node = node;
488         };
490         // Method e.drag.get() - get the node.
491         DragDropWrapper.prototype.get = function(param) {
492             if (param === 'node' || param === 'dragNode' || param === 'dropNode') {
493                 return this.node;
494             }
495             if (param === 'activeHandle') {
496                 return this.node.one('.editing_move');
497             }
498             return null;
499         };
501         // Method e.drag.inGroup() - we have already run the group checks before triggering the event.
502         DragDropWrapper.prototype.inGroup = function() {
503             return true;
504         };
506         // Method e.drag.addHandle() - we don't want to run this.
507         DragDropWrapper.prototype.addHandle = function() {};
508         // Method e.drag.removeHandle() - we don't want to run this.
509         DragDropWrapper.prototype.removeHandle = function() {};
511         // Create instances of the DragDropWrapper.
512         this.drop = new DragDropWrapper(dropnode);
513         this.drag = new DragDropWrapper(dragnode);
514         this.target = this.drop;
515     },
517     /**
518      * This is used to complete a keyboard version of a drag and drop.
519      * A drop event will be simulated based on the drag and drop nodes.
520      * @method global_keyboard_drop
521      * @param {Event} e The keydown / click event on the proxy drop node.
522      */
523     global_keyboard_drop: function(e) {
524         // The drag node was saved.
525         var dragcontainer = M.core.dragdrop.keydragcontainer;
526         // The real drop node is stored in an attribute of the proxy.
527         var droptarget = Y.one('#' + e.target.getAttribute('data-drop-target'));
529         // Close the dialog.
530         M.core.dragdrop.dropui.hide();
531         // Cancel the event.
532         e.preventDefault();
533         // Convert to drag drop events.
534         var dragevent = new this.simulated_drag_drop_event(dragcontainer, dragcontainer);
535         var dropevent = new this.simulated_drag_drop_event(dragcontainer, droptarget);
536         // Simulate the full sequence.
537         this.drag_start(dragevent);
538         this.global_drop_over(dropevent);
540         if (droptarget.hasClass(this.parentnodeclass) && droptarget.contains(dragcontainer)) {
541             // The global_drop_over function does not handle the case where an item was moved up, without the
542             // 'goingup' variable being set, as is the case wih keyboard drag/drop. We must detect this case and
543             // apply it after the drop_over, but before the drop_hit event in order for it to be moved to the
544             // correct location.
545             droptarget.prepend(dragcontainer);
546         }
548         this.global_drop_hit(dropevent);
549     },
551     /**
552      * This is used to cancel a keyboard version of a drag and drop.
553      *
554      * @method global_cancel_keyboard_drag
555      */
556     global_cancel_keyboard_drag: function() {
557         if (M.core.dragdrop.keydragcontainer) {
558             // Focus on the node which was being dragged.
559             M.core.dragdrop.keydraghandle.focus();
560             M.core.dragdrop.keydragcontainer = null;
561         }
562         if (M.core.dragdrop.dropui) {
563             M.core.dragdrop.dropui.destroy();
564         }
565     },
567     /**
568      * Process key events on the drag handles.
569      *
570      * @method global_keydown
571      * @param {EventFacade} e The keydown / click event on the drag handle.
572      */
573     global_keydown: function(e) {
574         var draghandle = e.target.ancestor('.' + MOVEICON.cssclass, true),
575             dragcontainer,
576             draggroups;
578         if (draghandle === null) {
579             // The element clicked did not have a a draghandle in it's lineage.
580             return;
581         }
583         if (e.keyCode === 27 ) {
584             // Escape to cancel from anywhere.
585             this.global_cancel_keyboard_drag();
586             e.preventDefault();
587             return;
588         }
590         // Only process events on a drag handle.
591         if (!draghandle.hasClass(MOVEICON.cssclass)) {
592             return;
593         }
595         // Do nothing if not space or enter.
596         if (e.keyCode !== 13 && e.keyCode !== 32 && e.type !== 'click') {
597             return;
598         }
600         // Check the drag groups to see if we are the handler for this node.
601         draggroups = draghandle.getAttribute('data-draggroups').split(' ');
602         var i, j, validgroup = false;
604         for (i = 0; i < draggroups.length; i++) {
605             for (j = 0; j < this.groups.length; j++) {
606                 if (draggroups[i] === this.groups[j]) {
607                     validgroup = true;
608                     break;
609                 }
610             }
611             if (validgroup) {
612                 break;
613             }
614         }
615         if (!validgroup) {
616             return;
617         }
619         // Valid event - start the keyboard drag.
620         dragcontainer = draghandle.ancestor('.yui3-dd-drop');
621         this.global_start_keyboard_drag(e, draghandle, dragcontainer);
623         e.preventDefault();
624     },
627     // Abstract functions definitions.
629     /**
630      * Callback to use when dragging starts.
631      *
632      * @method drag_start
633      * @param {EventFacade} e
634      */
635     drag_start: function() {},
637     /**
638      * Callback to use when dragging ends.
639      *
640      * @method drag_end
641      * @param {EventFacade} e
642      */
643     drag_end: function() {},
645     /**
646      * Callback to use during dragging.
647      *
648      * @method drag_drag
649      * @param {EventFacade} e
650      */
651     drag_drag: function() {},
653     /**
654      * Callback to use when dragging ends and is not over a drop target.
655      *
656      * @method drag_dropmiss
657      * @param {EventFacade} e
658      */
659     drag_dropmiss: function() {},
661     /**
662      * Callback to use when a drop over event occurs.
663      *
664      * @method drop_over
665      * @param {EventFacade} e
666      */
667     drop_over: function() {},
669     /**
670      * Callback to use on drop:hit.
671      *
672      * @method drop_hit
673      * @param {EventFacade} e
674      */
675     drop_hit: function() {}
676 }, {
677     NAME: 'dragdrop',
678     ATTRS: {}
679 });
681 M.core = M.core || {};
682 M.core.dragdrop = DRAGDROP;