_source/plugins/tabletools/dialogs/tableCell.js

   1 /*\r
   2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 CKEDITOR.dialog.add( 'cellProperties', function( editor )\r
   7         {\r
   8                 var langTable = editor.lang.table;\r
   9                 var langCell = langTable.cell;\r
  10                 var langCommon = editor.lang.common;\r
  11                 var validate = CKEDITOR.dialog.validate;\r
  12                 var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,\r
  13                         heightPattern = /^(\d+(?:\.\d+)?)px$/;\r
  14                 var bind = CKEDITOR.tools.bind;\r
  15 \r
  16                 function spacer()\r
  17                 {\r
  18                         return { type : 'html', html : '&nbsp;' };\r
  19                 }\r
  20 \r
  21                 return {\r
  22                         title : langCell.title,\r
  23                         minWidth : 480,\r
  24                         minHeight : 140,\r
  25                         contents : [\r
  26                                 {\r
  27                                         id : 'info',\r
  28                                         label : langCell.title,\r
  29                                         accessKey : 'I',\r
  30                                         elements :\r
  31                                         [\r
  32                                                 {\r
  33                                                         type : 'hbox',\r
  34                                                         widths : [ '45%', '10%', '45%' ],\r
  35                                                         children :\r
  36                                                         [\r
  37                                                                 {\r
  38                                                                         type : 'vbox',\r
  39                                                                         padding : 0,\r
  40                                                                         children :\r
  41                                                                         [\r
  42                                                                                 {\r
  43                                                                                         type : 'hbox',\r
  44                                                                                         widths : [ '70%', '30%' ],\r
  45                                                                                         children :\r
  46                                                                                         [\r
  47                                                                                                 {\r
  48                                                                                                         type : 'text',\r
  49                                                                                                         id : 'width',\r
  50                                                                                                         label : langTable.width,\r
  51                                                                                                         widths : [ '71%', '29%' ],\r
  52                                                                                                         labelLayout : 'horizontal',\r
  53                                                                                                         validate : validate[ 'number' ]( langCell.invalidWidth ),\r
  54                                                                                                         setup : function( selectedCell )\r
  55                                                                                                         {\r
  56                                                                                                                 var widthMatch = widthPattern.exec( selectedCell.$.style.width );\r
  57                                                                                                                 if ( widthMatch )\r
  58                                                                                                                         this.setValue( widthMatch[1] );\r
  59                                                                                                         },\r
  60                                                                                                         commit : function( selectedCell )\r
  61                                                                                                         {\r
  62                                                                                                                 var unit = this.getDialog().getValueOf( 'info', 'widthType' );\r
  63                                                                                                                 if ( this.getValue() !== '' )\r
  64                                                                                                                         selectedCell.$.style.width = this.getValue() + unit;\r
  65                                                                                                                 else\r
  66                                                                                                                         selectedCell.$.style.width = '';\r
  67                                                                                                         },\r
  68                                                                                                         'default' : ''\r
  69                                                                                                 },\r
  70                                                                                                 {\r
  71                                                                                                         type : 'select',\r
  72                                                                                                         id : 'widthType',\r
  73                                                                                                         labelLayout : 'horizontal',\r
  74                                                                                                         widths : [ '0%', '100%' ],\r
  75                                                                                                         label : '',\r
  76                                                                                                         'default' : 'px',\r
  77                                                                                                         items :\r
  78                                                                                                         [\r
  79                                                                                                                 [ langTable.widthPx, 'px' ],\r
  80                                                                                                                 [ langTable.widthPc, '%' ]\r
  81                                                                                                         ],\r
  82                                                                                                         setup : function( selectedCell )\r
  83                                                                                                         {\r
  84                                                                                                                 var widthMatch = widthPattern.exec( selectedCell.$.style.width );\r
  85                                                                                                                 if ( widthMatch )\r
  86                                                                                                                         this.setValue( widthMatch[2] );\r
  87                                                                                                         }\r
  88                                                                                                 }\r
  89                                                                                         ]\r
  90                                                                                 },\r
  91                                                                                 {\r
  92                                                                                         type : 'hbox',\r
  93                                                                                         widths : [ '70%', '30%' ],\r
  94                                                                                         children :\r
  95                                                                                         [\r
  96                                                                                                 {\r
  97                                                                                                         type : 'text',\r
  98                                                                                                         id : 'height',\r
  99                                                                                                         label : langTable.height,\r
 100                                                                                                         'default' : '',\r
 101                                                                                                         widths : [ '71%', '29%' ],\r
 102                                                                                                         labelLayout : 'horizontal',\r
 103                                                                                                         validate : validate[ 'number' ]( langCell.invalidHeight ),\r
 104                                                                                                         setup : function( selectedCell )\r
 105                                                                                                         {\r
 106                                                                                                                 var heightMatch = heightPattern.exec( selectedCell.$.style.height );\r
 107                                                                                                                 if ( heightMatch )\r
 108                                                                                                                         this.setValue( heightMatch[1] );\r
 109                                                                                                         },\r
 110                                                                                                         commit : function( selectedCell )\r
 111                                                                                                         {\r
 112                                                                                                                 if ( this.getValue() !== '' )\r
 113                                                                                                                         selectedCell.$.style.height = this.getValue() + 'px';\r
 114                                                                                                                 else\r
 115                                                                                                                         selectedCell.$.style.height = '';\r
 116                                                                                                         }\r
 117                                                                                                 },\r
 118                                                                                                 {\r
 119                                                                                                         type : 'html',\r
 120                                                                                                         html : langTable.widthPx\r
 121                                                                                                 }\r
 122                                                                                         ]\r
 123                                                                                 },\r
 124                                                                                 spacer(),\r
 125                                                                                 {\r
 126                                                                                         type : 'select',\r
 127                                                                                         id : 'wordWrap',\r
 128                                                                                         labelLayout : 'horizontal',\r
 129                                                                                         label : langCell.wordWrap,\r
 130                                                                                         widths : [ '50%', '50%' ],\r
 131                                                                                         'default' : 'yes',\r
 132                                                                                         items :\r
 133                                                                                         [\r
 134                                                                                                 [ langCell.yes, 'yes' ],\r
 135                                                                                                 [ langCell.no, 'no' ]\r
 136                                                                                         ],\r
 137                                                                                         commit : function( selectedCell )\r
 138                                                                                         {\r
 139                                                                                                 if ( this.getValue() == 'no' )\r
 140                                                                                                         selectedCell.setAttribute( 'noWrap', 'nowrap' );\r
 141                                                                                                 else\r
 142                                                                                                         selectedCell.removeAttribute( 'noWrap' );\r
 143                                                                                         }\r
 144                                                                                 },\r
 145                                                                                 spacer(),\r
 146                                                                                 {\r
 147                                                                                         type : 'select',\r
 148                                                                                         id : 'hAlign',\r
 149                                                                                         labelLayout : 'horizontal',\r
 150                                                                                         label : langCell.hAlign,\r
 151                                                                                         widths : [ '50%', '50%' ],\r
 152                                                                                         'default' : '',\r
 153                                                                                         items :\r
 154                                                                                         [\r
 155                                                                                                 [ langCommon.notSet, '' ],\r
 156                                                                                                 [ langTable.alignLeft, 'left' ],\r
 157                                                                                                 [ langTable.alignCenter, 'center' ],\r
 158                                                                                                 [ langTable.alignRight, 'right' ]\r
 159                                                                                         ],\r
 160                                                                                         setup : function( selectedCell )\r
 161                                                                                         {\r
 162                                                                                                 this.setValue( selectedCell.getAttribute( 'align' ) || '' );\r
 163                                                                                         },\r
 164                                                                                         commit : function( selectedCell )\r
 165                                                                                         {\r
 166                                                                                                 if ( this.getValue() )\r
 167                                                                                                         selectedCell.setAttribute( 'align', this.getValue() );\r
 168                                                                                                 else\r
 169                                                                                                         selectedCell.removeAttribute( 'align' );\r
 170                                                                                         }\r
 171                                                                                 },\r
 172                                                                                 {\r
 173                                                                                         type : 'select',\r
 174                                                                                         id : 'vAlign',\r
 175                                                                                         labelLayout : 'horizontal',\r
 176                                                                                         label : langCell.vAlign,\r
 177                                                                                         widths : [ '50%', '50%' ],\r
 178                                                                                         'default' : '',\r
 179                                                                                         items :\r
 180                                                                                         [\r
 181                                                                                                 [ langCommon.notSet, '' ],\r
 182                                                                                                 [ langCell.alignTop, 'top' ],\r
 183                                                                                                 [ langCell.alignMiddle, 'middle' ],\r
 184                                                                                                 [ langCell.alignBottom, 'bottom' ],\r
 185                                                                                                 [ langCell.alignBaseline, 'baseline' ]\r
 186                                                                                         ],\r
 187                                                                                         setup : function( selectedCell )\r
 188                                                                                         {\r
 189                                                                                                 this.setValue( selectedCell.getAttribute( 'vAlign' ) || '' );\r
 190                                                                                         },\r
 191                                                                                         commit : function( selectedCell )\r
 192                                                                                         {\r
 193                                                                                                 if ( this.getValue() )\r
 194                                                                                                         selectedCell.setAttribute( 'vAlign', this.getValue() );\r
 195                                                                                                 else\r
 196                                                                                                         selectedCell.removeAttribute( 'vAlign' );\r
 197                                                                                         }\r
 198                                                                                 }\r
 199                                                                         ]\r
 200                                                                 },\r
 201                                                                 spacer(),\r
 202                                                                 {\r
 203                                                                         type : 'vbox',\r
 204                                                                         padding : 0,\r
 205                                                                         children :\r
 206                                                                         [\r
 207                                                                                 {\r
 208                                                                                         type : 'select',\r
 209                                                                                         id : 'cellType',\r
 210                                                                                         label : langCell.cellType,\r
 211                                                                                         labelLayout : 'horizontal',\r
 212                                                                                         widths : [ '50%', '50%' ],\r
 213                                                                                         'default' : 'td',\r
 214                                                                                         items :\r
 215                                                                                         [\r
 216                                                                                                 [ langCell.data, 'td' ],\r
 217                                                                                                 [ langCell.header, 'th' ]\r
 218                                                                                         ],\r
 219                                                                                         setup : function( selectedCell )\r
 220                                                                                         {\r
 221                                                                                                 this.setValue( selectedCell.getName() );\r
 222                                                                                         },\r
 223                                                                                         commit : function( selectedCell )\r
 224                                                                                         {\r
 225                                                                                                 selectedCell.renameNode( this.getValue() );\r
 226                                                                                         }\r
 227                                                                                 },\r
 228                                                                                 spacer(),\r
 229                                                                                 {\r
 230                                                                                         type : 'text',\r
 231                                                                                         id : 'rowSpan',\r
 232                                                                                         label : langCell.rowSpan,\r
 233                                                                                         labelLayout : 'horizontal',\r
 234                                                                                         widths : [ '50%', '50%' ],\r
 235                                                                                         'default' : '',\r
 236                                                                                         validate : validate.integer( langCell.invalidRowSpan ),\r
 237                                                                                         setup : function( selectedCell )\r
 238                                                                                         {\r
 239                                                                                                 this.setValue( selectedCell.getAttribute( 'rowSpan' ) || '' );\r
 240                                                                                         },\r
 241                                                                                         commit : function( selectedCell )\r
 242                                                                                         {\r
 243                                                                                                 if ( this.getValue() )\r
 244                                                                                                         selectedCell.setAttribute( 'rowSpan', this.getValue() );\r
 245                                                                                                 else\r
 246                                                                                                         selectedCell.removeAttribute( 'rowSpan' );\r
 247                                                                                         }\r
 248                                                                                 },\r
 249                                                                                 {\r
 250                                                                                         type : 'text',\r
 251                                                                                         id : 'colSpan',\r
 252                                                                                         label : langCell.colSpan,\r
 253                                                                                         labelLayout : 'horizontal',\r
 254                                                                                         widths : [ '50%', '50%' ],\r
 255                                                                                         'default' : '',\r
 256                                                                                         validate : validate.integer( langCell.invalidColSpan ),\r
 257                                                                                         setup : function( selectedCell )\r
 258                                                                                         {\r
 259                                                                                                 this.setValue( selectedCell.getAttribute( 'colSpan' ) || '' );\r
 260                                                                                         },\r
 261                                                                                         commit : function( selectedCell )\r
 262                                                                                         {\r
 263                                                                                                 if ( this.getValue() )\r
 264                                                                                                         selectedCell.setAttribute( 'colSpan', this.getValue() );\r
 265                                                                                                 else\r
 266                                                                                                         selectedCell.removeAttribute( 'colSpan' );\r
 267                                                                                         }\r
 268                                                                                 },\r
 269                                                                                 spacer(),\r
 270                                                                                 {\r
 271                                                                                         type : 'text',\r
 272                                                                                         id : 'bgColor',\r
 273                                                                                         label : langCell.bgColor,\r
 274                                                                                         labelLayout : 'horizontal',\r
 275                                                                                         widths : [ '50%', '50%' ],\r
 276                                                                                         'default' : '',\r
 277                                                                                         setup : function( selectedCell )\r
 278                                                                                         {\r
 279                                                                                                 this.setValue( selectedCell.getAttribute( 'bgColor' ) || '' );\r
 280                                                                                         },\r
 281                                                                                         commit : function( selectedCell )\r
 282                                                                                         {\r
 283                                                                                                 if ( this.getValue() )\r
 284                                                                                                         selectedCell.setAttribute( 'bgColor', this.getValue() );\r
 285                                                                                                 else\r
 286                                                                                                         selectedCell.removeAttribute( 'bgColor' );\r
 287                                                                                         }\r
 288                                                                                 },\r
 289                                                                                 {\r
 290                                                                                         type : 'text',\r
 291                                                                                         id : 'borderColor',\r
 292                                                                                         label : langCell.borderColor,\r
 293                                                                                         labelLayout : 'horizontal',\r
 294                                                                                         widths : [ '50%', '50%' ],\r
 295                                                                                         'default' : '',\r
 296                                                                                         setup : function( selectedCell )\r
 297                                                                                         {\r
 298                                                                                                 this.setValue( selectedCell.getAttribute( 'borderColor' ) || '' );\r
 299                                                                                         },\r
 300                                                                                         commit : function( selectedCell )\r
 301                                                                                         {\r
 302                                                                                                 if ( this.getValue() )\r
 303                                                                                                         selectedCell.setAttribute( 'borderColor', this.getValue() );\r
 304                                                                                                 else\r
 305                                                                                                         selectedCell.removeAttribute( 'borderColor' );\r
 306                                                                                         }\r
 307                                                                                 }\r
 308                                                                         ]\r
 309                                                                 }\r
 310                                                         ]\r
 311                                                 }\r
 312                                         ]\r
 313                                 }\r
 314                         ],\r
 315                         onShow : function()\r
 316                         {\r
 317                                 this.cells = CKEDITOR.plugins.tabletools.getSelectedCells(\r
 318                                         this._.editor.getSelection() );\r
 319                                 this.setupContent( this.cells[ 0 ] );\r
 320                         },\r
 321                         onOk : function()\r
 322                         {\r
 323                                 var cells = this.cells;\r
 324                                 for ( var i = 0 ; i < cells.length ; i++ )\r
 325                                         this.commitContent( cells[ i ] );\r
 326                         }\r
 327                 };\r
 328         } );\r