_source/plugins/image/dialogs/image.js

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