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