_source/plugins/image/dialogs/image.js

   1 /*\r
   2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 (function()\r
   7 {\r
   8         // Load image preview.\r
   9         var IMAGE = 1,\r
  10                 LINK = 2,\r
  11                 PREVIEW = 4,\r
  12                 CLEANUP = 8,\r
  13                 regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,\r
  14                 regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,\r
  15                 pxLengthRegex = /^\d+px$/;\r
  16 \r
  17         var onSizeChange = function()\r
  18         {\r
  19                 var value = this.getValue(),    // This = input element.\r
  20                         dialog = this.getDialog(),\r
  21                         aMatch  =  value.match( regexGetSize ); // Check value\r
  22                 if ( aMatch )\r
  23                 {\r
  24                         if ( aMatch[2] == '%' )                 // % is allowed - > unlock ratio.\r
  25                                 switchLockRatio( dialog, false );       // Unlock.\r
  26                         value = aMatch[1];\r
  27                 }\r
  28 \r
  29                 // Only if ratio is locked\r
  30                 if ( dialog.lockRatio )\r
  31                 {\r
  32                         var oImageOriginal = dialog.originalElement;\r
  33                         if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )\r
  34                         {\r
  35                                 if ( this.id == 'txtHeight' )\r
  36                                 {\r
  37                                         if ( value && value != '0' )\r
  38                                                 value = Math.round( oImageOriginal.$.width * ( value  / oImageOriginal.$.height ) );\r
  39                                         if ( !isNaN( value ) )\r
  40                                                 dialog.setValueOf( 'info', 'txtWidth', value );\r
  41                                 }\r
  42                                 else            //this.id = txtWidth.\r
  43                                 {\r
  44                                         if ( value && value != '0' )\r
  45                                                 value = Math.round( oImageOriginal.$.height * ( value  / oImageOriginal.$.width ) );\r
  46                                         if ( !isNaN( value ) )\r
  47                                                 dialog.setValueOf( 'info', 'txtHeight', value );\r
  48                                 }\r
  49                         }\r
  50                 }\r
  51                 updatePreview( dialog );\r
  52         };\r
  53 \r
  54         var updatePreview = function( dialog )\r
  55         {\r
  56                 //Don't load before onShow.\r
  57                 if ( !dialog.originalElement || !dialog.preview )\r
  58                         return 1;\r
  59 \r
  60                 // Read attributes and update imagePreview;\r
  61                 dialog.commitContent( PREVIEW, dialog.preview );\r
  62                 return 0;\r
  63         };\r
  64 \r
  65         // Custom commit dialog logic, where we're intended to give inline style\r
  66         // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute\r
  67         // by other fields.\r
  68         function commitContent()\r
  69         {\r
  70                 var args = arguments;\r
  71                 var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );\r
  72                 inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );\r
  73 \r
  74                 this.foreach( function( widget )\r
  75                 {\r
  76                         if ( widget.commit &&  widget.id != 'txtdlgGenStyle' )\r
  77                                 widget.commit.apply( widget, args );\r
  78                 });\r
  79         }\r
  80 \r
  81         // Avoid recursions.\r
  82         var incommit;\r
  83 \r
  84         // Synchronous field values to other impacted fields is required, e.g. border\r
  85         // size change should alter inline-style text as well.\r
  86         function commitInternally( targetFields )\r
  87         {\r
  88                 if( incommit )\r
  89                         return;\r
  90 \r
  91                 incommit = 1;\r
  92 \r
  93                 var dialog = this.getDialog(),\r
  94                         element = dialog.imageElement;\r
  95                 if( element )\r
  96                 {\r
  97                         // Commit this field and broadcast to target fields.\r
  98                         this.commit( IMAGE, element );\r
  99 \r
 100                         targetFields = [].concat( targetFields );\r
 101                         var length = targetFields.length,\r
 102                                 field;\r
 103                         for ( var i = 0; i < length; i++ )\r
 104                         {\r
 105                                 field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );\r
 106                                 // May cause recursion.\r
 107                                 field && field.setup( IMAGE, element );\r
 108                         }\r
 109                 }\r
 110 \r
 111                 incommit = 0;\r
 112         }\r
 113 \r
 114         var switchLockRatio = function( dialog, value )\r
 115         {\r
 116                 var oImageOriginal = dialog.originalElement,\r
 117                         ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );\r
 118 \r
 119                 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )\r
 120                 {\r
 121                         if ( value == 'check' )                 // Check image ratio and original image ratio.\r
 122                         {\r
 123                                 var width = dialog.getValueOf( 'info', 'txtWidth' ),\r
 124                                         height = dialog.getValueOf( 'info', 'txtHeight' ),\r
 125                                         originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,\r
 126                                         thisRatio = width * 1000 / height;\r
 127                                 dialog.lockRatio  = false;              // Default: unlock ratio\r
 128 \r
 129                                 if ( !width && !height )\r
 130                                         dialog.lockRatio = true;\r
 131                                 else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )\r
 132                                 {\r
 133                                         if ( Math.round( originalRatio ) == Math.round( thisRatio ) )\r
 134                                                 dialog.lockRatio = true;\r
 135                                 }\r
 136                         }\r
 137                         else if ( value != undefined )\r
 138                                 dialog.lockRatio = value;\r
 139                         else\r
 140                                 dialog.lockRatio = !dialog.lockRatio;\r
 141                 }\r
 142                 else if ( value != 'check' )            // I can't lock ratio if ratio is unknown.\r
 143                         dialog.lockRatio = false;\r
 144 \r
 145                 if ( dialog.lockRatio )\r
 146                         ratioButton.removeClass( 'cke_btn_unlocked' );\r
 147                 else\r
 148                         ratioButton.addClass( 'cke_btn_unlocked' );\r
 149 \r
 150                 return dialog.lockRatio;\r
 151         };\r
 152 \r
 153         var resetSize = function( dialog )\r
 154         {\r
 155                 var oImageOriginal = dialog.originalElement;\r
 156                 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )\r
 157                 {\r
 158                         dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width );\r
 159                         dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height );\r
 160                 }\r
 161                 updatePreview( dialog );\r
 162         };\r
 163 \r
 164         var setupDimension = function( type, element )\r
 165         {\r
 166                 if ( type != IMAGE )\r
 167                         return;\r
 168 \r
 169                 function checkDimension( size, defaultValue )\r
 170                 {\r
 171                         var aMatch  =  size.match( regexGetSize );\r
 172                         if ( aMatch )\r
 173                         {\r
 174                                 if ( aMatch[2] == '%' )                         // % is allowed.\r
 175                                 {\r
 176                                         aMatch[1] += '%';\r
 177                                         switchLockRatio( dialog, false );       // Unlock ratio\r
 178                                 }\r
 179                                 return aMatch[1];\r
 180                         }\r
 181                         return defaultValue;\r
 182                 }\r
 183 \r
 184                 var dialog = this.getDialog(),\r
 185                         value = '',\r
 186                         dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ),\r
 187                         size = element.getAttribute( dimension );\r
 188 \r
 189                 if ( size )\r
 190                         value = checkDimension( size, value );\r
 191                 value = checkDimension( element.getStyle( dimension ), value );\r
 192 \r
 193                 this.setValue( value );\r
 194         };\r
 195 \r
 196         var imageDialog = function( editor, dialogType )\r
 197         {\r
 198                 var onImgLoadEvent = function()\r
 199                 {\r
 200                         // Image is ready.\r
 201                         var original = this.originalElement;\r
 202                         original.setCustomData( 'isReady', 'true' );\r
 203                         original.removeListener( 'load', onImgLoadEvent );\r
 204                         original.removeListener( 'error', onImgLoadErrorEvent );\r
 205                         original.removeListener( 'abort', onImgLoadErrorEvent );\r
 206 \r
 207                         // Hide loader\r
 208                         CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );\r
 209 \r
 210                         // New image -> new domensions\r
 211                         if ( !this.dontResetSize )\r
 212                                 resetSize( this );\r
 213 \r
 214                         if ( this.firstLoad )\r
 215                                 switchLockRatio( this, 'check' );\r
 216                         this.firstLoad = false;\r
 217                         this.dontResetSize = false;\r
 218                 };\r
 219 \r
 220                 var onImgLoadErrorEvent = function()\r
 221                 {\r
 222                         // Error. Image is not loaded.\r
 223                         var original = this.originalElement;\r
 224                         original.removeListener( 'load', onImgLoadEvent );\r
 225                         original.removeListener( 'error', onImgLoadErrorEvent );\r
 226                         original.removeListener( 'abort', onImgLoadErrorEvent );\r
 227 \r
 228                         // Set Error image.\r
 229                         var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );\r
 230 \r
 231                         if ( this.preview )\r
 232                                 this.preview.setAttribute( 'src', noimage );\r
 233 \r
 234                         // Hide loader\r
 235                         CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );\r
 236                         switchLockRatio( this, false ); // Unlock.\r
 237                 };\r
 238                 return {\r
 239                         title : ( dialogType == 'image' ) ? editor.lang.image.title : editor.lang.image.titleButton,\r
 240                         minWidth : 420,\r
 241                         minHeight : 310,\r
 242                         onShow : function()\r
 243                         {\r
 244                                 this.imageElement = false;\r
 245                                 this.linkElement = false;\r
 246 \r
 247                                 // Default: create a new element.\r
 248                                 this.imageEditMode = false;\r
 249                                 this.linkEditMode = false;\r
 250 \r
 251                                 this.lockRatio = true;\r
 252                                 this.dontResetSize = false;\r
 253                                 this.firstLoad = true;\r
 254                                 this.addLink = false;\r
 255 \r
 256                                 //Hide loader.\r
 257                                 CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );\r
 258                                 // Preview\r
 259                                 this.preview = CKEDITOR.document.getById( 'previewImage' );\r
 260 \r
 261                                 var editor = this.getParentEditor(),\r
 262                                         sel = this.getParentEditor().getSelection(),\r
 263                                         element = sel.getSelectedElement(),\r
 264                                         link = element && element.getAscendant( 'a' );\r
 265 \r
 266                                 // Copy of the image\r
 267                                 this.originalElement = editor.document.createElement( 'img' );\r
 268                                 this.originalElement.setAttribute( 'alt', '' );\r
 269                                 this.originalElement.setCustomData( 'isReady', 'false' );\r
 270 \r
 271                                 if ( link )\r
 272                                 {\r
 273                                         this.linkElement = link;\r
 274                                         this.linkEditMode = true;\r
 275 \r
 276                                         // Look for Image element.\r
 277                                         var linkChildren = link.getChildren();\r
 278                                         if ( linkChildren.count() == 1 )                        // 1 child.\r
 279                                         {\r
 280                                                 var childTagName = linkChildren.getItem( 0 ).getName();\r
 281                                                 if ( childTagName == 'img' || childTagName == 'input' )\r
 282                                                 {\r
 283                                                         this.imageElement = linkChildren.getItem( 0 );\r
 284                                                         if ( this.imageElement.getName() == 'img' )\r
 285                                                                 this.imageEditMode = 'img';\r
 286                                                         else if ( this.imageElement.getName() == 'input' )\r
 287                                                                 this.imageEditMode = 'input';\r
 288                                                 }\r
 289                                         }\r
 290                                         // Fill out all fields.\r
 291                                         if ( dialogType == 'image' )\r
 292                                                 this.setupContent( LINK, link );\r
 293                                 }\r
 294 \r
 295                                 if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_realelement' )\r
 296                                         || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' )\r
 297                                 {\r
 298                                         this.imageEditMode = element.getName();\r
 299                                         this.imageElement = element;\r
 300                                 }\r
 301 \r
 302                                 if ( this.imageEditMode )\r
 303                                 {\r
 304                                         // Use the original element as a buffer from  since we don't want\r
 305                                         // temporary changes to be committed, e.g. if the dialog is canceled.\r
 306                                         this.cleanImageElement = this.imageElement;\r
 307                                         this.imageElement = this.cleanImageElement.clone( true, true );\r
 308 \r
 309                                         // Fill out all fields.\r
 310                                         this.setupContent( IMAGE, this.imageElement );\r
 311 \r
 312                                         // Refresh LockRatio button\r
 313                                         switchLockRatio ( this, true );\r
 314                                 }\r
 315                                 else\r
 316                                         this.imageElement =  editor.document.createElement( 'img' );\r
 317 \r
 318                                 // Dont show preview if no URL given.\r
 319                                 if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )\r
 320                                 {\r
 321                                         this.preview.removeAttribute( 'src' );\r
 322                                         this.preview.setStyle( 'display', 'none' );\r
 323                                 }\r
 324                         },\r
 325                         onOk : function()\r
 326                         {\r
 327                                 // Edit existing Image.\r
 328                                 if ( this.imageEditMode )\r
 329                                 {\r
 330                                         var imgTagName = this.imageEditMode;\r
 331 \r
 332                                         // Image dialog and Input element.\r
 333                                         if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )\r
 334                                         {\r
 335                                                 // Replace INPUT-> IMG\r
 336                                                 imgTagName = 'img';\r
 337                                                 this.imageElement = editor.document.createElement( 'img' );\r
 338                                                 this.imageElement.setAttribute( 'alt', '' );\r
 339                                                 editor.insertElement( this.imageElement );\r
 340                                         }\r
 341                                         // ImageButton dialog and Image element.\r
 342                                         else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))\r
 343                                         {\r
 344                                                 // Replace IMG -> INPUT\r
 345                                                 imgTagName = 'input';\r
 346                                                 this.imageElement = editor.document.createElement( 'input' );\r
 347                                                 this.imageElement.setAttributes(\r
 348                                                         {\r
 349                                                                 type : 'image',\r
 350                                                                 alt : ''\r
 351                                                         }\r
 352                                                 );\r
 353                                                 editor.insertElement( this.imageElement );\r
 354                                         }\r
 355                                         else\r
 356                                         {\r
 357                                                 // Restore the original element before all commits.\r
 358                                                 this.imageElement = this.cleanImageElement;\r
 359                                                 delete this.cleanImageElement;\r
 360                                         }\r
 361                                 }\r
 362                                 else    // Create a new image.\r
 363                                 {\r
 364                                         // Image dialog -> create IMG element.\r
 365                                         if ( dialogType == 'image' )\r
 366                                                 this.imageElement = editor.document.createElement( 'img' );\r
 367                                         else\r
 368                                         {\r
 369                                                 this.imageElement = editor.document.createElement( 'input' );\r
 370                                                 this.imageElement.setAttribute ( 'type' ,'image' );\r
 371                                         }\r
 372                                         this.imageElement.setAttribute( 'alt', '' );\r
 373                                 }\r
 374 \r
 375                                 // Create a new link.\r
 376                                 if ( !this.linkEditMode )\r
 377                                         this.linkElement = editor.document.createElement( 'a' );\r
 378 \r
 379                                 // Set attributes.\r
 380                                 this.commitContent( IMAGE, this.imageElement );\r
 381                                 this.commitContent( LINK, this.linkElement );\r
 382 \r
 383                                 // Remove empty style attribute.\r
 384                                 if( !this.imageElement.getAttribute( 'style' ) )\r
 385                                         this.imageElement.removeAttribute( 'style' );\r
 386 \r
 387                                 // Insert a new Image.\r
 388                                 if ( !this.imageEditMode )\r
 389                                 {\r
 390                                         if ( this.addLink )\r
 391                                         {\r
 392                                                 //Insert a new Link.\r
 393                                                 if ( !this.linkEditMode )\r
 394                                                 {\r
 395                                                         editor.insertElement(this.linkElement);\r
 396                                                         this.linkElement.append(this.imageElement, false);\r
 397                                                 }\r
 398                                                 else     //Link already exists, image not.\r
 399                                                         editor.insertElement(this.imageElement );\r
 400                                         }\r
 401                                         else\r
 402                                                 editor.insertElement( this.imageElement );\r
 403                                 }\r
 404                                 else            // Image already exists.\r
 405                                 {\r
 406                                         //Add a new link element.\r
 407                                         if ( !this.linkEditMode && this.addLink )\r
 408                                         {\r
 409                                                 editor.insertElement( this.linkElement );\r
 410                                                 this.imageElement.appendTo( this.linkElement );\r
 411                                         }\r
 412                                         //Remove Link, Image exists.\r
 413                                         else if ( this.linkEditMode && !this.addLink )\r
 414                                         {\r
 415                                                 editor.getSelection().selectElement( this.linkElement );\r
 416                                                 editor.insertElement( this.imageElement );\r
 417                                         }\r
 418                                 }\r
 419                         },\r
 420                         onLoad : function()\r
 421                         {\r
 422                                 if ( dialogType != 'image' )\r
 423                                         this.hidePage( 'Link' );                //Hide Link tab.\r
 424                                 var doc = this._.element.getDocument();\r
 425                                 this.addFocusable( doc.getById( 'btnResetSize' ), 5 );\r
 426                                 this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );\r
 427 \r
 428                                 this.commitContent = commitContent;\r
 429                         },\r
 430                         onHide : function()\r
 431                         {\r
 432                                 if ( this.preview )\r
 433                                         this.commitContent( CLEANUP, this.preview );\r
 434 \r
 435                                 if ( this.originalElement )\r
 436                                 {\r
 437                                         this.originalElement.removeListener( 'load', onImgLoadEvent );\r
 438                                         this.originalElement.removeListener( 'error', onImgLoadErrorEvent );\r
 439                                         this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );\r
 440                                         this.originalElement.remove();\r
 441                                         this.originalElement = false;           // Dialog is closed.\r
 442                                 }\r
 443 \r
 444                                 delete this.imageElement;\r
 445                         },\r
 446                         contents : [\r
 447                                 {\r
 448                                         id : 'info',\r
 449                                         label : editor.lang.image.infoTab,\r
 450                                         accessKey : 'I',\r
 451                                         elements :\r
 452                                         [\r
 453                                                 {\r
 454                                                         type : 'vbox',\r
 455                                                         padding : 0,\r
 456                                                         children :\r
 457                                                         [\r
 458                                                                 {\r
 459                                                                         type : 'html',\r
 460                                                                         html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.image.url ) + '</span>'\r
 461                                                                 },\r
 462                                                                 {\r
 463                                                                         type : 'hbox',\r
 464                                                                         widths : [ '280px', '110px' ],\r
 465                                                                         align : 'right',\r
 466                                                                         children :\r
 467                                                                         [\r
 468                                                                                 {\r
 469                                                                                         id : 'txtUrl',\r
 470                                                                                         type : 'text',\r
 471                                                                                         label : '',\r
 472                                                                                         onChange : function()\r
 473                                                                                         {\r
 474                                                                                                 var dialog = this.getDialog(),\r
 475                                                                                                         newUrl = this.getValue();\r
 476 \r
 477                                                                                                 //Update original image\r
 478                                                                                                 if ( newUrl.length > 0 )        //Prevent from load before onShow\r
 479                                                                                                 {\r
 480                                                                                                         dialog = this.getDialog();\r
 481                                                                                                         var original = dialog.originalElement;\r
 482 \r
 483                                                                                                         dialog.preview.removeStyle( 'display' );\r
 484 \r
 485                                                                                                         original.setCustomData( 'isReady', 'false' );\r
 486                                                                                                         // Show loader\r
 487                                                                                                         var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' );\r
 488                                                                                                         if ( loader )\r
 489                                                                                                                 loader.setStyle( 'display', '' );\r
 490 \r
 491                                                                                                         original.on( 'load', onImgLoadEvent, dialog );\r
 492                                                                                                         original.on( 'error', onImgLoadErrorEvent, dialog );\r
 493                                                                                                         original.on( 'abort', onImgLoadErrorEvent, dialog );\r
 494                                                                                                         original.setAttribute( 'src', newUrl );\r
 495                                                                                                         dialog.preview.setAttribute( 'src', newUrl );\r
 496 \r
 497                                                                                                         updatePreview( dialog );\r
 498                                                                                                 }\r
 499                                                                                                 // Dont show preview if no URL given.\r
 500                                                                                                 else if ( dialog.preview )\r
 501                                                                                                 {\r
 502                                                                                                         dialog.preview.removeAttribute( 'src' );\r
 503                                                                                                         dialog.preview.setStyle( 'display', 'none' );\r
 504                                                                                                 }\r
 505                                                                                         },\r
 506                                                                                         setup : function( type, element )\r
 507                                                                                         {\r
 508                                                                                                 if ( type == IMAGE )\r
 509                                                                                                 {\r
 510                                                                                                         var url = element.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' );\r
 511                                                                                                         var field = this;\r
 512 \r
 513                                                                                                         this.getDialog().dontResetSize = true;\r
 514 \r
 515                                                                                                         field.setValue( url );          // And call this.onChange()\r
 516                                                                                                         // Manually set the initial value.(#4191)\r
 517                                                                                                         field.setInitValue();\r
 518                                                                                                         field.focus();\r
 519                                                                                                 }\r
 520                                                                                         },\r
 521                                                                                         commit : function( type, element )\r
 522                                                                                         {\r
 523                                                                                                 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )\r
 524                                                                                                 {\r
 525                                                                                                         element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) );\r
 526                                                                                                         element.setAttribute( 'src', decodeURI( this.getValue() ) );\r
 527                                                                                                 }\r
 528                                                                                                 else if ( type == CLEANUP )\r
 529                                                                                                 {\r
 530                                                                                                         element.setAttribute( 'src', '' );      // If removeAttribute doesn't work.\r
 531                                                                                                         element.removeAttribute( 'src' );\r
 532                                                                                                 }\r
 533                                                                                         },\r
 534                                                                                         validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )\r
 535                                                                                 },\r
 536                                                                                 {\r
 537                                                                                         type : 'button',\r
 538                                                                                         id : 'browse',\r
 539                                                                                         align : 'center',\r
 540                                                                                         label : editor.lang.common.browseServer,\r
 541                                                                                         hidden : true,\r
 542                                                                                         filebrowser : 'info:txtUrl'\r
 543                                                                                 }\r
 544                                                                         ]\r
 545                                                                 }\r
 546                                                         ]\r
 547                                                 },\r
 548                                                 {\r
 549                                                         id : 'txtAlt',\r
 550                                                         type : 'text',\r
 551                                                         label : editor.lang.image.alt,\r
 552                                                         accessKey : 'A',\r
 553                                                         'default' : '',\r
 554                                                         onChange : function()\r
 555                                                         {\r
 556                                                                 updatePreview( this.getDialog() );\r
 557                                                         },\r
 558                                                         setup : function( type, element )\r
 559                                                         {\r
 560                                                                 if ( type == IMAGE )\r
 561                                                                         this.setValue( element.getAttribute( 'alt' ) );\r
 562                                                         },\r
 563                                                         commit : function( type, element )\r
 564                                                         {\r
 565                                                                 if ( type == IMAGE )\r
 566                                                                 {\r
 567                                                                         if ( this.getValue() || this.isChanged() )\r
 568                                                                                 element.setAttribute( 'alt', this.getValue() );\r
 569                                                                 }\r
 570                                                                 else if ( type == PREVIEW )\r
 571                                                                 {\r
 572                                                                         element.setAttribute( 'alt', this.getValue() );\r
 573                                                                 }\r
 574                                                                 else if ( type == CLEANUP )\r
 575                                                                 {\r
 576                                                                         element.removeAttribute( 'alt' );\r
 577                                                                 }\r
 578                                                         }\r
 579                                                 },\r
 580                                                 {\r
 581                                                         type : 'hbox',\r
 582                                                         widths : [ '140px', '240px' ],\r
 583                                                         children :\r
 584                                                         [\r
 585                                                                 {\r
 586                                                                         type : 'vbox',\r
 587                                                                         padding : 10,\r
 588                                                                         children :\r
 589                                                                         [\r
 590                                                                                 {\r
 591                                                                                         type : 'hbox',\r
 592                                                                                         widths : [ '70%', '30%' ],\r
 593                                                                                         children :\r
 594                                                                                         [\r
 595                                                                                                 {\r
 596                                                                                                         type : 'vbox',\r
 597                                                                                                         padding : 1,\r
 598                                                                                                         children :\r
 599                                                                                                         [\r
 600                                                                                                                 {\r
 601                                                                                                                         type : 'text',\r
 602                                                                                                                         width: '40px',\r
 603                                                                                                                         id : 'txtWidth',\r
 604                                                                                                                         labelLayout : 'horizontal',\r
 605                                                                                                                         label : editor.lang.image.width,\r
 606                                                                                                                         onKeyUp : onSizeChange,\r
 607                                                                                                                         onChange : function()\r
 608                                                                                                                         {\r
 609                                                                                                                                 commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
 610                                                                                                                         },\r
 611                                                                                                                         validate: function()\r
 612                                                                                                                         {\r
 613                                                                                                                                 var aMatch  =  this.getValue().match( regexGetSizeOrEmpty );\r
 614                                                                                                                                 if ( !aMatch )\r
 615                                                                                                                                         alert( editor.lang.common.validateNumberFailed );\r
 616                                                                                                                                 return !!aMatch;\r
 617                                                                                                                         },\r
 618                                                                                                                         setup : setupDimension,\r
 619                                                                                                                         commit : function( type, element, internalCommit )\r
 620                                                                                                                         {\r
 621                                                                                                                                 var value = this.getValue();\r
 622                                                                                                                                 if ( type == IMAGE )\r
 623                                                                                                                                 {\r
 624                                                                                                                                         if ( value )\r
 625                                                                                                                                                 element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );\r
 626                                                                                                                                         else if ( !value && this.isChanged( ) )\r
 627                                                                                                                                                 element.removeStyle( 'width' );\r
 628 \r
 629                                                                                                                                         !internalCommit && element.removeAttribute( 'width' );\r
 630                                                                                                                                 }\r
 631                                                                                                                                 else if ( type == PREVIEW )\r
 632                                                                                                                                 {\r
 633                                                                                                                                         var aMatch = value.match( regexGetSize );\r
 634                                                                                                                                         if ( !aMatch )\r
 635                                                                                                                                         {\r
 636                                                                                                                                                 var oImageOriginal = this.getDialog().originalElement;\r
 637                                                                                                                                                 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )\r
 638                                                                                                                                                         element.setStyle( 'width',  oImageOriginal.$.width + 'px');\r
 639                                                                                                                                         }\r
 640                                                                                                                                         else\r
 641                                                                                                                                                 element.setStyle( 'width', value + 'px');\r
 642                                                                                                                                 }\r
 643                                                                                                                                 else if ( type == CLEANUP )\r
 644                                                                                                                                 {\r
 645                                                                                                                                         element.removeAttribute( 'width' );\r
 646                                                                                                                                         element.removeStyle( 'width' );\r
 647                                                                                                                                 }\r
 648                                                                                                                         }\r
 649                                                                                                                 },\r
 650                                                                                                                 {\r
 651                                                                                                                         type : 'text',\r
 652                                                                                                                         id : 'txtHeight',\r
 653                                                                                                                         width: '40px',\r
 654                                                                                                                         labelLayout : 'horizontal',\r
 655                                                                                                                         label : editor.lang.image.height,\r
 656                                                                                                                         onKeyUp : onSizeChange,\r
 657                                                                                                                         onChange : function()\r
 658                                                                                                                         {\r
 659                                                                                                                                 commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
 660                                                                                                                         },\r
 661                                                                                                                         validate: function()\r
 662                                                                                                                         {\r
 663                                                                                                                                 var aMatch = this.getValue().match( regexGetSizeOrEmpty );\r
 664                                                                                                                                 if ( !aMatch )\r
 665                                                                                                                                         alert( editor.lang.common.validateNumberFailed );\r
 666                                                                                                                                 return !!aMatch;\r
 667                                                                                                                         },\r
 668                                                                                                                         setup : setupDimension,\r
 669                                                                                                                         commit : function( type, element, internalCommit )\r
 670                                                                                                                         {\r
 671                                                                                                                                 var value = this.getValue();\r
 672                                                                                                                                 if ( type == IMAGE )\r
 673                                                                                                                                 {\r
 674                                                                                                                                         if ( value )\r
 675                                                                                                                                                 element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );\r
 676                                                                                                                                         else if ( !value && this.isChanged( ) )\r
 677                                                                                                                                                 element.removeStyle( 'height' );\r
 678 \r
 679                                                                                                                                         if( !internalCommit && type == IMAGE )\r
 680                                                                                                                                                 element.removeAttribute( 'height' );\r
 681                                                                                                                                 }\r
 682                                                                                                                                 else if ( type == PREVIEW )\r
 683                                                                                                                                 {\r
 684                                                                                                                                         var aMatch = value.match( regexGetSize );\r
 685                                                                                                                                         if ( !aMatch )\r
 686                                                                                                                                         {\r
 687                                                                                                                                                 var oImageOriginal = this.getDialog().originalElement;\r
 688                                                                                                                                                 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )\r
 689                                                                                                                                                         element.setStyle( 'height', oImageOriginal.$.height + 'px' );\r
 690                                                                                                                                         }\r
 691                                                                                                                                         else\r
 692                                                                                                                                                 element.setStyle( 'height', value + 'px' );\r
 693                                                                                                                                 }\r
 694                                                                                                                                 else if ( type == CLEANUP )\r
 695                                                                                                                                 {\r
 696                                                                                                                                         element.removeAttribute( 'height' );\r
 697                                                                                                                                         element.removeStyle( 'height' );\r
 698                                                                                                                                 }\r
 699                                                                                                                         }\r
 700                                                                                                                 }\r
 701                                                                                                         ]\r
 702                                                                                                 },\r
 703                                                                                                 {\r
 704                                                                                                         type : 'html',\r
 705                                                                                                         style : 'margin-top:10px;width:40px;height:40px;',\r
 706                                                                                                         onLoad : function()\r
 707                                                                                                         {\r
 708                                                                                                                 // Activate Reset button\r
 709                                                                                                                 var     resetButton = CKEDITOR.document.getById( 'btnResetSize' ),\r
 710                                                                                                                         ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );\r
 711                                                                                                                 if ( resetButton )\r
 712                                                                                                                 {\r
 713                                                                                                                         resetButton.on( 'click', function()\r
 714                                                                                                                                 {\r
 715                                                                                                                                         resetSize( this );\r
 716                                                                                                                                 }, this.getDialog() );\r
 717                                                                                                                         resetButton.on( 'mouseover', function()\r
 718                                                                                                                                 {\r
 719                                                                                                                                         this.addClass( 'cke_btn_over' );\r
 720                                                                                                                                 }, resetButton );\r
 721                                                                                                                         resetButton.on( 'mouseout', function()\r
 722                                                                                                                                 {\r
 723                                                                                                                                         this.removeClass( 'cke_btn_over' );\r
 724                                                                                                                                 }, resetButton );\r
 725                                                                                                                 }\r
 726                                                                                                                 // Activate (Un)LockRatio button\r
 727                                                                                                                 if ( ratioButton )\r
 728                                                                                                                 {\r
 729                                                                                                                         ratioButton.on( 'click', function()\r
 730                                                                                                                                 {\r
 731                                                                                                                                         var locked = switchLockRatio( this ),\r
 732                                                                                                                                                 oImageOriginal = this.originalElement,\r
 733                                                                                                                                                 width = this.getValueOf( 'info', 'txtWidth' );\r
 734 \r
 735                                                                                                                                         if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )\r
 736                                                                                                                                         {\r
 737                                                                                                                                                 var height = oImageOriginal.$.height / oImageOriginal.$.width * width;\r
 738                                                                                                                                                 if ( !isNaN( height ) )\r
 739                                                                                                                                                 {\r
 740                                                                                                                                                         this.setValueOf( 'info', 'txtHeight', Math.round( height ) );\r
 741                                                                                                                                                         updatePreview( this );\r
 742                                                                                                                                                 }\r
 743                                                                                                                                         }\r
 744                                                                                                                                 }, this.getDialog() );\r
 745                                                                                                                         ratioButton.on( 'mouseover', function()\r
 746                                                                                                                                 {\r
 747                                                                                                                                         this.addClass( 'cke_btn_over' );\r
 748                                                                                                                                 }, ratioButton );\r
 749                                                                                                                         ratioButton.on( 'mouseout', function()\r
 750                                                                                                                                 {\r
 751                                                                                                                                         this.removeClass( 'cke_btn_over' );\r
 752                                                                                                                                 }, ratioButton );\r
 753                                                                                                                 }\r
 754                                                                                                         },\r
 755                                                                                                         html : '<div>'+\r
 756                                                                                                                 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +\r
 757                                                                                                                 '" class="cke_btn_locked" id="btnLockSizes"></a>' +\r
 758                                                                                                                 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +\r
 759                                                                                                                 '" class="cke_btn_reset" id="btnResetSize"></a>'+\r
 760                                                                                                                 '</div>'\r
 761                                                                                                 }\r
 762                                                                                         ]\r
 763                                                                                 },\r
 764                                                                                 {\r
 765                                                                                         type : 'vbox',\r
 766                                                                                         padding : 1,\r
 767                                                                                         children :\r
 768                                                                                         [\r
 769                                                                                                 {\r
 770                                                                                                         type : 'text',\r
 771                                                                                                         id : 'txtBorder',\r
 772                                                                                                         width: '60px',\r
 773                                                                                                         labelLayout : 'horizontal',\r
 774                                                                                                         label : editor.lang.image.border,\r
 775                                                                                                         'default' : '',\r
 776                                                                                                         onKeyUp : function()\r
 777                                                                                                         {\r
 778                                                                                                                 updatePreview( this.getDialog() );\r
 779                                                                                                         },\r
 780                                                                                                         onChange : function()\r
 781                                                                                                         {\r
 782                                                                                                                 commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
 783                                                                                                         },\r
 784                                                                                                         validate: function()\r
 785                                                                                                         {\r
 786                                                                                                                 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
 787                                                                                                                 return func.apply( this );\r
 788                                                                                                         },\r
 789                                                                                                         setup : function( type, element )\r
 790                                                                                                         {\r
 791                                                                                                                 if ( type == IMAGE )\r
 792                                                                                                                 {\r
 793                                                                                                                         var value,\r
 794                                                                                                                                 borderStyle = element.getStyle( 'border-width' );\r
 795 \r
 796                                                                                                                         borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );\r
 797                                                                                                                         value = borderStyle && parseInt( borderStyle[ 1 ], 10 );\r
 798                                                                                                                         !value && ( value = element.getAttribute( 'border' ) );\r
 799 \r
 800                                                                                                                         this.setValue( value );\r
 801                                                                                                                 }\r
 802                                                                                                         },\r
 803                                                                                                         commit : function( type, element, internalCommit )\r
 804                                                                                                         {\r
 805                                                                                                                 var value = parseInt( this.getValue(), 10 );\r
 806                                                                                                                 if ( type == IMAGE || type == PREVIEW )\r
 807                                                                                                                 {\r
 808                                                                                                                         if ( value )\r
 809                                                                                                                         {\r
 810                                                                                                                                 element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );\r
 811                                                                                                                                 element.setStyle( 'border-style', 'solid' );\r
 812                                                                                                                         }\r
 813                                                                                                                         else if ( !value && this.isChanged() )\r
 814                                                                                                                         {\r
 815                                                                                                                                 element.removeStyle( 'border-width' );\r
 816                                                                                                                                 element.removeStyle( 'border-style' );\r
 817                                                                                                                                 element.removeStyle( 'border-color' );\r
 818                                                                                                                         }\r
 819 \r
 820                                                                                                                         if( !internalCommit && type == IMAGE )\r
 821                                                                                                                                 element.removeAttribute( 'border' );\r
 822                                                                                                                 }\r
 823                                                                                                                 else if ( type == CLEANUP )\r
 824                                                                                                                 {\r
 825                                                                                                                         element.removeAttribute( 'border' );\r
 826                                                                                                                         element.removeStyle( 'border-width' );\r
 827                                                                                                                         element.removeStyle( 'border-style' );\r
 828                                                                                                                         element.removeStyle( 'border-color' );\r
 829                                                                                                                 }\r
 830                                                                                                         }\r
 831                                                                                                 },\r
 832                                                                                                 {\r
 833                                                                                                         type : 'text',\r
 834                                                                                                         id : 'txtHSpace',\r
 835                                                                                                         width: '60px',\r
 836                                                                                                         labelLayout : 'horizontal',\r
 837                                                                                                         label : editor.lang.image.hSpace,\r
 838                                                                                                         'default' : '',\r
 839                                                                                                         onKeyUp : function()\r
 840                                                                                                         {\r
 841                                                                                                                 updatePreview( this.getDialog() );\r
 842                                                                                                         },\r
 843                                                                                                         onChange : function()\r
 844                                                                                                         {\r
 845                                                                                                                 commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
 846                                                                                                         },\r
 847                                                                                                         validate: function()\r
 848                                                                                                         {\r
 849                                                                                                                 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
 850                                                                                                                 return func.apply( this );\r
 851                                                                                                         },\r
 852                                                                                                         setup : function( type, element )\r
 853                                                                                                         {\r
 854                                                                                                                 if ( type == IMAGE )\r
 855                                                                                                                 {\r
 856                                                                                                                         var value,\r
 857                                                                                                                                 marginLeftPx,\r
 858                                                                                                                                 marginRightPx,\r
 859                                                                                                                                 marginLeftStyle = element.getStyle( 'margin-left' ),\r
 860                                                                                                                                 marginRightStyle = element.getStyle( 'margin-right' );\r
 861 \r
 862                                                                                                                         marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );\r
 863                                                                                                                         marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );\r
 864                                                                                                                         marginLeftPx = parseInt( marginLeftStyle, 10 );\r
 865                                                                                                                         marginRightPx = parseInt( marginRightStyle, 10 );\r
 866 \r
 867                                                                                                                         value = ( marginLeftPx == marginRightPx ) && marginLeftPx;\r
 868                                                                                                                         !value && ( value = element.getAttribute( 'hspace' ) );\r
 869 \r
 870                                                                                                                         this.setValue( value );\r
 871                                                                                                                 }\r
 872                                                                                                         },\r
 873                                                                                                         commit : function( type, element, internalCommit )\r
 874                                                                                                         {\r
 875                                                                                                                 var value = parseInt( this.getValue(), 10 );\r
 876                                                                                                                 if ( type == IMAGE || type == PREVIEW )\r
 877                                                                                                                 {\r
 878                                                                                                                         if ( value )\r
 879                                                                                                                         {\r
 880                                                                                                                                 element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );\r
 881                                                                                                                                 element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );\r
 882                                                                                                                         }\r
 883                                                                                                                         else if ( !value && this.isChanged( ) )\r
 884                                                                                                                         {\r
 885                                                                                                                                 element.removeStyle( 'margin-left' );\r
 886                                                                                                                                 element.removeStyle( 'margin-right' );\r
 887                                                                                                                         }\r
 888 \r
 889                                                                                                                         if( !internalCommit && type == IMAGE )\r
 890                                                                                                                                 element.removeAttribute( 'hspace' );\r
 891                                                                                                                 }\r
 892                                                                                                                 else if ( type == CLEANUP )\r
 893                                                                                                                 {\r
 894                                                                                                                         element.removeAttribute( 'hspace' );\r
 895                                                                                                                         element.removeStyle( 'margin-left' );\r
 896                                                                                                                         element.removeStyle( 'margin-right' );\r
 897                                                                                                                 }\r
 898                                                                                                         }\r
 899                                                                                                 },\r
 900                                                                                                 {\r
 901                                                                                                         type : 'text',\r
 902                                                                                                         id : 'txtVSpace',\r
 903                                                                                                         width : '60px',\r
 904                                                                                                         labelLayout : 'horizontal',\r
 905                                                                                                         label : editor.lang.image.vSpace,\r
 906                                                                                                         'default' : '',\r
 907                                                                                                         onKeyUp : function()\r
 908                                                                                                         {\r
 909                                                                                                                 updatePreview( this.getDialog() );\r
 910                                                                                                         },\r
 911                                                                                                         onChange : function()\r
 912                                                                                                         {\r
 913                                                                                                                 commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
 914                                                                                                         },\r
 915                                                                                                         validate: function()\r
 916                                                                                                         {\r
 917                                                                                                                 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
 918                                                                                                                 return func.apply( this );\r
 919                                                                                                         },\r
 920                                                                                                         setup : function( type, element )\r
 921                                                                                                         {\r
 922                                                                                                                 if ( type == IMAGE )\r
 923                                                                                                                 {\r
 924                                                                                                                         var value,\r
 925                                                                                                                                 marginTopPx,\r
 926                                                                                                                                 marginBottomPx,\r
 927                                                                                                                                 marginTopStyle = element.getStyle( 'margin-top' ),\r
 928                                                                                                                                 marginBottomStyle = element.getStyle( 'margin-bottom' );\r
 929 \r
 930                                                                                                                         marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );\r
 931                                                                                                                         marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );\r
 932                                                                                                                         marginTopPx = parseInt( marginTopStyle, 10 );\r
 933                                                                                                                         marginBottomPx = parseInt( marginBottomStyle, 10 );\r
 934 \r
 935                                                                                                                         value = ( marginTopPx == marginBottomPx ) && marginTopPx;\r
 936                                                                                                                         !value && ( value = element.getAttribute( 'vspace' ) );\r
 937                                                                                                                         this.setValue( value );\r
 938                                                                                                                 }\r
 939                                                                                                         },\r
 940                                                                                                         commit : function( type, element, internalCommit )\r
 941                                                                                                         {\r
 942                                                                                                                 var value = parseInt( this.getValue(), 10 );\r
 943                                                                                                                 if ( type == IMAGE || type == PREVIEW )\r
 944                                                                                                                 {\r
 945                                                                                                                         if ( value )\r
 946                                                                                                                         {\r
 947                                                                                                                                 element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );\r
 948                                                                                                                                 element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );\r
 949                                                                                                                         }\r
 950                                                                                                                         else if ( !value && this.isChanged( ) )\r
 951                                                                                                                         {\r
 952                                                                                                                                 element.removeStyle( 'margin-top' );\r
 953                                                                                                                                 element.removeStyle( 'margin-bottom' );\r
 954                                                                                                                         }\r
 955 \r
 956                                                                                                                         if( !internalCommit && type == IMAGE )\r
 957                                                                                                                                 element.removeAttribute( 'vspace' );\r
 958                                                                                                                 }\r
 959                                                                                                                 else if ( type == CLEANUP )\r
 960                                                                                                                 {\r
 961                                                                                                                         element.removeAttribute( 'vspace' );\r
 962                                                                                                                         element.removeStyle( 'margin-top' );\r
 963                                                                                                                         element.removeStyle( 'margin-bottom' );\r
 964                                                                                                                 }\r
 965                                                                                                         }\r
 966                                                                                                 },\r
 967                                                                                                 {\r
 968                                                                                                         id : 'cmbAlign',\r
 969                                                                                                         type : 'select',\r
 970                                                                                                         labelLayout : 'horizontal',\r
 971                                                                                                         widths : [ '35%','65%' ],\r
 972                                                                                                         style : 'width:90px',\r
 973                                                                                                         label : editor.lang.image.align,\r
 974                                                                                                         'default' : '',\r
 975                                                                                                         items :\r
 976                                                                                                         [\r
 977                                                                                                                 [ editor.lang.common.notSet , ''],\r
 978                                                                                                                 [ editor.lang.image.alignLeft , 'left'],\r
 979                                                                                                                 [ editor.lang.image.alignRight , 'right']\r
 980                                                                                                                 // Backward compatible with v2 on setup when specified as attribute value,\r
 981                                                                                                                 // while these values are no more available as select options.\r
 982                                                                                                                 //      [ editor.lang.image.alignAbsBottom , 'absBottom'],\r
 983                                                                                                                 //      [ editor.lang.image.alignAbsMiddle , 'absMiddle'],\r
 984                                                                                                                 //  [ editor.lang.image.alignBaseline , 'baseline'],\r
 985                                                                                                                 //  [ editor.lang.image.alignTextTop , 'text-top'],\r
 986                                                                                                                 //  [ editor.lang.image.alignBottom , 'bottom'],\r
 987                                                                                                                 //  [ editor.lang.image.alignMiddle , 'middle'],\r
 988                                                                                                                 //  [ editor.lang.image.alignTop , 'top']\r
 989                                                                                                         ],\r
 990                                                                                                         onChange : function()\r
 991                                                                                                         {\r
 992                                                                                                                 updatePreview( this.getDialog() );\r
 993                                                                                                                 commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r
 994                                                                                                         },\r
 995                                                                                                         setup : function( type, element )\r
 996                                                                                                         {\r
 997                                                                                                                 if ( type == IMAGE )\r
 998                                                                                                                 {\r
 999                                                                                                                         var value = element.getStyle( 'float' );\r
1000                                                                                                                         switch( value )\r
1001                                                                                                                         {\r
1002                                                                                                                                 // Ignore those unrelated values.\r
1003                                                                                                                                 case 'inherit':\r
1004                                                                                                                                 case 'none':\r
1005                                                                                                                                         value = '';\r
1006                                                                                                                         }\r
1007 \r
1008                                                                                                                         !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() );\r
1009                                                                                                                         this.setValue( value );\r
1010                                                                                                                 }\r
1011                                                                                                         },\r
1012                                                                                                         commit : function( type, element, internalCommit )\r
1013                                                                                                         {\r
1014                                                                                                                 var value = this.getValue();\r
1015                                                                                                                 if ( type == IMAGE || type == PREVIEW )\r
1016                                                                                                                 {\r
1017                                                                                                                         if ( value )\r
1018                                                                                                                                 element.setStyle( 'float', value );\r
1019                                                                                                                         else if ( !value && this.isChanged( ) )\r
1020                                                                                                                                 element.removeStyle( 'float' );\r
1021 \r
1022                                                                                                                         if( !internalCommit && type == IMAGE )\r
1023                                                                                                                         {\r
1024                                                                                                                                 value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();\r
1025                                                                                                                                 switch( value )\r
1026                                                                                                                                 {\r
1027                                                                                                                                         // we should remove it only if it matches "left" or "right",\r
1028                                                                                                                                         // otherwise leave it intact.\r
1029                                                                                                                                         case 'left':\r
1030                                                                                                                                         case 'right':\r
1031                                                                                                                                                 element.removeAttribute( 'align' );\r
1032                                                                                                                                 }\r
1033                                                                                                                         }\r
1034                                                                                                                 }\r
1035                                                                                                                 else if ( type == CLEANUP )\r
1036                                                                                                                         element.removeStyle( 'float' );\r
1037 \r
1038                                                                                                         }\r
1039                                                                                                 }\r
1040                                                                                         ]\r
1041                                                                                 }\r
1042                                                                         ]\r
1043                                                                 },\r
1044                                                                 {\r
1045                                                                         type : 'vbox',\r
1046                                                                         height : '250px',\r
1047                                                                         children :\r
1048                                                                         [\r
1049                                                                                 {\r
1050                                                                                         type : 'html',\r
1051                                                                                         style : 'width:95%;',\r
1052                                                                                         html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>'+\r
1053                                                                                         '<div id="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>'+\r
1054                                                                                         '<div id="ImagePreviewBox">'+\r
1055                                                                                         '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+\r
1056                                                                                         '<img id="previewImage" src="" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+\r
1057                                                                                         'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+\r
1058                                                                                         '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
1059                                                                                         '</div>'+'</div>'\r
1060                                                                                 }\r
1061                                                                         ]\r
1062                                                                 }\r
1063                                                         ]\r
1064                                                 }\r
1065                                         ]\r
1066                                 },\r
1067                                 {\r
1068                                         id : 'Link',\r
1069                                         label : editor.lang.link.title,\r
1070                                         padding : 0,\r
1071                                         elements :\r
1072                                         [\r
1073                                                 {\r
1074                                                         id : 'txtUrl',\r
1075                                                         type : 'text',\r
1076                                                         label : editor.lang.image.url,\r
1077                                                         style : 'width: 100%',\r
1078                                                         'default' : '',\r
1079                                                         setup : function( type, element )\r
1080                                                         {\r
1081                                                                 if ( type == LINK )\r
1082                                                                 {\r
1083                                                                         var href = element.getAttribute( '_cke_saved_href' );\r
1084                                                                         if ( !href )\r
1085                                                                                 href = element.getAttribute( 'href' );\r
1086                                                                         this.setValue( href );\r
1087                                                                 }\r
1088                                                         },\r
1089                                                         commit : function( type, element )\r
1090                                                         {\r
1091                                                                 if ( type == LINK )\r
1092                                                                 {\r
1093                                                                         if ( this.getValue() || this.isChanged() )\r
1094                                                                         {\r
1095                                                                                 element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) );\r
1096                                                                                 element.setAttribute( 'href', 'javascript:void(0)/*' +\r
1097                                                                                         CKEDITOR.tools.getNextNumber() + '*/' );\r
1098 \r
1099                                                                                 if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )\r
1100                                                                                         this.getDialog().addLink = true;\r
1101                                                                         }\r
1102                                                                 }\r
1103                                                         }\r
1104                                                 },\r
1105                                                 {\r
1106                                                         type : 'button',\r
1107                                                         id : 'browse',\r
1108                                                         filebrowser : 'Link:txtUrl',\r
1109                                                         style : 'float:right',\r
1110                                                         hidden : true,\r
1111                                                         label : editor.lang.common.browseServer\r
1112                                                 },\r
1113                                                 {\r
1114                                                         id : 'cmbTarget',\r
1115                                                         type : 'select',\r
1116                                                         label : editor.lang.link.target,\r
1117                                                         'default' : '',\r
1118                                                         items :\r
1119                                                         [\r
1120                                                                 [ editor.lang.link.targetNotSet , ''],\r
1121                                                                 [ editor.lang.link.targetNew , '_blank'],\r
1122                                                                 [ editor.lang.link.targetTop , '_top'],\r
1123                                                                 [ editor.lang.link.targetSelf , '_self'],\r
1124                                                                 [ editor.lang.link.targetParent , '_parent']\r
1125                                                         ],\r
1126                                                         setup : function( type, element )\r
1127                                                         {\r
1128                                                                 if ( type == LINK )\r
1129                                                                         this.setValue( element.getAttribute( 'target' ) );\r
1130                                                         },\r
1131                                                         commit : function( type, element )\r
1132                                                         {\r
1133                                                                 if ( type == LINK )\r
1134                                                                 {\r
1135                                                                         if ( this.getValue() || this.isChanged() )\r
1136                                                                                 element.setAttribute( 'target', this.getValue() );\r
1137                                                                 }\r
1138                                                         }\r
1139                                                 }\r
1140                                         ]\r
1141                                 },\r
1142                                 {\r
1143                                         id : 'Upload',\r
1144                                         hidden : true,\r
1145                                         filebrowser : 'uploadButton',\r
1146                                         label : editor.lang.image.upload,\r
1147                                         elements :\r
1148                                         [\r
1149                                                 {\r
1150                                                         type : 'file',\r
1151                                                         id : 'upload',\r
1152                                                         label : editor.lang.image.btnUpload,\r
1153                                                         style: 'height:40px',\r
1154                                                         size : 38\r
1155                                                 },\r
1156                                                 {\r
1157                                                         type : 'fileButton',\r
1158                                                         id : 'uploadButton',\r
1159                                                         filebrowser : 'info:txtUrl',\r
1160                                                         label : editor.lang.image.btnUpload,\r
1161                                                         'for' : [ 'Upload', 'upload' ]\r
1162                                                 }\r
1163                                         ]\r
1164                                 },\r
1165                                 {\r
1166                                         id : 'advanced',\r
1167                                         label : editor.lang.common.advancedTab,\r
1168                                         elements :\r
1169                                         [\r
1170                                                 {\r
1171                                                         type : 'hbox',\r
1172                                                         widths : [ '50%', '25%', '25%' ],\r
1173                                                         children :\r
1174                                                         [\r
1175                                                                 {\r
1176                                                                         type : 'text',\r
1177                                                                         id : 'linkId',\r
1178                                                                         label : editor.lang.common.id,\r
1179                                                                         setup : function( type, element )\r
1180                                                                         {\r
1181                                                                                 if ( type == IMAGE )\r
1182                                                                                         this.setValue( element.getAttribute( 'id' ) );\r
1183                                                                         },\r
1184                                                                         commit : function( type, element )\r
1185                                                                         {\r
1186                                                                                 if ( type == IMAGE )\r
1187                                                                                 {\r
1188                                                                                         if ( this.getValue() || this.isChanged() )\r
1189                                                                                                 element.setAttribute( 'id', this.getValue() );\r
1190                                                                                 }\r
1191                                                                         }\r
1192                                                                 },\r
1193                                                                 {\r
1194                                                                         id : 'cmbLangDir',\r
1195                                                                         type : 'select',\r
1196                                                                         style : 'width : 100px;',\r
1197                                                                         label : editor.lang.common.langDir,\r
1198                                                                         'default' : '',\r
1199                                                                         items :\r
1200                                                                         [\r
1201                                                                                 [ editor.lang.common.notSet, '' ],\r
1202                                                                                 [ editor.lang.common.langDirLtr, 'ltr' ],\r
1203                                                                                 [ editor.lang.common.langDirRtl, 'rtl' ]\r
1204                                                                         ],\r
1205                                                                         setup : function( type, element )\r
1206                                                                         {\r
1207                                                                                 if ( type == IMAGE )\r
1208                                                                                         this.setValue( element.getAttribute( 'dir' ) );\r
1209                                                                         },\r
1210                                                                         commit : function( type, element )\r
1211                                                                         {\r
1212                                                                                 if ( type == IMAGE )\r
1213                                                                                 {\r
1214                                                                                         if ( this.getValue() || this.isChanged() )\r
1215                                                                                                 element.setAttribute( 'dir', this.getValue() );\r
1216                                                                                 }\r
1217                                                                         }\r
1218                                                                 },\r
1219                                                                 {\r
1220                                                                         type : 'text',\r
1221                                                                         id : 'txtLangCode',\r
1222                                                                         label : editor.lang.common.langCode,\r
1223                                                                         'default' : '',\r
1224                                                                         setup : function( type, element )\r
1225                                                                         {\r
1226                                                                                 if ( type == IMAGE )\r
1227                                                                                         this.setValue( element.getAttribute( 'lang' ) );\r
1228                                                                         },\r
1229                                                                         commit : function( type, element )\r
1230                                                                         {\r
1231                                                                                 if ( type == IMAGE )\r
1232                                                                                 {\r
1233                                                                                         if ( this.getValue() || this.isChanged() )\r
1234                                                                                                 element.setAttribute( 'lang', this.getValue() );\r
1235                                                                                 }\r
1236                                                                         }\r
1237                                                                 }\r
1238                                                         ]\r
1239                                                 },\r
1240                                                 {\r
1241                                                         type : 'text',\r
1242                                                         id : 'txtGenLongDescr',\r
1243                                                         label : editor.lang.common.longDescr,\r
1244                                                         setup : function( type, element )\r
1245                                                         {\r
1246                                                                 if ( type == IMAGE )\r
1247                                                                         this.setValue( element.getAttribute( 'longDesc' ) );\r
1248                                                         },\r
1249                                                         commit : function( type, element )\r
1250                                                         {\r
1251                                                                 if ( type == IMAGE )\r
1252                                                                 {\r
1253                                                                         if ( this.getValue() || this.isChanged() )\r
1254                                                                                 element.setAttribute( 'longDesc', this.getValue() );\r
1255                                                                 }\r
1256                                                         }\r
1257                                                 },\r
1258                                                 {\r
1259                                                         type : 'hbox',\r
1260                                                         widths : [ '50%', '50%' ],\r
1261                                                         children :\r
1262                                                         [\r
1263                                                                 {\r
1264                                                                         type : 'text',\r
1265                                                                         id : 'txtGenClass',\r
1266                                                                         label : editor.lang.common.cssClass,\r
1267                                                                         'default' : '',\r
1268                                                                         setup : function( type, element )\r
1269                                                                         {\r
1270                                                                                 if ( type == IMAGE )\r
1271                                                                                         this.setValue( element.getAttribute( 'class' ) );\r
1272                                                                         },\r
1273                                                                         commit : function( type, element )\r
1274                                                                         {\r
1275                                                                                 if ( type == IMAGE )\r
1276                                                                                 {\r
1277                                                                                         if ( this.getValue() || this.isChanged() )\r
1278                                                                                                 element.setAttribute( 'class', this.getValue() );\r
1279                                                                                 }\r
1280                                                                         }\r
1281                                                                 },\r
1282                                                                 {\r
1283                                                                         type : 'text',\r
1284                                                                         id : 'txtGenTitle',\r
1285                                                                         label : editor.lang.common.advisoryTitle,\r
1286                                                                         'default' : '',\r
1287                                                                         onChange : function()\r
1288                                                                         {\r
1289                                                                                 updatePreview( this.getDialog() );\r
1290                                                                         },\r
1291                                                                         setup : function( type, element )\r
1292                                                                         {\r
1293                                                                                 if ( type == IMAGE )\r
1294                                                                                         this.setValue( element.getAttribute( 'title' ) );\r
1295                                                                         },\r
1296                                                                         commit : function( type, element )\r
1297                                                                         {\r
1298                                                                                 if ( type == IMAGE )\r
1299                                                                                 {\r
1300                                                                                         if ( this.getValue() || this.isChanged() )\r
1301                                                                                                 element.setAttribute( 'title', this.getValue() );\r
1302                                                                                 }\r
1303                                                                                 else if ( type == PREVIEW )\r
1304                                                                                 {\r
1305                                                                                         element.setAttribute( 'title', this.getValue() );\r
1306                                                                                 }\r
1307                                                                                 else if ( type == CLEANUP )\r
1308                                                                                 {\r
1309                                                                                         element.removeAttribute( 'title' );\r
1310                                                                                 }\r
1311                                                                         }\r
1312                                                                 }\r
1313                                                         ]\r
1314                                                 },\r
1315                                                 {\r
1316                                                         type : 'text',\r
1317                                                         id : 'txtdlgGenStyle',\r
1318                                                         label : editor.lang.common.cssStyle,\r
1319                                                         'default' : '',\r
1320                                                         setup : function( type, element )\r
1321                                                         {\r
1322                                                                 if ( type == IMAGE )\r
1323                                                                 {\r
1324                                                                         var genStyle = element.getAttribute( 'style' );\r
1325                                                                         if ( !genStyle && element.$.style.cssText )\r
1326                                                                                 genStyle = element.$.style.cssText;\r
1327                                                                         this.setValue( genStyle );\r
1328 \r
1329                                                                         var height = element.$.style.height,\r
1330                                                                                 width = element.$.style.width,\r
1331                                                                                 aMatchH  = ( height ? height : '' ).match( regexGetSize ),\r
1332                                                                                 aMatchW  = ( width ? width : '').match( regexGetSize );\r
1333 \r
1334                                                                         this.attributesInStyle =\r
1335                                                                         {\r
1336                                                                                 height : !!aMatchH,\r
1337                                                                                 width : !!aMatchW\r
1338                                                                         };\r
1339                                                                 }\r
1340                                                         },\r
1341                                                         onChange : function ()\r
1342                                                         {\r
1343                                                                 commitInternally.call( this,\r
1344                                                                         [ 'info:cmbFloat', 'info:cmbAlign',\r
1345                                                                           'info:txtVSpace', 'info:txtHSpace',\r
1346                                                                           'info:txtBorder',\r
1347                                                                           'info:txtWidth', 'info:txtHeight' ] );\r
1348                                                                 updatePreview( this );\r
1349                                                         },\r
1350                                                         commit : function( type, element )\r
1351                                                         {\r
1352                                                                 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )\r
1353                                                                 {\r
1354                                                                         element.setAttribute( 'style', this.getValue() );\r
1355                                                                 }\r
1356                                                         }\r
1357                                                 }\r
1358                                         ]\r
1359                                 }\r
1360                         ]\r
1361                 };\r
1362         };\r
1363 \r
1364         CKEDITOR.dialog.add( 'image', function( editor )\r
1365                 {\r
1366                         return imageDialog( editor, 'image' );\r
1367                 });\r
1368 \r
1369         CKEDITOR.dialog.add( 'imagebutton', function( editor )\r
1370                 {\r
1371                         return imageDialog( editor, 'imagebutton' );\r
1372                 });\r
1373 })();\r