Przeglądaj źródła

Merge pull request #53 from ckeditor/t/52

Internal: Refactored `uploadStatusChange` method. Closes #52.
Szymon Kupś 8 lat temu
rodzic
commit
1d3ff49f1f

+ 19 - 17
packages/ckeditor5-upload/src/imageuploadprogress.js

@@ -71,12 +71,6 @@ export default class ImageUploadProgress extends Plugin {
 		const status = data.attributeNewValue;
 		const viewFigure = editor.editing.mapper.toViewElement( modelImage );
 
-		const loader = fileRepository.loaders.get( uploadId );
-
-		if ( !loader ) {
-			return;
-		}
-
 		// Show placeholder with infinite progress bar on the top while image is read from disk.
 		if ( status == 'reading' ) {
 			viewFigure.addClass( 'ck-appear', 'ck-infinite-progress' );
@@ -88,15 +82,20 @@ export default class ImageUploadProgress extends Plugin {
 
 		// Show progress bar on the top of the image when image is uploading.
 		if ( status == 'uploading' ) {
-			viewFigure.removeClass( 'ck-infinite-progress' );
-			const progressBar = createProgressBar();
-			viewFigure.appendChildren( progressBar );
+			const loader = fileRepository.loaders.get( uploadId );
+
+			if ( loader ) {
+				const progressBar = createProgressBar();
 
-			// Update progress bar width when uploadedPercent is changed.
-			loader.on( 'change:uploadedPercent', ( evt, name, value ) => {
-				progressBar.setStyle( 'width', value + '%' );
-				editor.editing.view.render();
-			} );
+				viewFigure.removeClass( 'ck-infinite-progress' );
+				viewFigure.appendChildren( progressBar );
+
+				// Update progress bar width when uploadedPercent is changed.
+				loader.on( 'change:uploadedPercent', ( evt, name, value ) => {
+					progressBar.setStyle( 'width', value + '%' );
+					editor.editing.view.render();
+				} );
+			}
 
 			return;
 		}
@@ -104,10 +103,13 @@ export default class ImageUploadProgress extends Plugin {
 		// Hide progress bar and clean up classes.
 		const progressBar = getProgressBar( viewFigure );
 
-		viewFigure.removeClass( 'ck-appear' );
-		progressBar.remove();
+		if ( progressBar ) {
+			progressBar.remove();
+		} else {
+			viewFigure.removeClass( 'ck-infinite-progress' );
+		}
 
-		editor.editing.view.render();
+		viewFigure.removeClass( 'ck-appear' );
 	}
 }
 

+ 21 - 3
packages/ckeditor5-upload/tests/imageuploadprogress.js

@@ -151,11 +151,29 @@ describe( 'ImageUploadProgress', () => {
 		);
 	} );
 
-	it( 'should not process attribute change if there is wrong uploadId', () => {
-		setModelData( document, '<image uploadId="123" uploadStatus="reading"></image><paragraph>foo{}</paragraph>' );
+	it( 'should not show progress bar if there is no loader with given uploadId', () => {
+		setModelData( document, '<image uploadId="123" uploadStatus="reading"></image>' );
+
+		const image = document.getRoot().getChild( 0 );
+
+		document.enqueueChanges( () => {
+			document.batch().setAttribute( image, 'uploadStatus', 'uploading' );
+		} );
 
 		expect( getViewData( viewDocument ) ).to.equal(
-			'<figure class="image ck-widget" contenteditable="false"><img></img></figure><p>foo{}</p>'
+			'[<figure class="image ck-widget ck-appear ck-infinite-progress" contenteditable="false">' +
+				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
+			'</figure>]'
+		);
+
+		document.enqueueChanges( () => {
+			document.batch().setAttribute( image, 'uploadStatus', 'complete' );
+		} );
+
+		expect( getViewData( viewDocument ) ).to.equal(
+			'[<figure class="image ck-widget" contenteditable="false">' +
+				`<img src="data:image/svg+xml;utf8,${ imagePlaceholder }"></img>` +
+			'</figure>]'
 		);
 	} );
 } );