浏览代码

Extracted ImageUploadButton as separate plugin.

Szymon Kupś 8 年之前
父节点
当前提交
0a27681e9f

+ 5 - 34
packages/ckeditor5-upload/src/imageupload.js

@@ -8,14 +8,14 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ImageUploadEngine from './imageuploadengine';
+import ImageUploadButton from './imageuploadbutton';
 import ImageUploadProgress from './imageuploadprogress';
-import FileDialogButtonView from './ui/filedialogbuttonview';
-import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
 
 /**
  * Image upload plugin.
- * Adds `insertImage` button to UI component factory.
+ * Requires two plugins:
+ * * {@link module:upload/imageuploadbutton~ImageUploadButton},
+ * * {@link module:upload/imageuploadprogress~ImageUploadProgress}.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -24,35 +24,6 @@ export default class ImageUpload extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ ImageUploadEngine, ImageUploadProgress ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const t = editor.t;
-
-		// Setup `insertImage` button.
-		editor.ui.componentFactory.add( 'insertImage', ( locale ) => {
-			const view = new FileDialogButtonView( locale );
-
-			view.set( {
-				label: t( 'Insert image' ),
-				icon: imageIcon,
-				tooltip: true,
-				acceptedType: 'image/*',
-				allowMultipleFiles: true
-			} );
-
-			view.on( 'done', ( evt, files ) => {
-				for ( const file of files ) {
-					editor.execute( 'imageUpload', { file: file } );
-				}
-			} );
-
-			return view;
-		} );
+		return [ ImageUploadButton, ImageUploadProgress ];
 	}
 }

+ 57 - 0
packages/ckeditor5-upload/src/imageuploadbutton.js

@@ -0,0 +1,57 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module upload/imageuploadbutton
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ImageUploadEngine from './imageuploadengine';
+import FileDialogButtonView from './ui/filedialogbuttonview';
+import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
+
+/**
+ * Image upload button plugin.
+ * Adds `insertImage` button to UI component factory.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageUploadButton extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageUploadEngine ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		// Setup `insertImage` button.
+		editor.ui.componentFactory.add( 'insertImage', ( locale ) => {
+			const view = new FileDialogButtonView( locale );
+
+			view.set( {
+				label: t( 'Insert image' ),
+				icon: imageIcon,
+				tooltip: true,
+				acceptedType: 'image/*',
+				allowMultipleFiles: true
+			} );
+
+			view.on( 'done', ( evt, files ) => {
+				for ( const file of files ) {
+					editor.execute( 'imageUpload', { file: file } );
+				}
+			} );
+
+			return view;
+		} );
+	}
+}

+ 8 - 0
packages/ckeditor5-upload/src/imageuploadprogress.js

@@ -12,6 +12,7 @@ import { eventNameToConsumableType } from '@ckeditor/ckeditor5-engine/src/conver
 import FileRepository from './filerepository';
 import uploadingPlaceholder from '../theme/icons/image_placeholder.svg';
 import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
+import ImageUploadEngine from './imageuploadengine';
 
 import '../theme/imageuploadprogress.scss';
 
@@ -22,6 +23,13 @@ import '../theme/imageuploadprogress.scss';
  * @extends module:core/plugin~Plugin
  */
 export default class ImageUploadProgress extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageUploadEngine ];
