From d408c9041f46c11e34fb4b953f1455b37ab40b4a Mon Sep 17 00:00:00 2001 From: raytiley Date: Wed, 17 Feb 2016 14:35:23 -0500 Subject: [PATCH 1/4] Keep track of drag events to maintain state drag state --- addon/components/pl-uploader.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/addon/components/pl-uploader.js b/addon/components/pl-uploader.js index 6a6aab5..9d40e76 100644 --- a/addon/components/pl-uploader.js +++ b/addon/components/pl-uploader.js @@ -137,7 +137,7 @@ export default Ember.Component.extend({ // Send up the pluploader object so the app implementing this component as has access to it var pluploader = queue.get('queues.firstObject'); this.sendAction('onInitOfUploader', pluploader); - this._dragInProgress = false; + this._dragCounter = 0; this._invalidateDragData(); }, @@ -178,16 +178,16 @@ export default Ember.Component.extend({ }), dragData: null, - enteredDropzone({ originalEvent: evt }) { - if (this._dragInProgress === false) { - this._dragInProgress = true; - this.activateDropzone(evt); + enteredDropzone(evt) { + if (this._dragCounter === 0) { + this.activateDropzone(evt.originalEvent); } + this._dragCounter++ }, - leftDropzone() { - if (this._dragInProgress === true) { - this._dragInProgress = false; + leftDropzone(evt) { + this._dragCounter--; + if (this._dragCounter === 0) { this.deactivateDropzone(); } }, @@ -206,7 +206,7 @@ export default Ember.Component.extend({ sheet.css(`#${get(this, 'dropzone.id')} *`, null); Ember.run.scheduleOnce('render', sheet, 'applyStyles'); - this._dragInProgress = false; + this._dragCounter = 0; set(this, 'dragData', null); }, From 8ce0e0cad6064b9c63b0a4feb2d8086e2d41a4b9 Mon Sep 17 00:00:00 2001 From: raytiley Date: Thu, 18 Feb 2016 13:31:23 -0500 Subject: [PATCH 2/4] Bind drag events to moxie shim so reference count stays accurate Without capturing these events the dragenter / dragleave count gets off. This is because the moxie-shim gets placed outside the dropzone (for positioning I imagine). --- addon/components/pl-uploader.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/addon/components/pl-uploader.js b/addon/components/pl-uploader.js index 9d40e76..10874a7 100644 --- a/addon/components/pl-uploader.js +++ b/addon/components/pl-uploader.js @@ -151,6 +151,7 @@ export default Ember.Component.extend({ keys(handlers).forEach(function (key) { Ember.$(document).on(key, '#' + dropzoneId, handlers[key]); + Ember.$(document).on(key, '.moxie-shim', handlers[key]); }); } }, @@ -172,6 +173,7 @@ export default Ember.Component.extend({ var handlers = this.eventHandlers; keys(handlers).forEach(function (key) { Ember.$(document).off(key, '#' + dropzoneId, handlers[key]); + Ember.$(document).off(key, '.moxie-shim', handlers[key]); }); this.eventHandlers = null; } From aaefa3a570e4bbd3f834ac56e098bb2f5144ba05 Mon Sep 17 00:00:00 2001 From: raytiley Date: Thu, 18 Feb 2016 22:14:11 -0500 Subject: [PATCH 3/4] Remove stylesheet which was cuasing IE failures --- addon/components/pl-uploader.js | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/addon/components/pl-uploader.js b/addon/components/pl-uploader.js index 10874a7..29f7925 100644 --- a/addon/components/pl-uploader.js +++ b/addon/components/pl-uploader.js @@ -1,5 +1,4 @@ import Ember from 'ember'; -import DinoSheet from 'dinosheets'; import trim from '../system/trim'; import w from '../computed/w'; @@ -24,14 +23,6 @@ var isDragAndDropSupported = (function () { }; }()); -var styleSheet; -var sharedStyleSheet = function () { - if (styleSheet == null) { - styleSheet = new DinoSheet(); - } - return styleSheet; -}; - var slice = Array.prototype.slice; export default Ember.Component.extend({ @@ -162,9 +153,6 @@ export default Ember.Component.extend({ queue.orphan(); set(this, 'queue', null); } - let sheet = sharedStyleSheet(); - sheet.css(`#${get(this, 'dropzone.id')} *`, null); - sheet.applyStyles(); }), teardownDragListeners: Ember.on('willDestroyElement', function () { @@ -195,19 +183,10 @@ export default Ember.Component.extend({ }, activateDropzone(evt) { - let sheet = sharedStyleSheet(); - sheet.css(`#${get(this, 'dropzone.id')} *`, { - pointerEvents: 'none' - }); - Ember.run.scheduleOnce('render', sheet, 'applyStyles'); set(this, 'dragData', get(evt, 'dataTransfer')); }, deactivateDropzone() { - let sheet = sharedStyleSheet(); - sheet.css(`#${get(this, 'dropzone.id')} *`, null); - Ember.run.scheduleOnce('render', sheet, 'applyStyles'); - this._dragCounter = 0; set(this, 'dragData', null); }, From 74d210e03bab8d99864193ded74f2c77f8e5d726 Mon Sep 17 00:00:00 2001 From: raytiley Date: Thu, 18 Feb 2016 22:14:41 -0500 Subject: [PATCH 4/4] Stop drag events from bubbling Prevents multiple dragenter events from firing in IE --- addon/components/pl-uploader.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/addon/components/pl-uploader.js b/addon/components/pl-uploader.js index 29f7925..891eba6 100644 --- a/addon/components/pl-uploader.js +++ b/addon/components/pl-uploader.js @@ -169,13 +169,19 @@ export default Ember.Component.extend({ dragData: null, enteredDropzone(evt) { + var e = evt.originalEvent; + if (e.preventDefault) { e.preventDefault(); } + if (e.stopPropagation) { e.stopPropagation(); } if (this._dragCounter === 0) { this.activateDropzone(evt.originalEvent); } - this._dragCounter++ + this._dragCounter++; }, leftDropzone(evt) { + var e = evt.originalEvent; + if (e.preventDefault) { e.preventDefault(); } + if (e.stopPropagation) { e.stopPropagation(); } this._dragCounter--; if (this._dragCounter === 0) { this.deactivateDropzone();