_source/plugins/image/dialogs/image.js

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