+	}
+
 	constructor( editor ) {
 		super( editor );
 

+ 6 - 20
packages/ckeditor5-upload/tests/imageupload.js

@@ -7,10 +7,9 @@
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
 import Image from '@ckeditor/ckeditor5-image/src/image';
-import FileDialogButtonView from '../src/ui/filedialogbuttonview';
 import ImageUpload from '../src/imageupload';
-import ImageUploadEngine from '../src/imageuploadengine';
-import { createNativeFileMock } from './_utils/mocks';
+import ImageUploadProgress from '../src/imageuploadprogress';
+import ImageUploadButton from '../src/imageuploadbutton';
 
 describe( 'ImageUpload', () => {
 	let editor;
@@ -27,25 +26,12 @@ describe( 'ImageUpload', () => {
 		} );
 	} );
 
-	it( 'should load ImageUploadEngine', () => {
-		expect( editor.plugins.get( ImageUploadEngine ) ).to.be.instanceOf( ImageUploadEngine );
+	it( 'should include ImageUploadProgress', () => {
+		expect( editor.plugins.get( ImageUploadProgress ) ).to.be.instanceOf( ImageUploadProgress );
 	} );
 
-	it( 'should register insertImage button', () => {
-		const button = editor.ui.componentFactory.create( 'insertImage' );
-
-		expect( button ).to.be.instanceOf( FileDialogButtonView );
-	} );
-
-	it( 'should execute imageUpload command', () => {
-		const executeStub = sinon.stub( editor, 'execute' );
-		const button = editor.ui.componentFactory.create( 'insertImage' );
-		const files = [ createNativeFileMock() ];
-
-		button.fire( 'done', files );
-		sinon.assert.calledOnce( executeStub );
-		expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
-		expect( executeStub.firstCall.args[ 1 ].file ).to.equal( files[ 0 ] );
+	it( 'should include ImageUploadButton', () => {
+		expect( editor.plugins.get( ImageUploadButton ) ).to.be.instanceOf( ImageUploadButton );
 	} );
 } );
 

+ 51 - 0
packages/ckeditor5-upload/tests/imageuploadbutton.js

@@ -0,0 +1,51 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
+import Image from '@ckeditor/ckeditor5-image/src/image';
+import FileDialogButtonView from '../src/ui/filedialogbuttonview';
+import ImageUploadButton from '../src/imageuploadbutton';
+import ImageUploadEngine from '../src/imageuploadengine';
+import { createNativeFileMock } from './_utils/mocks';
+
+describe( 'ImageUploadButton', () => {
+	let editor;
+
+	beforeEach( () => {
+		const editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		return ClassicEditor.create( editorElement, {
+			plugins: [ Image, ImageUploadButton ]
+		} )
+			.then( newEditor => {
+				editor = newEditor;
+			} );
+	} );
+
+	it( 'should include ImageUploadEngine', () => {
+		expect( editor.plugins.get( ImageUploadEngine ) ).to.be.instanceOf( ImageUploadEngine );
+	} );
+
+	it( 'should register insertImage button', () => {
+		const button = editor.ui.componentFactory.create( 'insertImage' );
+
+		expect( button ).to.be.instanceOf( FileDialogButtonView );
+	} );
+
+	it( 'should execute imageUpload command', () => {
+		const executeStub = sinon.stub( editor, 'execute' );
+		const button = editor.ui.componentFactory.create( 'insertImage' );
+		const files = [ createNativeFileMock() ];
+
+		button.fire( 'done', files );
+		sinon.assert.calledOnce( executeStub );
+		expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
+		expect( executeStub.firstCall.args[ 1 ].file ).to.equal( files[ 0 ] );
+	} );
+} );
+

+ 5 - 1
packages/ckeditor5-upload/tests/imageuploadprogress.js

@@ -31,7 +31,7 @@ describe( 'ImageUploadProgress', () => {
 		} );
 
 		return ClassicTestEditor.create( {
-			plugins: [ ImageEngine, ImageUploadEngine, Paragraph, ImageUploadProgress ]
+			plugins: [ ImageEngine, Paragraph, ImageUploadProgress ]
 		} )
 		.then( newEditor => {
 			editor = newEditor;
@@ -48,6 +48,10 @@ describe( 'ImageUploadProgress', () => {
 		} );
 	} );
 
+	it( 'should include ImageUploadEngine', () => {
+		expect( editor.plugins.get( ImageUploadEngine ) ).to.be.instanceOf( ImageUploadEngine );
+	} );
+
 	it( 'should convert image\'s "reading" uploadStatus attribute', () => {
 		setModelData( document, '<paragraph>foo[]</paragraph>' );
 		editor.execute( 'imageUpload', { file: createNativeFileMock() } );