1
// Copyright 2010 The Closure Library Authors. All Rights Reserved.
2
//
3
// Licensed under the Apache License, Version 2.0 (the "License");
4
// you may not use this file except in compliance with the License.
5
// You may obtain a copy of the License at
6
//
7
//      http://www.apache.org/licenses/LICENSE-2.0
8
//
9
// Unless required by applicable law or agreed to in writing, software
10
// distributed under the License is distributed on an "AS-IS" BASIS,
11
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
// See the License for the specific language governing permissions and
13
// limitations under the License.
14

15
/**
16
 * @fileoverview Provides a files drag and drop event detector. It works on
17
 * HTML5 browsers.
18
 *
19
 * @see ../demos/filedrophandler.html
20
 */
21

22
goog.provide('goog.events.FileDropHandler');
23
goog.provide('goog.events.FileDropHandler.EventType');
24

25
goog.require('goog.array');
26
goog.require('goog.dom');
27
goog.require('goog.events.BrowserEvent');
28
goog.require('goog.events.EventHandler');
29
goog.require('goog.events.EventTarget');
30
goog.require('goog.events.EventType');
31
goog.require('goog.log');
32
goog.require('goog.log.Level');
33

34

35

36
/**
37
 * A files drag and drop event detector. Gets an {@code element} as parameter
38
 * and fires {@code goog.events.FileDropHandler.EventType.DROP} event when files
39
 * are dropped in the {@code element}.
40
 *
41
 * @param {Element|Document} element The element or document to listen on.
42
 * @param {boolean=} opt_preventDropOutside Whether to prevent a drop on the
43
 *     area outside the {@code element}. Default false.
44
 * @constructor
45
 * @extends {goog.events.EventTarget}
46
 * @final
47
 */
48
goog.events.FileDropHandler = function(element, opt_preventDropOutside) {
49
  goog.events.EventTarget.call(this);
50

51
  /**
52
   * Handler for drag/drop events.
53
   * @type {!goog.events.EventHandler<!goog.events.FileDropHandler>}
54
   * @private
55
   */
56
  this.eventHandler_ = new goog.events.EventHandler(this);
57

58
  var doc = element;
59
  if (opt_preventDropOutside) {
60
    doc = goog.dom.getOwnerDocument(element);
61
  }
62

63
  // Add dragenter listener to the owner document of the element.
64
  this.eventHandler_.listen(
65
      doc, goog.events.EventType.DRAGENTER, this.onDocDragEnter_);
66

67
  // Add dragover listener to the owner document of the element only if the
68
  // document is not the element itself.
69
  if (doc != element) {
70
    this.eventHandler_.listen(
71
        doc, goog.events.EventType.DRAGOVER, this.onDocDragOver_);
72
  }
73

74
  // Add dragover and drop listeners to the element.
75
  this.eventHandler_.listen(
76
      element, goog.events.EventType.DRAGOVER, this.onElemDragOver_);
77
  this.eventHandler_.listen(
78
      element, goog.events.EventType.DROP, this.onElemDrop_);
79
};
80
goog.inherits(goog.events.FileDropHandler, goog.events.EventTarget);
81

82

83
/**
84
 * Whether the drag event contains files. It is initialized only in the
85
 * dragenter event. It is used in all the drag events to prevent default actions
86
 * only if the drag contains files. Preventing default actions is necessary to
87
 * go from dragenter to dragover and from dragover to drop. However we do not
88
 * always want to prevent default actions, e.g. when the user drags text or
89
 * links on a text area we should not prevent the browser default action that
90
 * inserts the text in the text area. It is also necessary to stop propagation
91
 * when handling drag events on the element to prevent them from propagating
92
 * to the document.
93
 * @private
94
 * @type {boolean}
95
 */
96
goog.events.FileDropHandler.prototype.dndContainsFiles_ = false;
97

98

99
/**
100
 * A logger, used to help us debug the algorithm.
101
 * @type {goog.log.Logger}
102
 * @private
103
 */
104
goog.events.FileDropHandler.prototype.logger_ =
105
    goog.log.getLogger('goog.events.FileDropHandler');
106

107

108
/**
109
 * The types of events fired by this class.
110
 * @enum {string}
111
 */
112
goog.events.FileDropHandler.EventType = {
113
  DROP: goog.events.EventType.DROP
114
};
115

116

117
/** @override */
118
goog.events.FileDropHandler.prototype.disposeInternal = function() {
119
  goog.events.FileDropHandler.superClass_.disposeInternal.call(this);
120
  this.eventHandler_.dispose();
121
};
122

