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
24 * @param callback [ childDialog ]
\r
26 function getDialogValue( dialogName, callback )
\r
28 var onOk = function()
\r
30 releaseHandlers( this );
\r
33 var onCancel = function()
\r
35 releaseHandlers( this );
\r
37 var bindToDialog = function( dialog )
\r
39 dialog.on( 'ok', onOk );
\r
40 dialog.on( 'cancel', onCancel );
\r
42 var releaseHandlers = function( dialog )
\r
44 dialog.removeListener( 'ok', onOk );
\r
45 dialog.removeListener( 'cancel', onCancel );
\r
47 editor.execCommand( dialogName );
\r
48 if ( editor._.storedDialogs.colordialog )
\r
49 bindToDialog( editor._.storedDialogs.colordialog );
\r
52 CKEDITOR.on( 'dialogDefinition', function( e )
\r
54 if ( e.data.name != dialogName )
\r
57 var definition = e.data.definition;
\r
60 definition.onLoad = CKEDITOR.tools.override( definition.onLoad, function( orginal )
\r
64 bindToDialog( this );
\r
65 definition.onLoad = orginal;
\r
66 if ( typeof orginal == 'function' )
\r
67 orginal.call( this );
\r
75 title : langCell.title,
\r
76 minWidth : CKEDITOR.env.ie && CKEDITOR.env.quirks ? 550 : 480,
\r
77 minHeight : CKEDITOR.env.ie ? ( CKEDITOR.env.quirks ? 180 : 150 ) : 140,
\r
81 label : langCell.title,
\r
87 widths : [ '40%', '5%', '40%' ],
\r
97 widths : [ '70%', '30%' ],
\r
103 label : langTable.width,
\r
104 widths : [ '71%', '29%' ],
\r
105 labelLayout : 'horizontal',
\r
106 validate : validate[ 'number' ]( langCell.invalidWidth ),
\r
107 setup : function( selectedCell )
\r
109 var widthMatch = widthPattern.exec( selectedCell.$.style.width );
\r
111 this.setValue( widthMatch[1] );
\r
113 commit : function( selectedCell )
\r
115 var unit = this.getDialog().getValueOf( 'info', 'widthType' );
\r
116 if ( this.getValue() !== '' )
\r
117 selectedCell.$.style.width = this.getValue() + unit;
\r
119 selectedCell.$.style.width = '';
\r
126 labelLayout : 'horizontal',
\r
127 widths : [ '0%', '100%' ],
\r
132 [ langTable.widthPx, 'px' ],
\r
133 [ langTable.widthPc, '%' ]
\r
135 setup : function( selectedCell )
\r
137 var widthMatch = widthPattern.exec( selectedCell.$.style.width );
\r
139 this.setValue( widthMatch[2] );
\r
146 widths : [ '70%', '30%' ],
\r
152 label : langTable.height,
\r
154 widths : [ '71%', '29%' ],
\r
155 labelLayout : 'horizontal',
\r
156 validate : validate[ 'number' ]( langCell.invalidHeight ),
\r
157 setup : function( selectedCell )
\r
159 var heightMatch = heightPattern.exec( selectedCell.$.style.height );
\r
161 this.setValue( heightMatch[1] );
\r
163 commit : function( selectedCell )
\r
165 if ( this.getValue() !== '' )
\r
166 selectedCell.$.style.height = this.getValue() + 'px';
\r
168 selectedCell.$.style.height = '';
\r
173 html : langTable.widthPx
\r
181 labelLayout : 'horizontal',
\r
182 label : langCell.wordWrap,
\r
183 widths : [ '50%', '50%' ],
\r
187 [ langCell.yes, 'yes' ],
\r
188 [ langCell.no, 'no' ]
\r
190 commit : function( selectedCell )
\r
192 if ( this.getValue() == 'no' )
\r
193 selectedCell.setAttribute( 'noWrap', 'nowrap' );
\r
195 selectedCell.removeAttribute( 'noWrap' );
\r
202 labelLayout : 'horizontal',
\r
203 label : langCell.hAlign,
\r
204 widths : [ '50%', '50%' ],
\r
208 [ langCommon.notSet, '' ],
\r
209 [ langTable.alignLeft, 'left' ],
\r
210 [ langTable.alignCenter, 'center' ],
\r
211 [ langTable.alignRight, 'right' ]
\r
213 setup : function( selectedCell )
\r
215 this.setValue( selectedCell.getAttribute( 'align' ) || '' );
\r
217 commit : function( selectedCell )
\r
219 if ( this.getValue() )
\r
220 selectedCell.setAttribute( 'align', this.getValue() );
\r
222 selectedCell.removeAttribute( 'align' );
\r
228 labelLayout : 'horizontal',
\r
229 label : langCell.vAlign,
\r
230 widths : [ '50%', '50%' ],
\r
234 [ langCommon.notSet, '' ],
\r
235 [ langCell.alignTop, 'top' ],
\r
236 [ langCell.alignMiddle, 'middle' ],
\r
237 [ langCell.alignBottom, 'bottom' ],
\r
238 [ langCell.alignBaseline, 'baseline' ]
\r
240 setup : function( selectedCell )
\r
242 this.setValue( selectedCell.getAttribute( 'vAlign' ) || '' );
\r
244 commit : function( selectedCell )
\r
246 if ( this.getValue() )
\r
247 selectedCell.setAttribute( 'vAlign', this.getValue() );
\r
249 selectedCell.removeAttribute( 'vAlign' );
\r
263 label : langCell.cellType,
\r
264 labelLayout : 'horizontal',
\r
265 widths : [ '50%', '50%' ],
\r
269 [ langCell.data, 'td' ],
\r
270 [ langCell.header, 'th' ]
\r
272 setup : function( selectedCell )
\r
274 this.setValue( selectedCell.getName() );
\r
276 commit : function( selectedCell )
\r
278 selectedCell.renameNode( this.getValue() );
\r
285 label : langCell.rowSpan,
\r
286 labelLayout : 'horizontal',
\r
287 widths : [ '50%', '50%' ],
\r
289 validate : validate.integer( langCell.invalidRowSpan ),
\r
290 setup : function( selectedCell )
\r
292 this.setValue( selectedCell.getAttribute( 'rowSpan' ) || '' );
\r
294 commit : function( selectedCell )
\r
296 if ( this.getValue() )
\r
297 selectedCell.setAttribute( 'rowSpan', this.getValue() );
\r
299 selectedCell.removeAttribute( 'rowSpan' );
\r
305 label : langCell.colSpan,
\r
306 labelLayout : 'horizontal',
\r
307 widths : [ '50%', '50%' ],
\r
309 validate : validate.integer( langCell.invalidColSpan ),
\r
310 setup : function( selectedCell )
\r
312 this.setValue( selectedCell.getAttribute( 'colSpan' ) || '' );
\r
314 commit : function( selectedCell )
\r
316 if ( this.getValue() )
\r
317 selectedCell.setAttribute( 'colSpan', this.getValue() );
\r
319 selectedCell.removeAttribute( 'colSpan' );
\r
326 widths : [ '80%', '20%' ],
\r
332 label : langCell.bgColor,
\r
333 labelLayout : 'horizontal',
\r
334 widths : [ '70%', '30%' ],
\r
336 setup : function( selectedCell )
\r
338 this.setValue( selectedCell.getAttribute( 'bgColor' ) || '' );
\r
340 commit : function( selectedCell )
\r
342 if ( this.getValue() )
\r
343 selectedCell.setAttribute( 'bgColor', this.getValue() );
\r
345 selectedCell.removeAttribute( 'bgColor' );
\r
350 id : 'bgColorChoose',
\r
351 label : langCell.chooseColor,
\r
352 style : 'margin-left: 10px',
\r
353 onClick : function()
\r
356 getDialogValue( 'colordialog', function( colorDialog )
\r
358 self.getDialog().getContentElement( 'info', 'bgColor' ).setValue(
\r
359 colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
\r
370 widths : [ '80%', '20%' ],
\r
375 id : 'borderColor',
\r
376 label : langCell.borderColor,
\r
377 labelLayout : 'horizontal',
\r
378 widths : [ '70%', '30%' ],
\r
380 setup : function( selectedCell )
\r
382 this.setValue( selectedCell.getStyle( 'border-color' ) || '' );
\r
384 commit : function( selectedCell )
\r
386 if ( this.getValue() )
\r
387 selectedCell.setStyle( 'border-color', this.getValue() );
\r
389 selectedCell.removeStyle( 'border-color' );
\r
394 id : 'borderColorChoose',
\r
395 label : langCell.chooseColor,
\r
396 style : 'margin-left: 10px',
\r
397 onClick : function()
\r
400 getDialogValue( 'colordialog', function( colorDialog )
\r
402 self.getDialog().getContentElement( 'info', 'borderColor' ).setValue(
\r
403 colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()
\r
417 onShow : function()
\r
419 this.cells = CKEDITOR.plugins.tabletools.getSelectedCells(
\r
420 this._.editor.getSelection() );
\r
421 this.setupContent( this.cells[ 0 ] );
\r
425 var cells = this.cells;
\r
426 for ( var i = 0 ; i < cells.length ; i++ )
\r
427 this.commitContent( cells[ i ] );
\r