It will be useful to have DRAGSTART event when the user drags a file to the
browser window.
A use case is showing the drop zone only when the user drags the file similar
to how gmail does it.
The following code:
1. Adds the DRAGSTART event.
2. Dispatch the DRAGSTART event in the onDocDragEnter_ function.
3. Updated the dispatch_ function to support event type param.
4. Updated the onElemDrop_ function to work with the new dispatch_ function.
Thanks
/**
* The types of events fired by this class.
* @enum {string}
*/
goog.events.FileDropHandler.EventType = {
DROP: goog.events.EventType.DROP,
DRAGSTART: goog.events.EventType.DRAGSTART // new!!!!
};
/**
* Dispatches the DROP event.
* @param {goog.events.BrowserEvent} e The underlying browser event.
* @param (string) type
* @private
*/
goog.events.FileDropHandler.prototype.dispatch_ = function(e, type) {
this.logger_.fine('Firing DROP event...');
var event = new goog.events.BrowserEvent(e.getBrowserEvent());
event.type = type;
try {
this.dispatchEvent(event);
} finally {
event.dispose();
}
};
/**
* Handles dragenter on the document.
* @param {goog.events.BrowserEvent} e The dragenter event.
* @private
*/
goog.events.FileDropHandler.prototype.onDocDragEnter_ = function(e) {
this.logger_.finer('"' + e.target.id + '" (' + e.target + ') dispatched: ' +
e.type);
var dt = e.getBrowserEvent().dataTransfer;
// Check whether the drag event contains files.
this.dndContainsFiles_ = !!(dt &&
((dt.types &&
(goog.array.contains(dt.types, 'Files') ||
goog.array.contains(dt.types, 'public.file-url'))) ||
(dt.files && dt.files.length > 0)));
// If it does
if (this.dndContainsFiles_) {
// Prevent default actions.
e.preventDefault();
// Dispatch DRAGSTART event.
this.dispatch_(e, goog.events.EventType.DRAGSTART); // new!!!!
}
this.logger_.finer('dndContainsFiles_: ' + this.dndContainsFiles_);
};
/**
* Handles dropping something onto the element (drop zone).
* @param {goog.events.BrowserEvent} e The drop event.
* @private
*/
goog.events.FileDropHandler.prototype.onElemDrop_ = function(e) {
this.logger_.finer('"' + e.target.id + '" (' + e.target + ') dispatched: ' +
e.type);
// If the drag and drop event contains files.
if (this.dndContainsFiles_) {
// Prevent default actions and stop the event from propagating further to
// the document. Both lines are needed! (See comment above).
e.preventDefault();
e.stopPropagation();
// Dispatch DROP event.
this.dispatch_(e, goog.events.EventType.DROP); // new!!!!
}
};
Original issue reported on code.google.com by pablo.platt@gmail.com on 3 May 2012 at 3:20
Original issue reported on code.google.com by
pablo.platt@gmail.com
on 3 May 2012 at 3:20