Merge branch 't/12126' into major

CHANGES.md

@@ -16,6 +16,7 @@ New Features:
 * [#12448](http://dev.ckeditor.com/ticket/12448): Set of new methods, params and events giving the developer more control over HTML insertion. See the [`editable.insertHtml()`](http://docs.ckeditor.com/#!/api/CKEDITOR.editable-method-insertHtml) param `range`, the [`editable.insertHtmlIntoRange()`](http://docs.ckeditor.com/#!/api/CKEDITOR.editable-method-insertHtmlIntoRange) method and the [`editor.afterInsertHtml`](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-afterInsertHtml) event.
 * [#12036](http://dev.ckeditor.com/ticket/12036): Initialize editor in [`readOnly`](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-readOnly) mode when `<textarea>` has `readonly` attribute.
 * [#11905](http://dev.ckeditor.com/ticket/11905): [`resize` event](http://docs.ckeditor.dev/#!/api/CKEDITOR.editor-event-resize) pass dimensions in data.
+* [#12126](http://dev.ckeditor.com/ticket/12126): Introduced [`image_prefillDimensions`](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions) and [`image2_prefillDimensions`](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image2_prefillDimensions) to make pre-filling 'width' and 'height' configurable.
 
 Fixed Issues:
 

plugins/image/dialogs/image.js

@@ -151,13 +151,25 @@
 					return dialog.lockRatio;
 				};
 
-			var resetSize = function( dialog ) {
-					var oImageOriginal = dialog.originalElement;
-					if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {
+			var resetSize = function( dialog, emptyValues ) {
+					var oImageOriginal = dialog.originalElement,
+						ready = oImageOriginal.getCustomData( 'isReady' ) == 'true';
+
+					if ( ready ) {
 						var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
-							heightField = dialog.getContentElement( 'info', 'txtHeight' );
-						widthField && widthField.setValue( oImageOriginal.$.width );
-						heightField && heightField.setValue( oImageOriginal.$.height );
+							heightField = dialog.getContentElement( 'info', 'txtHeight' ),
+							widthValue, heightValue;
+
+						if ( emptyValues ) {
+							widthValue = 0;
+							heightValue = 0;
+						} else {
+							widthValue = oImageOriginal.$.width;
+							heightValue = oImageOriginal.$.height;
+						}
+
+						widthField && widthField.setValue( widthValue );
+						heightField && heightField.setValue( heightValue );
 					}
 					updatePreview( dialog );
 				};
@@ -207,9 +219,10 @@
 					if ( loader )
 						loader.setStyle( 'display', 'none' );
 
-					// New image -> new domensions
-					if ( !this.dontResetSize )
-						resetSize( this );
+					// New image -> new dimensions
+					if ( !this.dontResetSize ) {
+						resetSize( this, editor.config.image_prefillDimensions === false );
+					}
 
 					if ( this.firstLoad ) {
 						CKEDITOR.tools.setTimeout( function() {

plugins/image/plugin.js

@@ -153,6 +153,14 @@
 
 } )();
 
+/**
+ * Determine whether dimensions inputs should be automatically filled when image src changes in image dialog.
+ *
+ * @since 4.5.0
+ * @cfg {Boolean} [image_prefillDimensions=true]
+ * @member CKEDITOR.config
+ */
+
 /**
  * Whether to remove links when emptying the link URL field in the image dialog.
  *

plugins/image2/dialogs/image2.js

@@ -145,10 +145,10 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 					return toggleLockRatio( false );
 
 				// Fill width field with the width of the new image.
-				widthField.setValue( width );
+				widthField.setValue( editor.config.image2_prefillDimensions === false ? 0 : width );
 
 				// Fill height field with the height of the new image.
-				heightField.setValue( height );
+				heightField.setValue( editor.config.image2_prefillDimensions === false ? 0 : height );
 
 				// Cache the new width.
 				preLoadedWidth = width;

plugins/image2/plugin.js

@@ -789,7 +789,7 @@
 				// 		</p>
 				// 	</div>
 				if ( hasCaption ) {
-					wrapper.addClass( alignClasses[1] );
+					wrapper.addClass( alignClasses[ 1 ] );
 				}
 			} else if ( align != 'none' ) {
 				wrapper.addClass( alignClasses[ alignmentsObj[ align ] ] );
@@ -871,7 +871,7 @@
 
 				// Upcast linked image like <a><img/></a>.
 			} else if ( isLinkedOrStandaloneImage( el ) ) {
-				image = el.name == 'a' ? el.children[0] : el;
+				image = el.name == 'a' ? el.children[ 0 ] : el;
 			}
 
 			if ( !image )
@@ -1536,6 +1536,14 @@
  */
 CKEDITOR.config.image2_captionedClass = 'image';
 
+/**
+ * Determine whether dimensions inputs should be automatically filled when image src changes in image2 dialog.
+ *
+ * @since 4.5.0
+ * @cfg {Boolean} [image2_prefillDimensions=true]
+ * @member CKEDITOR.config
+ */
+
 /**
  * CSS classes applied to aligned images. Useful to take control over the way
  * the images are aligned, i.e. to customize output HTML and integrate external stylesheets.

tests/_benderjs/ckeditor/static/tools.js

@@ -990,8 +990,37 @@
 			}
 
 			return outputTests;
-		}
+		},
+
+		/**
+		 * Downloads image and call callback after that.
+		 *
+		 * @param {String} src Image source.
+		 * @param {Function} callback Callback function with image (CKEDITOR.dom.element)
+		 * or `null` in case of error or abort.
+		 */
+		downloadImage: function( src, callback ) {
+			var img = new CKEDITOR.dom.element( 'img' );
+
+			img.once( 'load', function() {
+				// Because this function may be used to wait until editor download image, the callback in
+				// this test helper must be called later then editors.
+				setTimeout( function() {
+					callback( img );
+				}, 10 );
+			} );
+
+			img.once( 'error', function() {
+				callback( null );
+			} );
 
+			img.once( 'abort', function() {
+				callback( null );
+			} );
+
+			// Add random string to be sure that the image will be downloaded, not taken from cache.
+			img.setAttribute( 'src', src + '?' + Math.random().toString( 16 ).substring( 2 ) );
+		}
 	};
 
 	bender.tools.range = {

tests/plugins/image/image.js

@@ -10,7 +10,12 @@
 		}
 	};
 
-	var SRC = '%BASE_PATH%_assets/logo.png';
+	var SRC = '%BASE_PATH%_assets/logo.png',
+		imgs = [
+			{ url: '%BASE_PATH%_assets/logo.png', width: '163', height: '61' },
+			{ url: '%BASE_PATH%_assets/large.jpg', width: '1008', height: '550' }
+		],
+		downloadImage = bender.tools.downloadImage;
 
 	bender.test( {
 		'test read image (inline styles)': function() {
@@ -348,6 +353,103 @@
 			} );
 		},
 
+		/**
+		 * #12126
+		 *
+		 * 1. Open image dialog.
+		 * 2. Set some proper image url and focus out.
+		 * 3. Dimensions inputs should be empty.
+		 * 4. Set another proper image url and focus out.
+		 * 5. Again dimensions inputs should be empty.
+		 */
+		'test dimensions not set automatically when disbled in option': function() {
+			bender.editorBot.create( {
+				name: 'editor_disabled_autodimensions',
+				creator: 'inline',
+				config: {
+					image_prefillDimensions: false
+				}
+			},
+			function( bot ) {
+				bot.dialog( 'image', function( dialog ) {
+					var i = 0,
+						heightInput = dialog.getContentElement( 'info', 'txtHeight' ),
+						widthInput = dialog.getContentElement( 'info', 'txtWidth' );
+
+					dialog.setValueOf( 'info', 'txtUrl', imgs[ i ].url );
+					downloadImage( imgs[ i ].url, onDownload );
+
+					function onDownload() {
+						resume( onResume );
+					}
+
+					function onResume() {
+						dialog.getContentElement( 'info', 'txtHeight' ).getValue();
+						assert.areSame( '', widthInput.getValue() );
+						assert.areSame( '', heightInput.getValue() );
+
+						if ( i === 0 ) {
+							dialog.setValueOf( 'info', 'txtUrl', imgs[ ++i ].url );
+							downloadImage( imgs[ i ].url, onDownload );
+							wait();
+						}
+					}
+
+					wait();
+				} );
+			} );
+		},
+
+		/**
+		 * #12126
+		 *
+		 * 1. Open image dialog.
+		 * 2. Set some proper image url and focus out.
+		 * 3. Click button "Reset Size".
+		 * 4. Set some proper image url and focus out.
+		 * 5. Dimensions inputs should be empty.
+		 */
+		'test dimension should be empty after resetting size and loading image': function() {
+			bender.editorBot.create( {
+				name: 'editor_disabled_autodimensions2',
+				creator: 'inline',
+				config: {
+					image_prefillDimensions: false
+				}
+			},
+			function( bot ) {
+				bot.dialog( 'image', function( dialog ) {
+					var i = 0,
+						resetBtn = bot.editor.document.getById( dialog.getContentElement( 'info', 'ratioLock' ).domId ).find( '.cke_btn_reset' ).getItem( 0 );
+
+					dialog.setValueOf( 'info', 'txtUrl', imgs[ i ].url );
+					downloadImage( imgs[ i ].url, onDownload );
+
+					function onDownload() {
+						resume( onResume );
+					}
+
+					function onResume() {
+						resetBtn.fire( 'click' );
+						assert.areSame( imgs[ i ].width, dialog.getContentElement( 'info', 'txtWidth' ).getValue() );
+						assert.areSame( imgs[ i ].height, dialog.getContentElement( 'info', 'txtHeight' ).getValue() );
+
+						dialog.setValueOf( 'info', 'txtUrl', imgs[ ++i ].url );
+						downloadImage( imgs[ i ].url, function() {
+							resume( function() {
+								assert.areSame( '', dialog.getContentElement( 'info', 'txtWidth' ).getValue() );
+								assert.areSame( '', dialog.getContentElement( 'info', 'txtHeight' ).getValue() );
+							} );
+						} );
+
+						wait();
+					}
+
+					wait();
+				} );
+			} );
+		},
+
 		// This TC verifies also the above test's correctness.
 		'test width and height are automatically set': function() {
 			var bot = this.editorBot,
@@ -374,19 +476,5 @@
 			} );
 		}
 	} );
