_source/plugins/table/dialogs/table.js

   1 /*\r
   2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 (function()\r
   7 {\r
   8         var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,\r
   9                 heightPattern = /^(\d+(?:\.\d+)?)px$/;\r
  10 \r
  11         var commitValue = function( data )\r
  12         {\r
  13                 var id = this.id;\r
  14                 if ( !data.info )\r
  15                         data.info = {};\r
  16                 data.info[id] = this.getValue();\r
  17         };\r
  18 \r
  19         function tableDialog( editor, command )\r
  20         {\r
  21                 var makeElement = function( name )\r
  22                         {\r
  23                                 return new CKEDITOR.dom.element( name, editor.document );\r
  24                         };\r
  25 \r
  26                 var dialogadvtab = editor.plugins.dialogadvtab;\r
  27 \r
  28                 return {\r
  29                         title : editor.lang.table.title,\r
  30                         minWidth : 310,\r
  31                         minHeight : CKEDITOR.env.ie ? 310 : 280,\r
  32 \r
  33                         onLoad : function()\r
  34                         {\r
  35                                 var dialog = this,\r
  36                                         isUpdating;\r
  37 \r
  38                                 var styles = dialog.getContentElement( 'advanced', 'advStyles' );\r
  39 \r
  40                                 if ( styles )\r
  41                                 {\r
  42                                         styles.on( 'change', function( evt )\r
  43                                                 {\r
  44                                                         if ( isUpdating )\r
  45                                                                 return;\r
  46 \r
  47                                                         // Flag to avoid recursion.\r
  48                                                         isUpdating = 1;\r
  49 \r
  50                                                         // Synchronize width value.\r
  51                                                         var width = this.getStyle( 'width', '' ),\r
  52                                                                 txtWidth = dialog.getContentElement( 'info', 'txtWidth' ),\r
  53                                                                 cmbWidthType = dialog.getContentElement( 'info', 'cmbWidthType' ),\r
  54                                                                 isPx = 1;\r
  55 \r
  56                                                         if ( width )\r
  57                                                         {\r
  58                                                                 isPx = ( width.length < 3 || width.substr( width.length - 1 ) != '%' );\r
  59                                                                 width = parseInt( width, 10 );\r
  60                                                         }\r
  61 \r
  62                                                         txtWidth && txtWidth.setValue( width );\r
  63                                                         cmbWidthType && cmbWidthType.setValue( isPx ? 'pixels' : 'percents' );\r
  64 \r
  65                                                         // Synchronize height value.\r
  66                                                         var height = this.getStyle( 'height', '' ),\r
  67                                                                 txtHeight = dialog.getContentElement( 'info', 'txtHeight' );\r
  68 \r
  69                                                         height && ( height = parseInt( height, 10 ) );\r
  70                                                         txtHeight && txtHeight.setValue( height );\r
  71 \r
  72                                                         isUpdating = 0;\r
  73                                                 });\r
  74                                 }\r
  75                         },\r
  76 \r
  77                         onShow : function()\r
  78                         {\r
  79                                 // Detect if there's a selected table.\r
  80                                 var selection = editor.getSelection(),\r
  81                                         ranges = selection.getRanges(),\r
  82                                         selectedTable = null;\r
  83 \r
  84                                 var rowsInput = this.getContentElement( 'info', 'txtRows' ),\r
  85                                         colsInput = this.getContentElement( 'info', 'txtCols' ),\r
  86                                         widthInput = this.getContentElement( 'info', 'txtWidth' ),\r
  87                                         heightInput = this.getContentElement( 'info', 'txtHeight' );\r
  88 \r
  89                                 if ( command == 'tableProperties' )\r
  90                                 {\r
  91                                         if ( ( selectedTable = editor.getSelection().getSelectedElement() ) )\r
  92                                         {\r
  93                                                 if ( selectedTable.getName() != 'table' )\r
  94                                                         selectedTable = null;\r
  95                                         }\r
  96                                         else if ( ranges.length > 0 )\r
  97                                         {\r
  98                                                 // Webkit could report the following range on cell selection (#4948):\r
  99                                                 // <table><tr><td>[&nbsp;</td></tr></table>]\r
 100                                                 if ( CKEDITOR.env.webkit )\r
 101                                                         ranges[ 0 ].shrink( CKEDITOR.NODE_ELEMENT );\r
 102 \r
 103                                                 var rangeRoot = ranges[0].getCommonAncestor( true );\r
 104                                                 selectedTable = rangeRoot.getAscendant( 'table', true );\r
 105                                         }\r
 106 \r
 107                                         // Save a reference to the selected table, and push a new set of default values.\r
 108                                         this._.selectedElement = selectedTable;\r
 109                                 }\r
 110 \r
 111                                 // Enable, disable and select the row, cols, width fields.\r
 112                                 if ( selectedTable )\r
 113                                 {\r
 114                                         this.setupContent( selectedTable );\r
 115                                         rowsInput && rowsInput.disable();\r
 116                                         colsInput && colsInput.disable();\r
 117                                         widthInput && widthInput.select();\r
 118                                 }\r
 119                                 else\r
 120                                 {\r
 121                                         rowsInput && rowsInput.enable();\r
 122                                         colsInput && colsInput.enable();\r
 123                                         rowsInput && rowsInput.select();\r
 124                                 }\r
 125 \r
 126                                 // Call the onChange method for the widht and height fields so\r
 127                                 // they get reflected into the Advanced tab.\r
 128                                 widthInput && widthInput.onChange();\r
 129                                 heightInput && heightInput.onChange();\r
 130                         },\r
 131                         onOk : function()\r
 132                         {\r
 133                                 if ( this._.selectedElement )\r
 134                                 {\r
 135                                         var selection = editor.getSelection(),\r
 136                                                 bms = editor.getSelection().createBookmarks();\r
 137                                 }\r
 138 \r
 139                                 var table = this._.selectedElement || makeElement( 'table' ),\r
 140                                         me = this,\r
 141                                         data = {};\r
 142 \r
 143                                 this.commitContent( data, table );\r
 144 \r
 145                                 if ( data.info )\r
 146                                 {\r
 147                                         var info = data.info;\r
 148 \r
 149                                         // Generate the rows and cols.\r
 150                                         if ( !this._.selectedElement )\r
 151                                         {\r
 152                                                 var tbody = table.append( makeElement( 'tbody' ) ),\r
 153                                                         rows = parseInt( info.txtRows, 10 ) || 0,\r
 154                                                         cols = parseInt( info.txtCols, 10 ) || 0;\r
 155 \r
 156                                                 for ( var i = 0 ; i < rows ; i++ )\r
 157                                                 {\r
 158                                                         var row = tbody.append( makeElement( 'tr' ) );\r
 159                                                         for ( var j = 0 ; j < cols ; j++ )\r
 160                                                         {\r
 161                                                                 var cell = row.append( makeElement( 'td' ) );\r
 162                                                                 if ( !CKEDITOR.env.ie )\r
 163                                                                         cell.append( makeElement( 'br' ) );\r
 164                                                         }\r
 165                                                 }\r
 166                                         }\r
 167 \r
 168                                         // Modify the table headers. Depends on having rows and cols generated\r
 169                                         // correctly so it can't be done in commit functions.\r
 170 \r
 171                                         // Should we make a <thead>?\r
 172                                         var headers = info.selHeaders;\r
 173                                         if ( !table.$.tHead && ( headers == 'row' || headers == 'both' ) )\r
 174                                         {\r
 175                                                 var thead = new CKEDITOR.dom.element( table.$.createTHead() );\r
 176                                                 tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );\r
 177                                                 var theRow = tbody.getElementsByTag( 'tr' ).getItem( 0 );\r
 178 \r
 179                                                 // Change TD to TH:\r
 180                                                 for ( i = 0 ; i < theRow.getChildCount() ; i++ )\r
 181                                                 {\r
 182                                                         var th = theRow.getChild( i );\r
 183                                                         if ( th.type == CKEDITOR.NODE_ELEMENT )\r
 184                                                         {\r
 185                                                                 th.renameNode( 'th' );\r
 186                                                                 th.setAttribute( 'scope', 'col' );\r
 187                                                         }\r
 188                                                 }\r
 189                                                 thead.append( theRow.remove() );\r
 190                                         }\r
 191 \r
 192                                         if ( table.$.tHead !== null && !( headers == 'row' || headers == 'both' ) )\r
 193                                         {\r
 194                                                 // Move the row out of the THead and put it in the TBody:\r
 195                                                 thead = new CKEDITOR.dom.element( table.$.tHead );\r
 196                                                 tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );\r
 197 \r
 198                                                 var previousFirstRow = tbody.getFirst();\r
 199                                                 while ( thead.getChildCount() > 0 )\r
 200                                                 {\r
 201                                                         theRow = thead.getFirst();\r
 202                                                         for ( i = 0; i < theRow.getChildCount() ; i++ )\r
 203                                                         {\r
 204                                                                 var newCell = theRow.getChild( i );\r
 205                                                                 if ( newCell.type == CKEDITOR.NODE_ELEMENT )\r
 206                                                                 {\r
 207                                                                         newCell.renameNode( 'td' );\r
 208                                                                         newCell.removeAttribute( 'scope' );\r
 209                                                                 }\r
 210                                                         }\r
 211                                                         theRow.insertBefore( previousFirstRow );\r
 212                                                 }\r
 213                                                 thead.remove();\r
 214                                         }\r
 215 \r
 216                                         // Should we make all first cells in a row TH?\r
 217                                         if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) )\r
 218                                         {\r
 219                                                 for ( row = 0 ; row < table.$.rows.length ; row++ )\r
 220                                                 {\r
 221                                                         newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ 0 ] );\r
 222                                                         newCell.renameNode( 'th' );\r
 223                                                         newCell.setAttribute( 'scope', 'row' );\r
 224                                                 }\r
 225                                         }\r
 226 \r
 227                                         // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)\r
 228                                         if ( ( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' ) )\r
 229                                         {\r
 230                                                 for ( i = 0 ; i < table.$.rows.length ; i++ )\r
 231                                                 {\r
 232                                                         row = new CKEDITOR.dom.element( table.$.rows[i] );\r
 233                                                         if ( row.getParent().getName() == 'tbody' )\r
 234                                                         {\r
 235                                                                 newCell = new CKEDITOR.dom.element( row.$.cells[0] );\r
 236                                                                 newCell.renameNode( 'td' );\r
 237                                                                 newCell.removeAttribute( 'scope' );\r
 238                                                         }\r
 239                                                 }\r
 240                                         }\r
 241 \r
 242                                         // Set the width and height.\r
 243                                         var styles = [];\r
 244                                         if ( info.txtHeight )\r
 245                                                 table.setStyle( 'height', CKEDITOR.tools.cssLength( info.txtHeight ) );\r
 246                                         else\r
 247                                                 table.removeStyle( 'height' );\r
 248 \r
 249                                         if ( info.txtWidth )\r
 250                                         {\r
 251                                                 var type = info.cmbWidthType || 'pixels';\r
 252                                                 table.setStyle( 'width', info.txtWidth + ( type == 'pixels' ? 'px' : '%' ) );\r
 253                                         }\r
 254                                         else\r
 255                                                 table.removeStyle( 'width' );\r
 256 \r
 257                                         if ( !table.getAttribute( 'style' ) )\r
 258                                                 table.removeAttribute( 'style' );\r
 259                                 }\r
 260 \r
 261                                 // Insert the table element if we're creating one.\r
 262                                 if ( !this._.selectedElement )\r
 263                                         editor.insertElement( table );\r
 264                                 // Properly restore the selection inside table. (#4822)\r
 265                                 else\r
 266                                         selection.selectBookmarks( bms );\r
 267 \r
 268                                 return true;\r
 269                         },\r
 270                         contents : [\r
 271                                 {\r
 272                                         id : 'info',\r
 273                                         label : editor.lang.table.title,\r
 274                                         elements :\r
 275                                         [\r
 276                                                 {\r
 277                                                         type : 'hbox',\r
 278                                                         widths : [ null, null ],\r
 279                                                         styles : [ 'vertical-align:top' ],\r
 280                                                         children :\r
 281                                                         [\r
 282                                                                 {\r
 283                                                                         type : 'vbox',\r
 284                                                                         padding : 0,\r
 285                                                                         children :\r
 286                                                                         [\r
 287                                                                                 {\r
 288                                                                                         type : 'text',\r
 289                                                                                         id : 'txtRows',\r
 290                                                                                         'default' : 3,\r
 291                                                                                         label : editor.lang.table.rows,\r
 292                                                                                         required : true,\r
 293                                                                                         style : 'width:5em',\r
 294                                                                                         validate : function()\r
 295                                                                                         {\r
 296                                                                                                 var pass = true,\r
 297                                                                                                         value = this.getValue();\r
 298                                                                                                 pass = pass && CKEDITOR.dialog.validate.integer()( value )\r
 299                                                                                                         && value > 0;\r
 300                                                                                                 if ( !pass )\r
 301                                                                                                 {\r
 302                                                                                                         alert( editor.lang.table.invalidRows );\r
 303                                                                                                         this.select();\r
 304                                                                                                 }\r
 305                                                                                                 return pass;\r
 306                                                                                         },\r
 307                                                                                         setup : function( selectedElement )\r
 308                                                                                         {\r
 309                                                                                                 this.setValue( selectedElement.$.rows.length );\r
 310                                                                                         },\r
 311                                                                                         commit : commitValue\r
 312                                                                                 },\r
 313                                                                                 {\r
 314                                                                                         type : 'text',\r
 315                                                                                         id : 'txtCols',\r
 316                                                                                         'default' : 2,\r
 317                                                                                         label : editor.lang.table.columns,\r
 318                                                                                         required : true,\r
 319                                                                                         style : 'width:5em',\r
 320                                                                                         validate : function()\r
 321                                                                                         {\r
 322                                                                                                 var pass = true,\r
 323                                                                                                         value = this.getValue();\r
 324                                                                                                 pass = pass && CKEDITOR.dialog.validate.integer()( value )\r
 325                                                                                                         && value > 0;\r
 326                                                                                                 if ( !pass )\r
 327                                                                                                 {\r
 328                                                                                                         alert( editor.lang.table.invalidCols );\r
 329                                                                                                         this.select();\r
 330                                                                                                 }\r
 331                                                                                                 return pass;\r
 332                                                                                         },\r
 333                                                                                         setup : function( selectedTable )\r
 334                                                                                         {\r
 335                                                                                                 this.setValue( selectedTable.$.rows[0].cells.length);\r
 336                                                                                         },\r
 337                                                                                         commit : commitValue\r
 338                                                                                 },\r
 339                                                                                 {\r
 340                                                                                         type : 'html',\r
 341                                                                                         html : '&nbsp;'\r
 342                                                                                 },\r
 343                                                                                 {\r
 344                                                                                         type : 'select',\r
 345                                                                                         id : 'selHeaders',\r
 346                                                                                         'default' : '',\r
 347                                                                                         label : editor.lang.table.headers,\r
 348                                                                                         items :\r
 349                                                                                         [\r
 350                                                                                                 [ editor.lang.table.headersNone, '' ],\r
 351                                                                                                 [ editor.lang.table.headersRow, 'row' ],\r
 352                                                                                                 [ editor.lang.table.headersColumn, 'col' ],\r
 353                                                                                                 [ editor.lang.table.headersBoth, 'both' ]\r
 354                                                                                         ],\r
 355                                                                                         setup : function( selectedTable )\r
 356                                                                                         {\r
 357                                                                                                 // Fill in the headers field.\r
 358                                                                                                 var dialog = this.getDialog();\r
 359                                                                                                 dialog.hasColumnHeaders = true;\r
 360 \r
 361                                                                                                 // Check if all the first cells in every row are TH\r
 362                                                                                                 for ( var row = 0 ; row < selectedTable.$.rows.length ; row++ )\r
 363                                                                                                 {\r
 364                                                                                                         // If just one cell isn't a TH then it isn't a header column\r
 365                                                                                                         if ( selectedTable.$.rows[row].cells[0].nodeName.toLowerCase() != 'th' )\r
 366                                                                                                         {\r
 367                                                                                                                 dialog.hasColumnHeaders = false;\r
 368                                                                                                                 break;\r
 369                                                                                                         }\r
 370                                                                                                 }\r
 371 \r
 372                                                                                                 // Check if the table contains <thead>.\r
 373                                                                                                 if ( ( selectedTable.$.tHead !== null) )\r
 374                                                                                                         this.setValue( dialog.hasColumnHeaders ? 'both' : 'row' );\r
 375                                                                                                 else\r
 376                                                                                                         this.setValue( dialog.hasColumnHeaders ? 'col' : '' );\r
 377                                                                                         },\r
 378                                                                                         commit : commitValue\r
 379                                                                                 },\r
 380                                                                                 {\r
 381                                                                                         type : 'text',\r
 382                                                                                         id : 'txtBorder',\r
 383                                                                                         'default' : 1,\r
 384                                                                                         label : editor.lang.table.border,\r
 385                                                                                         style : 'width:3em',\r
 386                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidBorder ),\r
 387                                                                                         setup : function( selectedTable )\r
 388                                                                                         {\r
 389                                                                                                 this.setValue( selectedTable.getAttribute( 'border' ) || '' );\r
 390                                                                                         },\r
 391                                                                                         commit : function( data, selectedTable )\r
 392                                                                                         {\r
 393                                                                                                 if ( this.getValue() )\r
 394                                                                                                         selectedTable.setAttribute( 'border', this.getValue() );\r
 395                                                                                                 else\r
 396                                                                                                         selectedTable.removeAttribute( 'border' );\r
 397                                                                                         }\r
 398                                                                                 },\r
 399                                                                                 {\r
 400                                                                                         id : 'cmbAlign',\r
 401                                                                                         type : 'select',\r
 402                                                                                         'default' : '',\r
 403                                                                                         label : editor.lang.table.align,\r
 404                                                                                         items :\r
 405                                                                                         [\r
 406                                                                                                 [ editor.lang.common.notSet , ''],\r
 407                                                                                                 [ editor.lang.table.alignLeft , 'left'],\r
 408                                                                                                 [ editor.lang.table.alignCenter , 'center'],\r
 409                                                                                                 [ editor.lang.table.alignRight , 'right']\r
 410                                                                                         ],\r
 411                                                                                         setup : function( selectedTable )\r
 412                                                                                         {\r
 413                                                                                                 this.setValue( selectedTable.getAttribute( 'align' ) || '' );\r
 414                                                                                         },\r
 415                                                                                         commit : function( data, selectedTable )\r
 416                                                                                         {\r
 417                                                                                                 if ( this.getValue() )\r
 418                                                                                                         selectedTable.setAttribute( 'align', this.getValue() );\r
 419                                                                                                 else\r
 420                                                                                                         selectedTable.removeAttribute( 'align' );\r
 421                                                                                         }\r
 422                                                                                 }\r
 423                                                                         ]\r
 424                                                                 },\r
 425                                                                 {\r
 426                                                                         type : 'vbox',\r
 427                                                                         padding : 0,\r
 428                                                                         children :\r
 429                                                                         [\r
 430                                                                                 {\r
 431                                                                                         type : 'hbox',\r
 432                                                                                         widths : [ '5em' ],\r
 433                                                                                         children :\r
 434                                                                                         [\r
 435                                                                                                 {\r
 436                                                                                                         type : 'text',\r
 437                                                                                                         id : 'txtWidth',\r
 438                                                                                                         style : 'width:5em',\r
 439                                                                                                         label : editor.lang.table.width,\r
 440                                                                                                         'default' : 500,\r
 441                                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidWidth ),\r
 442 \r
 443                                                                                                         // Extra labelling of width unit type.\r
 444                                                                                                         onLoad : function()\r
 445                                                                                                         {\r
 446                                                                                                                 var widthType = this.getDialog().getContentElement( 'info', 'cmbWidthType' ),\r
 447                                                                                                                         labelElement = widthType.getElement(),\r
 448                                                                                                                         inputElement = this.getInputElement(),\r
 449                                                                                                                         ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );\r
 450 \r
 451                                                                                                                 inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );\r
 452                                                                                                         },\r
 453 \r
 454                                                                                                         onChange : function()\r
 455                                                                                                         {\r
 456                                                                                                                 var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
 457 \r
 458                                                                                                                 if ( styles )\r
 459                                                                                                                 {\r
 460                                                                                                                         var value = this.getValue();\r
 461 \r
 462                                                                                                                         if ( value )\r
 463                                                                                                                                 value += this.getDialog().getContentElement( 'info', 'cmbWidthType' ).getValue() == 'percents' ? '%' : 'px';\r
 464 \r
 465                                                                                                                         styles.updateStyle( 'width', value );\r
 466                                                                                                                 }\r
 467                                                                                                         },\r
 468 \r
 469                                                                                                         setup : function( selectedTable )\r
 470                                                                                                         {\r
 471                                                                                                                 var widthMatch = widthPattern.exec( selectedTable.$.style.width );\r
 472                                                                                                                 if ( widthMatch )\r
 473                                                                                                                         this.setValue( widthMatch[1] );\r
 474                                                                                                                 else\r
 475                                                                                                                         this.setValue( '' );\r
 476                                                                                                         },\r
 477                                                                                                         commit : commitValue\r
 478                                                                                                 },\r
 479                                                                                                 {\r
 480                                                                                                         id : 'cmbWidthType',\r
 481                                                                                                         type : 'select',\r
 482                                                                                                         label : editor.lang.table.widthUnit,\r
 483                                                                                                         labelStyle: 'visibility:hidden',\r
 484                                                                                                         'default' : 'pixels',\r
 485                                                                                                         items :\r
 486                                                                                                         [\r
 487                                                                                                                 [ editor.lang.table.widthPx , 'pixels'],\r
 488                                                                                                                 [ editor.lang.table.widthPc , 'percents']\r
 489                                                                                                         ],\r
 490                                                                                                         setup : function( selectedTable )\r
 491                                                                                                         {\r
 492                                                                                                                 var widthMatch = widthPattern.exec( selectedTable.$.style.width );\r
 493                                                                                                                 if ( widthMatch )\r
 494                                                                                                                         this.setValue( widthMatch[2] == 'px' ? 'pixels' : 'percents' );\r
 495                                                                                                         },\r
 496                                                                                                         onChange : function()\r
 497                                                                                                         {\r
 498                                                                                                                 this.getDialog().getContentElement( 'info', 'txtWidth' ).onChange();\r
 499                                                                                                         },\r
 500                                                                                                         commit : commitValue\r
 501                                                                                                 }\r
 502                                                                                         ]\r
 503                                                                                 },\r
 504                                                                                 {\r
 505                                                                                         type : 'hbox',\r
 506                                                                                         widths : [ '5em' ],\r
 507                                                                                         children :\r
 508                                                                                         [\r
 509                                                                                                 {\r
 510                                                                                                         type : 'text',\r
 511                                                                                                         id : 'txtHeight',\r
 512                                                                                                         style : 'width:5em',\r
 513                                                                                                         label : editor.lang.table.height,\r
 514                                                                                                         'default' : '',\r
 515                                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidHeight ),\r
 516 \r
 517                                                                                                         // Extra labelling of height unit type.\r
 518                                                                                                         onLoad : function()\r
 519                                                                                                         {\r
 520                                                                                                                 var heightType = this.getDialog().getContentElement( 'info', 'htmlHeightType' ),\r
 521                                                                                                                         labelElement = heightType.getElement(),\r
 522                                                                                                                         inputElement = this.getInputElement(),\r
 523                                                                                                                         ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );\r
 524 \r
 525                                                                                                                 inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );\r
 526                                                                                                         },\r
 527 \r
 528                                                                                                         onChange : function()\r
 529                                                                                                         {\r
 530                                                                                                                 var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
 531 \r
 532                                                                                                                 if ( styles )\r
 533                                                                                                                 {\r
 534                                                                                                                         var value = this.getValue();\r
 535                                                                                                                         styles.updateStyle( 'height', value && ( value + 'px' ) );\r
 536                                                                                                                 }\r
 537                                                                                                         },\r
 538 \r
 539                                                                                                         setup : function( selectedTable )\r
 540                                                                                                         {\r
 541                                                                                                                 var heightMatch = heightPattern.exec( selectedTable.$.style.height );\r
 542                                                                                                                 if ( heightMatch )\r
 543                                                                                                                         this.setValue( heightMatch[1] );\r
 544                                                                                                         },\r
 545                                                                                                         commit : commitValue\r
 546                                                                                                 },\r
 547                                                                                                 {\r
 548                                                                                                         id : 'htmlHeightType',\r
 549                                                                                                         type : 'html',\r
 550                                                                                                         html : '<div><br />' + editor.lang.table.widthPx + '</div>'\r
 551                                                                                                 }\r
 552                                                                                         ]\r
 553                                                                                 },\r
 554                                                                                 {\r
 555                                                                                         type : 'html',\r
 556                                                                                         html : '&nbsp;'\r
 557                                                                                 },\r
 558                                                                                 {\r
 559                                                                                         type : 'text',\r
 560                                                                                         id : 'txtCellSpace',\r
 561                                                                                         style : 'width:3em',\r
 562                                                                                         label : editor.lang.table.cellSpace,\r
 563                                                                                         'default' : 1,\r
 564                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellSpacing ),\r
 565                                                                                         setup : function( selectedTable )\r
 566                                                                                         {\r
 567                                                                                                 this.setValue( selectedTable.getAttribute( 'cellSpacing' ) || '' );\r
 568                                                                                         },\r
 569                                                                                         commit : function( data, selectedTable )\r
 570                                                                                         {\r
 571                                                                                                 if ( this.getValue() )\r
 572                                                                                                         selectedTable.setAttribute( 'cellSpacing', this.getValue() );\r
 573                                                                                                 else\r
 574                                                                                                         selectedTable.removeAttribute( 'cellSpacing' );\r
 575                                                                                         }\r
 576                                                                                 },\r
 577                                                                                 {\r
 578                                                                                         type : 'text',\r
 579                                                                                         id : 'txtCellPad',\r
 580                                                                                         style : 'width:3em',\r
 581                                                                                         label : editor.lang.table.cellPad,\r
 582                                                                                         'default' : 1,\r
 583                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellPadding ),\r
 584                                                                                         setup : function( selectedTable )\r
 585                                                                                         {\r
 586                                                                                                 this.setValue( selectedTable.getAttribute( 'cellPadding' ) || '' );\r
 587                                                                                         },\r
 588                                                                                         commit : function( data, selectedTable )\r
 589                                                                                         {\r
 590                                                                                                 if ( this.getValue() )\r
 591                                                                                                         selectedTable.setAttribute( 'cellPadding', this.getValue() );\r
 592                                                                                                 else\r
 593                                                                                                         selectedTable.removeAttribute( 'cellPadding' );\r
 594                                                                                         }\r
 595                                                                                 }\r
 596                                                                         ]\r
 597                                                                 }\r
 598                                                         ]\r
 599                                                 },\r
 600                                                 {\r
 601                                                         type : 'html',\r
 602                                                         align : 'right',\r
 603                                                         html : ''\r
 604                                                 },\r
 605                                                 {\r
 606                                                         type : 'vbox',\r
 607                                                         padding : 0,\r
 608                                                         children :\r
 609                                                         [\r
 610                                                                 {\r
 611                                                                         type : 'text',\r
 612                                                                         id : 'txtCaption',\r
 613                                                                         label : editor.lang.table.caption,\r
 614                                                                         setup : function( selectedTable )\r
 615                                                                         {\r
 616                                                                                 var nodeList = selectedTable.getElementsByTag( 'caption' );\r
 617                                                                                 if ( nodeList.count() > 0 )\r
 618                                                                                 {\r
 619                                                                                         var caption = nodeList.getItem( 0 );\r
 620                                                                                         caption = ( caption.getChild( 0 ) && caption.getChild( 0 ).getText() ) || '';\r
 621                                                                                         caption = CKEDITOR.tools.trim( caption );\r
 622                                                                                         this.setValue( caption );\r
 623                                                                                 }\r
 624                                                                         },\r
 625                                                                         commit : function( data, table )\r
 626                                                                         {\r
 627                                                                                 var caption = this.getValue(),\r
 628                                                                                         captionElement = table.getElementsByTag( 'caption' );\r
 629                                                                                 if ( caption )\r
 630                                                                                 {\r
 631                                                                                         if ( captionElement.count() > 0 )\r
 632                                                                                         {\r
 633                                                                                                 captionElement = captionElement.getItem( 0 );\r
 634                                                                                                 captionElement.setHtml( '' );\r
 635                                                                                         }\r
 636                                                                                         else\r
 637                                                                                         {\r
 638                                                                                                 captionElement = new CKEDITOR.dom.element( 'caption', editor.document );\r
 639                                                                                                 if ( table.getChildCount() )\r
 640                                                                                                         captionElement.insertBefore( table.getFirst() );\r
 641                                                                                                 else\r
 642                                                                                                         captionElement.appendTo( table );\r
 643                                                                                         }\r
 644                                                                                         captionElement.append( new CKEDITOR.dom.text( caption, editor.document ) );\r
 645                                                                                 }\r
 646                                                                                 else if ( captionElement.count() > 0 )\r
 647                                                                                 {\r
 648                                                                                         for ( var i = captionElement.count() - 1 ; i >= 0 ; i-- )\r
 649                                                                                                 captionElement.getItem( i ).remove();\r
 650                                                                                 }\r
 651                                                                         }\r
 652                                                                 },\r
 653                                                                 {\r
 654                                                                         type : 'text',\r
 655                                                                         id : 'txtSummary',\r
 656                                                                         label : editor.lang.table.summary,\r
 657                                                                         setup : function( selectedTable )\r
 658                                                                         {\r
 659                                                                                 this.setValue( selectedTable.getAttribute( 'summary' ) || '' );\r
 660                                                                         },\r
 661                                                                         commit : function( data, selectedTable )\r
 662                                                                         {\r
 663                                                                                 if ( this.getValue() )\r
 664                                                                                         selectedTable.setAttribute( 'summary', this.getValue() );\r
 665                                                                                 else\r
 666                                                                                         selectedTable.removeAttribute( 'summary' );\r
 667                                                                         }\r
 668                                                                 }\r
 669                                                         ]\r
 670                                                 }\r
 671                                         ]\r
 672                                 },\r
 673                                 dialogadvtab && dialogadvtab.createAdvancedTab( editor )\r
 674                         ]\r
 675                 };\r
 676         }\r
 677 \r
 678         CKEDITOR.dialog.add( 'table', function( editor )\r
 679                 {\r
 680                         return tableDialog( editor, 'table' );\r
 681                 } );\r
 682         CKEDITOR.dialog.add( 'tableProperties', function( editor )\r
 683                 {\r
 684                         return tableDialog( editor, 'tableProperties' );\r
 685                 } );\r
 686 })();\r