Merge branch 't/10833' into major

Author: oleq

CHANGES.md

@@ -41,6 +41,7 @@ Fixed Issues:
 * [#10823](http://dev.ckeditor.com/ticket/10823): Fixed: Link plugin does not work with non-editable content.
 * [#10828](http://dev.ckeditor.com/ticket/10828): Magicline integration with widgets system.
 * [#10865](http://dev.ckeditor.com/ticket/10865): Improved hiding copybin, so copying widgets works smoothly.
+* [#10833](http://dev.ckeditor.com/ticket/10833): Fixed: *Lock ratio* option should be on by default in Image2 dialog.
 
 ## CKEditor 4.3 Beta
 

plugins/image2/dialogs/image2.js

@@ -36,6 +36,12 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 				resetButtonId: resetButtonId
 			} ),
 
+		helpers = CKEDITOR.plugins.image2,
+
+		// Functions inherited from image2 plugin.
+		checkHasNaturalRatio = helpers.checkHasNaturalRatio,
+		getNatural = helpers.getNatural,
+
 		// Global variables referring to the dialog's context.
 		doc, widget, image,
 
@@ -52,7 +58,9 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 		lockRatio, userDefinedLock,
 
 		// Global variables referring to dialog fields and elements.
-		lockButton, resetButton, widthField, heightField;
+		lockButton, resetButton, widthField, heightField,
+
+		natural;
 
 	// Validates dimension. Allowed values are:
 	// "123px", "123", "" (empty string)
@@ -124,7 +132,7 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 
 				// There was problem loading the image. Unlock ratio.
 				if ( !image )
-					return toggleLockDimensions( false );
+					return toggleLockRatio( false );
 
 				// Fill width field with the width of the new image.
 				widthField.setValue( width );
@@ -139,7 +147,7 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 				preLoadedHeight = height;
 
 				// Check for new lock value if image exist.
-				toggleLockDimensions( 'check' );
+				toggleLockRatio( helpers.checkHasNaturalRatio( image ) );
 			} );
 
 			srcChanged = true;
@@ -183,7 +191,7 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 
 		// If the value of the field is invalid (e.g. with %), unlock ratio.
 		if ( !value.match( regexGetSizeOrEmpty ) )
-			toggleLockDimensions( false );
+			toggleLockRatio( false );
 
 		// No automatic re-scale when dimension is '0'.
 		if ( value === '0' )
@@ -235,7 +243,7 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 			dialog.addFocusable( lockButton, 4 );
 
 			lockButton.on( 'click', function( evt ) {
-				toggleLockDimensions();
+				toggleLockRatio();
 				evt.data && evt.data.preventDefault();
 			}, this.getDialog() );
 
@@ -270,46 +278,28 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 		}
 	}
 
