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