Merge pull request #1588 from ckeditor/t/932-3180

Improved uploading progress visual feedback

plugins/easyimage/styles/easyimage.css

@@ -110,3 +110,14 @@ body.cke_editable > .cke_widget_wrapper_easyimage-side {
 	left: 40px;
 	right: 40px;
 }
+
+/* Fancy opacity effect discussed in #1533. Transition assigned in this awkward way so that it **does not** happen for
+the initial render, otherwise it would start transitioning from opacity 1 to 0.x upon first render. */
+
+.cke_widget_wrapper_easyimage:not(.cke_widget_wrapper_uploading) figure img {
+	transition: opacity 0.3s ease-in-out;
+}
+
+.cke_widget_wrapper_easyimage.cke_widget_wrapper_uploading figure img {
+	opacity: 0.75;
+}

plugins/imagebase/plugin.js

@@ -351,6 +351,7 @@
 					if ( widget.isInited() ) {
 						widget.setData( 'uploadId', undefined );
 					}
+					widget.wrapper.removeClass( 'cke_widget_wrapper_uploading' );
 				}
 
 				function failHandling() {
@@ -393,6 +394,8 @@
 
 				if ( widget.fire( 'uploadStarted', loader ) !== false && widget.progressReporterType ) {
 					if ( !widget._isLoaderDone( loader ) ) {
+						// Deliberately add class to wrapper, it does not make sense for widget element.
+						widget.wrapper.addClass( 'cke_widget_wrapper_uploading' );
 						// Progress reporter has only sense if widget is in progress.
 						var progress = new widget.progressReporterType();
 						widget.wrapper.append( progress.wrapper );
@@ -451,7 +454,8 @@
 			 *			// Implement a custom progress bar.
 			 *		} );
 			 *
-			 * This event is cancelable, if canceled, the default progress bar will not be created.
+			 * This event is cancelable, if canceled, the default progress bar will not be created
+			 * and the widget wrapper won't be marked with `cke_widget_wrapper_uploading` class.
 			 *
 			 * Note that the event will be fired even if the widget was created for a loader that
 			 * is already resolved.

tests/plugins/easyimage/manual/progressbar.md

@@ -1,4 +1,4 @@
-@bender-tags: 4.9.0, feature, 932
+@bender-tags: 4.9.0, feature, 932, 1533
 @bender-ui: collapsed
 @bender-ckeditor-plugins: sourcearea, wysiwygarea, floatingspace, toolbar, easyimage
 @bender-include: ../../uploadwidget/manual/_helpers/xhr.js
@@ -14,6 +14,14 @@ Remarks:
 
 1. Drop an image into the editor.
 
-### Expected
+	### Expected
 
-* Upload progress is shown.
+	* Upload progress is shown.
+	* The image is a little transparent.
+
+1. Wait till the image load completes.
+
+	### Expected
+
+	* Progress indicator disappear.
+	* Image has its regular color.

tests/plugins/imagebase/features/upload.js

@@ -25,7 +25,7 @@
 		CKEDITOR.fileTools.fileLoader.call( this, editor, fileOrData, fileName );
 	}
 
-	// A mocked Loader type that synchronously notifies that the file has been failed.
+	// A mocked Loader type that synchronously notifies that the file failed to upload.
 	function FailFileLoader( editor, fileOrData, fileName ) {
 		CKEDITOR.fileTools.fileLoader.call( this, editor, fileOrData, fileName );
 	}
@@ -35,6 +35,11 @@
 		CKEDITOR.fileTools.fileLoader.call( this, editor, fileOrData, fileName );
 	}
 
+	// A mocked Loader type that asynchronously notifies that the file failed to upload.
+	function AsyncFailFileLoader( editor, fileOrData, fileName ) {
+		CKEDITOR.fileTools.fileLoader.call( this, editor, fileOrData, fileName );
+	}
+
 	var assertPasteFiles = imageBaseFeaturesTools.assertPasteFiles,
 		tests = {
 			init: function() {
@@ -92,6 +97,18 @@
 						}, 100 );
 					}
 				}, CKEDITOR.fileTools.fileLoader.prototype );
+
+				AsyncFailFileLoader.prototype = CKEDITOR.tools.extend( {
+					upload: function() {
+						var that = this;
+						setTimeout( function() {
+							that.xhr = {
+								readyState: 4
+							};
+							that.changeStatus( 'error' );
+						}, 100 );
+					}
+				}, CKEDITOR.fileTools.fileLoader.prototype );
 			},
 
 			tearDown: function() {
@@ -385,6 +402,62 @@
 				} );
 			},
 
+			// (#1533)
+			'test widget gets class during the upload': function() {
+				var editor = this.editor;
+
+				assertPasteFiles( editor, {
+					files: [ getTestRtfFile() ],
+					callback: function( widgets ) {
+						var widget = widgets[ 0 ];
+						assert.isTrue( widget.wrapper.hasClass( 'cke_widget_wrapper_uploading' ), 'Class is present during the upload' );
+
+						widget.once( 'uploadDone', function() {
+							resume( function() {
+								assert.isFalse( widget.wrapper.hasClass( 'cke_widget_wrapper_uploading' ), 'Class is removed after upload' );
+							} );
+						} );
+
+						wait();
+					}
+				} );
+			},
+
+			'test widget upload class is removed after fail': function() {
+				var editor = this.editor,
+					listeners = this.listeners,
+					originalLoader = editor.widgets.registered.testImageWidget.loaderType;
+
+				// Force a loader that will fail.
+				editor.widgets.registered.testImageWidget.loaderType = AsyncFailFileLoader;
+
+				// Make sure to prevent default handling, otherwise widget is removed.
+				this.listeners.push( editor.widgets.on( 'instanceCreated', function( evt ) {
+					listeners.push( evt.data.on( 'uploadFailed', function( evt ) {
+						var widget = this;
+
+						// Prevent image from being removed.
+						evt.cancel();
+
+						resume( function() {
+							assert.isFalse( widget.wrapper.hasClass( 'cke_widget_wrapper_uploading' ),
+								'Class is removed after fail' );
+						} );
+					} ) );
+				} ) );
+
+				assertPasteFiles( editor, {
+					files: [ bender.tools.getTestPngFile() ],
+					callback: function( widgets ) {
+						editor.widgets.registered.testImageWidget.loaderType = originalLoader;
+
+						var widget = widgets[ 0 ];
+						assert.isTrue( widget.wrapper.hasClass( 'cke_widget_wrapper_uploading' ), 'Class is present during the upload' );
+						wait();
+					}
+				} );
+			},
+
 			'test data.uploadId behavior': function() {
 				var editor = this.editor;