-	function toggleLockDimensions( enable ) {
+	function toggleLockRatio( enable ) {
 		// No locking if there's no radio (i.e. due to ACF).
 		if ( !lockButton )
 			return;
 
-		var width, height;
-
-		// Check image ratio and original image ratio, but respecting user's
-		// preference. This is performed when a new image is pre-loaded
-		// but not if user already manually locked the ratio.
-		if ( enable == 'check' && !userDefinedLock ) {
-			width = widthField.getValue();
-			height = heightField.getValue();
-
-			var	domRatio = preLoadedWidth * 1000 / preLoadedHeight,
-				ratio = width * 1000 / height;
+		if ( typeof enable == 'boolean' ) {
+			// If user explicitly wants to decide whether
+			// to lock or not, don't do anything.
+			if ( userDefinedLock )
+				return;
 
-			lockRatio = false;
-
-			// Lock ratio, if there is no width and no height specified.
-			if ( !width && !height )
-				lockRatio = true;
-
-			// Lock ratio if there is at least width or height specified,
-			// and the old ratio that matches the new one.
-			else if ( !isNaN( domRatio + ratio ) && Math.round( domRatio ) == Math.round( ratio ) )
-				lockRatio = true;
-		}
-
-		// True or false.
-		else if ( typeof enable == 'boolean' )
 			lockRatio = enable;
+		}
 
 		// Undefined. User changed lock value.
 		else {
+			var width = widthField.getValue(),
+				height;
+
 			userDefinedLock = true;
 			lockRatio = !lockRatio;
 
-			width = widthField.getValue();
-
 			// Automatically adjust height to width to match
 			// the original ratio (based on dom- dimensions).
 			if ( lockRatio && width ) {
@@ -356,22 +346,16 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 			image = widget.parts.image;
 
 			// Reset global variables.
-			preLoadedWidth = preLoadedHeight = srcChanged =
-				userDefinedLock = lockRatio = false;
+			srcChanged = userDefinedLock = lockRatio = false;
+
+			// Natural dimensions of the image.
+			natural = getNatural( image );
 
-			// TODO: IE8
 			// Get the natural width of the image.
-			domWidth = image.$.naturalWidth;
+			preLoadedWidth = domWidth = natural.width;
 
-			// TODO: IE8
 			// Get the natural height of the image.
-			domHeight = image.$.naturalHeight;
-
-			// Determine image ratio lock on startup. Delayed, waiting for
-			// fields to be filled with setup functions.
-			setTimeout( function() {
-				toggleLockDimensions( 'check' );
-			} );
+			preLoadedHeight = domHeight = natural.height;
 		},
 		contents: [
 			{
@@ -473,6 +457,12 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 								type: 'html',
 								style: lockResetStyle,
 								onLoad: onLoadLockReset,
+								setup: function( widget ) {
+									toggleLockRatio( widget.data.lock );
+								},
+								commit: function( widget ) {
+									widget.setData( 'lock', lockRatio );
+								},
 								html: lockResetHtml
 							}
 						]

plugins/image2/plugin.js

@@ -210,13 +210,17 @@
 		},
 
 		init: function() {
-			var image = this.parts.image,
+			var helpers = CKEDITOR.plugins.image2,
+				image = this.parts.image,
 				data = {
 					hasCaption: !!this.parts.caption,
 					src: image.getAttribute( 'src' ),
 					alt: image.getAttribute( 'alt' ) || '',
 					width: image.getAttribute( 'width' ) || '',
-					height: image.getAttribute( 'height' ) || ''
+					height: image.getAttribute( 'height' ) || '',
+
+					// Lock ratio is on by default (#10833).
+					lock: this.ready ? helpers.checkHasNaturalRatio( image ) : true
 				};
 
 			// Read initial float style from figure/image and
@@ -237,7 +241,7 @@
 			// Setup dynamic image resizing with mouse.
 			setupResizer( this );
 
-			this.shiftState = CKEDITOR.plugins.image2.stateShifter( this.editor );
+			this.shiftState = helpers.stateShifter( this.editor );
 
 			// Add widget editing option to its context menu.
 			this.on( 'contextMenu', function( evt ) {
@@ -413,6 +417,48 @@
 
 				data.init( data.element );
 			};
+		},
+
+		// Checks whether current ratio of the image match the natural one.
+		// by comparing dimensions.
+		// @param {CKEDITOR.dom.element} image
+		// @returns {Boolean}
+		checkHasNaturalRatio: function( image ) {
+			var $ = image.$,
+				natural = this.getNatural( image );
+
+			// The reason for two alternative comparisons is that the rounding can come from
+			// both dimensions, e.g. there are two cases:
+			// 	1. height is computed as a rounded relation of the real height and the value of width,
+			//	2. width is computed as a rounded relation of the real width and the value of heigh.
+			return Math.round( $.clientWidth / natural.width * natural.height ) == $.clientHeight ||
+				Math.round( $.clientHeight / natural.height * natural.width ) == $.clientWidth;
+		},
+
+		// Returns natural dimensions of the image. For modern browsers
+		// it uses natural(Width|Height) for old ones (IE8), creates
+		// a new image and reads dimensions.
+		// @param {CKEDITOR.dom.element} image
+		// @returns {Object}
+		getNatural: function( image ) {
+			var dimensions;
+
+			if ( image.$.naturalWidth ) {
+				dimensions = {
+					width: image.$.naturalWidth,
+					height: image.$.naturalHeight
+				};
+			} else {
+				var img = new Image();
+				img.src = image.getAttribute( 'src' );
+
+				dimensions = {
+					width: img.width,
+					height: img.height
+				};
+			}
+
+			return dimensions;
 		}
 	};
 
@@ -663,13 +709,13 @@
 			// Calculate with first, and then adjust height, preserving ratio.
 			function adjustToX() {
 				newWidth = startWidth + factor * moveDiffX;
-				newHeight = 0 | newWidth / ratio;
+				newHeight = Math.round( newWidth / ratio );
 			}
 
 			// Calculate height first, and then adjust width, preserving ratio.
 			function adjustToY() {
 				newHeight = startHeight - moveDiffY;
-				newWidth = 0 | newHeight * ratio;
+				newWidth = Math.round( newHeight * ratio );
 			}
 
 			// This is how variables refer to the geometry.