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