Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
YUI.add('dd-drag', function (Y, NAME) {
2
 
3
 
4
    /**
5
     * Provides the ability to drag a Node.
6
     * @module dd
7
     * @submodule dd-drag
8
     */
9
    /**
10
     * Provides the ability to drag a Node.
11
     * @class Drag
12
     * @extends Base
13
     * @constructor
14
     * @namespace DD
15
     */
16
 
17
    var DDM = Y.DD.DDM,
18
        NODE = 'node',
19
        DRAGGING = 'dragging',
20
        DRAG_NODE = 'dragNode',
21
        OFFSET_HEIGHT = 'offsetHeight',
22
        OFFSET_WIDTH = 'offsetWidth',
23
        /**
24
        * Handles the mouseup DOM event, does nothing internally just fires.
25
        * @event drag:mouseup
26
        * @bubbles DDM
27
        * @type {CustomEvent}
28
        */
29
        /**
30
        * Handles the mousedown DOM event, checks to see if you have a valid handle then starts the drag timers.
31
        * @event drag:mouseDown
32
        * @preventable _defMouseDownFn
33
        * @param {EventFacade} event An Event Facade object with the following specific property added:
34
        * <dl><dt>ev</dt><dd>The original mousedown event.</dd></dl>
35
        * @bubbles DDM
36
        * @type {CustomEvent}
37
        */
38
        EV_MOUSE_DOWN = 'drag:mouseDown',
39
        /**
40
        * Fires after the mousedown event has been cleared.
41
        * @event drag:afterMouseDown
42
        * @param {EventFacade} event An Event Facade object with the following specific property added:
43
        * <dl><dt>ev</dt><dd>The original mousedown event.</dd></dl>
44
        * @bubbles DDM
45
        * @type {CustomEvent}
46
        */
47
        EV_AFTER_MOUSE_DOWN = 'drag:afterMouseDown',
48
        /**
49
        * Fires after a handle is removed.
50
        * @event drag:removeHandle
51
        * @param {EventFacade} event An Event Facade object with the following specific property added:
52
        * <dl><dt>handle</dt><dd>The handle that was removed.</dd></dl>
53
        * @bubbles DDM
54
        * @type {CustomEvent}
55
        */
56
        EV_REMOVE_HANDLE = 'drag:removeHandle',
57
        /**
58
        * Fires after a handle is added.
59
        * @event drag:addHandle
60
        * @param {EventFacade} event An Event Facade object with the following specific property added:
61
        * <dl><dt>handle</dt><dd>The handle that was added.</dd></dl>
62
        * @bubbles DDM
63
        * @type {CustomEvent}
64
        */
65
        EV_ADD_HANDLE = 'drag:addHandle',
66
        /**
67
        * Fires after an invalid selector is removed.
68
        * @event drag:removeInvalid
69
        * @param {EventFacade} event An Event Facade object with the following specific property added:
70
        * <dl><dt>handle</dt><dd>The handle that was removed.</dd></dl>
71
        * @bubbles DDM
72
        * @type {CustomEvent}
73
        */
74
        EV_REMOVE_INVALID = 'drag:removeInvalid',
75
        /**
76
        * Fires after an invalid selector is added.
77
        * @event drag:addInvalid
78
        * @param {EventFacade} event An Event Facade object with the following specific property added:
79
        * <dl><dt>handle</dt><dd>The handle that was added.</dd></dl>
80
        * @bubbles DDM
81
        * @type {CustomEvent}
82
        */
83
        EV_ADD_INVALID = 'drag:addInvalid',
84
        /**
85
        * Fires at the start of a drag operation.
86
        * @event drag:start
87
        * @param {EventFacade} event An Event Facade object with the following specific property added:
88
        * <dl>
89
        * <dt>pageX</dt><dd>The original node position X.</dd>
90
        * <dt>pageY</dt><dd>The original node position Y.</dd>
91
        * <dt>startTime</dt><dd>The startTime of the event. getTime on the current Date object.</dd>
92
        * </dl>
93
        * @bubbles DDM
94
        * @type {CustomEvent}
95
        */
96
        EV_START = 'drag:start',
97
        /**
98
        * Fires at the end of a drag operation.
99
        * @event drag:end
100
        * @param {EventFacade} event An Event Facade object with the following specific property added:
101
        * <dl>
102
        * <dt>pageX</dt><dd>The current node position X.</dd>
103
        * <dt>pageY</dt><dd>The current node position Y.</dd>
104
        * <dt>startTime</dt><dd>The startTime of the event, from the start event.</dd>
105
        * <dt>endTime</dt><dd>The endTime of the event. getTime on the current Date object.</dd>
106
        * </dl>
107
        * @bubbles DDM
108
        * @type {CustomEvent}
109
        */
110
        EV_END = 'drag:end',
111
        /**
112
        * Fires every mousemove during a drag operation.
113
        * @event drag:drag
114
        * @param {EventFacade} event An Event Facade object with the following specific property added:
115
        * <dl>
116
        * <dt>pageX</dt><dd>The current node position X.</dd>
117
        * <dt>pageY</dt><dd>The current node position Y.</dd>
118
        * <dt>scroll</dt><dd>Should a scroll action occur.</dd>
119
        * <dt>info</dt><dd>Object hash containing calculated XY arrays: start, xy, delta, offset</dd>
120
        * </dl>
121
        * @bubbles DDM
122
        * @type {CustomEvent}
123
        */
124
        EV_DRAG = 'drag:drag',
125
        /**
126
        * Fires when this node is aligned.
127
        * @event drag:align
128
        * @preventable _defAlignFn
129
        * @param {EventFacade} event An Event Facade object with the following specific property added:
130
        * <dl>
131
        * <dt>pageX</dt><dd>The current node position X.</dd>
132
        * <dt>pageY</dt><dd>The current node position Y.</dd>
133
        * </dl>
134
        * @bubbles DDM
135
        * @type {CustomEvent}
136
        */
137
        EV_ALIGN = 'drag:align',
138
        /**
139
        * Fires when this node is over a Drop Target. (Fired from dd-drop)
140
        * @event drag:over
141
        * @param {EventFacade} event An Event Facade object with the following specific property added:
142
        * <dl>
143
        * <dt>drop</dt><dd>The drop object at the time of the event.</dd>
144
        * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
145
        * </dl>
146
        * @bubbles DDM
147
        * @type {CustomEvent}
148
        */
149
        /**
150
        * Fires when this node enters a Drop Target. (Fired from dd-drop)
151
        * @event drag:enter
152
        * @param {EventFacade} event An Event Facade object with the following specific property added:
153
        * <dl>
154
        * <dt>drop</dt><dd>The drop object at the time of the event.</dd>
155
        * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
156
        * </dl>
157
        * @bubbles DDM
158
        * @type {CustomEvent}
159
        */
160
        /**
161
        * Fires when this node exits a Drop Target. (Fired from dd-drop)
162
        * @event drag:exit
163
        * @param {EventFacade} event An Event Facade object with the following specific property added:
164
        * <dl>
165
        * <dt>drop</dt><dd>The drop object at the time of the event.</dd>
166
        * </dl>
167
        * @bubbles DDM
168
        * @type {CustomEvent}
169
        */
170
        /**
171
        * Fires when this node is dropped on a valid Drop Target. (Fired from dd-ddm-drop)
172
        * @event drag:drophit
173
        * @param {EventFacade} event An Event Facade object with the following specific property added:
174
        * <dl>
175
        * <dt>drop</dt><dd>The best guess on what was dropped on.</dd>
176
        * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
177
        * <dt>others</dt><dd>An array of all the other drop targets that was dropped on.</dd>
178
        * </dl>
179
        * @bubbles DDM
180
        * @type {CustomEvent}
181
        */
182
        /**
183
        * Fires when this node is dropped on an invalid Drop Target. (Fired from dd-ddm-drop)
184
        * @event drag:dropmiss
185
        * @param {EventFacade} event An Event Facade object with the following specific property added:
186
        * <dl>
187
        * <dt>pageX</dt><dd>The current node position X.</dd>
188
        * <dt>pageY</dt><dd>The current node position Y.</dd>
189
        * </dl>
190
        * @bubbles DDM
191
        * @type {CustomEvent}
192
        */
193
 
194
    Drag = function(o) {
195
        this._lazyAddAttrs = false;
196
        Drag.superclass.constructor.apply(this, arguments);
197
 
198
        var valid = DDM._regDrag(this);
199
        if (!valid) {
200
            Y.error('Failed to register node, already in use: ' + o.node);
201
        }
202
    };
203
 
204
    Drag.NAME = 'drag';
205
 
206
    /**
207
    * This property defaults to "mousedown", but when drag-gestures is loaded, it is changed to "gesturemovestart"
208
    * @static
209
    * @property START_EVENT
210
    */
211
    Drag.START_EVENT = 'mousedown';
212
 
213
    Drag.ATTRS = {
214
        /**
215
        * Y.Node instance to use as the element to initiate a drag operation
216
        * @attribute node
217
        * @type Node
218
        */
219
        node: {
220
            setter: function(node) {
221
                if (this._canDrag(node)) {
222
                    return node;
223
                }
224
                var n = Y.one(node);
225
                if (!n) {
226
                    Y.error('DD.Drag: Invalid Node Given: ' + node);
227
                }
228
                return n;
229
            }
230
        },
231
        /**
232
        * Y.Node instance to use as the draggable element, defaults to node
233
        * @attribute dragNode
234
        * @type Node
235
        */
236
        dragNode: {
237
            setter: function(node) {
238
                if (this._canDrag(node)) {
239
                    return node;
240
                }
241
                var n = Y.one(node);
242
                if (!n) {
243
                    Y.error('DD.Drag: Invalid dragNode Given: ' + node);
244
                }
245
                return n;
246
            }
247
        },
248
        /**
249
        * Offset the drag element by the difference in cursor position: default true
250
        * @attribute offsetNode
251
        * @type Boolean
252
        */
253
        offsetNode: {
254
            value: true
255
        },
256
        /**
257
        * Center the dragNode to the mouse position on drag:start: default false
258
        * @attribute startCentered
259
        * @type Boolean
260
        */
261
        startCentered: {
262
            value: false
263
        },
264
        /**
265
        * The number of pixels to move to start a drag operation, default is 3.
266
        * @attribute clickPixelThresh
267
        * @type Number
268
        */
269
        clickPixelThresh: {
270
            value: DDM.get('clickPixelThresh')
271
        },
272
        /**
273
        * The number of milliseconds a mousedown has to pass to start a drag operation, default is 1000.
274
        * @attribute clickTimeThresh
275
        * @type Number
276
        */
277
        clickTimeThresh: {
278
            value: DDM.get('clickTimeThresh')
279
        },
280
        /**
281
        * Set to lock this drag element so that it can't be dragged: default false.
282
        * @attribute lock
283
        * @type Boolean
284
        */
285
        lock: {
286
            value: false,
287
            setter: function(lock) {
288
                if (lock) {
289
                    this.get(NODE).addClass(DDM.CSS_PREFIX + '-locked');
290
                } else {
291
                    this.get(NODE).removeClass(DDM.CSS_PREFIX + '-locked');
292
                }
293
                return lock;
294
            }
295
        },
296
        /**
297
        * A payload holder to store arbitrary data about this drag object, can be used to store any value.
298
        * @attribute data
299
        * @type Mixed
300
        */
301
        data: {
302
            value: false
303
        },
304
        /**
305
        * If this is false, the drag element will not move with the cursor: default true. Can be used to "resize" the element.
306
        * @attribute move
307
        * @type Boolean
308
        */
309
        move: {
310
            value: true
311
        },
312
        /**
313
        * Use the protective shim on all drag operations: default true. Only works with dd-ddm, not dd-ddm-base.
314
        * @attribute useShim
315
        * @type Boolean
316
        */
317
        useShim: {
318
            value: true
319
        },
320
        /**
321
        * Config option is set by Drag to inform you of which handle fired the drag event (in the case that there are several handles): default false.
322
        * @attribute activeHandle
323
        * @type Node
324
        */
325
        activeHandle: {
326
            value: false
327
        },
328
        /**
329
        * By default a drag operation will only begin if the mousedown occurred with the primary mouse button.
330
        * Setting this to false will allow for all mousedown events to trigger a drag.
331
        * @attribute primaryButtonOnly
332
        * @type Boolean
333
        */
334
        primaryButtonOnly: {
335
            value: true
336
        },
337
        /**
338
        * This attribute is not meant to be used by the implementor, it is meant to be used as an Event tracker so you can listen for it to change.
339
        * @attribute dragging
340
        * @type Boolean
341
        */
342
        dragging: {
343
            value: false
344
        },
345
        parent: {
346
            value: false
347
        },
348
        /**
349
        * This attribute only works if the dd-drop module has been loaded. It will make this node a drop target as well as draggable.
350
        * @attribute target
351
        * @type Boolean
352
        */
353
        target: {
354
            value: false,
355
            setter: function(config) {
356
                this._handleTarget(config);
357
                return config;
358
            }
359
        },
360
        /**
361
        * This attribute only works if the dd-drop module is active. It will set the dragMode (point, intersect, strict) of this Drag instance.
362
        * @attribute dragMode
363
        * @type String
364
        */
365
        dragMode: {
366
            value: null,
367
            setter: function(mode) {
368
                return DDM._setDragMode(mode);
369
            }
370
        },
371
        /**
372
        * Array of groups to add this drag into.
373
        * @attribute groups
374
        * @type Array
375
        */
376
        groups: {
377
            value: ['default'],
378
            getter: function() {
379
                if (!this._groups) {
380
                    this._groups = {};
381
                    return [];
382
                }
383
 
384
                return Y.Object.keys(this._groups);
385
            },
386
            setter: function(g) {
387
                this._groups = Y.Array.hash(g);
388
                return g;
389
            }
390
        },
391
        /**
392
        * Array of valid handles to add. Adding something here will set all handles, even if previously added with addHandle
393
        * @attribute handles
394
        * @type Array
395
        */
396
        handles: {
397
            value: null,
398
            setter: function(g) {
399
                if (g) {
400
                    this._handles = {};
401
                    Y.Array.each(g, function(v) {
402
                        var key = v;
403
                        if (v instanceof Y.Node || v instanceof Y.NodeList) {
404
                            key = v._yuid;
405
                        }
406
                        this._handles[key] = v;
407
                    }, this);
408
                } else {
409
                    this._handles = null;
410
                }
411
                return g;
412
            }
413
        },
414
        /**
415
        * Controls the default bubble parent for this Drag instance. Default: Y.DD.DDM. Set to false to disable bubbling. Use bubbleTargets in config
416
        * @deprecated
417
        * @attribute bubbles
418
        * @type Object
419
        */
420
        bubbles: {
421
            setter: function(t) {
422
                Y.log('bubbles is deprecated use bubbleTargets: HOST', 'warn', 'dd');
423
                this.addTarget(t);
424
                return t;
425
            }
426
        },
427
        /**
428
        * Should the mousedown event be halted. Default: true
429
        * @attribute haltDown
430
        * @type Boolean
431
        */
432
        haltDown: {
433
            value: true
434
        }
435
    };
436
 
437
    Y.extend(Drag, Y.Base, {
438
        /**
439
        * Checks the object for the methods needed to drag the object around.
440
        * Normally this would be a node instance, but in the case of Graphics, it
441
        * may be an SVG node or something similar.
442
        * @method _canDrag
443
        * @private
444
        * @param {Object} n The object to check
445
        * @return {Boolean} True or false if the Object contains the methods needed to Drag
446
        */
447
        _canDrag: function(n) {
448
            if (n && n.setXY && n.getXY && n.test && n.contains) {
449
                return true;
450
            }
451
            return false;
452
        },
453
        /**
454
        * The default bubbleTarget for this object. Default: Y.DD.DDM
455
        * @private
456
        * @property _bubbleTargets
457
        */
458
        _bubbleTargets: Y.DD.DDM,
459
        /**
460
        * Add this Drag instance to a group, this should be used for on-the-fly group additions.
461
        * @method addToGroup
462
        * @param {String} g The group to add this Drag Instance to.
463
        * @chainable
464
        */
465
        addToGroup: function(g) {
466
            this._groups[g] = true;
467
            DDM._activateTargets();
468
            return this;
469
        },
470
        /**
471
        * Remove this Drag instance from a group, this should be used for on-the-fly group removals.
472
        * @method removeFromGroup
473
        * @param {String} g The group to remove this Drag Instance from.
474
        * @chainable
475
        */
476
        removeFromGroup: function(g) {
477
            delete this._groups[g];
478
            DDM._activateTargets();
479
            return this;
480
        },
481
        /**
482
        * This will be a reference to the Drop instance associated with this drag if the target: true config attribute is set..
483
        * @property target
484
        * @type {Object}
485
        */
486
        target: null,
487
        /**
488
        * Attribute handler for the target config attribute.
489
        * @private
490
        * @method _handleTarget
491
        * @param {Boolean/Object} config The Config
492
        */
493
        _handleTarget: function(config) {
494
            if (Y.DD.Drop) {
495
                if (config === false) {
496
                    if (this.target) {
497
                        DDM._unregTarget(this.target);
498
                        this.target = null;
499
                    }
500
                } else {
501
                    if (!Y.Lang.isObject(config)) {
502
                        config = {};
503
                    }
504
                    config.bubbleTargets = config.bubbleTargets || this.getTargets();
505
                    config.node = this.get(NODE);
506
                    config.groups = config.groups || this.get('groups');
507
                    this.target = new Y.DD.Drop(config);
508
                }
509
            }
510
        },
511
        /**
512
        * Storage Array for the groups this drag belongs to.
513
        * @private
514
        * @property _groups
515
        * @type {Array}
516
        */
517
        _groups: null,
518
        /**
519
        * This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
520
        * @private
521
        * @method _createEvents
522
        */
523
        _createEvents: function() {
524
 
525
            this.publish(EV_MOUSE_DOWN, {
526
                defaultFn: this._defMouseDownFn,
527
                queuable: false,
528
                emitFacade: true,
529
                bubbles: true,
530
                prefix: 'drag'
531
            });
532
 
533
            this.publish(EV_ALIGN, {
534
                defaultFn: this._defAlignFn,
535
                queuable: false,
536
                emitFacade: true,
537
                bubbles: true,
538
                prefix: 'drag'
539
            });
540
 
541
            this.publish(EV_DRAG, {
542
                defaultFn: this._defDragFn,
543
                queuable: false,
544
                emitFacade: true,
545
                bubbles: true,
546
                prefix: 'drag'
547
            });
548
 
549
            this.publish(EV_END, {
550
                defaultFn: this._defEndFn,
551
                preventedFn: this._prevEndFn,
552
                queuable: false,
553
                emitFacade: true,
554
                bubbles: true,
555
                prefix: 'drag'
556
            });
557
 
558
            var ev = [
559
                EV_AFTER_MOUSE_DOWN,
560
                EV_REMOVE_HANDLE,
561
                EV_ADD_HANDLE,
562
                EV_REMOVE_INVALID,
563
                EV_ADD_INVALID,
564
                EV_START,
565
                'drag:drophit',
566
                'drag:dropmiss',
567
                'drag:over',
568
                'drag:enter',
569
                'drag:exit'
570
            ];
571
 
572
            Y.Array.each(ev, function(v) {
573
                this.publish(v, {
574
                    type: v,
575
                    emitFacade: true,
576
                    bubbles: true,
577
                    preventable: false,
578
                    queuable: false,
579
                    prefix: 'drag'
580
                });
581
            }, this);
582
        },
583
        /**
584
        * A private reference to the mousedown DOM event
585
        * @private
586
        * @property _ev_md
587
        * @type {EventFacade}
588
        */
589
        _ev_md: null,
590
        /**
591
        * The getTime of the mousedown event. Not used, just here in case someone wants/needs to use it.
592
        * @private
593
        * @property _startTime
594
        * @type Date
595
        */
596
        _startTime: null,
597
        /**
598
        * The getTime of the mouseup event. Not used, just here in case someone wants/needs to use it.
599
        * @private
600
        * @property _endTime
601
        * @type Date
602
        */
603
        _endTime: null,
604
        /**
605
        * A private hash of the valid drag handles
606
        * @private
607
        * @property _handles
608
        * @type {Object}
609
        */
610
        _handles: null,
611
        /**
612
        * A private hash of the invalid selector strings
613
        * @private
614
        * @property _invalids
615
        * @type {Object}
616
        */
617
        _invalids: null,
618
        /**
619
        * A private hash of the default invalid selector strings: {'textarea': true, 'input': true, 'a': true, 'button': true, 'select': true}
620
        * @private
621
        * @property _invalidsDefault
622
        * @type {Object}
623
        */
624
        _invalidsDefault: {'textarea': true, 'input': true, 'a': true, 'button': true, 'select': true },
625
        /**
626
        * Private flag to see if the drag threshhold was met
627
        * @private
628
        * @property _dragThreshMet
629
        * @type {Boolean}
630
        */
631
        _dragThreshMet: null,
632
        /**
633
        * Flag to determine if the drag operation came from a timeout
634
        * @private
635
        * @property _fromTimeout
636
        * @type {Boolean}
637
        */
638
        _fromTimeout: null,
639
        /**
640
        * Holder for the setTimeout call
641
        * @private
642
        * @property _clickTimeout
643
        * @type {Boolean}
644
        */
645
        _clickTimeout: null,
646
        /**
647
        * The offset of the mouse position to the element's position
648
        * @property deltaXY
649
        * @type {Array}
650
        */
651
        deltaXY: null,
652
        /**
653
        * The initial mouse position
654
        * @property startXY
655
        * @type {Array}
656
        */
657
        startXY: null,
658
        /**
659
        * The initial element position
660
        * @property nodeXY
661
        * @type {Array}
662
        */
663
        nodeXY: null,
664
        /**
665
        * The position of the element as it's moving (for offset calculations)
666
        * @property lastXY
667
        * @type {Array}
668
        */
669
        lastXY: null,
670
        /**
671
        * The xy that the node will be set to. Changing this will alter the position as it's dragged.
672
        * @property actXY
673
        * @type {Array}
674
        */
675
        actXY: null,
676
        /**
677
        * The real xy position of the node.
678
        * @property realXY
679
        * @type {Array}
680
        */
681
        realXY: null,
682
        /**
683
        * The XY coords of the mousemove
684
        * @property mouseXY
685
        * @type {Array}
686
        */
687
        mouseXY: null,
688
        /**
689
        * A region object associated with this drag, used for checking regions while dragging.
690
        * @property region
691
        * @type Object
692
        */
693
        region: null,
694
        /**
695
        * Handler for the mouseup DOM event
696
        * @private
697
        * @method _handleMouseUp
698
        * @param {EventFacade} ev The Event
699
        */
700
        _handleMouseUp: function() {
701
            this.fire('drag:mouseup');
702
            this._fixIEMouseUp();
703
            if (DDM.activeDrag) {
704
                DDM._end();
705
            }
706
        },
707
        /**
708
        * The function we use as the ondragstart handler when we start a drag
709
        * in Internet Explorer. This keeps IE from blowing up on images as drag handles.
710
        * @private
711
        * @method _fixDragStart
712
        * @param {Event} e The Event
713
        */
714
        _fixDragStart: function(e) {
715
            if (this.validClick(e)) {
716
                e.preventDefault();
717
            }
718
        },
719
        /**
720
        * The function we use as the onselectstart handler when we start a drag in Internet Explorer
721
        * @private
722
        * @method _ieSelectFix
723
        */
724
        _ieSelectFix: function() {
725
            return false;
726
        },
727
        /**
728
        * We will hold a copy of the current "onselectstart" method on this property, and reset it after we are done using it.
729
        * @private
730
        * @property _ieSelectBack
731
        */
732
        _ieSelectBack: null,
733
        /**
734
        * This method copies the onselectstart listner on the document to the _ieSelectFix property
735
        * @private
736
        * @method _fixIEMouseDown
737
        */
738
        _fixIEMouseDown: function() {
739
            if (Y.UA.ie) {
740
                this._ieSelectBack = Y.config.doc.body.onselectstart;
741
                Y.config.doc.body.onselectstart = this._ieSelectFix;
742
            }
743
        },
744
        /**
745
        * This method copies the _ieSelectFix property back to the onselectstart listner on the document.
746
        * @private
747
        * @method _fixIEMouseUp
748
        */
749
        _fixIEMouseUp: function() {
750
            if (Y.UA.ie) {
751
                Y.config.doc.body.onselectstart = this._ieSelectBack;
752
            }
753
        },
754
        /**
755
        * Handler for the mousedown DOM event
756
        * @private
757
        * @method _handleMouseDownEvent
758
        * @param {EventFacade} ev  The Event
759
        */
760
        _handleMouseDownEvent: function(ev) {
761
            if (this.validClick(ev)) {
762
                ev.preventDefault();
763
            }
764
            this.fire(EV_MOUSE_DOWN, { ev: ev });
765
        },
766
        /**
767
        * Handler for the mousedown DOM event
768
        * @private
769
        * @method _defMouseDownFn
770
        * @param {EventFacade} e  The Event
771
        */
772
        _defMouseDownFn: function(e) {
773
            var ev = e.ev;
774
 
775
            this._dragThreshMet = false;
776
            this._ev_md = ev;
777
 
778
            if (this.get('primaryButtonOnly') && ev.button > 1) {
779
                return false;
780
            }
781
            if (this.validClick(ev)) {
782
                this._fixIEMouseDown(ev);
783
                if (Drag.START_EVENT.indexOf('gesture') !== 0) {
784
                    //Only do these if it's not a gesture
785
                    if (this.get('haltDown')) {
786
                        Y.log('Halting MouseDown', 'info', 'drag');
787
                        ev.halt();
788
                    } else {
789
                        Y.log('Preventing Default on MouseDown', 'info', 'drag');
790
                        ev.preventDefault();
791
                    }
792
                }
793
 
794
                this._setStartPosition([ev.pageX, ev.pageY]);
795
 
796
                DDM.activeDrag = this;
797
 
798
                this._clickTimeout = Y.later(this.get('clickTimeThresh'), this, this._timeoutCheck);
799
            }
800
            this.fire(EV_AFTER_MOUSE_DOWN, { ev: ev });
801
        },
802
        /**
803
        * Method first checks to see if we have handles, if so it validates the click
804
        * against the handle. Then if it finds a valid handle, it checks it against
805
        * the invalid handles list. Returns true if a good handle was used, false otherwise.
806
        * @method validClick
807
        * @param {EventFacade} ev  The Event
808
        * @return {Boolean}
809
        */
810
        validClick: function(ev) {
811
            var r = false, n = false,
812
            tar = ev.target,
813
            hTest = null,
814
            els = null,
815
            nlist = null,
816
            set = false;
817
            if (this._handles) {
818
                Y.Object.each(this._handles, function(i, n) {
819
                    if (i instanceof Y.Node || i instanceof Y.NodeList) {
820
                        if (!r) {
821
                            nlist = i;
822
                            if (nlist instanceof Y.Node) {
823
                                nlist = new Y.NodeList(i._node);
824
                            }
825
                            nlist.each(function(nl) {
826
                                if (nl.contains(tar)) {
827
                                    r = true;
828
                                }
829
                            });
830
                        }
831
                    } else if (Y.Lang.isString(n)) {
832
                        //Am I this or am I inside this
833
                        if (tar.test(n + ', ' + n + ' *') && !hTest) {
834
                            hTest = n;
835
                            r = true;
836
                        }
837
                    }
838
                });
839
            } else {
840
                n = this.get(NODE);
841
                if (n.contains(tar) || n.compareTo(tar)) {
842
                    r = true;
843
                }
844
            }
845
            if (r) {
846
                if (this._invalids) {
847
                    Y.Object.each(this._invalids, function(i, n) {
848
                        if (Y.Lang.isString(n)) {
849
                            //Am I this or am I inside this
850
                            if (tar.test(n + ', ' + n + ' *')) {
851
                                r = false;
852
                            }
853
                        }
854
                    });
855
                }
856
            }
857
            if (r) {
858
                if (hTest) {
859
                    els = ev.currentTarget.all(hTest);
860
                    set = false;
861
                    els.each(function(n) {
862
                        if ((n.contains(tar) || n.compareTo(tar)) && !set) {
863
                            set = true;
864
                            this.set('activeHandle', n);
865
                        }
866
                    }, this);
867
                } else {
868
                    this.set('activeHandle', this.get(NODE));
869
                }
870
            }
871
            return r;
872
        },
873
        /**
874
        * Sets the current position of the Element and calculates the offset
875
        * @private
876
        * @method _setStartPosition
877
        * @param {Array} xy The XY coords to set the position to.
878
        */
879
        _setStartPosition: function(xy) {
880
            this.startXY = xy;
881
 
882
            this.nodeXY = this.lastXY = this.realXY = this.get(NODE).getXY();
883
 
884
            if (this.get('offsetNode')) {
885
                this.deltaXY = [(this.startXY[0] - this.nodeXY[0]), (this.startXY[1] - this.nodeXY[1])];
886
            } else {
887
                this.deltaXY = [0, 0];
888
            }
889
        },
890
        /**
891
        * The method passed to setTimeout to determine if the clickTimeThreshold was met.
892
        * @private
893
        * @method _timeoutCheck
894
        */
895
        _timeoutCheck: function() {
896
            if (!this.get('lock') && !this._dragThreshMet && this._ev_md) {
897
                this._fromTimeout = this._dragThreshMet = true;
898
                this.start();
899
                this._alignNode([this._ev_md.pageX, this._ev_md.pageY], true);
900
            }
901
        },
902
        /**
903
        * Remove a Selector added by addHandle
904
        * @method removeHandle
905
        * @param {String} str The selector for the handle to be removed.
906
        * @chainable
907
        */
908
        removeHandle: function(str) {
909
            var key = str;
910
            if (str instanceof Y.Node || str instanceof Y.NodeList) {
911
                key = str._yuid;
912
            }
913
            if (this._handles[key]) {
914
                delete this._handles[key];
915
                this.fire(EV_REMOVE_HANDLE, { handle: str });
916
            }
917
            return this;
918
        },
919
        /**
920
        * Add a handle to a drag element. Drag only initiates when a mousedown happens on this element.
921
        * @method addHandle
922
        * @param {String} str The selector to test for a valid handle. Must be a child of the element.
923
        * @chainable
924
        */
925
        addHandle: function(str) {
926
            if (!this._handles) {
927
                this._handles = {};
928
            }
929
            var key = str;
930
            if (str instanceof Y.Node || str instanceof Y.NodeList) {
931
                key = str._yuid;
932
            }
933
            this._handles[key] = str;
934
            this.fire(EV_ADD_HANDLE, { handle: str });
935
            return this;
936
        },
937
        /**
938
        * Remove an invalid handle added by addInvalid
939
        * @method removeInvalid
940
        * @param {String} str The invalid handle to remove from the internal list.
941
        * @chainable
942
        */
943
        removeInvalid: function(str) {
944
            if (this._invalids[str]) {
945
                this._invalids[str] = null;
946
                delete this._invalids[str];
947
                this.fire(EV_REMOVE_INVALID, { handle: str });
948
            }
949
            return this;
950
        },
951
        /**
952
        * Add a selector string to test the handle against. If the test passes the drag operation will not continue.
953
        * @method addInvalid
954
        * @param {String} str The selector to test against to determine if this is an invalid drag handle.
955
        * @chainable
956
        */
957
        addInvalid: function(str) {
958
            if (Y.Lang.isString(str)) {
959
                this._invalids[str] = true;
960
                this.fire(EV_ADD_INVALID, { handle: str });
961
            }
962
            return this;
963
        },
964
        /**
965
        * Internal init handler
966
        * @private
967
        * @method initializer
968
        */
969
        initializer: function() {
970
 
971
            this.get(NODE).dd = this;
972
 
973
            if (!this.get(NODE).get('id')) {
974
                var id = Y.stamp(this.get(NODE));
975
                this.get(NODE).set('id', id);
976
            }
977
 
978
            this.actXY = [];
979
 
980
            this._invalids = Y.clone(this._invalidsDefault, true);
981
 
982
            this._createEvents();
983
 
984
            if (!this.get(DRAG_NODE)) {
985
                this.set(DRAG_NODE, this.get(NODE));
986
            }
987
 
988
            //Fix for #2528096
989
            //Don't prep the DD instance until all plugins are loaded.
990
            this.on('initializedChange', Y.bind(this._prep, this));
991
 
992
            //Shouldn't have to do this..
993
            this.set('groups', this.get('groups'));
994
        },
995
        /**
996
        * Attach event listners and add classname
997
        * @private
998
        * @method _prep
999
        */
1000
        _prep: function() {
1001
            this._dragThreshMet = false;
1002
            var node = this.get(NODE);
1003
            node.addClass(DDM.CSS_PREFIX + '-draggable');
1004
            node.on(Drag.START_EVENT, Y.bind(this._handleMouseDownEvent, this));
1005
            node.on('mouseup', Y.bind(this._handleMouseUp, this));
1006
            node.on('dragstart', Y.bind(this._fixDragStart, this));
1007
        },
1008
        /**
1009
        * Detach event listeners and remove classname
1010
        * @private
1011
        * @method _unprep
1012
        */
1013
        _unprep: function() {
1014
            var node = this.get(NODE);
1015
            node.removeClass(DDM.CSS_PREFIX + '-draggable');
1016
            node.detachAll('mouseup');
1017
            node.detachAll('dragstart');
1018
            node.detachAll(Drag.START_EVENT);
1019
            this.mouseXY = [];
1020
            this.deltaXY = [0,0];
1021
            this.startXY = [];
1022
            this.nodeXY = [];
1023
            this.lastXY = [];
1024
            this.actXY = [];
1025
            this.realXY = [];
1026
        },
1027
        /**
1028
        * Starts the drag operation
1029
        * @method start
1030
        * @chainable
1031
        */
1032
        start: function() {
1033
            if (!this.get('lock') && !this.get(DRAGGING)) {
1034
                var node = this.get(NODE), ow, oh, xy;
1035
                this._startTime = (new Date()).getTime();
1036
 
1037
                DDM._start();
1038
                node.addClass(DDM.CSS_PREFIX + '-dragging');
1039
                this.fire(EV_START, {
1040
                    pageX: this.nodeXY[0],
1041
                    pageY: this.nodeXY[1],
1042
                    startTime: this._startTime
1043
                });
1044
                node = this.get(DRAG_NODE);
1045
                xy = this.nodeXY;
1046
 
1047
                ow = node.get(OFFSET_WIDTH);
1048
                oh = node.get(OFFSET_HEIGHT);
1049
 
1050
                if (this.get('startCentered')) {
1051
                    this._setStartPosition([xy[0] + (ow / 2), xy[1] + (oh / 2)]);
1052
                }
1053
 
1054
 
1055
                this.region = {
1056
                    '0': xy[0],
1057
                    '1': xy[1],
1058
                    area: 0,
1059
                    top: xy[1],
1060
                    right: xy[0] + ow,
1061
                    bottom: xy[1] + oh,
1062
                    left: xy[0]
1063
                };
1064
                this.set(DRAGGING, true);
1065
            }
1066
            return this;
1067
        },
1068
        /**
1069
        * Ends the drag operation
1070
        * @method end
1071
        * @chainable
1072
        */
1073
        end: function() {
1074
            this._endTime = (new Date()).getTime();
1075
            if (this._clickTimeout) {
1076
                this._clickTimeout.cancel();
1077
            }
1078
            this._dragThreshMet = this._fromTimeout = false;
1079
 
1080
            if (!this.get('lock') && this.get(DRAGGING)) {
1081
                this.fire(EV_END, {
1082
                    pageX: this.lastXY[0],
1083
                    pageY: this.lastXY[1],
1084
                    startTime: this._startTime,
1085
                    endTime: this._endTime
1086
                });
1087
            }
1088
            this.get(NODE).removeClass(DDM.CSS_PREFIX + '-dragging');
1089
            this.set(DRAGGING, false);
1090
            this.deltaXY = [0, 0];
1091
 
1092
            return this;
1093
        },
1094
        /**
1095
        * Handler for fixing the selection in IE
1096
        * @private
1097
        * @method _defEndFn
1098
        */
1099
        _defEndFn: function() {
1100
            this._fixIEMouseUp();
1101
            this._ev_md = null;
1102
        },
1103
        /**
1104
        * Handler for preventing the drag:end event. It will reset the node back to it's start position
1105
        * @private
1106
        * @method _prevEndFn
1107
        */
1108
        _prevEndFn: function() {
1109
            this._fixIEMouseUp();
1110
            //Bug #1852577
1111
            this.get(DRAG_NODE).setXY(this.nodeXY);
1112
            this._ev_md = null;
1113
            this.region = null;
1114
        },
1115
        /**
1116
        * Calculates the offsets and set's the XY that the element will move to.
1117
        * @private
1118
        * @method _align
1119
        * @param {Array} xy The xy coords to align with.
1120
        */
1121
        _align: function(xy) {
1122
            this.fire(EV_ALIGN, {pageX: xy[0], pageY: xy[1] });
1123
        },
1124
        /**
1125
        * Calculates the offsets and set's the XY that the element will move to.
1126
        * @private
1127
        * @method _defAlignFn
1128
        * @param {EventFacade} e The drag:align event.
1129
        */
1130
        _defAlignFn: function(e) {
1131
            this.actXY = [e.pageX - this.deltaXY[0], e.pageY - this.deltaXY[1]];
1132
        },
1133
        /**
1134
        * This method performs the alignment before the element move.
1135
        * @private
1136
        * @method _alignNode
1137
        * @param {Array} eXY The XY to move the element to, usually comes from the mousemove DOM event.
1138
        */
1139
        _alignNode: function(eXY, scroll) {
1140
            this._align(eXY);
1141
            if (!scroll) {
1142
                this._moveNode();
1143
            }
1144
        },
1145
        /**
1146
        * This method performs the actual element move.
1147
        * @private
1148
        * @method _moveNode
1149
        */
1150
        _moveNode: function(scroll) {
1151
            //if (!this.get(DRAGGING)) {
1152
            //    return;
1153
            //}
1154
            var diffXY = [], diffXY2 = [], startXY = this.nodeXY, xy = this.actXY;
1155
 
1156
            diffXY[0] = (xy[0] - this.lastXY[0]);
1157
            diffXY[1] = (xy[1] - this.lastXY[1]);
1158
 
1159
            diffXY2[0] = (xy[0] - this.nodeXY[0]);
1160
            diffXY2[1] = (xy[1] - this.nodeXY[1]);
1161
 
1162
 
1163
            this.region = {
1164
                '0': xy[0],
1165
                '1': xy[1],
1166
                area: 0,
1167
                top: xy[1],
1168
                right: xy[0] + this.get(DRAG_NODE).get(OFFSET_WIDTH),
1169
                bottom: xy[1] + this.get(DRAG_NODE).get(OFFSET_HEIGHT),
1170
                left: xy[0]
1171
            };
1172
 
1173
            this.fire(EV_DRAG, {
1174
                pageX: xy[0],
1175
                pageY: xy[1],
1176
                scroll: scroll,
1177
                info: {
1178
                    start: startXY,
1179
                    xy: xy,
1180
                    delta: diffXY,
1181
                    offset: diffXY2
1182
                }
1183
            });
1184
 
1185
            this.lastXY = xy;
1186
        },
1187
        /**
1188
        * Default function for drag:drag. Fired from _moveNode.
1189
        * @private
1190
        * @method _defDragFn
1191
        * @param {EventFacade} ev The drag:drag event
1192
        */
1193
        _defDragFn: function(e) {
1194
            if (this.get('move')) {
1195
                if (e.scroll && e.scroll.node) {
1196
                    var domNode = e.scroll.node.getDOMNode();
1197
                    //If it's the window
1198
                    if (domNode === Y.config.win) {
1199
                        domNode.scrollTo(e.scroll.left, e.scroll.top);
1200
                    } else {
1201
                        e.scroll.node.set('scrollTop', e.scroll.top);
1202
                        e.scroll.node.set('scrollLeft', e.scroll.left);
1203
                    }
1204
                }
1205
                this.get(DRAG_NODE).setXY([e.pageX, e.pageY]);
1206
                this.realXY = [e.pageX, e.pageY];
1207
            }
1208
        },
1209
        /**
1210
        * Fired from DragDropMgr (DDM) on mousemove.
1211
        * @private
1212
        * @method _move
1213
        * @param {EventFacade} ev The mousemove DOM event
1214
        */
1215
        _move: function(ev) {
1216
            if (this.get('lock')) {
1217
                return false;
1218
            }
1219
 
1220
            this.mouseXY = [ev.pageX, ev.pageY];
1221
            if (!this._dragThreshMet) {
1222
                var diffX = Math.abs(this.startXY[0] - ev.pageX),
1223
                diffY = Math.abs(this.startXY[1] - ev.pageY);
1224
                if (diffX > this.get('clickPixelThresh') || diffY > this.get('clickPixelThresh')) {
1225
                    this._dragThreshMet = true;
1226
                    this.start();
1227
                    //This only happens on gestures to stop the page from scrolling
1228
                    if (ev && ev.preventDefault) {
1229
                        ev.preventDefault();
1230
                    }
1231
                    this._alignNode([ev.pageX, ev.pageY]);
1232
                }
1233
            } else {
1234
                if (this._clickTimeout) {
1235
                    this._clickTimeout.cancel();
1236
                }
1237
                this._alignNode([ev.pageX, ev.pageY]);
1238
            }
1239
        },
1240
        /**
1241
        * Method will forcefully stop a drag operation. For example calling this from inside an ESC keypress handler will stop this drag.
1242
        * @method stopDrag
1243
        * @chainable
1244
        */
1245
        stopDrag: function() {
1246
            if (this.get(DRAGGING)) {
1247
                DDM._end();
1248
            }
1249
            return this;
1250
        },
1251
        /**
1252
        * Lifecycle destructor, unreg the drag from the DDM and remove listeners
1253
        * @private
1254
        * @method destructor
1255
        */
1256
        destructor: function() {
1257
            this._unprep();
1258
            if (this.target) {
1259
                this.target.destroy();
1260
            }
1261
            DDM._unregDrag(this);
1262
        }
1263
    });
1264
    Y.namespace('DD');
1265
    Y.DD.Drag = Drag;
1266
 
1267
 
1268
 
1269
 
1270
}, '3.18.1', {"requires": ["dd-ddm-base", "selector-css2"]});