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