_source/plugins/image/dialogs/image.js

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