1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview DragWrapper
* A class for simplifying HTML5 drag and drop. Classes should use this to
* handle the nitty gritty of nested drag enters and leaves.
*/
cr.define('cr.ui', function() {
/** @interface */
const DragWrapperDelegate = function() {};
// TODO(devlin): The only method this "delegate" actually needs is
// shouldAcceptDrag(); the rest can be events emitted by the DragWrapper.
DragWrapperDelegate.prototype = {
/**
* @param {MouseEvent} e The event for the drag.
* @return {boolean} Whether the drag should be accepted. If false,
* subsequent methods (doDrag*) will not be called.
*/
shouldAcceptDrag: assertNotReached,
/** @param {MouseEvent} e */
doDragEnter: assertNotReached,
/** @param {MouseEvent} e */
doDragLeave: assertNotReached,
/** @param {MouseEvent} e */
doDragOver: assertNotReached,
/** @param {MouseEvent} e */
doDrop: assertNotReached,
};
/**
* Creates a DragWrapper which listens for drag target events on |target| and
* delegates event handling to |delegate|.
* @param {!Element} target
* @param {!cr.ui.DragWrapperDelegate} delegate
* @constructor
*/
function DragWrapper(target, delegate) {
this.initialize(target, delegate);
}
DragWrapper.prototype = {
initialize: function(target, delegate) {
target.addEventListener('dragenter', this.onDragEnter_.bind(this));
target.addEventListener('dragover', this.onDragOver_.bind(this));
target.addEventListener('drop', this.onDrop_.bind(this));
target.addEventListener('dragleave', this.onDragLeave_.bind(this));
this.target_ = target;
this.delegate_ = delegate;
},
/**
* The number of un-paired dragenter events that have fired on |this|. This
* is incremented by |onDragEnter_| and decremented by |onDragLeave_|. This
* is necessary because dragging over child widgets will fire additional
* enter and leave events on |this|. A non-zero value does not necessarily
* indicate that |isCurrentDragTarget()| is true.
* @type {number}
* @private
*/
dragEnters_: 0,
/**
* Whether the tile page is currently being dragged over with data it can
* accept.
* @type {boolean}
*/
get isCurrentDragTarget() {
return this.target_.classList.contains('drag-target');
},
/**
* Delegate for dragenter events fired on |target_|.
* @param {MouseEvent} e A MouseEvent for the drag.
* @private
*/
onDragEnter_: function(e) {
if (++this.dragEnters_ == 1) {
if (this.delegate_.shouldAcceptDrag(e)) {
this.target_.classList.add('drag-target');
this.delegate_.doDragEnter(e);
}
} else {
// Sometimes we'll get an enter event over a child element without an
// over event following it. In this case we have to still call the
// drag over delegate so that we make the necessary updates (one visible
// symptom of not doing this is that the cursor's drag state will
// flicker during drags).
this.onDragOver_(e);
}
},
/**
* Thunk for dragover events fired on |target_|.
* @param {Event} e A MouseEvent for the drag.
* @private
*/
onDragOver_: function(e) {
if (!this.target_.classList.contains('drag-target')) {
return;
}
this.delegate_.doDragOver(e);
},
/**
* Thunk for drop events fired on |target_|.
* @param {Event} e A MouseEvent for the drag.
* @private
*/
onDrop_: function(e) {
this.dragEnters_ = 0;
if (!this.target_.classList.contains('drag-target')) {
return;
}
this.target_.classList.remove('drag-target');
this.delegate_.doDrop(e);
},
/**
* Thunk for dragleave events fired on |target_|.
* @param {Event} e A MouseEvent for the drag.
* @private
*/
onDragLeave_: function(e) {
if (--this.dragEnters_ > 0) {
return;
}
this.target_.classList.remove('drag-target');
this.delegate_.doDragLeave(e);
},
};
return {
DragWrapper: DragWrapper,
DragWrapperDelegate: DragWrapperDelegate,
};
});
|
