@@ -6,11 +6,12 @@ export class HXDropZoneElement extends HXElement {
66 }
77
88 $onCreate ( ) {
9- this . _isDragging = false ;
9+ this . _isDocDragging = false ;
1010 this . _isZoneDragging = false ;
1111 this . _onDocDragLeave = this . _onDocDragLeave . bind ( this ) ;
1212 this . _onDocDragOver = this . _onDocDragOver . bind ( this ) ;
1313 this . _onDrop = this . _onDrop . bind ( this ) ;
14+ this . _stopDragging = this . _stopDragging . bind ( this ) ;
1415 }
1516
1617 $onConnect ( ) {
@@ -31,53 +32,56 @@ export class HXDropZoneElement extends HXElement {
3132 this . removeEventListener ( 'drop' , this . _onDrop ) ;
3233 }
3334
35+ /**
36+ * @readonly
37+ * @type {String }
38+ */
3439 get drag ( ) {
3540 return this . getAttribute ( 'drag' ) ;
3641 }
3742
3843 /**
3944 * @private
40- * @see https://goo.gl/zaoexR
45+ * @returns { Boolean }
4146 */
4247 _isFileDrag ( evt ) {
43- if ( evt . dataTransfer . types ) {
44- if ( evt . dataTransfer . types . indexOf ) {
45- return ( evt . dataTransfer . types . indexOf ( 'Files' ) !== - 1 ) ;
48+ let _types = evt . dataTransfer . types ;
49+ if ( _types ) {
50+ if ( _types . indexOf ) {
51+ return ( _types . indexOf ( 'Files' ) !== - 1 ) ;
4652 } else {
47- return evt . dataTransfer . types . contains ( 'Files' ) ;
53+ return _types . contains ( 'Files' ) ;
4854 }
4955 } else {
5056 return false ;
5157 }
5258 }
5359
54- // #2 this gets called when the dragged item leaves the document (leaves to a child element or window altogether)
60+ // #2 this gets called when the dragged item leaves the document
61+ // (leaves to a child element or window altogether)
5562 /** @private */
5663 _onDocDragLeave ( ) {
5764 window . clearTimeout ( this . _docDragLeaveTimeout ) ;
5865 // callback must be an arrow function to preserve "this"
59- this . _docDragLeaveTimeout = window . setTimeout ( ( ) => {
60- this . _isDragging = false ;
61- this . removeAttribute ( 'drag' ) ;
62- } , 250 ) ;
66+ this . _docDragLeaveTimeout = window . setTimeout ( this . _stopDragging , 250 ) ;
6367 }
6468
6569 // #1 this handler fires continuously as long as the user is dragging on the page
6670 /** @private */
6771 _onDocDragOver ( evt ) {
68- if ( ! this . _isDragging ) {
69- this . _isDragging = true ;
72+ if ( ! this . _isDocDragging ) {
73+ this . _isDocDragging = true ;
7074 if ( this . _isFileDrag ( evt ) ) {
7175 this . setAttribute ( 'drag' , 'away' ) ;
7276 }
7377 }
7478 window . clearTimeout ( this . _docDragLeaveTimeout ) ;
7579 }
7680
77- // #4 this gets called when the dragged item leaves the zone (leaves to a child element or zone altogether)
81+ // #4 this gets called when the dragged item leaves the zone
82+ // (leaves to a child element or zone altogether)
7883 /** @private */
7984 _onDragLeave ( ) {
80- //evt.preventDefault();
8185 window . clearTimeout ( this . _zoneDragLeaveTimeout ) ;
8286 // callback must be an arrow function to preserve "this"
8387 this . _zoneDragLeaveTimeout = window . setTimeout ( ( ) => {
@@ -89,8 +93,7 @@ export class HXDropZoneElement extends HXElement {
8993 // #3 this handler fires continuously as long as the user is dragging on the zone
9094 /** @private */
9195 _onDragOver ( evt ) {
92- // needed for onDrop to work
93- evt . preventDefault ( ) ;
96+ evt . preventDefault ( ) ; // needed for onDrop to work
9497 if ( ! this . _isZoneDragging ) {
9598 this . _isZoneDragging = true ;
9699 if ( this . _isFileDrag ( evt ) ) {
@@ -103,8 +106,13 @@ export class HXDropZoneElement extends HXElement {
103106
104107 /** @private */
105108 _onDrop ( ) {
109+ this . _stopDragging ( ) ;
110+ }
111+
112+ /** @private */
113+ _stopDragging ( ) {
106114 this . removeAttribute ( 'drag' ) ;
107- this . _isDragging = false ;
115+ this . _isDocDragging = false ;
108116 this . _isZoneDragging = false ;
109117 }
110118}
0 commit comments