Committer: vkurkin
LJSV-1826: Size of images by user, inserted in RTE, in some cases ignoredU trunk/htdocs/js/ck/plugins/image/dialogs/image.js
Modified: trunk/htdocs/js/ck/plugins/image/dialogs/image.js
===================================================================
--- trunk/htdocs/js/ck/plugins/image/dialogs/image.js 2011-10-19 06:26:26 UTC (rev 20373)
+++ trunk/htdocs/js/ck/plugins/image/dialogs/image.js 2011-10-19 07:24:43 UTC (rev 20374)
@@ -1,12 +1,10 @@
/*
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.html or http://ckeditor.com/license
-*/
+ Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+ For licensing, see LICENSE.html or http://ckeditor.com/license
+ */
-(function()
-{
- var imageDialog = function( editor, dialogType )
- {
+(function(){
+ var imageDialog = function(editor, dialogType){
// Load image preview.
var IMAGE = 1,
LINK = 2,
@@ -16,67 +14,66 @@
regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
pxLengthRegex = /^\d+px$/;
- var onSizeChange = function()
- {
+ var onSizeChange = function(){
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.
+ 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 )
- {
+ if(dialog.lockRatio){
var oImageOriginal = dialog.originalElement;
- if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
- {
- if ( this.id == 'txtHeight' )
+ if(oImageOriginal.getCustomData('isReady') == 'true'){
+ 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.$.width * ( value / oImageOriginal.$.height ) );
- if ( !isNaN( value ) )
- dialog.setValueOf( 'info', 'txtWidth', value );
+ if(value && value != '0'){
+ value = Math.round(oImageOriginal.$.height * ( value / oImageOriginal.$.width ));
+ }
+ if(!isNaN(value)){
+ dialog.setValueOf('info', 'txtHeight', 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 );
+ updatePreview(dialog);
};
- var updatePreview = function( dialog )
- {
+ var updatePreview = function(dialog){
//Don't load before onShow.
- if ( !dialog.originalElement || !dialog.preview )
+ if(!dialog.originalElement || !dialog.preview){
return 1;
+ }
// Read attributes and update imagePreview;
- dialog.commitContent( PREVIEW, dialog.preview );
+ dialog.commitContent(PREVIEW, dialog.preview);
return 0;
};
// 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()
- {
+ function commitContent(){
var args = arguments;
- var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
- inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
+ var inlineStyleField = this.getContentElement('advanced', 'txtdlgGenStyle');
+ inlineStyleField && inlineStyleField.commit.apply(inlineStyleField, args);
- this.foreach( function( widget )
- {
- if ( widget.commit && widget.id != 'txtdlgGenStyle' )
- widget.commit.apply( widget, args );
+ this.foreach(function(widget){
+ if(widget.commit && widget.id != 'txtdlgGenStyle'){
+ widget.commit.apply(widget, args);
+ }
});
}
@@ -85,118 +82,109 @@
// 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 )
+ function commitInternally(targetFields){
+ if(incommit){
return;
+ }
incommit = 1;
var dialog = this.getDialog(),
element = dialog.imageElement;
- if ( element )
- {
+ if(element){
// Commit this field and broadcast to target fields.
- this.commit( IMAGE, element );
+ this.commit(IMAGE, element);
- targetFields = [].concat( targetFields );
+ targetFields = [].concat(targetFields);
var length = targetFields.length,
field;
- for ( var i = 0; i < length; i++ )
- {
- field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
+ for(var i = 0; i < length; i++){
+ field = dialog.getContentElement.apply(dialog, targetFields[ i ].split(':'));
// May cause recursion.
- field && field.setup( IMAGE, element );
+ field && field.setup(IMAGE, element);
}
}
incommit = 0;
}
- var switchLockRatio = function( dialog, value )
- {
- if ( !dialog.getContentElement( 'info', 'ratioLock' ) )
+ var switchLockRatio = function(dialog, value){
+ if(!dialog.getContentElement('info', 'ratioLock')){
return null;
+ }
var oImageOriginal = dialog.originalElement;
// Dialog may already closed. (#5505)
- if( !oImageOriginal )
+ if(!oImageOriginal){
return null;
+ }
// Check image ratio and original image ratio, but respecting user's preference.
- if ( value == 'check' )
- {
- if ( !dialog.userlockRatio && oImageOriginal.getCustomData( 'isReady' ) == 'true' )
- {
- var width = dialog.getValueOf( 'info', 'txtWidth' ),
- height = dialog.getValueOf( 'info', 'txtHeight' ),
+ if(value == 'check'){
+ if(!dialog.userlockRatio && 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
+ dialog.lockRatio = false; // Default: unlock ratio
- if ( !width && !height )
+ if(!width && !height){
dialog.lockRatio = true;
- else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
- {
- if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
+ } else if(!isNaN(originalRatio) && !isNaN(thisRatio)){
+ if(Math.round(originalRatio) == Math.round(thisRatio)){
dialog.lockRatio = true;
+ }
}
}
- }
- else if ( value != undefined )
+ } else if(value != undefined){
dialog.lockRatio = value;
- else
- {
+ } else {
dialog.userlockRatio = 1;
dialog.lockRatio = !dialog.lockRatio;
}
- var ratioButton = CKEDITOR.document.getById( btnLockSizesId );
- if ( dialog.lockRatio )
- ratioButton.removeClass( 'cke_btn_unlocked' );
- else
- ratioButton.addClass( 'cke_btn_unlocked' );
+ var ratioButton = CKEDITOR.document.getById(btnLockSizesId);
+ if(dialog.lockRatio){
+ ratioButton.removeClass('cke_btn_unlocked');
+ } else {
+ ratioButton.addClass('cke_btn_unlocked');
+ }
- ratioButton.setAttribute( 'aria-checked', dialog.lockRatio );
+ ratioButton.setAttribute('aria-checked', dialog.lockRatio);
// Ratio button hc presentation - WHITE SQUARE / BLACK SQUARE
- if ( CKEDITOR.env.hc )
- {
- var icon = ratioButton.getChild( 0 );
- icon.setHtml( dialog.lockRatio ? CKEDITOR.env.ie ? '\u25A0': '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );
+ if(CKEDITOR.env.hc){
+ var icon = ratioButton.getChild(0);
+ icon.setHtml(dialog.lockRatio ? CKEDITOR.env.ie ? '\u25A0' : '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2');
}
return dialog.lockRatio;
};
- var resetSize = function( dialog )
- {
+ var resetSize = function(dialog){
var oImageOriginal = dialog.originalElement;
- if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
- {
- var widthField = dialog.getContentElement( 'info', 'txtWidth' ),
- heightField = dialog.getContentElement( 'info', 'txtHeight' );
- widthField && widthField.setValue( oImageOriginal.$.width );
- heightField && heightField.setValue( oImageOriginal.$.height );
+ if(oImageOriginal.getCustomData('isReady') == 'true'){
+ var widthField = dialog.getContentElement('info', 'txtWidth'),
+ heightField = dialog.getContentElement('info', 'txtHeight');
+ widthField && widthField.setValue(oImageOriginal.$.width);
+ heightField && heightField.setValue(oImageOriginal.$.height);
}
- updatePreview( dialog );
+ updatePreview(dialog);
};
- var setupDimension = function( type, element )
- {
- if ( type != IMAGE )
+ var setupDimension = function(type, element){
+ if(type != IMAGE){
return;
+ }
- function checkDimension( size, defaultValue )
- {
- var aMatch = size.match( regexGetSize );
- if ( aMatch )
- {
- if ( aMatch[2] == '%' ) // % is allowed.
+ function checkDimension(size, defaultValue){
+ var aMatch = size.match(regexGetSize);
+ if(aMatch){
+ if(aMatch[2] == '%') // % is allowed.
{
aMatch[1] += '%';
- switchLockRatio( dialog, false ); // Unlock ratio
+ switchLockRatio(dialog, false); // Unlock ratio
}
return aMatch[1];
}
@@ -206,76 +194,78 @@
var dialog = this.getDialog(),
value = '',
dimension = this.id == 'txtWidth' ? 'width' : 'height',
- size = element.getAttribute( dimension );
+ 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 previewPreloader;
- var onImgLoadEvent = function()
- {
+ var onImgLoadEvent = function(){
// Image is ready.
var original = this.originalElement;
- original.setCustomData( 'isReady', 'true' );
- original.removeListener( 'load', onImgLoadEvent );
- original.removeListener( 'error', onImgLoadErrorEvent );
- original.removeListener( 'abort', onImgLoadErrorEvent );
+ original.setCustomData('isReady', 'true');
+ original.removeListener('load', onImgLoadEvent);
+ original.removeListener('error', onImgLoadErrorEvent);
+ original.removeListener('abort', onImgLoadErrorEvent);
// Hide loader
- CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
+ CKEDITOR.document.getById(imagePreviewLoaderId).setStyle('display', 'none');
// New image -> new domensions
- if ( !this.dontResetSize )
- resetSize( this );
+ if(!this.dontResetSize){
+ resetSize(this);
+ }
- if ( this.firstLoad )
- CKEDITOR.tools.setTimeout( function(){ switchLockRatio( this, 'check' ); }, 0, this );
+ if(this.firstLoad){
+ CKEDITOR.tools.setTimeout(function(){
+ switchLockRatio(this, 'check');
+ }, 0, this);
+ }
this.firstLoad = false;
this.dontResetSize = false;
};
- var onImgLoadErrorEvent = function()
- {
+ var onImgLoadErrorEvent = function(){
// Error. Image is not loaded.
var original = this.originalElement;
- original.removeListener( 'load', onImgLoadEvent );
- original.removeListener( 'error', onImgLoadErrorEvent );
- original.removeListener( 'abort', onImgLoadErrorEvent );
+ original.removeListener('load', onImgLoadEvent);
+ original.removeListener('error', onImgLoadErrorEvent);
+ original.removeListener('abort', onImgLoadErrorEvent);
// Set Error image.
- var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );
+ var noimage = CKEDITOR.getUrl(editor.skinPath + 'images/noimage.png');
- if ( this.preview )
- this.preview.setAttribute( 'src', noimage );
+ if(this.preview){
+ this.preview.setAttribute('src', noimage);
+ }
// Hide loader
- CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' );
- switchLockRatio( this, false ); // Unlock.
+ 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' );
+ 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 : editor.lang.image[ dialogType == 'image' ? 'title' : 'titleButton' ],
minWidth : 480,
minHeight : 360,
- onShow : function()
- {
+ onShow : function(){
this.imageElement = false;
this.linkElement = false;
@@ -292,192 +282,173 @@
var editor = this.getParentEditor(),
sel = this.getParentEditor().getSelection(),
element = sel.getSelectedElement(),
- link = element && element.getAscendant( 'a' );
+ link = element && element.getAscendant('a');
//Hide loader.
- CKEDITOR.document.getById( imagePreviewLoaderId ).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( previewImageId );
+ previewPreloader = new CKEDITOR.dom.element('img', editor.document);
+ this.preview = CKEDITOR.document.getById(previewImageId);
// Copy of the image
- this.originalElement = editor.document.createElement( 'img' );
- this.originalElement.setAttribute( 'alt', '' );
- this.originalElement.setCustomData( 'isReady', 'false' );
+ this.originalElement = editor.document.createElement('img');
+ this.originalElement.setAttribute('alt', '');
+ this.originalElement.setCustomData('isReady', 'false');
- if ( link )
- {
+ if(link){
this.linkElement = link;
this.linkEditMode = true;
// Look for Image element.
var linkChildren = link.getChildren();
- if ( linkChildren.count() == 1 ) // 1 child.
+ if(linkChildren.count() == 1) // 1 child.
{
- var childTagName = linkChildren.getItem( 0 ).getName();
- if ( childTagName == 'img' || childTagName == 'input' )
- {
- this.imageElement = linkChildren.getItem( 0 );
- if ( this.imageElement.getName() == 'img' )
+ var childTagName = linkChildren.getItem(0).getName();
+ if(childTagName == 'img' || childTagName == 'input'){
+ this.imageElement = linkChildren.getItem(0);
+ if(this.imageElement.getName() == 'img'){
this.imageEditMode = 'img';
- else if ( this.imageElement.getName() == 'input' )
+ } else if(this.imageElement.getName() == 'input'){
this.imageEditMode = 'input';
+ }
}
}
// Fill out all fields.
- if ( dialogType == 'image' )
- this.setupContent( LINK, link );
+ if(dialogType == 'image'){
+ this.setupContent(LINK, link);
+ }
}
- if ( element && element.getName() == 'img' && !element.data( 'cke-realelement' )
- || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' )
- {
+ if(element && element.getName() == 'img' && !element.data('cke-realelement') || element && element.getName() == 'input' && element.getAttribute('type') == 'image'){
this.imageEditMode = element.getName();
this.imageElement = element;
}
- if ( this.imageEditMode )
- {
+ if(this.imageEditMode){
// Use the original element as a buffer from since we don't want
// temporary changes to be committed, e.g. if the dialog is canceled.
this.cleanImageElement = this.imageElement;
- this.imageElement = this.cleanImageElement.clone( true, true );
+ this.imageElement = this.cleanImageElement.clone(true, true);
// Fill out all fields.
- this.setupContent( IMAGE, this.imageElement );
+ this.setupContent(IMAGE, this.imageElement);
+ } else {
+ this.imageElement = editor.document.createElement('img');
}
- else
- this.imageElement = editor.document.createElement( 'img' );
// Refresh LockRatio button
- switchLockRatio ( this, true );
+ switchLockRatio(this, true);
// Dont show preview if no URL given.
- if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )
- {
- this.preview.removeAttribute( 'src' );
- this.preview.setStyle( 'display', 'none' );
+ if(!CKEDITOR.tools.trim(this.getValueOf('info', 'txtUrl'))){
+ this.preview.removeAttribute('src');
+ this.preview.setStyle('display', 'none');
}
},
- onOk : function()
- {
+ onOk : function(){
// Edit existing Image.
- if ( this.imageEditMode )
- {
+ if(this.imageEditMode){
var imgTagName = this.imageEditMode;
// Image dialog and Input element.
- if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
- {
+ if(dialogType == 'image' && imgTagName == 'input' && confirm(editor.lang.image.button2Img)){
// Replace INPUT-> IMG
imgTagName = 'img';
- this.imageElement = editor.document.createElement( 'img' );
- this.imageElement.setAttribute( 'alt', '' );
- editor.insertElement( this.imageElement );
+ this.imageElement = editor.document.createElement('img');
+ this.imageElement.setAttribute('alt', '');
+ editor.insertElement(this.imageElement);
}
// ImageButton dialog and Image element.
- else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
- {
+ else if(dialogType != 'image' && imgTagName == 'img' && confirm(editor.lang.image.img2Button)){
// Replace IMG -> INPUT
imgTagName = 'input';
- this.imageElement = editor.document.createElement( 'input' );
- this.imageElement.setAttributes(
- {
+ this.imageElement = editor.document.createElement('input');
+ this.imageElement.setAttributes({
type : 'image',
alt : ''
- }
- );
- editor.insertElement( this.imageElement );
- }
- else
- {
+ });
+ editor.insertElement(this.imageElement);
+ } else {
// Restore the original element before all commits.
this.imageElement = this.cleanImageElement;
delete this.cleanImageElement;
}
- }
- else // Create a new image.
+ } else // Create a new image.
{
// Image dialog -> create IMG element.
- if ( dialogType == 'image' )
- this.imageElement = editor.document.createElement( 'img' );
- else
- {
- this.imageElement = editor.document.createElement( 'input' );
- this.imageElement.setAttribute ( 'type' ,'image' );
+ if(dialogType == 'image'){
+ this.imageElement = editor.document.createElement('img');
+ } else {
+ this.imageElement = editor.document.createElement('input');
+ this.imageElement.setAttribute('type', 'image');
}
- this.imageElement.setAttribute( 'alt', '' );
+ this.imageElement.setAttribute('alt', '');
}
// Create a new link.
- if ( !this.linkEditMode )
- this.linkElement = editor.document.createElement( 'a' );
+ if(!this.linkEditMode){
+ this.linkElement = editor.document.createElement('a');
+ }
// Set attributes.
- this.commitContent( IMAGE, this.imageElement );
- this.commitContent( LINK, this.linkElement );
+ this.commitContent(IMAGE, this.imageElement);
+ this.commitContent(LINK, this.linkElement);
// Remove empty style attribute.
- if ( !this.imageElement.getAttribute( 'style' ) )
- this.imageElement.removeAttribute( 'style' );
+ if(!this.imageElement.getAttribute('style')){
+ this.imageElement.removeAttribute('style');
+ }
// Insert a new Image.
- if ( !this.imageEditMode )
- {
- if ( this.addLink )
- {
+ if(!this.imageEditMode){
+ if(this.addLink){
//Insert a new Link.
- if ( !this.linkEditMode )
+ if(!this.linkEditMode){
+ editor.insertElement(this.linkElement);
+ this.linkElement.append(this.imageElement, false);
+ } else //Link already exists, image not.
{
- editor.insertElement( this.linkElement );
- this.linkElement.append( this.imageElement, false );
+ editor.insertElement(this.imageElement);
}
- else //Link already exists, image not.
- editor.insertElement( this.imageElement );
+ } else {
+ editor.insertElement(this.imageElement);
}
- else
- editor.insertElement( this.imageElement );
- }
- else // Image already exists.
+ } else // Image already exists.
{
//Add a new link element.
- if ( !this.linkEditMode && this.addLink )
- {
- editor.insertElement( this.linkElement );
- this.imageElement.appendTo( this.linkElement );
+ if(!this.linkEditMode && this.addLink){
+ editor.insertElement(this.linkElement);
+ this.imageElement.appendTo(this.linkElement);
}
//Remove Link, Image exists.
- else if ( this.linkEditMode && !this.addLink )
- {
- editor.getSelection().selectElement( this.linkElement );
- editor.insertElement( this.imageElement );
+ else if(this.linkEditMode && !this.addLink){
+ editor.getSelection().selectElement(this.linkElement);
+ editor.insertElement(this.imageElement);
}
}
},
- onLoad : function()
- {
- if ( dialogType != 'image' )
- this.hidePage( 'Link' ); //Hide Link tab.
+ onLoad : function(){
+ if(dialogType != 'image'){
+ this.hidePage('Link');
+ } //Hide Link tab.
var doc = this._.element.getDocument();
- if ( this.getContentElement( 'info', 'ratioLock' ) )
- {
- this.addFocusable( doc.getById( btnResetSizeId ), 5 );
- this.addFocusable( doc.getById( btnLockSizesId ), 5 );
+ if(this.getContentElement('info', 'ratioLock')){
+ this.addFocusable(doc.getById(btnResetSizeId), 5);
+ this.addFocusable(doc.getById(btnLockSizesId), 5);
}
this.commitContent = commitContent;
},
- onHide : function()
- {
- if ( this.preview )
- this.commitContent( CLEANUP, this.preview );
+ onHide : function(){
+ if(this.preview){
+ this.commitContent(CLEANUP, this.preview);
+ }
- if ( this.originalElement )
- {
- this.originalElement.removeListener( 'load', onImgLoadEvent );
- this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
- this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
+ if(this.originalElement){
+ this.originalElement.removeListener('load', onImgLoadEvent);
+ this.originalElement.removeListener('error', onImgLoadErrorEvent);
+ this.originalElement.removeListener('abort', onImgLoadErrorEvent);
this.originalElement.remove();
this.originalElement = false; // Dialog is closed.
}
@@ -490,678 +461,595 @@
label : editor.lang.image.infoTab,
accessKey : 'I',
elements :
- [
- {
- type : 'vbox',
- padding : 0,
- children :
- [
- {
- type : 'hbox',
- widths : [ '280px', '110px' ],
- align : 'right',
- children :
+ [
+ {
+ type : 'vbox',
+ padding : 0,
+ children :
[
{
- id : 'txtUrl',
- type : 'text',
- label : editor.lang.common.url,
- required: true,
- onChange : function()
- {
- var dialog = this.getDialog(),
- newUrl = this.getValue();
+ type : 'hbox',
+ widths : [ '280px', '110px' ],
+ align : 'right',
+ children :
+ [
+ {
+ id : 'txtUrl',
+ type : 'text',
+ label : editor.lang.common.url,
+ required: true,
+ onChange : function(){
+ var dialog = this.getDialog(),
+ newUrl = this.getValue();
- //Update original image
- if ( newUrl.length > 0 ) //Prevent from load before onShow
- {
- dialog = this.getDialog();
- var original = dialog.originalElement;
+ //Update original image
+ if(newUrl.length > 0) //Prevent from load before onShow
+ {
+ dialog = this.getDialog();
+ var original = dialog.originalElement;
- dialog.preview.removeStyle( 'display' );
+ dialog.preview.removeStyle('display');
- original.setCustomData( 'isReady', 'false' );
- // Show loader
- var loader = CKEDITOR.document.getById( imagePreviewLoaderId );
- if ( loader )
- loader.setStyle( 'display', '' );
+ original.setCustomData('isReady', 'false');
+ // Show loader
+ var loader = CKEDITOR.document.getById(imagePreviewLoaderId);
+ if(loader){
+ loader.setStyle('display', '');
+ }
- original.on( 'load', onImgLoadEvent, dialog );
- original.on( 'error', onImgLoadErrorEvent, dialog );
- original.on( 'abort', onImgLoadErrorEvent, dialog );
- original.setAttribute( 'src', newUrl );
+ original.on('load', onImgLoadEvent, dialog);
+ original.on('error', onImgLoadErrorEvent, dialog);
+ original.on('abort', onImgLoadErrorEvent, dialog);
+ original.setAttribute('src', newUrl);
- // Query the preloader to figure out the url impacted by based href.
- previewPreloader.setAttribute( 'src', newUrl );
- dialog.preview.setAttribute( 'src', previewPreloader.$.src );
- updatePreview( dialog );
- }
- // Dont show preview if no URL given.
- else if ( dialog.preview )
- {
- dialog.preview.removeAttribute( 'src' );
- dialog.preview.setStyle( 'display', 'none' );
- }
- },
- setup : function( type, element )
- {
- if ( type == IMAGE )
- {
- var url = element.data( 'cke-saved-src' ) || element.getAttribute( 'src' );
- var field = this;
+ // Query the preloader to figure out the url impacted by based href.
+ previewPreloader.setAttribute('src', newUrl);
+ dialog.preview.setAttribute('src', previewPreloader.$.src);
+ updatePreview(dialog);
+ }
+ // Dont show preview if no URL given.
+ else if(dialog.preview){
+ dialog.preview.removeAttribute('src');
+ dialog.preview.setStyle('display', 'none');
+ }
+ },
+ setup : function(type, element){
+ if(type == IMAGE){
+ var url = element.data('cke-saved-src') || element.getAttribute('src');
+ var field = this;
- this.getDialog().dontResetSize = true;
+ this.getDialog().dontResetSize = true;
- field.setValue( url ); // And call this.onChange()
- // Manually set the initial value.(#4191)
- field.setInitValue();
- }
- },
- commit : function( type, element )
- {
- if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
- {
- element.data( 'cke-saved-src', this.getValue() );
- element.setAttribute( 'src', this.getValue() );
- }
- else if ( type == CLEANUP )
- {
- element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.
- element.removeAttribute( 'src' );
- }
- },
- validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
- },
- {
- type : 'button',
- id : 'browse',
- // v-align with the 'txtUrl' field.
- // TODO: We need something better than a fixed size here.
- style : 'display:inline-block;margin-top:10px;',
- align : 'center',
- label : editor.lang.common.browseServer,
- hidden : true,
- filebrowser : 'info:txtUrl'
+ field.setValue(url); // And call this.onChange()
+ // Manually set the initial value.(#4191)
+ field.setInitValue();
+ }
+ },
+ commit : function(type, element){
+ if(type == IMAGE && ( this.getValue() || this.isChanged() )){
+ element.data('cke-saved-src', this.getValue());
+ element.setAttribute('src', this.getValue());
+ } else if(type == CLEANUP){
+ element.setAttribute('src', ''); // If removeAttribute doesn't work.
+ element.removeAttribute('src');
+ }
+ },
+ validate : CKEDITOR.dialog.validate.notEmpty(editor.lang.image.urlMissing)
+ },
+ {
+ type : 'button',
+ id : 'browse',
+ // v-align with the 'txtUrl' field.
+ // TODO: We need something better than a fixed size here.
+ style : 'display:inline-block;margin-top:10px;',
+ align : 'center',
+ label : editor.lang.common.browseServer,
+ hidden : true,
+ filebrowser : 'info:txtUrl'
+ }
+ ]
}
]
- }
- ]
- },
- {
- id : 'txtAlt',
- type : 'text',
- label : editor.lang.image.alt,
- accessKey : 'T',
- 'default' : '',
- onChange : function()
- {
- updatePreview( this.getDialog() );
},
- setup : function( type, element )
{
- if ( type == IMAGE )
- this.setValue( element.getAttribute( 'alt' ) );
+ id : 'txtAlt',
+ type : 'text',
+ label : editor.lang.image.alt,
+ accessKey : 'T',
+ 'default' : '',
+ onChange : function(){
+ updatePreview(this.getDialog());
+ },
+ setup : function(type, element){
+ if(type == IMAGE){
+ this.setValue(element.getAttribute('alt'));
+ }
+ },
+ commit : function(type, element){
+ if(type == IMAGE){
+ if(this.getValue() || this.isChanged()){
+ element.setAttribute('alt', this.getValue());
+ }
+ } else if(type == PREVIEW){
+ element.setAttribute('alt', this.getValue());
+ } else if(type == CLEANUP){
+ element.removeAttribute('alt');
+ }
+ }
},
- commit : function( type, element )
{
- if ( type == IMAGE )
- {
- if ( this.getValue() || this.isChanged() )
- element.setAttribute( 'alt', this.getValue() );
- }
- else if ( type == PREVIEW )
- {
- element.setAttribute( 'alt', this.getValue() );
- }
- else if ( type == CLEANUP )
- {
- element.removeAttribute( 'alt' );
- }
- }
- },
- {
- type : 'hbox',
- children :
- [
- {
- id : 'basic',
- type : 'vbox',
- children :
+ type : 'hbox',
+ children :
[
{
- type : 'hbox',
- widths : [ '50%', '50%' ],
+ id : 'basic',
+ type : 'vbox',
children :
- [
- {
- type : 'vbox',
- padding : 1,
- children :
- [
- {
- type : 'text',
- width: '40px',
- id : 'txtWidth',
- label : editor.lang.common.width,
- onKeyUp : onSizeChange,
- onChange : function()
- {
- commitInternally.call( this, 'advanced:txtdlgGenStyle' );
- },
- validate : function()
- {
- var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
- isValid = !!( aMatch && parseInt( aMatch[1], 10 ) !== 0 );
- if ( !isValid )
- alert( editor.lang.common.invalidWidth );
- return isValid;
- },
- setup : setupDimension,
- commit : function( type, element, internalCommit )
- {
- var value = this.getValue();
- if ( type == IMAGE )
+ [
+ {
+ type : 'hbox',
+ widths : [ '50%', '50%' ],
+ children :
+ [
{
- if ( value )
- element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
- else
- element.removeStyle( 'width' );
+ type : 'vbox',
+ padding : 1,
+ children :
+ [
+ {
+ type : 'text',
+ width: '40px',
+ id : 'txtWidth',
+ label : editor.lang.common.width,
+ onKeyUp : onSizeChange,
+ onChange : function(){
+ commitInternally.call(this, 'advanced:txtdlgGenStyle');
+ },
+ validate : function(){
+ var aMatch = this.getValue().match(regexGetSizeOrEmpty),
+ isValid = !!( aMatch && parseInt(aMatch[1], 10) !== 0 );
+ if(!isValid){
+ alert(editor.lang.common.invalidWidth);
+ }
+ return isValid;
+ },
+ setup : setupDimension,
+ commit : function(type, element){
+ var value = this.getValue();
+ var dialog = this.getDialog();
+ if(type == IMAGE){
+ if(value){
+ dialog.preview.setStyle('width', CKEDITOR.tools.cssLength(value));
+ element.setAttribute('width', value);
+ } else {
+ dialog.preview.removeStyle('width');
+ element.removeAttribute('width');
+ }
+ element.removeStyle('width');
+ } else if(type == PREVIEW){
+ var aMatch = value.match(regexGetSize);
+ if(!aMatch){
+ var oImageOriginal = dialog.originalElement;
+ if(oImageOriginal.getCustomData('isReady') == 'true'){
+ element.setStyle('width', oImageOriginal.$.width + 'px');
+ }
+ } else {
+ element.setStyle('width', CKEDITOR.tools.cssLength(value));
+ }
+ } else if(type == CLEANUP){
+ element.removeAttribute('width');
+ element.removeStyle('width');
+ }
+ }
+ },
+ {
+ type : 'text',
+ id : 'txtHeight',
+ width: '40px',
+ label : editor.lang.common.height,
+ onKeyUp : onSizeChange,
+ onChange : function(){
+ commitInternally.call(this, 'advanced:txtdlgGenStyle');
+ },
+ validate : function(){
+ var aMatch = this.getValue().match(regexGetSizeOrEmpty),
+ isValid = !!( aMatch && parseInt(aMatch[1], 10) !== 0 );
+ if(!isValid){
+ alert(editor.lang.common.invalidHeight);
+ }
+ return isValid;
+ },
+ setup : setupDimension,
+ commit : function(type, element){
+ var value = this.getValue();
+ var dialog = this.getDialog();
+ if(type == IMAGE){
+ if(value){
+ dialog.preview.setStyle('height', CKEDITOR.tools.cssLength(value));
+ element.setAttribute('height', value);
+ } else {
+ dialog.preview.removeStyle('height');
+ element.removeAttribute('height');
+ }
+ element.removeStyle('height');
+ } else if(type == PREVIEW){
+ var aMatch = value.match(regexGetSize);
+ if(!aMatch){
+ var oImageOriginal = dialog.originalElement;
+ if(oImageOriginal.getCustomData('isReady') == 'true'){
+ element.setStyle('height', oImageOriginal.$.height + 'px');
+ }
+ } else {
+ element.setStyle('height', CKEDITOR.tools.cssLength(value));
+ }
+ } else if(type == CLEANUP){
+ element.removeAttribute('height');
+ element.removeStyle('height');
+ }
- !internalCommit && element.removeAttribute( 'width' );
- }
- else if ( type == PREVIEW )
+ }
+ }
+ ]
+ },
{
- var aMatch = value.match( regexGetSize );
- if ( !aMatch )
- {
- var oImageOriginal = this.getDialog().originalElement;
- if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
- element.setStyle( 'width', oImageOriginal.$.width + 'px');
- }
- else
- element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
- }
- else if ( type == CLEANUP )
- {
- element.removeAttribute( 'width' );
- element.removeStyle( 'width' );
- }
- }
- },
- {
- type : 'text',
- id : 'txtHeight',
- width: '40px',
- label : editor.lang.common.height,
- onKeyUp : onSizeChange,
- onChange : function()
- {
- commitInternally.call( this, 'advanced:txtdlgGenStyle' );
- },
- validate : function()
- {
- var aMatch = this.getValue().match( regexGetSizeOrEmpty ),
- isValid = !!( aMatch && parseInt( aMatch[1], 10 ) !== 0 );
- if ( !isValid )
- alert( editor.lang.common.invalidHeight );
- return isValid;
- },
- setup : setupDimension,
- commit : function( type, element, internalCommit )
- {
- var value = this.getValue();
- if ( type == IMAGE )
- {
- if ( value )
- element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
- else
- element.removeStyle( 'height' );
+ id : 'ratioLock',
+ type : 'html',
+ style : 'margin-top:30px;width:40px;height:40px;',
+ onLoad : function(){
+ // Activate Reset button
+ var resetButton = CKEDITOR.document.getById(btnResetSizeId),
+ ratioButton = CKEDITOR.document.getById(btnLockSizesId);
+ if(resetButton){
+ resetButton.on('click', function(evt){
+ resetSize(this);
+ evt.data && evt.data.preventDefault();
+ }, this.getDialog());
+ resetButton.on('mouseover', function(){
+ this.addClass('cke_btn_over');
+ }, resetButton);
+ resetButton.on('mouseout', function(){
+ this.removeClass('cke_btn_over');
+ }, resetButton);
+ }
+ // Activate (Un)LockRatio button
+ if(ratioButton){
+ ratioButton.on('click', function(evt){
+ var locked = switchLockRatio(this),
+ oImageOriginal = this.originalElement,
+ width = this.getValueOf('info', 'txtWidth');
- !internalCommit && element.removeAttribute( 'height' );
+ if(oImageOriginal.getCustomData('isReady') == 'true' && width){
+ var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
+ if(!isNaN(height)){
+ this.setValueOf('info', 'txtHeight', Math.round(height));
+ updatePreview(this);
+ }
+ }
+ evt.data && evt.data.preventDefault();
+ }, this.getDialog());
+ ratioButton.on('mouseover', function(){
+ this.addClass('cke_btn_over');
+ }, ratioButton);
+ ratioButton.on('mouseout', function(){
+ this.removeClass('cke_btn_over');
+ }, ratioButton);
+ }
+ },
+ html : '<div>' + '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio + '" class="cke_btn_locked" id="' + btnLockSizesId + '" role="checkbox"><span class="cke_icon"></span><span class="cke_label">' + editor.lang.image.lockRatio + '</span></a>' + '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize + '" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>' + '</div>'
}
- else if ( type == PREVIEW )
- {
- var aMatch = value.match( regexGetSize );
- if ( !aMatch )
- {
- var oImageOriginal = this.getDialog().originalElement;
- if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
- element.setStyle( 'height', oImageOriginal.$.height + 'px' );
- }
- else
- element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
- }
- else if ( type == CLEANUP )
- {
- element.removeAttribute( 'height' );
- element.removeStyle( 'height' );
- }
- }
- }
- ]
- },
- {
- id : 'ratioLock',
- type : 'html',
- style : 'margin-top:30px;width:40px;height:40px;',
- onLoad : function()
+ ]
+ },
{
- // Activate Reset button
- var resetButton = CKEDITOR.document.getById( btnResetSizeId ),
- ratioButton = CKEDITOR.document.getById( btnLockSizesId );
- if ( resetButton )
- {
- resetButton.on( 'click', function( evt )
+ type : 'vbox',
+ padding : 1,
+ children :
+ [
{
- resetSize( this );
- evt.data && evt.data.preventDefault();
- }, this.getDialog() );
- resetButton.on( 'mouseover', function()
- {
- this.addClass( 'cke_btn_over' );
- }, resetButton );
- resetButton.on( 'mouseout', function()
- {
- this.removeClass( 'cke_btn_over' );
- }, resetButton );
- }
- // Activate (Un)LockRatio button
- if ( ratioButton )
- {
- ratioButton.on( 'click', function(evt)
- {
- var locked = switchLockRatio( this ),
- oImageOriginal = this.originalElement,
- width = this.getValueOf( 'info', 'txtWidth' );
+ type : 'text',
+ id : 'txtBorder',
+ width: '60px',
+ label : editor.lang.image.border,
+ 'default' : '',
+ onKeyUp : function(){
+ updatePreview(this.getDialog());
+ },
+ onChange : function(){
+ commitInternally.call(this, 'advanced:txtdlgGenStyle');
+ },
+ validate : CKEDITOR.dialog.validate.integer(editor.lang.image.validateBorder),
+ setup : function(type, element){
+ if(type == IMAGE){
+ var value,
+ borderStyle = element.getStyle('border-width');
+ borderStyle = borderStyle && borderStyle.match(/^(\d+px)(?: \1 \1 \1)?$/);
+ value = borderStyle && parseInt(borderStyle[ 1 ], 10);
+ isNaN(parseInt(value, 10)) && ( value = element.getAttribute('border') );
+ this.setValue(value);
+ }
+ },
+ commit : function(type, element, internalCommit){
+ var value = parseInt(this.getValue(), 10);
+ if(type == IMAGE || type == PREVIEW){
+ element.setStyle('border-width', !isNaN(value) && this.isChanged() ? CKEDITOR.tools.cssLength(value) : 0);
+ element.setStyle('border-style', 'solid');
- if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )
- {
- var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
- if ( !isNaN( height ) )
- {
- this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
- updatePreview( this );
+ if(!internalCommit && type == IMAGE){
+ element.removeAttribute('border');
+ }
+ } else if(type == CLEANUP){
+ element.removeAttribute('border');
+ element.removeStyle('border-width');
+ element.removeStyle('border-style');
+ element.removeStyle('border-color');
}
}
- evt.data && evt.data.preventDefault();
- }, this.getDialog() );
- ratioButton.on( 'mouseover', function()
+ },
{
- this.addClass( 'cke_btn_over' );
- }, ratioButton );
- ratioButton.on( 'mouseout', function()
- {
- this.removeClass( 'cke_btn_over' );
- }, ratioButton );
- }
- },
- html : '<div>'+
- '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
- '" class="cke_btn_locked" id="' + btnLockSizesId + '" role="checkbox"><span class="cke_icon"></span><span class="cke_label">' + editor.lang.image.lockRatio + '</span></a>' +
- '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
- '" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>'+
- '</div>'
- }
- ]
- },
- {
- type : 'vbox',
- padding : 1,
- children :
- [
- {
- type : 'text',
- id : 'txtBorder',
- width: '60px',
- label : editor.lang.image.border,
- 'default' : '',
- onKeyUp : function()
- {
- updatePreview( this.getDialog() );
- },
- onChange : function()
- {
- commitInternally.call( this, 'advanced:txtdlgGenStyle' );
- },
- validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),
- setup : function( type, element )
- {
- if ( type == IMAGE )
- {
- var value,
- borderStyle = element.getStyle( 'border-width' );
- borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );
- value = borderStyle && parseInt( borderStyle[ 1 ], 10 );
- isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );
- this.setValue( value );
- }
- },
- commit : function( type, element, internalCommit )
- {
- var value = parseInt( this.getValue(), 10 );
- if ( type == IMAGE || type == PREVIEW )
- {
- element.setStyle('border-width', !isNaN(value) && this.isChanged() ? CKEDITOR.tools.cssLength(value) : 0);
- element.setStyle('border-style', 'solid');
+ type : 'text',
+ id : 'txtHSpace',
+ width: '60px',
+ label : editor.lang.image.hSpace,
+ 'default' : '',
+ onKeyUp : function(){
+ updatePreview(this.getDialog());
+ },
+ onChange : function(){
+ commitInternally.call(this, 'advanced:txtdlgGenStyle');
+ },
+ validate : CKEDITOR.dialog.validate.integer(editor.lang.image.validateHSpace),
+ setup : function(type, element){
+ if(type == IMAGE){
+ var value,
+ marginLeftPx,
+ marginRightPx,
+ marginLeftStyle = element.getStyle('margin-left'),
+ marginRightStyle = element.getStyle('margin-right');
- if ( !internalCommit && type == IMAGE )
- element.removeAttribute( 'border' );
- }
- else if ( type == CLEANUP )
- {
- element.removeAttribute( 'border' );
- element.removeStyle( 'border-width' );
- element.removeStyle( 'border-style' );
- element.removeStyle( 'border-color' );
- }
- }
- },
- {
- type : 'text',
- id : 'txtHSpace',
- width: '60px',
- label : editor.lang.image.hSpace,
- 'default' : '',
- onKeyUp : function()
- {
- updatePreview( this.getDialog() );
- },
- onChange : function()
- {
- commitInternally.call( this, 'advanced:txtdlgGenStyle' );
- },
- validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),
- setup : function( type, element )
- {
- if ( type == IMAGE )
- {
- var value,
- marginLeftPx,
- marginRightPx,
- marginLeftStyle = element.getStyle( 'margin-left' ),
- marginRightStyle = element.getStyle( 'margin-right' );
+ marginLeftStyle = marginLeftStyle && marginLeftStyle.match(pxLengthRegex);
+ marginRightStyle = marginRightStyle && marginRightStyle.match(pxLengthRegex);
+ marginLeftPx = parseInt(marginLeftStyle, 10);
+ marginRightPx = parseInt(marginRightStyle, 10);
- marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
- marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
- marginLeftPx = parseInt( marginLeftStyle, 10 );
- marginRightPx = parseInt( marginRightStyle, 10 );
+ value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
+ isNaN(parseInt(value, 10)) && ( value = element.getAttribute('hspace') );
- value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
- isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
+ this.setValue(value);
+ }
+ },
+ commit : function(type, element, internalCommit){
+ var value = parseInt(this.getValue(), 10);
+ if(type == IMAGE || type == PREVIEW){
+ if(!isNaN(value)){
+ element.setStyle('margin-left', CKEDITOR.tools.cssLength(value));
+ element.setStyle('margin-right', CKEDITOR.tools.cssLength(value));
+ } else if(!value && this.isChanged()){
+ element.removeStyle('margin-left');
+ element.removeStyle('margin-right');
+ }
- this.setValue( value );
- }
- },
- commit : function( type, element, internalCommit )
- {
- var value = parseInt( this.getValue(), 10 );
- if ( type == IMAGE || type == PREVIEW )
- {
- if ( !isNaN( value ) )
- {
- element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
- element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
- }
- else if ( !value && this.isChanged( ) )
- {
- element.removeStyle( 'margin-left' );
- element.removeStyle( 'margin-right' );
- }
+ if(!internalCommit && type == IMAGE){
+ element.removeAttribute('hspace');
+ }
+ } else if(type == CLEANUP){
+ element.removeAttribute('hspace');
+ element.removeStyle('margin-left');
+ element.removeStyle('margin-right');
+ }
+ }
+ },
+ {
+ type : 'text',
+ id : 'txtVSpace',
+ width : '60px',
+ label : editor.lang.image.vSpace,
+ 'default' : '',
+ onKeyUp : function(){
+ updatePreview(this.getDialog());
+ },
+ onChange : function(){
+ commitInternally.call(this, 'advanced:txtdlgGenStyle');
+ },
+ validate : CKEDITOR.dialog.validate.integer(editor.lang.image.validateVSpace),
+ setup : function(type, element){
+ if(type == IMAGE){
+ var value,
+ marginTopPx,
+ marginBottomPx,
+ marginTopStyle = element.getStyle('margin-top'),
+ marginBottomStyle = element.getStyle('margin-bottom');
- if ( !internalCommit && type == IMAGE )
- element.removeAttribute( 'hspace' );
- }
- else if ( type == CLEANUP )
- {
- element.removeAttribute( 'hspace' );
- element.removeStyle( 'margin-left' );
- element.removeStyle( 'margin-right' );
- }
- }
- },
- {
- type : 'text',
- id : 'txtVSpace',
- width : '60px',
- label : editor.lang.image.vSpace,
- 'default' : '',
- onKeyUp : function()
- {
- updatePreview( this.getDialog() );
- },
- onChange : function()
- {
- commitInternally.call( this, 'advanced:txtdlgGenStyle' );
- },
- validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),
- setup : function( type, element )
- {
- if ( type == IMAGE )
- {
- var value,
- marginTopPx,
- marginBottomPx,
- marginTopStyle = element.getStyle( 'margin-top' ),
- marginBottomStyle = element.getStyle( 'margin-bottom' );
+ marginTopStyle = marginTopStyle && marginTopStyle.match(pxLengthRegex);
+ marginBottomStyle = marginBottomStyle && marginBottomStyle.match(pxLengthRegex);
+ marginTopPx = parseInt(marginTopStyle, 10);
+ marginBottomPx = parseInt(marginBottomStyle, 10);
- marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
- marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
- marginTopPx = parseInt( marginTopStyle, 10 );
- marginBottomPx = parseInt( marginBottomStyle, 10 );
+ value = ( marginTopPx == marginBottomPx ) && marginTopPx;
+ isNaN(parseInt(value, 10)) && ( value = element.getAttribute('vspace') );
+ this.setValue(value);
+ }
+ },
+ commit : function(type, element, internalCommit){
+ var value = parseInt(this.getValue(), 10);
+ if(type == IMAGE || type == PREVIEW){
+ if(!isNaN(value)){
+ element.setStyle('margin-top', CKEDITOR.tools.cssLength(value));
+ element.setStyle('margin-bottom', CKEDITOR.tools.cssLength(value));
+ ...
(truncated) 