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