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
|
// 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.
/**
* @constructor
* @param {!Element} element
* @param {!Array.<string>} transferTypes
* @param {string} messageText
* @param {function(!DataTransfer)} handleDrop
*/
WebInspector.DropTarget = function(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;
}
WebInspector.DropTarget.Types = {
Files: "Files",
URIList: "text/uri-list"
}
WebInspector.DropTarget.prototype = {
/**
* @param {boolean} enabled
*/
setEnabled: function(enabled)
{
this._enabled = enabled;
},
/**
* @param {!Event} event
*/
_onDragEnter: function(event)
{
if (this._enabled && this._hasMatchingType(event))
event.consume(true);
},
/**
* @param {!Event} event
* @return {boolean}
*/
_hasMatchingType: function(event)
{
for (var type of this._transferTypes) {
if (event.dataTransfer.types.indexOf(type) !== -1)
return true;
}
return false;
},
/**
* @param {!Event} event
*/
_onDragOver: function(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", "");
var shadowRoot = WebInspector.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: function(event)
{
event.consume(true);
this._removeMask();
if (this._enabled)
this._handleDrop(event.dataTransfer);
},
/**
* @param {!Event} event
*/
_onDragLeave: function(event)
{
event.consume(true);
this._removeMask();
},
_removeMask: function()
{
this._dragMaskElement.remove();
delete this._dragMaskElement;
}
}
|