-
-	function downloadImage( src, cb ) {
-		var img = new CKEDITOR.dom.element( 'img' );
-
-		img.once( 'load', onDone );
-		img.once( 'error', onDone );
-
-		function onDone() {
-			setTimeout( cb, 0 );
-		}
-
-		img.setAttribute( 'src', src );
-	}
-
 } )();
 //]]>

tests/plugins/image/manual/emptydimensions.html

@@ -0,0 +1,6 @@
+<textarea id="editor1">Hello moto.</textarea>
+<script>
+	CKEDITOR.replace( 'editor1', {
+		image_prefillDimensions: false
+	} );
+</script>

tests/plugins/image/manual/emptydimensions.md

@@ -0,0 +1,19 @@
+@bender-tags: 4.5.0, tc
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, floatingspace, image
+
+**Please note**: You can use such link: `http://lorempixel.com/200/100`.
+
+1. Open image dialog.
+2. Set some proper image url and focus out.
+  * **Expected result**: Dimensions inputs should be empty.
+3. Set another proper image url and focus out.
+  * **Expected result**: Again - dimensions inputs should be empty.
+
+----
+
+1. Open image dialog.
+2. Set some proper image url and focus out.
+3. Click button "Reset Size".
+4. Set some proper image url and focus out.
+  * **Expected result**: Dimensions inputs should be empty.