123

124
/**
125
 * Dispatches the DROP event.
126
 * @param {goog.events.BrowserEvent} e The underlying browser event.
127
 * @private
128
 */
129
goog.events.FileDropHandler.prototype.dispatch_ = function(e) {
130
  goog.log.fine(this.logger_, 'Firing DROP event...');
131
  var event = new goog.events.BrowserEvent(e.getBrowserEvent());
132
  event.type = goog.events.FileDropHandler.EventType.DROP;
133
  this.dispatchEvent(event);
134
};
135

136

137
/**
138
 * Handles dragenter on the document.
139
 * @param {goog.events.BrowserEvent} e The dragenter event.
140
 * @private
141
 */
142
goog.events.FileDropHandler.prototype.onDocDragEnter_ = function(e) {
143
  goog.log.log(
144
      this.logger_, goog.log.Level.FINER,
145
      '"' + e.target.id + '" (' + e.target + ') dispatched: ' + e.type);
146
  var dt = e.getBrowserEvent().dataTransfer;
147
  // Check whether the drag event contains files.
148
  this.dndContainsFiles_ = !!(
149
      dt && ((dt.types && (goog.array.contains(dt.types, 'Files') ||
150
                           goog.array.contains(dt.types, 'public.file-url'))) ||
151
             (dt.files && dt.files.length > 0)));
152
  // If it does
153
  if (this.dndContainsFiles_) {
154
    // Prevent default actions.
155
    e.preventDefault();
156
  }
157
  goog.log.log(
158
      this.logger_, goog.log.Level.FINER,
159
      'dndContainsFiles_: ' + this.dndContainsFiles_);
160
};
161

162

163
/**
164
 * Handles dragging something over the document.
165
 * @param {goog.events.BrowserEvent} e The dragover event.
166
 * @private
167
 */
168
goog.events.FileDropHandler.prototype.onDocDragOver_ = function(e) {
169
  goog.log.log(
170
      this.logger_, goog.log.Level.FINEST,
171
      '"' + e.target.id + '" (' + e.target + ') dispatched: ' + e.type);
172
  if (this.dndContainsFiles_) {
173
    // Prevent default actions.
174
    e.preventDefault();
175
    // Disable the drop on the document outside the drop zone.
176
    var dt = e.getBrowserEvent().dataTransfer;
177
    dt.dropEffect = 'none';
178
  }
179
};
180

181

182
/**
183
 * Handles dragging something over the element (drop zone).
184
 * @param {goog.events.BrowserEvent} e The dragover event.
185
 * @private
186
 */
187
goog.events.FileDropHandler.prototype.onElemDragOver_ = function(e) {
188
  goog.log.log(
189
      this.logger_, goog.log.Level.FINEST,
190
      '"' + e.target.id + '" (' + e.target + ') dispatched: ' + e.type);
191
  if (this.dndContainsFiles_) {
192
    // Prevent default actions and stop the event from propagating further to
193
    // the document. Both lines are needed! (See comment above).
194
    e.preventDefault();
195
    e.stopPropagation();
196
    // Allow the drop on the drop zone.
197
    var dt = e.getBrowserEvent().dataTransfer;
198

199
    // IE bug #811625 (https://goo.gl/UWuxX0) will throw error SCRIPT65535
200
    // when attempting to set property effectAllowed on IE10+.
201
    // See more: https://github.com/google/closure-library/issues/485.
202
    try {
203
      dt.effectAllowed = 'all';
204
    } catch (err) {
205
    }
206
    dt.dropEffect = 'copy';
207
  }
208
};
209

210

211
/**
212
 * Handles dropping something onto the element (drop zone).
213
 * @param {goog.events.BrowserEvent} e The drop event.
214
 * @private
215
 */
216
goog.events.FileDropHandler.prototype.onElemDrop_ = function(e) {
217
  goog.log.log(
218
      this.logger_, goog.log.Level.FINER,
219
      '"' + e.target.id + '" (' + e.target + ') dispatched: ' + e.type);
220
  // If the drag and drop event contains files.
221
  if (this.dndContainsFiles_) {
222
    // Prevent default actions and stop the event from propagating further to
223
    // the document. Both lines are needed! (See comment above).
224
    e.preventDefault();
225
    e.stopPropagation();
226
    // Dispatch DROP event.
227
    this.dispatch_(e);
228
  }
229
};
230

231