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