/*\r
-Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.html or http://ckeditor.com/license\r
*/\r
\r
// size change should alter inline-style text as well.\r
function commitInternally( targetFields )\r
{\r
- if( incommit )\r
+ if ( incommit )\r
return;\r
\r
incommit = 1;\r
\r
var dialog = this.getDialog(),\r
element = dialog.imageElement;\r
- if( element )\r
+ if ( element )\r
{\r
// Commit this field and broadcast to target fields.\r
this.commit( IMAGE, element );\r
else\r
ratioButton.addClass( 'cke_btn_unlocked' );\r
\r
+ var lang = dialog._.editor.lang.image,\r
+ label = lang[ dialog.lockRatio ? 'unlockRatio' : 'lockRatio' ];\r
+\r
+ ratioButton.setAttribute( 'title', label );\r
+ ratioButton.getFirst().setText( label );\r
+\r
return dialog.lockRatio;\r
};\r
\r
\r
var imageDialog = function( editor, dialogType )\r
{\r
+ var previewPreloader;\r
+\r
var onImgLoadEvent = function()\r
{\r
// Image is ready.\r
resetSize( this );\r
\r
if ( this.firstLoad )\r
- switchLockRatio( this, 'check' );\r
+ CKEDITOR.tools.setTimeout( function(){ switchLockRatio( this, 'check' ); }, 0, this );\r
+\r
this.firstLoad = false;\r
this.dontResetSize = false;\r
};\r
this.firstLoad = true;\r
this.addLink = false;\r
\r
- //Hide loader.\r
- CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );\r
- // Preview\r
- this.preview = CKEDITOR.document.getById( 'previewImage' );\r
-\r
var editor = this.getParentEditor(),\r
sel = this.getParentEditor().getSelection(),\r
element = sel.getSelectedElement(),\r
link = element && element.getAscendant( 'a' );\r
\r
+ //Hide loader.\r
+ CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );\r
+ // Create the preview before setup the dialog contents.\r
+ previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );\r
+ this.preview = CKEDITOR.document.getById( 'previewImage' );\r
+\r
// Copy of the image\r
this.originalElement = editor.document.createElement( 'img' );\r
this.originalElement.setAttribute( 'alt', '' );\r
this.commitContent( LINK, this.linkElement );\r
\r
// Remove empty style attribute.\r
- if( !this.imageElement.getAttribute( 'style' ) )\r
+ if ( !this.imageElement.getAttribute( 'style' ) )\r
this.imageElement.removeAttribute( 'style' );\r
\r
// Insert a new Image.\r
children :\r
[\r
{\r
- type : 'html',\r
- html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.image.url ) + '</span>'\r
- },\r
- {\r
type : 'hbox',\r
widths : [ '280px', '110px' ],\r
align : 'right',\r
{\r
id : 'txtUrl',\r
type : 'text',\r
- label : '',\r
+ label : editor.lang.common.url,\r
+ required: true,\r
onChange : function()\r
{\r
var dialog = this.getDialog(),\r
original.on( 'error', onImgLoadErrorEvent, dialog );\r
original.on( 'abort', onImgLoadErrorEvent, dialog );\r
original.setAttribute( 'src', newUrl );\r
- dialog.preview.setAttribute( 'src', newUrl );\r
\r
+ // Query the preloader to figure out the url impacted by based href.\r
+ previewPreloader.setAttribute( 'src', newUrl );\r
+ dialog.preview.setAttribute( 'src', previewPreloader.$.src );\r
updatePreview( dialog );\r
}\r
// Dont show preview if no URL given.\r
{\r
type : 'button',\r
id : 'browse',\r
+ // v-align with the 'txtUrl' field.\r
+ // TODO: We need something better than a fixed size here.\r
+ style : 'display:inline-block;margin-top:10px;',\r
align : 'center',\r
label : editor.lang.common.browseServer,\r
hidden : true,\r
{\r
commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
},\r
- validate: function()\r
+ validate : function()\r
{\r
var aMatch = this.getValue().match( regexGetSizeOrEmpty );\r
if ( !aMatch )\r
- alert( editor.lang.common.validateNumberFailed );\r
+ alert( editor.lang.image.validateWidth );\r
return !!aMatch;\r
},\r
setup : setupDimension,\r
{\r
commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
},\r
- validate: function()\r
+ validate : function()\r
{\r
var aMatch = this.getValue().match( regexGetSizeOrEmpty );\r
if ( !aMatch )\r
- alert( editor.lang.common.validateNumberFailed );\r
+ alert( editor.lang.image.validateHeight );\r
return !!aMatch;\r
},\r
setup : setupDimension,\r
else if ( !value && this.isChanged( ) )\r
element.removeStyle( 'height' );\r
\r
- if( !internalCommit && type == IMAGE )\r
+ if ( !internalCommit && type == IMAGE )\r
element.removeAttribute( 'height' );\r
}\r
else if ( type == PREVIEW )\r
ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );\r
if ( resetButton )\r
{\r
- resetButton.on( 'click', function()\r
+ resetButton.on( 'click', function(evt)\r
{\r
resetSize( this );\r
+ evt.data.preventDefault();\r
}, this.getDialog() );\r
resetButton.on( 'mouseover', function()\r
{\r
// Activate (Un)LockRatio button\r
if ( ratioButton )\r
{\r
- ratioButton.on( 'click', function()\r
+ ratioButton.on( 'click', function(evt)\r
{\r
var locked = switchLockRatio( this ),\r
oImageOriginal = this.originalElement,\r
updatePreview( this );\r
}\r
}\r
+ evt.data.preventDefault();\r
}, this.getDialog() );\r
ratioButton.on( 'mouseover', function()\r
{\r
}\r
},\r
html : '<div>'+\r
- '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +\r
- '" class="cke_btn_locked" id="btnLockSizes"></a>' +\r
+ '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.unlockRatio +\r
+ '" class="cke_btn_locked" id="btnLockSizes" role="button"><span class="cke_label">' + editor.lang.image.unlockRatio + '</span></a>' +\r
'<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +\r
- '" class="cke_btn_reset" id="btnResetSize"></a>'+\r
+ '" class="cke_btn_reset" id="btnResetSize" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>'+\r
'</div>'\r
}\r
]\r
{\r
commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
},\r
- validate: function()\r
- {\r
- var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
- return func.apply( this );\r
- },\r
+ validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),\r
setup : function( type, element )\r
{\r
if ( type == IMAGE )\r
{\r
var value,\r
borderStyle = element.getStyle( 'border-width' );\r
-\r
borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );\r
value = borderStyle && parseInt( borderStyle[ 1 ], 10 );\r
- !value && ( value = element.getAttribute( 'border' ) );\r
-\r
+ isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );\r
this.setValue( value );\r
}\r
},\r
var value = parseInt( this.getValue(), 10 );\r
if ( type == IMAGE || type == PREVIEW )\r
{\r
- if ( value )\r
+ if ( !isNaN( value ) )\r
{\r
element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );\r
element.setStyle( 'border-style', 'solid' );\r
element.removeStyle( 'border-color' );\r
}\r
\r
- if( !internalCommit && type == IMAGE )\r
+ if ( !internalCommit && type == IMAGE )\r
element.removeAttribute( 'border' );\r
}\r
else if ( type == CLEANUP )\r
{\r
commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
},\r
- validate: function()\r
- {\r
- var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
- return func.apply( this );\r
- },\r
+ validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),\r
setup : function( type, element )\r
{\r
if ( type == IMAGE )\r
marginRightPx = parseInt( marginRightStyle, 10 );\r
\r
value = ( marginLeftPx == marginRightPx ) && marginLeftPx;\r
- !value && ( value = element.getAttribute( 'hspace' ) );\r
+ isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );\r
\r
this.setValue( value );\r
}\r
var value = parseInt( this.getValue(), 10 );\r
if ( type == IMAGE || type == PREVIEW )\r
{\r
- if ( value )\r
+ if ( !isNaN( value ) )\r
{\r
element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );\r
element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );\r
element.removeStyle( 'margin-right' );\r
}\r
\r
- if( !internalCommit && type == IMAGE )\r
+ if ( !internalCommit && type == IMAGE )\r
element.removeAttribute( 'hspace' );\r
}\r
else if ( type == CLEANUP )\r
{\r
commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
},\r
- validate: function()\r
- {\r
- var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
- return func.apply( this );\r
- },\r
+ validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),\r
setup : function( type, element )\r
{\r
if ( type == IMAGE )\r
marginBottomPx = parseInt( marginBottomStyle, 10 );\r
\r
value = ( marginTopPx == marginBottomPx ) && marginTopPx;\r
- !value && ( value = element.getAttribute( 'vspace' ) );\r
+ isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );\r
this.setValue( value );\r
}\r
},\r
var value = parseInt( this.getValue(), 10 );\r
if ( type == IMAGE || type == PREVIEW )\r
{\r
- if ( value )\r
+ if ( !isNaN( value ) )\r
{\r
element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );\r
element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );\r
element.removeStyle( 'margin-bottom' );\r
}\r
\r
- if( !internalCommit && type == IMAGE )\r
+ if ( !internalCommit && type == IMAGE )\r
element.removeAttribute( 'vspace' );\r
}\r
else if ( type == CLEANUP )\r
{\r
if ( value )\r
element.setStyle( 'float', value );\r
- else if ( !value && this.isChanged( ) )\r
+ else\r
element.removeStyle( 'float' );\r
\r
- if( !internalCommit && type == IMAGE )\r
+ if ( !internalCommit && type == IMAGE )\r
{\r
value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();\r
switch( value )\r
{\r
type : 'html',\r
style : 'width:95%;',\r
- html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>'+\r
+ html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'<br>'+\r
'<div id="ImagePreviewLoader" style="display:none"><div class="loading"> </div></div>'+\r
'<div id="ImagePreviewBox">'+\r
'<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+\r
- '<img id="previewImage" src="" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+\r
+ '<img id="previewImage" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+\r
'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+\r
'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' +\r
'</div>'+'</div>'\r
{\r
id : 'txtUrl',\r
type : 'text',\r
- label : editor.lang.image.url,\r
+ label : editor.lang.common.url,\r
style : 'width: 100%',\r
'default' : '',\r
setup : function( type, element )\r
{\r
type : 'button',\r
id : 'browse',\r
- filebrowser : 'Link:txtUrl',\r
+ filebrowser :\r
+ {\r
+ action : 'Browse',\r
+ target: 'Link:txtUrl',\r
+ url: editor.config.filebrowserImageBrowseLinkUrl || editor.config.filebrowserBrowseUrl\r
+ },\r
style : 'float:right',\r
hidden : true,\r
label : editor.lang.common.browseServer\r
{\r
id : 'cmbTarget',\r
type : 'select',\r
- label : editor.lang.link.target,\r
+ label : editor.lang.common.target,\r
'default' : '',\r
items :\r
[\r
- [ editor.lang.link.targetNotSet , ''],\r
- [ editor.lang.link.targetNew , '_blank'],\r
- [ editor.lang.link.targetTop , '_top'],\r
- [ editor.lang.link.targetSelf , '_self'],\r
- [ editor.lang.link.targetParent , '_parent']\r
+ [ editor.lang.common.notSet , ''],\r
+ [ editor.lang.common.targetNew , '_blank'],\r
+ [ editor.lang.common.targetTop , '_top'],\r
+ [ editor.lang.common.targetSelf , '_self'],\r
+ [ editor.lang.common.targetParent , '_parent']\r
],\r
setup : function( type, element )\r
{\r
Got questions, comments, patches, etc.? Contact Jason Woofenden