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)