X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fimage%2Fdialogs%2Fimage.js;h=b28e4e1047bed3e430b38a6e81b06e6110452cf1;hb=039a051ccf3901311661022a30afd60fc38130c9;hp=3ba0dc1f8d0242a01c353140885d40ed99160d73;hpb=e7789c1ad838194d45eeee6ac2eb6e55f5cf35a1;p=ckeditor.git
diff --git a/_source/plugins/image/dialogs/image.js b/_source/plugins/image/dialogs/image.js
index 3ba0dc1..b28e4e1 100644
--- a/_source/plugins/image/dialogs/image.js
+++ b/_source/plugins/image/dialogs/image.js
@@ -5,202 +5,207 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
(function()
{
- // Load image preview.
- var IMAGE = 1,
- LINK = 2,
- PREVIEW = 4,
- CLEANUP = 8,
- regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
- regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
- pxLengthRegex = /^\d+px$/;
-
- var onSizeChange = function()
+ var imageDialog = function( editor, dialogType )
{
- var value = this.getValue(), // This = input element.
- dialog = this.getDialog(),
- aMatch = value.match( regexGetSize ); // Check value
- if ( aMatch )
+ // Load image preview.
+ var IMAGE = 1,
+ LINK = 2,
+ PREVIEW = 4,
+ CLEANUP = 8,
+ regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
+ regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
+ pxLengthRegex = /^\d+px$/;
+
+ var onSizeChange = function()
{
- if ( aMatch[2] == '%' ) // % is allowed - > unlock ratio.
- switchLockRatio( dialog, false ); // Unlock.
- value = aMatch[1];
- }
+ var value = this.getValue(), // This = input element.
+ dialog = this.getDialog(),
+ aMatch = value.match( regexGetSize ); // Check value
+ if ( aMatch )
+ {
+ if ( aMatch[2] == '%' ) // % is allowed - > unlock ratio.
+ switchLockRatio( dialog, false ); // Unlock.
+ value = aMatch[1];
+ }
- // Only if ratio is locked
- if ( dialog.lockRatio )
- {
- var oImageOriginal = dialog.originalElement;
- if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+ // Only if ratio is locked
+ if ( dialog.lockRatio )
{
- if ( this.id == 'txtHeight' )
- {
- if ( value && value != '0' )
- value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );
- if ( !isNaN( value ) )
- dialog.setValueOf( 'info', 'txtWidth', value );
- }
- else //this.id = txtWidth.
+ var oImageOriginal = dialog.originalElement;
+ if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
{
- if ( value && value != '0' )
- value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );
- if ( !isNaN( value ) )
- dialog.setValueOf( 'info', 'txtHeight', value );
+ if ( this.id == 'txtHeight' )
+ {
+ if ( value && value != '0' )
+ value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );
+ if ( !isNaN( value ) )
+ dialog.setValueOf( 'info', 'txtWidth', value );
+ }
+ else //this.id = txtWidth.
+ {
+ if ( value && value != '0' )
+ value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );
+ if ( !isNaN( value ) )
+ dialog.setValueOf( 'info', 'txtHeight', value );
+ }
}
}
- }
- updatePreview( dialog );
- };
-
- var updatePreview = function( dialog )
- {
- //Don't load before onShow.
- if ( !dialog.originalElement || !dialog.preview )
- return 1;
+ updatePreview( dialog );
+ };
- // Read attributes and update imagePreview;
- dialog.commitContent( PREVIEW, dialog.preview );
- return 0;
- };
+ var updatePreview = function( dialog )
+ {
+ //Don't load before onShow.
+ if ( !dialog.originalElement || !dialog.preview )
+ return 1;
- // Custom commit dialog logic, where we're intended to give inline style
- // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
- // by other fields.
- function commitContent()
- {
- var args = arguments;
- var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
- inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
+ // Read attributes and update imagePreview;
+ dialog.commitContent( PREVIEW, dialog.preview );
+ return 0;
+ };
- this.foreach( function( widget )
+ // Custom commit dialog logic, where we're intended to give inline style
+ // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
+ // by other fields.
+ function commitContent()
{
- if ( widget.commit && widget.id != 'txtdlgGenStyle' )
- widget.commit.apply( widget, args );
- });
- }
-
- // Avoid recursions.
- var incommit;
+ var args = arguments;
+ var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
+ inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
- // Synchronous field values to other impacted fields is required, e.g. border
- // size change should alter inline-style text as well.
- function commitInternally( targetFields )
- {
- if ( incommit )
- return;
+ this.foreach( function( widget )
+ {
+ if ( widget.commit && widget.id != 'txtdlgGenStyle' )
+ widget.commit.apply( widget, args );
+ });
+ }
- incommit = 1;
+ // Avoid recursions.
+ var incommit;
- var dialog = this.getDialog(),
- element = dialog.imageElement;
- if ( element )
+ // Synchronous field values to other impacted fields is required, e.g. border
+ // size change should alter inline-style text as well.
+ function commitInternally( targetFields )
{
- // Commit this field and broadcast to target fields.
- this.commit( IMAGE, element );
+ if ( incommit )
+ return;
+
+ incommit = 1;
- targetFields = [].concat( targetFields );
- var length = targetFields.length,
- field;
- for ( var i = 0; i < length; i++ )
+ var dialog = this.getDialog(),
+ element = dialog.imageElement;
+ if ( element )
{
- field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
- // May cause recursion.
- field && field.setup( IMAGE, element );
+ // Commit this field and broadcast to target fields.
+ this.commit( IMAGE, element );
+
+ targetFields = [].concat( targetFields );
+ var length = targetFields.length,
+ field;
+ for ( var i = 0; i < length; i++ )
+ {
+ field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
+ // May cause recursion.
+ field && field.setup( IMAGE, element );
+ }
}
+
+ incommit = 0;
}
- incommit = 0;
- }
+ var switchLockRatio = function( dialog, value )
+ {
+ var oImageOriginal = dialog.originalElement;
- var switchLockRatio = function( dialog, value )
- {
- var oImageOriginal = dialog.originalElement,
- ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
+ // Dialog may already closed. (#5505)
+ if( !oImageOriginal )
+ return null;
- if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
- {
- if ( value == 'check' ) // Check image ratio and original image ratio.
+ var ratioButton = CKEDITOR.document.getById( btnLockSizesId );
+
+ if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
{
- var width = dialog.getValueOf( 'info', 'txtWidth' ),
- height = dialog.getValueOf( 'info', 'txtHeight' ),
- originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
- thisRatio = width * 1000 / height;
- dialog.lockRatio = false; // Default: unlock ratio
-
- if ( !width && !height )
- dialog.lockRatio = true;
- else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
+ if ( value == 'check' ) // Check image ratio and original image ratio.
{
- if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
+ var width = dialog.getValueOf( 'info', 'txtWidth' ),
+ height = dialog.getValueOf( 'info', 'txtHeight' ),
+ originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
+ thisRatio = width * 1000 / height;
+ dialog.lockRatio = false; // Default: unlock ratio
+
+ if ( !width && !height )
dialog.lockRatio = true;
+ else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
+ {
+ if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
+ dialog.lockRatio = true;
+ }
}
+ else if ( value != undefined )
+ dialog.lockRatio = value;
+ else
+ dialog.lockRatio = !dialog.lockRatio;
}
- else if ( value != undefined )
- dialog.lockRatio = value;
- else
- dialog.lockRatio = !dialog.lockRatio;
- }
- else if ( value != 'check' ) // I can't lock ratio if ratio is unknown.
- dialog.lockRatio = false;
+ else if ( value != 'check' ) // I can't lock ratio if ratio is unknown.
+ dialog.lockRatio = false;
- if ( dialog.lockRatio )
- ratioButton.removeClass( 'cke_btn_unlocked' );
- else
- ratioButton.addClass( 'cke_btn_unlocked' );
+ if ( dialog.lockRatio )
+ ratioButton.removeClass( 'cke_btn_unlocked' );
+ else
+ ratioButton.addClass( 'cke_btn_unlocked' );
- var lang = dialog._.editor.lang.image,
- label = lang[ dialog.lockRatio ? 'unlockRatio' : 'lockRatio' ];
+ var lang = dialog._.editor.lang.image,
+ label = lang[ dialog.lockRatio ? 'unlockRatio' : 'lockRatio' ];
- ratioButton.setAttribute( 'title', label );
- ratioButton.getFirst().setText( label );
+ ratioButton.setAttribute( 'title', label );
+ ratioButton.getFirst().setText( label );
- return dialog.lockRatio;
- };
+ return dialog.lockRatio;
+ };
- var resetSize = function( dialog )
- {
- var oImageOriginal = dialog.originalElement;
- if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+ var resetSize = function( dialog )
{
- dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width );
- dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height );
- }
- updatePreview( dialog );
- };
-
- var setupDimension = function( type, element )
- {
- if ( type != IMAGE )
- return;
+ var oImageOriginal = dialog.originalElement;
+ if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
+ {
+ dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width );
+ dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height );
+ }
+ updatePreview( dialog );
+ };
- function checkDimension( size, defaultValue )
+ var setupDimension = function( type, element )
{
- var aMatch = size.match( regexGetSize );
- if ( aMatch )
+ if ( type != IMAGE )
+ return;
+
+ function checkDimension( size, defaultValue )
{
- if ( aMatch[2] == '%' ) // % is allowed.
+ var aMatch = size.match( regexGetSize );
+ if ( aMatch )
{
- aMatch[1] += '%';
- switchLockRatio( dialog, false ); // Unlock ratio
+ if ( aMatch[2] == '%' ) // % is allowed.
+ {
+ aMatch[1] += '%';
+ switchLockRatio( dialog, false ); // Unlock ratio
+ }
+ return aMatch[1];
}
- return aMatch[1];
+ return defaultValue;
}
- return defaultValue;
- }
- var dialog = this.getDialog(),
- value = '',
- dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ),
- size = element.getAttribute( dimension );
+ var dialog = this.getDialog(),
+ value = '',
+ dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ),
+ size = element.getAttribute( dimension );
- if ( size )
- value = checkDimension( size, value );
- value = checkDimension( element.getStyle( dimension ), value );
+ if ( size )
+ value = checkDimension( size, value );
+ value = checkDimension( element.getStyle( dimension ), value );
- this.setValue( value );
- };
+ this.setValue( value );
+ };
- var imageDialog = function( editor, dialogType )
- {
var previewPreloader;
var onImgLoadEvent = function()
@@ -213,7 +218,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
original.removeListener( 'abort', onImgLoadErrorEvent );
// Hide loader
- CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
+ CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
// New image -> new domensions
if ( !this.dontResetSize )
@@ -241,9 +246,21 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
this.preview.setAttribute( 'src', noimage );
// Hide loader
- CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
+ CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
switchLockRatio( this, false ); // Unlock.
};
+
+ var numbering = function( id )
+ {
+ return CKEDITOR.tools.getNextId() + '_' + id;
+ },
+ btnLockSizesId = numbering( 'btnLockSizes' ),
+ btnResetSizeId = numbering( 'btnResetSize' ),
+ imagePreviewLoaderId = numbering( 'ImagePreviewLoader' ),
+ imagePreviewBoxId = numbering( 'ImagePreviewBox' ),
+ previewLinkId = numbering( 'previewLink' ),
+ previewImageId = numbering( 'previewImage' );
+
return {
title : ( dialogType == 'image' ) ? editor.lang.image.title : editor.lang.image.titleButton,
minWidth : 420,
@@ -268,10 +285,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
link = element && element.getAscendant( 'a' );
//Hide loader.
- CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
+ CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
// Create the preview before setup the dialog contents.
previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );
- this.preview = CKEDITOR.document.getById( 'previewImage' );
+ this.preview = CKEDITOR.document.getById( previewImageId );
// Copy of the image
this.originalElement = editor.document.createElement( 'img' );
@@ -432,8 +449,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
if ( dialogType != 'image' )
this.hidePage( 'Link' ); //Hide Link tab.
var doc = this._.element.getDocument();
- this.addFocusable( doc.getById( 'btnResetSize' ), 5 );
- this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );
+ this.addFocusable( doc.getById( btnResetSizeId ), 5 );
+ this.addFocusable( doc.getById( btnLockSizesId ), 5 );
this.commitContent = commitContent;
},
@@ -491,7 +508,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
original.setCustomData( 'isReady', 'false' );
// Show loader
- var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' );
+ var loader = CKEDITOR.document.getById( imagePreviewLoaderId );
if ( loader )
loader.setStyle( 'display', '' );
@@ -524,7 +541,6 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
field.setValue( url ); // And call this.onChange()
// Manually set the initial value.(#4191)
field.setInitValue();
- field.focus();
}
},
commit : function( type, element )
@@ -561,7 +577,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
id : 'txtAlt',
type : 'text',
label : editor.lang.image.alt,
- accessKey : 'A',
+ accessKey : 'T',
'default' : '',
onChange : function()
{
@@ -650,7 +666,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
element.setStyle( 'width', oImageOriginal.$.width + 'px');
}
else
- element.setStyle( 'width', value + 'px');
+ element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
}
else if ( type == CLEANUP )
{
@@ -701,7 +717,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
element.setStyle( 'height', oImageOriginal.$.height + 'px' );
}
else
- element.setStyle( 'height', value + 'px' );
+ element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
}
else if ( type == CLEANUP )
{
@@ -718,8 +734,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
onLoad : function()
{
// Activate Reset button
- var resetButton = CKEDITOR.document.getById( 'btnResetSize' ),
- ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
+ var resetButton = CKEDITOR.document.getById( btnResetSizeId ),
+ ratioButton = CKEDITOR.document.getById( btnLockSizesId );
if ( resetButton )
{
resetButton.on( 'click', function(evt)
@@ -768,9 +784,9 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
},
html : '
'
}
]
@@ -1050,10 +1066,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
type : 'html',
style : 'width:95%;',
html : '' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'
'+
- '
'+
- '
'+
- ''+
- '' +
+ ''+
+ ''+
+ ''+
+ '' +
( editor.config.image_previewText ||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
@@ -1111,7 +1127,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
{
action : 'Browse',
target: 'Link:txtUrl',
- url: editor.config.filebrowserImageBrowseLinkUrl || editor.config.filebrowserBrowseUrl
+ url: editor.config.filebrowserImageBrowseLinkUrl
},
style : 'float:right',
hidden : true,
|
|