_source/plugins/image/dialogs/image.js

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