_source/plugins/image/dialogs/image.js

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