_source/plugins/image/dialogs/image.js

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