_source/plugins/image/dialogs/image.js

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