diff --git a/src/ol/events.js b/src/ol/events.js index 9e31192fc1..542e4e5800 100644 --- a/src/ol/events.js +++ b/src/ol/events.js @@ -14,6 +14,9 @@ ol.events.EventType = { CHANGE: 'change', CLICK: 'click', DBLCLICK: 'dblclick', + DRAGENTER: 'dragenter', + DRAGOVER: 'dragover', + DROP: 'drop', ERROR: 'error', LOAD: 'load', MOUSEDOWN: 'mousedown', diff --git a/src/ol/interaction/draganddropinteraction.js b/src/ol/interaction/draganddropinteraction.js index a238848cbf..b1f867efcb 100644 --- a/src/ol/interaction/draganddropinteraction.js +++ b/src/ol/interaction/draganddropinteraction.js @@ -4,12 +4,10 @@ goog.provide('ol.interaction.DragAndDrop'); goog.provide('ol.interaction.DragAndDropEvent'); goog.require('goog.asserts'); +goog.require('goog.functions'); goog.require('ol.events'); goog.require('ol.events.Event'); -goog.require('goog.events.FileDropHandler'); -goog.require('goog.events.FileDropHandler.EventType'); -goog.require('goog.fs.FileReader'); -goog.require('goog.functions'); +goog.require('ol.events.EventType'); goog.require('ol.interaction.Interaction'); goog.require('ol.proj'); @@ -48,28 +46,29 @@ ol.interaction.DragAndDrop = function(opt_options) { /** * @private - * @type {goog.events.FileDropHandler} + * @type {Array.} */ - this.fileDropHandler_ = null; - - /** - * @private - * @type {ol.events.Key|undefined} - */ - this.dropListenKey_ = undefined; + this.dropListenKeys_ = null; }; goog.inherits(ol.interaction.DragAndDrop, ol.interaction.Interaction); /** - * @inheritDoc + * @param {Event} event Event. + * @this {ol.interaction.DragAndDrop} + * @private */ -ol.interaction.DragAndDrop.prototype.disposeInternal = function() { - if (this.dropListenKey_) { - ol.events.unlistenByKey(this.dropListenKey_); +ol.interaction.DragAndDrop.handleDrop_ = function(event) { + var files = event.dataTransfer.files; + var i, ii, file; + for (i = 0, ii = files.length; i < ii; ++i) { + file = files.item(i); + var reader = new FileReader(); + reader.addEventListener(ol.events.EventType.LOAD, + goog.partial(this.handleResult_, file).bind(this)); + reader.readAsText(file); } - goog.base(this, 'disposeInternal'); }; @@ -77,25 +76,20 @@ ol.interaction.DragAndDrop.prototype.disposeInternal = function() { * @param {Event} event Event. * @private */ -ol.interaction.DragAndDrop.prototype.handleDrop_ = function(event) { - var files = event.dataTransfer.files; - var i, ii, file; - for (i = 0, ii = files.length; i < ii; ++i) { - file = files[i]; - // The empty string param is a workaround for - // https://code.google.com/p/closure-library/issues/detail?id=524 - var reader = goog.fs.FileReader.readAsText(file, ''); - reader.addCallback(goog.partial(this.handleResult_, file), this); - } +ol.interaction.DragAndDrop.handleStop_ = function(event) { + event.stopPropagation(); + event.preventDefault(); + event.dataTransfer.dropEffect = 'copy'; }; /** * @param {File} file File. - * @param {string} result Result. + * @param {Event} event Load event. * @private */ -ol.interaction.DragAndDrop.prototype.handleResult_ = function(file, result) { +ol.interaction.DragAndDrop.prototype.handleResult_ = function(file, event) { + var result = event.target.result; var map = this.getMap(); goog.asserts.assert(map, 'map must be set'); var projection = this.projection_; @@ -149,22 +143,20 @@ ol.interaction.DragAndDrop.handleEvent = goog.functions.TRUE; * @inheritDoc */ ol.interaction.DragAndDrop.prototype.setMap = function(map) { - if (this.dropListenKey_) { - ol.events.unlistenByKey(this.dropListenKey_); - this.dropListenKey_ = undefined; + if (this.dropListenKeys_) { + this.dropListenKeys_.forEach(ol.events.unlistenByKey); + this.dropListenKeys_ = null; } - if (this.fileDropHandler_) { - goog.dispose(this.fileDropHandler_); - this.fileDropHandler_ = null; - } - goog.asserts.assert(this.dropListenKey_ === undefined, - 'this.dropListenKey_ should be undefined'); goog.base(this, 'setMap', map); if (map) { - this.fileDropHandler_ = new goog.events.FileDropHandler(map.getViewport()); - this.dropListenKey_ = ol.events.listen( - this.fileDropHandler_, goog.events.FileDropHandler.EventType.DROP, - this.handleDrop_, false, this); + var dropArea = map.getViewport(); + this.dropListenKeys_ = [ + ol.events.listen(dropArea, ol.events.EventType.DROP, + ol.interaction.DragAndDrop.handleDrop_, false, this), + ol.events.listen(dropArea, [ol.events.EventType.DRAGENTER, + ol.events.EventType.DRAGOVER, ol.events.EventType.DROP], + ol.interaction.DragAndDrop.handleStop_, false, this) + ] } };