Skip to content

Commit

Permalink
Merge branch 't/10833' into major
Browse files Browse the repository at this point in the history
  • Loading branch information
@oleq
oleq committed Nov 4, 2013
2 parents ea3a4dc + 2d17d5e commit d792be6
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 50 deletions.
1 change: 1 addition & 0 deletions CHANGES.md
View file
Expand Up @@ -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

Expand Down
80 changes: 35 additions & 45 deletions plugins/image2/dialogs/image2.js
View file
Expand Up @@ -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,

Expand All @@ -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)
Expand Down Expand Up @@ -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 );
Expand All @@ -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;
Expand Down Expand Up @@ -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' )
Expand Down Expand Up @@ -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() );

Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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: [
{
Expand Down Expand Up @@ -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
}
]
Expand Down
56 changes: 51 additions & 5 deletions plugins/image2/plugin.js
View file
Expand Up @@ -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
Expand All @@ -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 ) {
Expand Down Expand Up @@ -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;
}
};

Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit d792be6

Please sign in to comment.