Kaynağa Gözat

Reverted code with a placeholder as a class property.

Oskar Wróbel 7 yıl önce
ebeveyn
işleme
df7fd08af7

+ 23 - 7
packages/ckeditor5-image/src/imageupload/imageuploadprogress.js

@@ -11,6 +11,7 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
+import uploadingPlaceholder from '../../theme/icons/image_placeholder.svg';
 import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
 import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
 import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
@@ -19,8 +20,6 @@ import '../../theme/imageuploadprogress.css';
 import '../../theme/imageuploadicon.css';
 import '../../theme/imageuploadloader.css';
 
-// Data-uri with blank svg file that will be set as a img#src while placeholder is displayed with same width & height proportions.
-const blankImage = 'data:image/svg+xml;utf8,' + encodeURIComponent( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 250"><g fill="#FAFAFA" fill-rule="evenodd"><rect width="700" height="250" rx="4"/></g></svg>' );
 /**
  * The image upload progress plugin.
  * It shows a placeholder when the image is read from the disk and a progress bar while the image is uploading.
@@ -28,6 +27,21 @@ const blankImage = 'data:image/svg+xml;utf8,' + encodeURIComponent( '<svg xmlns=
  * @extends module:core/plugin~Plugin
  */
 export default class ImageUploadProgress extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		/**
+		 * The image placeholder that is displayed before real image data can be accessed.
+		 *
+		 * @protected
+		 * @member {String} #placeholder
+		 */
+		this.placeholder = 'data:image/svg+xml;utf8,' + encodeURIComponent( uploadingPlaceholder );
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -57,6 +71,7 @@ export default class ImageUploadProgress extends Plugin {
 
 		const fileRepository = editor.plugins.get( FileRepository );
 		const status = uploadId ? data.attributeNewValue : null;
+		const placeholder = this.placeholder;
 		const viewFigure = editor.editing.mapper.toViewElement( modelImage );
 		const viewWriter = conversionApi.writer;
 
@@ -64,7 +79,7 @@ export default class ImageUploadProgress extends Plugin {
 			// Start "appearing" effect and show placeholder with infinite progress bar on the top
 			// while image is read from disk.
 			_startAppearEffect( viewFigure, viewWriter );
-			_showPlaceholder( viewFigure, viewWriter );
+			_showPlaceholder( placeholder, viewFigure, viewWriter );
 
 			return;
 		}
@@ -80,7 +95,7 @@ export default class ImageUploadProgress extends Plugin {
 				// There is no loader associated with uploadId - this means that image came from external changes.
 				// In such cases we still want to show the placeholder until image is fully uploaded.
 				// Show placeholder if needed - see https://github.com/ckeditor/ckeditor5-image/issues/191.
-				_showPlaceholder( viewFigure, viewWriter );
+				_showPlaceholder( placeholder, viewFigure, viewWriter );
 			} else {
 				// Hide placeholder and initialize progress bar showing upload progress.
 				_hidePlaceholder( viewFigure, viewWriter );
@@ -127,9 +142,10 @@ function _stopAppearEffect( viewFigure, writer ) {
 
 // Shows placeholder together with infinite progress bar on given image figure.
 //
+// @param {String} Data-uri with a svg placeholder.
 // @param {module:engine/view/containerelement~ContainerElement} viewFigure
 // @param {module:engine/view/writer~Writer} writer
-function _showPlaceholder( viewFigure, writer ) {
+function _showPlaceholder( placeholder, viewFigure, writer ) {
 	if ( !viewFigure.hasClass( 'ck-image-upload-placeholder' ) ) {
 		writer.addClass( 'ck-image-upload-placeholder', viewFigure );
 	}
@@ -140,8 +156,8 @@ function _showPlaceholder( viewFigure, writer ) {
 
 	const viewImg = viewFigure.getChild( 0 );
 
-	if ( viewImg.getAttribute( 'src' ) !== blankImage ) {
-		writer.setAttribute( 'src', blankImage, viewImg );
+	if ( viewImg.getAttribute( 'src' ) !== placeholder ) {
+		writer.setAttribute( 'src', placeholder, viewImg );
 	}
 
 	if ( !_getUIElement( viewFigure, placeholderSymbol ) ) {

+ 22 - 7
packages/ckeditor5-image/tests/imageupload/imageuploadprogress.js

@@ -19,10 +19,10 @@ import { UploadAdapterMock, createNativeFileMock, NativeFileReaderMock } from '@
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import svgPlaceholder from '../../theme/icons/image_placeholder.svg';
 
 describe( 'ImageUploadProgress', () => {
-	// eslint-disable-next-line max-len
-	const blankImage = 'data:image/svg+xml;utf8,' + encodeURIComponent( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 250"><g fill="#FAFAFA" fill-rule="evenodd"><rect width="700" height="250" rx="4"/></g></svg>' );
+	const imagePlaceholder = encodeURIComponent( svgPlaceholder );
 
 	// eslint-disable-next-line max-len
 	const base64Sample = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
@@ -75,7 +75,7 @@ describe( 'ImageUploadProgress', () => {
 
 		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
-				`<img src="${ blankImage }"></img>` +
+				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 				'<div class="ck-upload-placeholder-loader"></div>' +
 			'</figure>]<p>foo</p>'
 		);
@@ -134,7 +134,7 @@ describe( 'ImageUploadProgress', () => {
 
 		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
-				`<img src="${ blankImage }"></img>` +
+				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 				'<div class="ck-upload-placeholder-loader"></div>' +
 			'</figure>]'
 		);
@@ -157,7 +157,7 @@ describe( 'ImageUploadProgress', () => {
 
 		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-widget image" contenteditable="false">' +
-				`<img src="${ blankImage }"></img>` +
+				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 			'</figure>]'
 		);
 	} );
@@ -214,6 +214,21 @@ describe( 'ImageUploadProgress', () => {
 		nativeReaderMock.mockSuccess( base64Sample );
 	} );
 
+	it( 'should allow to customize placeholder image', () => {
+		const uploadProgress = editor.plugins.get( ImageUploadProgress );
+		uploadProgress.placeholder = base64Sample;
+
+		setModelData( model, '<paragraph>[]foo</paragraph>' );
+		editor.execute( 'imageUpload', { file: createNativeFileMock() } );
+
+		expect( getViewData( view ) ).to.equal(
+			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
+				`<img src="${ base64Sample }"></img>` +
+				'<div class="ck-upload-placeholder-loader"></div>' +
+			'</figure>]<p>foo</p>'
+		);
+	} );
+
 	it( 'should not process attribute change if it is already consumed', () => {
 		editor.editing.downcastDispatcher.on( 'attribute:uploadStatus:image', ( evt, data, conversionApi ) => {
 			conversionApi.consumable.consume( data.item, evt.name );
@@ -238,7 +253,7 @@ describe( 'ImageUploadProgress', () => {
 
 		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-appear ck-image-upload-placeholder ck-infinite-progress ck-widget image" contenteditable="false">' +
-				`<img src="${ blankImage }"></img>` +
+				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 				'<div class="ck-upload-placeholder-loader"></div>' +
 			'</figure>]'
 		);
@@ -249,7 +264,7 @@ describe( 'ImageUploadProgress', () => {
 
 		expect( getViewData( view ) ).to.equal(
 			'[<figure class="ck-widget image" contenteditable="false">' +
-				`<img src="${ blankImage }"></img>` +
+				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
 			'</figure>]'
 		);
 	} );

+ 1 - 0
packages/ckeditor5-image/theme/icons/image_placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 250"><g fill="#FAFAFA" fill-rule="evenodd"><rect width="700" height="250" rx="4"/></g></svg>