MDL-38774 JavaScript: Migrate moodle-core-dragdrop to Shifter
[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 groups for this instance.
67      *
68      * @property groups
69      * @type Array
70      * @default []
71      */
72     groups: [],
74     /**
75      * The previous drop location.
76      *
77      * @property lastdroptarget
78      * @type Node
79      * @default null
80      */
81     lastdroptarget: null,
83     /**
84      * The initializer which sets up the move action.
85      *
86      * @method initializer
87      * @protected
88      */
89     initializer: function() {
90         // Listen for all drag:start events.
91         Y.DD.DDM.on('drag:start', this.global_drag_start, this);
93         // Listen for all drag:end events.
94         Y.DD.DDM.on('drag:end', this.global_drag_end, this);
96         // Listen for all drag:drag events.
97         Y.DD.DDM.on('drag:drag', this.global_drag_drag, this);
99         // Listen for all drop:over events.
100         Y.DD.DDM.on('drop:over', this.global_drop_over, this);
102         // Listen for all drop:hit events.
103         Y.DD.DDM.on('drop:hit', this.global_drop_hit, this);
105         // Listen for all drop:miss events.
106         Y.DD.DDM.on('drag:dropmiss', this.global_drag_dropmiss, this);
108         // Add keybaord listeners for accessible drag/drop
109         Y.one(Y.config.doc.body).delegate('key', this.global_keydown,
110                 'down:32, enter, esc', '.' + MOVEICON.cssclass, this);
112         // Make the accessible drag/drop respond to a single click.
113         Y.one(Y.config.doc.body).delegate('click', this.global_keydown,
114                 '.' + MOVEICON.cssclass , this);
115     },
117     /**
118      * Build a new drag handle Node.
119      *
120      * @method get_drag_handle
121      * @param {String} title The title on the drag handle
122      * @param {String} classname The name of the class to add to the node
123      * wrapping the drag icon
124      * @param {String} [iconclass] The class to add to the icon
125      * @param {Boolean} [large=false] whether to use the larger version of
126      * the drag icon
127      * @return Node The built drag handle.
128      */
129     get_drag_handle: function(title, classname, iconclass, large) {
130         var iconname = MOVEICON.pix;
131         if (large) {
132             iconname = MOVEICON.largepix;
133         }
134         var dragicon = Y.Node.create('<img />')
135             .setStyle('cursor', 'move')
136             .setAttrs({
137                 'src': M.util.image_url(iconname, MOVEICON.component),
138                 'alt': title
139             });
140         if (iconclass) {
141             dragicon.addClass(iconclass);
142         }
144         var dragelement = Y.Node.create('<span></span>')
145             .addClass(classname)
146             .setAttribute('title', title)
147             .setAttribute('tabIndex', 0)
148             .setAttribute('data-draggroups', this.groups)
149             .setAttribute('role', 'button')
150             .setAttribute('aria-grabbed', 'false');
151         dragelement.appendChild(dragicon);
152         dragelement.addClass(MOVEICON.cssclass);
154         return dragelement;
155     },
157     lock_drag_handle: function(drag, classname) {
158         drag.removeHandle('.'+classname);
159     },
161     unlock_drag_handle: function(drag, classname) {
162         drag.addHandle('.'+classname);
163     },
165     ajax_failure: function(response) {
166         var e = {
167             name: response.status+' '+response.statusText,
168             message: response.responseText
169         };
170         return new M.core.exception(e);
171     },
173     in_group: function(target) {
174         var ret = false;
175         Y.each(this.groups, function(v) {
176             if (target._groups[v]) {
177                 ret = true;
178             }
179         }, this);
180         return ret;
181     },
182     /*
183         * Drag-dropping related functions
184         */
185     global_drag_start: function(e) {
186         // Get our drag object
187         var drag = e.target;
188         // Check that drag object belongs to correct group
189         if (!this.in_group(drag)) {
190             return;
191         }
192         // Set some general styles here
193         drag.get('node').setStyle('opacity', '.25');
194         drag.get('dragNode').setStyles({
195             opacity: '.75',
196             borderColor: drag.get('node').getStyle('borderColor'),
197             backgroundColor: drag.get('node').getStyle('backgroundColor')
198         });
199         drag.get('dragNode').empty();
200         this.drag_start(e);
201     },
203     global_drag_end: function(e) {
204         var drag = e.target;
205         // Check that drag object belongs to correct group
206         if (!this.in_group(drag)) {
207             return;
208         }
209         //Put our general styles back
210         drag.get('node').setStyles({
211             visibility: '',
212             opacity: '1'
213         });
214         this.drag_end(e);
215     },
217     global_drag_drag: function(e) {
218         var drag = e.target,
219             info = e.info;
221         // Check that drag object belongs to correct group
222         if (!this.in_group(drag)) {
223             return;
224         }
226         // Note, we test both < and > situations here. We don't want to
227         // effect a change in direction if the user is only moving side
228         // to side with no Y position change.
230         // Detect changes in the position relative to the start point.
231         if (info.start[1] < info.xy[1]) {
232             // We are going up if our final position is higher than our start position.
233             this.absgoingup = true;
235         } else if (info.start[1] > info.xy[1]) {
236             // Otherwise we're going down.
237             this.absgoingup = false;
238         }
240         // Detect changes in the position relative to the last movement.
241         if (info.delta[1] < 0) {
242             // We are going up if our final position is higher than our start position.
243             this.goingup = true;
245         } else if (info.delta[1] > 0) {
246             // Otherwise we're going down.
247             this.goingup = false;
248         }
250         this.drag_drag(e);
251     },
253     global_drop_over: function(e) {
254         // Check that drop object belong to correct group.
255         if (!e.drop || !e.drop.inGroup(this.groups)) {
256             return;
257         }
259         // Get a reference to our drag and drop nodes.
260         var drag = e.drag.get('node'),
261             drop = e.drop.get('node');
263         // Save last drop target for the case of missed target processing.
264         this.lastdroptarget = e.drop;
266         // Are we dropping within the same parent node?
267         if (drop.hasClass(this.samenodeclass)) {
268             var where;
270             if (this.goingup) {
271                 where = "before";
272             } else {
273                 where = "after";
274             }
276             // Add the node contents so that it's moved, otherwise only the drag handle is moved.
277             drop.insert(drag, where);
278         } else if ((drop.hasClass(this.parentnodeclass) || drop.test('[data-droptarget="1"]')) && !drop.contains(drag)) {
279             // We are dropping on parent node and it is empty
280             if (this.goingup) {
281                 drop.append(drag);
282             } else {
283                 drop.prepend(drag);
284             }
285         }
286         this.drop_over(e);
287     },
289     global_drag_dropmiss: function(e) {
290         // drag:dropmiss does not have e.drag and e.drop properties
291         // we substitute them for the ease of use. For e.drop we use,
292         // this.lastdroptarget (ghost node we use for indicating where to drop)
293         e.drag = e.target;
294         e.drop = this.lastdroptarget;
295         // Check that drag object belongs to correct group
296         if (!this.in_group(e.drag)) {
297             return;
298         }
299         // Check that drop object belong to correct group
300         if (!e.drop || !e.drop.inGroup(this.groups)) {
301             return;
302         }
303         this.drag_dropmiss(e);
304     },
306     global_drop_hit: function(e) {
307         // Check that drop object belong to correct group
308         if (!e.drop || !e.drop.inGroup(this.groups)) {
309             return;
310         }
311         this.drop_hit(e);
312     },
314     /**
315      * This is used to build the text for the heading of the keyboard
316      * drag drop menu and the text for the nodes in the list.
317      * @method find_element_text
318      * @param {Node} n The node to start searching for a valid text node.
319      * @return {string} The text of the first text-like child node of n.
320      */
321     find_element_text: function(n) {
322         // The valid node types to get text from.
323         var nodes = n.all('h2, h3, h4, h5, span, p, div.no-overflow, div.dimmed_text');
324         var text = '';
326         nodes.each(function () {
327             if (text === '') {
328                 if (Y.Lang.trim(this.get('text')) !== '') {
329                     text = this.get('text');
330                 }
331             }
332         });
334         if (text !== '') {
335             return text;
336         }
337         return M.util.get_string('emptydragdropregion', 'moodle');
338     },
340     /**
341      * This is used to initiate a keyboard version of a drag and drop.
342      * A dialog will open listing all the valid drop targets that can be selected
343      * using tab, tab, tab, enter.
344      * @method global_start_keyboard_drag
345      * @param {Event} e The keydown / click event on the grab handle.
346      * @param {Node} dragcontainer The resolved draggable node (an ancestor of the drag handle).
347      * @param {Node} draghandle The node that triggered this action.
348      */
349     global_start_keyboard_drag: function(e, draghandle, dragcontainer) {
350         M.core.dragdrop.keydragcontainer = dragcontainer;
351         M.core.dragdrop.keydraghandle = draghandle;
353         // Indicate to a screenreader the node that is selected for drag and drop.
354         dragcontainer.setAttribute('aria-grabbed', 'true');
355         // Get the name of the thing to move.
356         var nodetitle = this.find_element_text(dragcontainer);
357         var dialogtitle = M.util.get_string('movecontent', 'moodle', nodetitle);
359         // Build the list of drop targets.
360         var droplist = Y.Node.create('<ul></ul>');
361         droplist.addClass('dragdrop-keyboard-drag');
362         var listitem;
363         var listitemtext;
365         // Search for possible drop targets.
366         var droptargets = Y.all('.' + this.samenodeclass + ', .' + this.parentnodeclass);
368         droptargets.each(function (node) {
369             var validdrop = false, labelroot = node;
370             if (node.drop && node.drop.inGroup(this.groups) && node.drop.get('node') !== dragcontainer) {
371                 // This is a drag and drop target with the same class as the grabbed node.
372                 validdrop = true;
373             } else {
374                 var elementgroups = node.getAttribute('data-draggroups').split(' ');
375                 var i, j;
376                 for (i = 0; i < elementgroups.length; i++) {
377                     for (j = 0; j < this.groups.length; j++) {
378                         if (elementgroups[i] === this.groups[j]) {
379                             // This is a parent node of the grabbed node (used for dropping in empty sections).
380                             validdrop = true;
381                             // This node will have no text - so we get the first valid text from the parent.
382                             labelroot = node.get('parentNode');
383                             break;
384                         }
385                     }
386                     if (validdrop) {
387                         break;
388                     }
389                 }
390             }
392             if (validdrop) {
393                 // It is a valid drop target - create a list item for it.
394                 listitem = Y.Node.create('<li></li>');
395                 listlink = Y.Node.create('<a></a>');
396                 nodetitle = this.find_element_text(labelroot);
398                 listitemtext = M.util.get_string('tocontent', 'moodle', nodetitle);
399                 listlink.setContent(listitemtext);
401                 // Add a data attribute so we can get the real drop target.
402                 listlink.setAttribute('data-drop-target', node.get('id'));
403                 // Notify the screen reader this is a valid drop target.
404                 listlink.setAttribute('aria-dropeffect', 'move');
405                 // Allow tabbing to the link.
406                 listlink.setAttribute('tabindex', '0');
408                 // Set the event listeners for enter, space or click.
409                 listlink.on('click', this.global_keyboard_drop, this);
410                 listlink.on('key', this.global_keyboard_drop, 'down:enter,32', this);
412                 // Add to the list or drop targets.
413                 listitem.append(listlink);
414                 droplist.append(listitem);
415             }
416         }, this);
418         // Create the dialog for the interaction.
419         M.core.dragdrop.dropui = new M.core.dialogue({
420             headerContent: dialogtitle,
421             bodyContent: droplist,
422             draggable: true,
423             visible: true,
424             centered: true
425         });
427         // Focus the first drop target.
428         if (droplist.one('a')) {
429             droplist.one('a').focus();
430         }
431     },
433     /**
434      * This is used as a simulated drag/drop event in order to prevent any
435      * subtle bugs from creating a real instance of a drag drop event. This means
436      * there are no state changes in the Y.DD.DDM and any undefined functions
437      * will trigger an obvious and fatal error.
438      * The end result is that we call all our drag/drop handlers but do not bubble the
439      * event to anyone else.
440      *
441      * The functions/properties implemented in the wrapper are:
442      * e.target
443      * e.drag
444      * e.drop
445      * e.drag.get('node')
446      * e.drop.get('node')
447      * e.drag.addHandle()
448      * e.drag.removeHandle()
449      *
450      * @method simulated_drag_drop_event
451      * @param {Node} dragnode The drag container node
452      * @param {Node} dropnode The node to initiate the drop on
453      */
454     simulated_drag_drop_event: function(dragnode, dropnode) {
456         // Subclass for wrapping both drag and drop.
457         var DragDropWrapper = function(node) {
458             this.node = node;
459         };
461         // Method e.drag.get() - get the node.
462         DragDropWrapper.prototype.get = function(param) {
463             if (param === 'node' || param === 'dragNode' || param === 'dropNode') {
464                 return this.node;
465             }
466             return null;
467         };
469         // Method e.drag.inGroup() - we have already run the group checks before triggering the event.
470         DragDropWrapper.prototype.inGroup = function() {
471             return true;
472         };
474         // Method e.drag.addHandle() - we don't want to run this.
475         DragDropWrapper.prototype.addHandle = function() {};
476         // Method e.drag.removeHandle() - we don't want to run this.
477         DragDropWrapper.prototype.removeHandle = function() {};
479         // Create instances of the DragDropWrapper.
480         this.drop = new DragDropWrapper(dropnode);
481         this.drag = new DragDropWrapper(dragnode);
482         this.target = this.drop;
483     },
485     /**
486      * This is used to complete a keyboard version of a drag and drop.
487      * A drop event will be simulated based on the drag and drop nodes.
488      * @method global_keyboard_drop
489      * @param {Event} e The keydown / click event on the proxy drop node.
490      */
491     global_keyboard_drop: function(e) {
492         // The drag node was saved.
493         var dragcontainer = M.core.dragdrop.keydragcontainer;
494         dragcontainer.setAttribute('aria-grabbed', 'false');
495         // The real drop node is stored in an attribute of the proxy.
496         var droptarget = Y.one('#' + e.target.getAttribute('data-drop-target'));
498         // Close the dialog.
499         M.core.dragdrop.dropui.hide();
500         // Cancel the event.
501         e.preventDefault();
502         // Convert to drag drop events.
503         var dragevent = new this.simulated_drag_drop_event(dragcontainer, dragcontainer);
504         var dropevent = new this.simulated_drag_drop_event(dragcontainer, droptarget);
505         // Simulate the full sequence.
506         this.drag_start(dragevent);
507         this.global_drop_over(dropevent);
508         this.global_drop_hit(dropevent);
509         M.core.dragdrop.keydraghandle.focus();
510     },
512     /**
513      * This is used to cancel a keyboard version of a drag and drop.
514      *
515      * @method global_cancel_keyboard_drag
516      */
517     global_cancel_keyboard_drag: function() {
518         if (M.core.dragdrop.keydragcontainer) {
519             M.core.dragdrop.keydragcontainer.setAttribute('aria-grabbed', 'false');
520             M.core.dragdrop.keydraghandle.focus();
521             M.core.dragdrop.keydragcontainer = null;
522         }
523     },
525     /**
526      * Process key events on the drag handles.
527      *
528      * @method global_keydown
529      * @param {EventFacade} e The keydown / click event on the drag handle.
530      */
531     global_keydown: function(e) {
532         var draghandle = e.target.ancestor('.' + MOVEICON.cssclass, true),
533             dragcontainer,
534             draggroups;
536         if (draghandle === null) {
537             // The element clicked did not have a a draghandle in it's lineage.
538             return;
539         }
541         if (e.keyCode === 27 ) {
542             // Escape to cancel from anywhere.
543             this.global_cancel_keyboard_drag();
544             e.preventDefault();
545             return;
546         }
548         // Only process events on a drag handle.
549         if (!draghandle.hasClass(MOVEICON.cssclass)) {
550             return;
551         }
553         // Do nothing if not space or enter.
554         if (e.keyCode !== 13 && e.keyCode !== 32 && e.type !== 'click') {
555             return;
556         }
558         // Check the drag groups to see if we are the handler for this node.
559         draggroups = draghandle.getAttribute('data-draggroups').split(' ');
560         var i, j, validgroup = false;
562         for (i = 0; i < draggroups.length; i++) {
563             for (j = 0; j < this.groups.length; j++) {
564                 if (draggroups[i] === this.groups[j]) {
565                     validgroup = true;
566                     break;
567                 }
568             }
569             if (validgroup) {
570                 break;
571             }
572         }
573         if (!validgroup) {
574             return;
575         }
577         // Valid event - start the keyboard drag.
578         dragcontainer = draghandle.ancestor('.yui3-dd-drop');
579         this.global_start_keyboard_drag(e, draghandle, dragcontainer);
581         e.preventDefault();
582     },
585     // Abstract functions definitions.
587     /**
588      * Callback to use when dragging starts.
589      *
590      * @method drag_start
591      * @param {EventFacade} e
592      */
593     drag_start: function() {},
595     /**
596      * Callback to use when dragging ends.
597      *
598      * @method drag_end
599      * @param {EventFacade} e
600      */
601     drag_end: function() {},
603     /**
604      * Callback to use during dragging.
605      *
606      * @method drag_drag
607      * @param {EventFacade} e
608      */
609     drag_drag: function() {},
611     /**
612      * Callback to use when dragging ends and is not over a drop target.
613      *
614      * @method drag_dropmiss
615      * @param {EventFacade} e
616      */
617     drag_dropmiss: function() {},
619     /**
620      * Callback to use when a drop over event occurs.
621      *
622      * @method drop_over
623      * @param {EventFacade} e
624      */
625     drop_over: function() {},
627     /**
628      * Callback to use on drop:hit.
629      *
630      * @method drop_hit
631      * @param {EventFacade} e
632      */
633     drop_hit: function() {}
634 }, {
635     NAME: 'dragdrop',
636     ATTRS: {}
637 });
639 M.core = M.core || {};
640 M.core.dragdrop = DRAGDROP;