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 };
  13
  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 };
  25
  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,
  36
  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,
  46
  47     /**
  48      * The class for the object.
  49      *
  50      * @property samenodeclass
  51      * @type String
  52      * @default null
  53      */
  54     samenodeclass: null,
  55
  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,
  64
  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,
  73
  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,
  82
  83     /**
  84      * The groups for this instance.
  85      *
  86      * @property groups
  87      * @type Array
  88      * @default []
  89      */
  90     groups: [],
  91
  92     /**
  93      * The previous drop location.
  94      *
  95      * @property lastdroptarget
  96      * @type Node
  97      * @default null
  98      */
  99     lastdroptarget: null,
 100
 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);
 110
 111         // Listen for all drag:end events.
 112         Y.DD.DDM.on('drag:end', this.global_drag_end, this);
 113
 114         // Listen for all drag:drag events.
 115         Y.DD.DDM.on('drag:drag', this.global_drag_drag, this);
 116
 117         // Listen for all drop:over events.
 118         Y.DD.DDM.on('drop:over', this.global_drop_over, this);
 119
 120         // Listen for all drop:hit events.
 121         Y.DD.DDM.on('drop:hit', this.global_drop_hit, this);
 122
 123         // Listen for all drop:miss events.
 124         Y.DD.DDM.on('drag:dropmiss', this.global_drag_dropmiss, this);
 125
 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);
 129
 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     },
 134
 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         }
 161
 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);
 170
 171         return dragelement;
 172     },
 173
 174     lock_drag_handle: function(drag, classname) {
 175         drag.removeHandle('.'+classname);
 176     },
 177
 178     unlock_drag_handle: function(drag, classname) {
 179         drag.addHandle('.'+classname);
 180         drag.get('activeHandle').focus();
 181     },
 182
 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     },
 190
 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     },
 220
 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     },
 234
 235     global_drag_drag: function(e) {
 236         var drag = e.target,
 237             info = e.info;
 238
 239         // Check that drag object belongs to correct group
 240         if (!this.in_group(drag)) {
 241             return;
 242         }
 243
 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.
 247
 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;
 252
 253         } else if (info.start[1] > info.xy[1]) {
 254             // Otherwise we're going down.
 255             this.absgoingup = false;
 256         }
 257
 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;
 262
 263         } else if (info.delta[1] > 0) {
 264             // Otherwise we're going down.
 265             this.goingup = false;
 266         }
 267
 268         this.drag_drag(e);
 269     },
 270
 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         }
 276
 277         // Get a reference to our drag and drop nodes.
 278         var drag = e.drag.get('node'),
 279             drop = e.drop.get('node');
 280
 281         // Save last drop target for the case of missed target processing.
 282         this.lastdroptarget = e.drop;
 283
 284         // Are we dropping within the same parent node?
 285         if (drop.hasClass(this.samenodeclass)) {
 286             var where;
 287
 288             if (this.goingup) {
 289                 where = "before";
 290             } else {
 291                 where = "after";
 292             }
 293
 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     },
 306
 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     },
 323
 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     },
 331
 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 = '';
 343
 344         nodes.each(function () {
 345             if (text === '') {
 346                 if (Y.Lang.trim(this.get('text')) !== '') {
 347                     text = this.get('text');
 348                 }
 349             }
 350         });
 351
 352         if (text !== '') {
 353             return text;
 354         }
 355         return M.util.get_string('emptydragdropregion', 'moodle');
 356     },
 357
 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;
 370
 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);
 374
 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;
 380
 381         // Search for possible drop targets.
 382         var droptargets = Y.all('.' + this.samenodeclass + ', .' + this.parentnodeclass);
 383
 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             }
 407
 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);
 413
 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);
 422
 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');
 427
 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);
 431
 432                 // Add to the list or drop targets.
 433                 listitem.append(listlink);
 434                 droplist.append(listitem);
 435             }
 436         }, this);
 437
 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         });
 447
 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);
 455
 456         // Focus the first drop target.
 457         if (droplist.one('a')) {
 458             droplist.one('a').focus();
 459         }
 460     },
 461
 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) {
 484
 485         // Subclass for wrapping both drag and drop.
 486         var DragDropWrapper = function(node) {
 487             this.node = node;
 488         };
 489
 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         };
 500
 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         };
 505
 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() {};
 510
 511         // Create instances of the DragDropWrapper.
 512         this.drop = new DragDropWrapper(dropnode);
 513         this.drag = new DragDropWrapper(dragnode);
 514         this.target = this.drop;
 515     },
 516
 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'));
 528
 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);
 539
 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         }
 547
 548         this.global_drop_hit(dropevent);
 549     },
 550
 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     },
 563
 564     /**
 565      * Process key events on the drag handles.
 566      *
 567      * @method global_keydown
 568      * @param {EventFacade} e The keydown / click event on the drag handle.
 569      */
 570     global_keydown: function(e) {
 571         var draghandle = e.target.ancestor('.' + MOVEICON.cssclass, true),
 572             dragcontainer,
 573             draggroups;
 574
 575         if (draghandle === null) {
 576             // The element clicked did not have a a draghandle in it's lineage.
 577             return;
 578         }
 579
 580         if (e.keyCode === 27 ) {
 581             // Escape to cancel from anywhere.
 582             this.global_cancel_keyboard_drag();
 583             e.preventDefault();
 584             return;
 585         }
 586
 587         // Only process events on a drag handle.
 588         if (!draghandle.hasClass(MOVEICON.cssclass)) {
 589             return;
 590         }
 591
 592         // Do nothing if not space or enter.
 593         if (e.keyCode !== 13 && e.keyCode !== 32 && e.type !== 'click') {
 594             return;
 595         }
 596
 597         // Check the drag groups to see if we are the handler for this node.
 598         draggroups = draghandle.getAttribute('data-draggroups').split(' ');
 599         var i, j, validgroup = false;
 600
 601         for (i = 0; i < draggroups.length; i++) {
 602             for (j = 0; j < this.groups.length; j++) {
 603                 if (draggroups[i] === this.groups[j]) {
 604                     validgroup = true;
 605                     break;
 606                 }
 607             }
 608             if (validgroup) {
 609                 break;
 610             }
 611         }
 612         if (!validgroup) {
 613             return;
 614         }
 615
 616         // Valid event - start the keyboard drag.
 617         dragcontainer = draghandle.ancestor('.yui3-dd-drop');
 618         this.global_start_keyboard_drag(e, draghandle, dragcontainer);
 619
 620         e.preventDefault();
 621     },
 622
 623
 624     // Abstract functions definitions.
 625
 626     /**
 627      * Callback to use when dragging starts.
 628      *
 629      * @method drag_start
 630      * @param {EventFacade} e
 631      */
 632     drag_start: function() {},
 633
 634     /**
 635      * Callback to use when dragging ends.
 636      *
 637      * @method drag_end
 638      * @param {EventFacade} e
 639      */
 640     drag_end: function() {},
 641
 642     /**
 643      * Callback to use during dragging.
 644      *
 645      * @method drag_drag
 646      * @param {EventFacade} e
 647      */
 648     drag_drag: function() {},
 649
 650     /**
 651      * Callback to use when dragging ends and is not over a drop target.
 652      *
 653      * @method drag_dropmiss
 654      * @param {EventFacade} e
 655      */
 656     drag_dropmiss: function() {},
 657
 658     /**
 659      * Callback to use when a drop over event occurs.
 660      *
 661      * @method drop_over
 662      * @param {EventFacade} e
 663      */
 664     drop_over: function() {},
 665
 666     /**
 667      * Callback to use on drop:hit.
 668      *
 669      * @method drop_hit
 670      * @param {EventFacade} e
 671      */
 672     drop_hit: function() {}
 673 }, {
 674     NAME: 'dragdrop',
 675     ATTRS: {}
 676 });
 677
 678 M.core = M.core || {};
 679 M.core.dragdrop = DRAGDROP;