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
|
// Copyright (c) 2015 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.
/**
* @unrestricted
*/
UI.DropTarget = class {
/**
* @param {!Element} element
* @param {!Array<{kind: string, type: !RegExp}>} transferTypes
* @param {string} messageText
* @param {function(!DataTransfer)} handleDrop
*/
constructor(element, transferTypes, messageText, handleDrop) {
element.addEventListener('dragenter', this._onDragEnter.bind(this), true);
element.addEventListener('dragover', this._onDragOver.bind(this), true);
this._element = element;
this._transferTypes = transferTypes;
this._messageText = messageText;
this._handleDrop = handleDrop;
this._enabled = true;
}
/**
* @param {boolean} enabled
*/
setEnabled(enabled) {
this._enabled = enabled;
}
/**
* @param {!Event} event
*/
_onDragEnter(event) {
if (this._enabled && this._hasMatchingType(event))
event.consume(true);
}
/**
* @param {!Event} event
* @return {boolean}
*/
_hasMatchingType(event) {
for (const transferType of this._transferTypes) {
const found = Array.from(event.dataTransfer.items).find(item => {
return transferType.kind === item.kind && !!transferType.type.exec(item.type);
});
if (found)
return true;
}
return false;
}
/**
* @param {!Event} event
*/
_onDragOver(event) {
if (!this._enabled || !this._hasMatchingType(event))
return;
event.dataTransfer.dropEffect = 'copy';
event.consume(true);
if (this._dragMaskElement)
return;
this._dragMaskElement = this._element.createChild('div', '');
const shadowRoot = UI.createShadowRootWithCoreStyles(this._dragMaskElement, 'ui/dropTarget.css');
shadowRoot.createChild('div', 'drop-target-message').textContent = this._messageText;
this._dragMaskElement.addEventListener('drop', this._onDrop.bind(this), true);
this._dragMaskElement.addEventListener('dragleave', this._onDragLeave.bind(this), true);
}
/**
* @param {!Event} event
*/
_onDrop(event) {
event.consume(true);
this._removeMask();
if (this._enabled)
this._handleDrop(event.dataTransfer);
}
/**
* @param {!Event} event
*/
_onDragLeave(event) {
event.consume(true);
this._removeMask();
}
_removeMask() {
this._dragMaskElement.remove();
delete this._dragMaskElement;
}
};
UI.DropTarget.Type = {
URI: {kind: 'string', type: /text\/uri-list/},
Folder: {kind: 'file', type: /$^/},
File: {kind: 'file', type: /.*/},
WebFile: {kind: 'file', type: /[\w]+/},
ImageFile: {kind: 'file', type: /image\/.*/},
};
|
