From 6d39fcbd3e7120db22c3f4622a07f78f3c1733bb Mon Sep 17 00:00:00 2001 From: Kamil Piechaczek Date: Mon, 21 Aug 2017 15:58:57 +0200 Subject: [PATCH] Added support for "dragover" event. --- src/clipboardobserver.js | 16 +++++++++++++++- tests/clipboardobserver.js | 26 +++++++++++++++++++++++++- 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/clipboardobserver.js b/src/clipboardobserver.js index 334e9a6..a2ddbaa 100644 --- a/src/clipboardobserver.js +++ b/src/clipboardobserver.js @@ -22,7 +22,7 @@ export default class ClipboardObserver extends DomEventObserver { constructor( doc ) { super( doc ); - this.domEventType = [ 'paste', 'copy', 'cut', 'drop' ]; + this.domEventType = [ 'paste', 'copy', 'cut', 'drop', 'dragover' ]; this.listenTo( doc, 'paste', handleInput, { priority: 'low' } ); this.listenTo( doc, 'drop', handleInput, { priority: 'low' } ); @@ -98,6 +98,20 @@ function getDropViewRange( doc, domEvent ) { * then it's the drop position (which can be different than the selection at the moment of drop). */ +/** + * Fired when user drags content over one of the editables. + * + * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}. + * + * Note that this event is not available by default. To make it available {@link module:clipboard/clipboardobserver~ClipboardObserver} + * needs to be added to {@link module:engine/view/document~Document} by the {@link module:engine/view/document~Document#addObserver} method. + * It's done by the {@link module:clipboard/clipboard~Clipboard} feature. If it's not loaded, it must be done manually. + * + * @see module:engine/view/document~Document#event:clipboardInput + * @event module:engine/view/document~Document#event:dragover + * @param {module:clipboard/clipboardobserver~ClipboardEventData} data Event data. + */ + /** * Fired when user dropped content into one of the editables. * diff --git a/tests/clipboardobserver.js b/tests/clipboardobserver.js index b861549..7f3abfe 100644 --- a/tests/clipboardobserver.js +++ b/tests/clipboardobserver.js @@ -36,7 +36,7 @@ describe( 'ClipboardObserver', () => { } ); it( 'should define domEventType', () => { - expect( observer.domEventType ).to.deep.equal( [ 'paste', 'copy', 'cut', 'drop' ] ); + expect( observer.domEventType ).to.deep.equal( [ 'paste', 'copy', 'cut', 'drop', 'dragover' ] ); } ); describe( 'paste event', () => { @@ -224,6 +224,30 @@ describe( 'ClipboardObserver', () => { expect( sinon.assert.callOrder( normalPrioritySpy, eventSpy ) ); } ); } ); + + describe( 'dragover event', () => { + it( 'should fire when a file is dragging over the document', () => { + const targetElement = mockDomTargetElement( {} ); + const dataTransfer = mockDomDataTransfer(); + + doc.on( 'dragover', eventSpy ); + + observer.onDomEvent( { + type: 'dragover', + target: targetElement, + dataTransfer + } ); + + expect( eventSpy.calledOnce ).to.equal( true ); + + const data = eventSpy.args[ 0 ][ 1 ]; + + expect( data.document ).to.equal( doc ); + expect( data.domTarget ).to.equal( targetElement ); + expect( data.domEvent.type ).to.equal( 'dragover' ); + expect( data.dataTransfer.files ).to.deep.equal( dataTransfer.files ); + } ); + } ); } ); // Returns a super simple mock of HTMLElement (we use only ownerDocument from it).