]>
git.immae.eu Git - perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git/blob - sources/plugins/table/dialogs/table.js
2 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
7 var defaultToPixel
= CKEDITOR
.tools
.cssLength
;
9 var commitValue = function( data
) {
13 data
.info
[ id
] = this.getValue();
16 function tableColumns( table
) {
19 for ( var i
= 0, row
, rows
= table
.$.rows
.length
; i
< rows
; i
++ ) {
20 row
= table
.$.rows
[ i
], cols
= 0;
21 for ( var j
= 0, cell
, cells
= row
.cells
.length
; j
< cells
; j
++ ) {
22 cell
= row
.cells
[ j
];
26 cols
> maxCols
&& ( maxCols
= cols
);
33 // Whole-positive-integer validator.
34 function validatorNum( msg
) {
36 var value
= this.getValue(),
37 pass
= !!( CKEDITOR
.dialog
.validate
.integer()( value
) && value
> 0 );
40 alert( msg
); // jshint ignore:line
48 function tableDialog( editor
, command
) {
49 var makeElement = function( name
) {
50 return new CKEDITOR
.dom
.element( name
, editor
.document
);
53 var editable
= editor
.editable();
55 var dialogadvtab
= editor
.plugins
.dialogadvtab
;
58 title: editor
.lang
.table
.title
,
60 minHeight: CKEDITOR
.env
.ie
? 310 : 280,
65 var styles
= dialog
.getContentElement( 'advanced', 'advStyles' );
68 styles
.on( 'change', function() {
69 // Synchronize width value.
70 var width
= this.getStyle( 'width', '' ),
71 txtWidth
= dialog
.getContentElement( 'info', 'txtWidth' );
73 txtWidth
&& txtWidth
.setValue( width
, true );
75 // Synchronize height value.
76 var height
= this.getStyle( 'height', '' ),
77 txtHeight
= dialog
.getContentElement( 'info', 'txtHeight' );
79 txtHeight
&& txtHeight
.setValue( height
, true );
85 // Detect if there's a selected table.
86 var selection
= editor
.getSelection(),
87 ranges
= selection
.getRanges(),
90 var rowsInput
= this.getContentElement( 'info', 'txtRows' ),
91 colsInput
= this.getContentElement( 'info', 'txtCols' ),
92 widthInput
= this.getContentElement( 'info', 'txtWidth' ),
93 heightInput
= this.getContentElement( 'info', 'txtHeight' );
95 if ( command
== 'tableProperties' ) {
96 var selected
= selection
.getSelectedElement();
97 if ( selected
&& selected
.is( 'table' ) )
99 else if ( ranges
.length
> 0 ) {
100 // Webkit could report the following range on cell selection (#4948):
101 // <table><tr><td>[ </td></tr></table>]
102 if ( CKEDITOR
.env
.webkit
)
103 ranges
[ 0 ].shrink( CKEDITOR
.NODE_ELEMENT
);
105 table
= editor
.elementPath( ranges
[ 0 ].getCommonAncestor( true ) ).contains( 'table', 1 );
108 // Save a reference to the selected table, and push a new set of default values.
109 this._
.selectedElement
= table
;
112 // Enable or disable the row, cols, width fields.
114 this.setupContent( table
);
115 rowsInput
&& rowsInput
.disable();
116 colsInput
&& colsInput
.disable();
118 rowsInput
&& rowsInput
.enable();
119 colsInput
&& colsInput
.enable();
122 // Call the onChange method for the widht and height fields so
123 // they get reflected into the Advanced tab.
124 widthInput
&& widthInput
.onChange();
125 heightInput
&& heightInput
.onChange();
128 var selection
= editor
.getSelection(),
129 bms
= this._
.selectedElement
&& selection
.createBookmarks();
131 var table
= this._
.selectedElement
|| makeElement( 'table' ),
134 this.commitContent( data
, table
);
137 var info
= data
.info
;
139 // Generate the rows and cols.
140 if ( !this._
.selectedElement
) {
141 var tbody
= table
.append( makeElement( 'tbody' ) ),
142 rows
= parseInt( info
.txtRows
, 10 ) || 0,
143 cols
= parseInt( info
.txtCols
, 10 ) || 0;
145 for ( var i
= 0; i
< rows
; i
++ ) {
146 var row
= tbody
.append( makeElement( 'tr' ) );
147 for ( var j
= 0; j
< cols
; j
++ ) {
148 var cell
= row
.append( makeElement( 'td' ) );
154 // Modify the table headers. Depends on having rows and cols generated
155 // correctly so it can't be done in commit functions.
157 // Should we make a <thead>?
158 var headers
= info
.selHeaders
;
159 if ( !table
.$.tHead
&& ( headers
== 'row' || headers
== 'both' ) ) {
160 var thead
= new CKEDITOR
.dom
.element( table
.$.createTHead() );
161 tbody
= table
.getElementsByTag( 'tbody' ).getItem( 0 );
162 var theRow
= tbody
.getElementsByTag( 'tr' ).getItem( 0 );
165 for ( i
= 0; i
< theRow
.getChildCount(); i
++ ) {
166 var th
= theRow
.getChild( i
);
167 // Skip bookmark nodes. (#6155)
168 if ( th
.type
== CKEDITOR
.NODE_ELEMENT
&& !th
.data( 'cke-bookmark' ) ) {
169 th
.renameNode( 'th' );
170 th
.setAttribute( 'scope', 'col' );
173 thead
.append( theRow
.remove() );
176 if ( table
.$.tHead
!== null && !( headers
== 'row' || headers
== 'both' ) ) {
177 // Move the row out of the THead and put it in the TBody:
178 thead
= new CKEDITOR
.dom
.element( table
.$.tHead
);
179 tbody
= table
.getElementsByTag( 'tbody' ).getItem( 0 );
181 var previousFirstRow
= tbody
.getFirst();
182 while ( thead
.getChildCount() > 0 ) {
183 theRow
= thead
.getFirst();
184 for ( i
= 0; i
< theRow
.getChildCount(); i
++ ) {
185 var newCell
= theRow
.getChild( i
);
186 if ( newCell
.type
== CKEDITOR
.NODE_ELEMENT
) {
187 newCell
.renameNode( 'td' );
188 newCell
.removeAttribute( 'scope' );
191 theRow
.insertBefore( previousFirstRow
);
196 // Should we make all first cells in a row TH?
197 if ( !this.hasColumnHeaders
&& ( headers
== 'col' || headers
== 'both' ) ) {
198 for ( row
= 0; row
< table
.$.rows
.length
; row
++ ) {
199 newCell
= new CKEDITOR
.dom
.element( table
.$.rows
[ row
].cells
[ 0 ] );
200 newCell
.renameNode( 'th' );
201 newCell
.setAttribute( 'scope', 'row' );
205 // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)
206 if ( ( this.hasColumnHeaders
) && !( headers
== 'col' || headers
== 'both' ) ) {
207 for ( i
= 0; i
< table
.$.rows
.length
; i
++ ) {
208 row
= new CKEDITOR
.dom
.element( table
.$.rows
[ i
] );
209 if ( row
.getParent().getName() == 'tbody' ) {
210 newCell
= new CKEDITOR
.dom
.element( row
.$.cells
[ 0 ] );
211 newCell
.renameNode( 'td' );
212 newCell
.removeAttribute( 'scope' );
217 // Set the width and height.
218 info
.txtHeight
? table
.setStyle( 'height', info
.txtHeight
) : table
.removeStyle( 'height' );
219 info
.txtWidth
? table
.setStyle( 'width', info
.txtWidth
) : table
.removeStyle( 'width' );
221 if ( !table
.getAttribute( 'style' ) )
222 table
.removeAttribute( 'style' );
225 // Insert the table element if we're creating one.
226 if ( !this._
.selectedElement
) {
227 editor
.insertElement( table
);
228 // Override the default cursor position after insertElement to place
229 // cursor inside the first cell (#7959), IE needs a while.
230 setTimeout( function() {
231 var firstCell
= new CKEDITOR
.dom
.element( table
.$.rows
[ 0 ].cells
[ 0 ] );
232 var range
= editor
.createRange();
233 range
.moveToPosition( firstCell
, CKEDITOR
.POSITION_AFTER_START
);
237 // Properly restore the selection, (#4822) but don't break
238 // because of this, e.g. updated table caption.
241 selection
.selectBookmarks( bms
);
248 label: editor
.lang
.table
.title
,
251 widths: [ null, null ],
252 styles: [ 'vertical-align:top' ],
260 label: editor
.lang
.table
.rows
,
262 controlStyle: 'width:5em',
263 validate: validatorNum( editor
.lang
.table
.invalidRows
),
264 setup: function( selectedElement
) {
265 this.setValue( selectedElement
.$.rows
.length
);
273 label: editor
.lang
.table
.columns
,
275 controlStyle: 'width:5em',
276 validate: validatorNum( editor
.lang
.table
.invalidCols
),
277 setup: function( selectedTable
) {
278 this.setValue( tableColumns( selectedTable
) );
289 requiredContent: 'th',
291 label: editor
.lang
.table
.headers
,
293 [ editor
.lang
.table
.headersNone
, '' ],
294 [ editor
.lang
.table
.headersRow
, 'row' ],
295 [ editor
.lang
.table
.headersColumn
, 'col' ],
296 [ editor
.lang
.table
.headersBoth
, 'both' ]
298 setup: function( selectedTable
) {
299 // Fill in the headers field.
300 var dialog
= this.getDialog();
301 dialog
.hasColumnHeaders
= true;
303 // Check if all the first cells in every row are TH
304 for ( var row
= 0; row
< selectedTable
.$.rows
.length
; row
++ ) {
305 // If just one cell isn't a TH then it isn't a header column
306 var headCell
= selectedTable
.$.rows
[ row
].cells
[ 0 ];
307 if ( headCell
&& headCell
.nodeName
.toLowerCase() != 'th' ) {
308 dialog
.hasColumnHeaders
= false;
313 // Check if the table contains <thead>.
314 if ( ( selectedTable
.$.tHead
!== null ) )
315 this.setValue( dialog
.hasColumnHeaders
? 'both' : 'row' );
317 this.setValue( dialog
.hasColumnHeaders
? 'col' : '' );
324 requiredContent: 'table[border]',
325 // Avoid setting border which will then disappear.
326 'default': editor
.filter
.check( 'table[border]' ) ? 1 : 0,
327 label: editor
.lang
.table
.border
,
328 controlStyle: 'width:3em',
329 validate: CKEDITOR
.dialog
.validate
.number( editor
.lang
.table
.invalidBorder
),
330 setup: function( selectedTable
) {
331 this.setValue( selectedTable
.getAttribute( 'border' ) || '' );
333 commit: function( data
, selectedTable
) {
334 if ( this.getValue() )
335 selectedTable
.setAttribute( 'border', this.getValue() );
337 selectedTable
.removeAttribute( 'border' );
343 requiredContent: 'table[align]',
345 label: editor
.lang
.common
.align
,
347 [ editor
.lang
.common
.notSet
, '' ],
348 [ editor
.lang
.common
.alignLeft
, 'left' ],
349 [ editor
.lang
.common
.alignCenter
, 'center' ],
350 [ editor
.lang
.common
.alignRight
, 'right' ]
352 setup: function( selectedTable
) {
353 this.setValue( selectedTable
.getAttribute( 'align' ) || '' );
355 commit: function( data
, selectedTable
) {
356 if ( this.getValue() )
357 selectedTable
.setAttribute( 'align', this.getValue() );
359 selectedTable
.removeAttribute( 'align' );
372 requiredContent: 'table{width}',
373 controlStyle: 'width:5em',
374 label: editor
.lang
.common
.width
,
375 title: editor
.lang
.common
.cssLengthTooltip
,
376 // Smarter default table width. (#9600)
377 'default': editor
.filter
.check( 'table{width}' ) ? ( editable
.getSize( 'width' ) < 500 ? '100%' : 500 ) : 0,
378 getValue: defaultToPixel
,
379 validate: CKEDITOR
.dialog
.validate
.cssLength( editor
.lang
.common
.invalidCssLength
.replace( '%1', editor
.lang
.common
.width
) ),
380 onChange: function() {
381 var styles
= this.getDialog().getContentElement( 'advanced', 'advStyles' );
382 styles
&& styles
.updateStyle( 'width', this.getValue() );
384 setup: function( selectedTable
) {
385 var val
= selectedTable
.getStyle( 'width' );
386 this.setValue( val
);
397 requiredContent: 'table{height}',
398 controlStyle: 'width:5em',
399 label: editor
.lang
.common
.height
,
400 title: editor
.lang
.common
.cssLengthTooltip
,
402 getValue: defaultToPixel
,
403 validate: CKEDITOR
.dialog
.validate
.cssLength( editor
.lang
.common
.invalidCssLength
.replace( '%1', editor
.lang
.common
.height
) ),
404 onChange: function() {
405 var styles
= this.getDialog().getContentElement( 'advanced', 'advStyles' );
406 styles
&& styles
.updateStyle( 'height', this.getValue() );
409 setup: function( selectedTable
) {
410 var val
= selectedTable
.getStyle( 'height' );
411 val
&& this.setValue( val
);
423 requiredContent: 'table[cellspacing]',
424 controlStyle: 'width:3em',
425 label: editor
.lang
.table
.cellSpace
,
426 'default': editor
.filter
.check( 'table[cellspacing]' ) ? 1 : 0,
427 validate: CKEDITOR
.dialog
.validate
.number( editor
.lang
.table
.invalidCellSpacing
),
428 setup: function( selectedTable
) {
429 this.setValue( selectedTable
.getAttribute( 'cellSpacing' ) || '' );
431 commit: function( data
, selectedTable
) {
432 if ( this.getValue() )
433 selectedTable
.setAttribute( 'cellSpacing', this.getValue() );
435 selectedTable
.removeAttribute( 'cellSpacing' );
441 requiredContent: 'table[cellpadding]',
442 controlStyle: 'width:3em',
443 label: editor
.lang
.table
.cellPad
,
444 'default': editor
.filter
.check( 'table[cellpadding]' ) ? 1 : 0,
445 validate: CKEDITOR
.dialog
.validate
.number( editor
.lang
.table
.invalidCellPadding
),
446 setup: function( selectedTable
) {
447 this.setValue( selectedTable
.getAttribute( 'cellPadding' ) || '' );
449 commit: function( data
, selectedTable
) {
450 if ( this.getValue() )
451 selectedTable
.setAttribute( 'cellPadding', this.getValue() );
453 selectedTable
.removeAttribute( 'cellPadding' );
469 requiredContent: 'caption',
470 label: editor
.lang
.table
.caption
,
471 setup: function( selectedTable
) {
474 var nodeList
= selectedTable
.getElementsByTag( 'caption' );
475 if ( nodeList
.count() > 0 ) {
476 var caption
= nodeList
.getItem( 0 );
477 var firstElementChild
= caption
.getFirst( CKEDITOR
.dom
.walker
.nodeType( CKEDITOR
.NODE_ELEMENT
) );
479 if ( firstElementChild
&& !firstElementChild
.equals( caption
.getBogus() ) ) {
481 this.setValue( caption
.getText() );
485 caption
= CKEDITOR
.tools
.trim( caption
.getText() );
486 this.setValue( caption
);
489 commit: function( data
, table
) {
490 if ( !this.isEnabled() )
493 var caption
= this.getValue(),
494 captionElement
= table
.getElementsByTag( 'caption' );
496 if ( captionElement
.count() > 0 ) {
497 captionElement
= captionElement
.getItem( 0 );
498 captionElement
.setHtml( '' );
500 captionElement
= new CKEDITOR
.dom
.element( 'caption', editor
.document
);
501 if ( table
.getChildCount() )
502 captionElement
.insertBefore( table
.getFirst() );
504 captionElement
.appendTo( table
);
506 captionElement
.append( new CKEDITOR
.dom
.text( caption
, editor
.document
) );
507 } else if ( captionElement
.count() > 0 ) {
508 for ( var i
= captionElement
.count() - 1; i
>= 0; i
-- )
509 captionElement
.getItem( i
).remove();
517 requiredContent: 'table[summary]',
518 label: editor
.lang
.table
.summary
,
519 setup: function( selectedTable
) {
520 this.setValue( selectedTable
.getAttribute( 'summary' ) || '' );
522 commit: function( data
, selectedTable
) {
523 if ( this.getValue() )
524 selectedTable
.setAttribute( 'summary', this.getValue() );
526 selectedTable
.removeAttribute( 'summary' );
531 dialogadvtab
&& dialogadvtab
.createAdvancedTab( editor
, null, 'table' )
535 CKEDITOR
.dialog
.add( 'table', function( editor
) {
536 return tableDialog( editor
, 'table' );
538 CKEDITOR
.dialog
.add( 'tableProperties', function( editor
) {
539 return tableDialog( editor
, 'tableProperties' );