2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 CKEDITOR.dialog.add( 'cellProperties', function( editor )
\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
18 return { type : 'html', html : ' ' };
\r
22 title : langCell.title,
\r
28 label : langCell.title,
\r
34 widths : [ '45%', '10%', '45%' ],
\r
44 widths : [ '70%', '30%' ],
\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
56 var widthMatch = widthPattern.exec( selectedCell.$.style.width );
\r
58 this.setValue( widthMatch[1] );
\r
60 commit : function( selectedCell )
\r
62 var unit = this.getDialog().getValueOf( 'info', 'widthType' );
\r
63 if ( this.getValue() !== '' )
\r
64 selectedCell.$.style.width = this.getValue() + unit;
\r
66 selectedCell.$.style.width = '';
\r
73 labelLayout : 'horizontal',
\r
74 widths : [ '0%', '100%' ],
\r
79 [ langTable.widthPx, 'px' ],
\r
80 [ langTable.widthPc, '%' ]
\r
82 setup : function( selectedCell )
\r
84 var widthMatch = widthPattern.exec( selectedCell.$.style.width );
\r
86 this.setValue( widthMatch[2] );
\r
93 widths : [ '70%', '30%' ],
\r
99 label : langTable.height,
\r
101 widths : [ '71%', '29%' ],
\r
102 labelLayout : 'horizontal',
\r
103 validate : validate[ 'number' ]( langCell.invalidHeight ),
\r
104 setup : function( selectedCell )
\r
106 var heightMatch = heightPattern.exec( selectedCell.$.style.height );
\r
108 this.setValue( heightMatch[1] );
\r
110 commit : function( selectedCell )
\r
112 if ( this.getValue() !== '' )
\r
113 selectedCell.$.style.height = this.getValue() + 'px';
\r
115 selectedCell.$.style.height = '';
\r
120 html : langTable.widthPx
\r
128 labelLayout : 'horizontal',
\r
129 label : langCell.wordWrap,
\r
130 widths : [ '50%', '50%' ],
\r
134 [ langCell.yes, 'yes' ],
\r
135 [ langCell.no, 'no' ]
\r
137 commit : function( selectedCell )
\r
139 if ( this.getValue() == 'no' )
\r
140 selectedCell.setAttribute( 'noWrap', 'nowrap' );
\r
142 selectedCell.removeAttribute( 'noWrap' );
\r
149 labelLayout : 'horizontal',
\r
150 label : langCell.hAlign,
\r
151 widths : [ '50%', '50%' ],
\r
155 [ langCommon.notSet, '' ],
\r
156 [ langTable.alignLeft, 'left' ],
\r
157 [ langTable.alignCenter, 'center' ],
\r
158 [ langTable.alignRight, 'right' ]
\r
160 setup : function( selectedCell )
\r
162 this.setValue( selectedCell.getAttribute( 'align' ) || '' );
\r
164 commit : function( selectedCell )
\r
166 if ( this.getValue() )
\r
167 selectedCell.setAttribute( 'align', this.getValue() );
\r
169 selectedCell.removeAttribute( 'align' );
\r
175 labelLayout : 'horizontal',
\r
176 label : langCell.vAlign,
\r
177 widths : [ '50%', '50%' ],
\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
187 setup : function( selectedCell )
\r
189 this.setValue( selectedCell.getAttribute( 'vAlign' ) || '' );
\r
191 commit : function( selectedCell )
\r
193 if ( this.getValue() )
\r
194 selectedCell.setAttribute( 'vAlign', this.getValue() );
\r
196 selectedCell.removeAttribute( 'vAlign' );
\r
210 label : langCell.cellType,
\r
211 labelLayout : 'horizontal',
\r
212 widths : [ '50%', '50%' ],
\r
216 [ langCell.data, 'td' ],
\r
217 [ langCell.header, 'th' ]
\r
219 setup : function( selectedCell )
\r
221 this.setValue( selectedCell.getName() );
\r
223 commit : function( selectedCell )
\r
225 selectedCell.renameNode( this.getValue() );
\r
232 label : langCell.rowSpan,
\r
233 labelLayout : 'horizontal',
\r
234 widths : [ '50%', '50%' ],
\r
236 validate : validate.integer( langCell.invalidRowSpan ),
\r
237 setup : function( selectedCell )
\r
239 this.setValue( selectedCell.getAttribute( 'rowSpan' ) || '' );
\r
241 commit : function( selectedCell )
\r
243 if ( this.getValue() )
\r
244 selectedCell.setAttribute( 'rowSpan', this.getValue() );
\r
246 selectedCell.removeAttribute( 'rowSpan' );
\r
252 label : langCell.colSpan,
\r
253 labelLayout : 'horizontal',
\r
254 widths : [ '50%', '50%' ],
\r
256 validate : validate.integer( langCell.invalidColSpan ),
\r
257 setup : function( selectedCell )
\r
259 this.setValue( selectedCell.getAttribute( 'colSpan' ) || '' );
\r
261 commit : function( selectedCell )
\r
263 if ( this.getValue() )
\r
264 selectedCell.setAttribute( 'colSpan', this.getValue() );
\r
266 selectedCell.removeAttribute( 'colSpan' );
\r
273 label : langCell.bgColor,
\r
274 labelLayout : 'horizontal',
\r
275 widths : [ '50%', '50%' ],
\r
277 setup : function( selectedCell )
\r
279 this.setValue( selectedCell.getAttribute( 'bgColor' ) || '' );
\r
281 commit : function( selectedCell )
\r
283 if ( this.getValue() )
\r
284 selectedCell.setAttribute( 'bgColor', this.getValue() );
\r
286 selectedCell.removeAttribute( 'bgColor' );
\r
291 id : 'borderColor',
\r
292 label : langCell.borderColor,
\r
293 labelLayout : 'horizontal',
\r
294 widths : [ '50%', '50%' ],
\r
296 setup : function( selectedCell )
\r
298 this.setValue( selectedCell.getAttribute( 'borderColor' ) || '' );
\r
300 commit : function( selectedCell )
\r
302 if ( this.getValue() )
\r
303 selectedCell.setAttribute( 'borderColor', this.getValue() );
\r
305 selectedCell.removeAttribute( 'borderColor' );
\r
315 onShow : function()
\r
317 this.cells = CKEDITOR.plugins.tabletools.getSelectedCells(
\r
318 this._.editor.getSelection() );
\r
319 this.setupContent( this.cells[ 0 ] );
\r
323 var cells = this.cells;
\r
324 for ( var i = 0 ; i < cells.length ; i++ )
\r
325 this.commitContent( cells[ i ] );
\r