]>
git.immae.eu Git - perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git/blob - sources/plugins/tabletools/dialogs/tableCell.js
2 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
6 CKEDITOR
.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 spacer
= { type: 'html', html: ' ' },
13 rtl
= editor
.lang
.dir
== 'rtl',
14 colorDialog
= editor
.plugins
.colordialog
;
16 // Returns a function, which runs regular "setup" for all selected cells to find out
17 // whether the initial value of the field would be the same for all cells. If so,
18 // the value is displayed just as if a regular "setup" was executed. Otherwise,
19 // i.e. when there are several cells of different value of the property, a field
22 // * @param {Function} setup Setup function which returns a value instead of setting it.
23 // * @returns {Function} A function to be used in dialog definition.
24 function setupCells( setup
) {
25 return function( cells
) {
26 var fieldValue
= setup( cells
[ 0 ] );
28 // If one of the cells would have a different value of the
29 // property, set the empty value for a field.
30 for ( var i
= 1; i
< cells
.length
; i
++ ) {
31 if ( setup( cells
[ i
] ) !== fieldValue
) {
37 // Setting meaningful or empty value only makes sense
38 // when setup returns some value. Otherwise, a *default* value
39 // is used for that field.
40 if ( typeof fieldValue
!= 'undefined' ) {
41 this.setValue( fieldValue
);
43 // The only way to have an empty select value in Firefox is
44 // to set a negative selectedIndex.
45 if ( CKEDITOR
.env
.gecko
&& this.type
== 'select' && !fieldValue
)
46 this.getInputElement().$.selectedIndex
= -1;
51 // Reads the unit of width property of the table cell.
53 // * @param {CKEDITOR.dom.element} cell An element representing table cell.
54 // * @returns {String} A unit of width: 'px', '%' or undefined if none.
55 function getCellWidthType( cell
) {
56 var match
= widthPattern
.exec(
57 cell
.getStyle( 'width' ) || cell
.getAttribute( 'width' ) );
64 title: langCell
.title
,
65 minWidth: CKEDITOR
.env
.ie
&& CKEDITOR
.env
.quirks
? 450 : 410,
66 minHeight: CKEDITOR
.env
.ie
&& ( CKEDITOR
.env
.ie7Compat
|| CKEDITOR
.env
.quirks
) ? 230 : 220,
69 label: langCell
.title
,
73 widths: [ '40%', '5%', '40%' ],
79 widths: [ '70%', '30%' ],
84 label: langCommon
.width
,
85 validate: validate
.number( langCell
.invalidWidth
),
87 // Extra labelling of width unit type.
89 var widthType
= this.getDialog().getContentElement( 'info', 'widthType' ),
90 labelElement
= widthType
.getElement(),
91 inputElement
= this.getInputElement(),
92 ariaLabelledByAttr
= inputElement
.getAttribute( 'aria-labelledby' );
94 inputElement
.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr
, labelElement
.$.id
].join( ' ' ) );
97 setup: setupCells( function( element
) {
98 var widthAttr
= parseInt( element
.getAttribute( 'width' ), 10 ),
99 widthStyle
= parseInt( element
.getStyle( 'width' ), 10 );
101 return !isNaN( widthStyle
) ? widthStyle :
102 !isNaN( widthAttr
) ? widthAttr : '';
104 commit: function( element
) {
105 var value
= parseInt( this.getValue(), 10 ),
107 // There might be no widthType value, i.e. when multiple cells are
108 // selected but some of them have width expressed in pixels and some
109 // of them in percent. Try to re-read the unit from the cell in such
111 unit
= this.getDialog().getValueOf( 'info', 'widthType' ) || getCellWidthType( element
);
113 if ( !isNaN( value
) )
114 element
.setStyle( 'width', value
+ unit
);
116 element
.removeStyle( 'width' );
118 element
.removeAttribute( 'width' );
125 label: editor
.lang
.table
.widthUnit
,
126 labelStyle: 'visibility:hidden',
129 [ langTable
.widthPx
, 'px' ],
130 [ langTable
.widthPc
, '%' ]
132 setup: setupCells( getCellWidthType
)
137 widths: [ '70%', '30%' ],
141 label: langCommon
.height
,
144 validate: validate
.number( langCell
.invalidHeight
),
146 // Extra labelling of height unit type.
148 var heightType
= this.getDialog().getContentElement( 'info', 'htmlHeightType' ),
149 labelElement
= heightType
.getElement(),
150 inputElement
= this.getInputElement(),
151 ariaLabelledByAttr
= inputElement
.getAttribute( 'aria-labelledby' );
153 inputElement
.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr
, labelElement
.$.id
].join( ' ' ) );
156 setup: setupCells( function( element
) {
157 var heightAttr
= parseInt( element
.getAttribute( 'height' ), 10 ),
158 heightStyle
= parseInt( element
.getStyle( 'height' ), 10 );
160 return !isNaN( heightStyle
) ? heightStyle :
161 !isNaN( heightAttr
) ? heightAttr : '';
163 commit: function( element
) {
164 var value
= parseInt( this.getValue(), 10 );
166 if ( !isNaN( value
) )
167 element
.setStyle( 'height', CKEDITOR
.tools
.cssLength( value
) );
169 element
.removeStyle( 'height' );
171 element
.removeAttribute( 'height' );
175 id: 'htmlHeightType',
177 html: '<br />' + langTable
.widthPx
184 label: langCell
.wordWrap
,
187 [ langCell
.yes
, 'yes' ],
188 [ langCell
.no
, 'no' ]
190 setup: setupCells( function( element
) {
191 var wordWrapAttr
= element
.getAttribute( 'noWrap' ),
192 wordWrapStyle
= element
.getStyle( 'white-space' );
194 if ( wordWrapStyle
== 'nowrap' || wordWrapAttr
)
197 commit: function( element
) {
198 if ( this.getValue() == 'no' )
199 element
.setStyle( 'white-space', 'nowrap' );
201 element
.removeStyle( 'white-space' );
203 element
.removeAttribute( 'noWrap' );
210 label: langCell
.hAlign
,
213 [ langCommon
.notSet
, '' ],
214 [ langCommon
.alignLeft
, 'left' ],
215 [ langCommon
.alignCenter
, 'center' ],
216 [ langCommon
.alignRight
, 'right' ],
217 [ langCommon
.alignJustify
, 'justify' ]
219 setup: setupCells( function( element
) {
220 var alignAttr
= element
.getAttribute( 'align' ),
221 textAlignStyle
= element
.getStyle( 'text-align' );
223 return textAlignStyle
|| alignAttr
|| '';
225 commit: function( selectedCell
) {
226 var value
= this.getValue();
229 selectedCell
.setStyle( 'text-align', value
);
231 selectedCell
.removeStyle( 'text-align' );
233 selectedCell
.removeAttribute( 'align' );
239 label: langCell
.vAlign
,
242 [ langCommon
.notSet
, '' ],
243 [ langCommon
.alignTop
, 'top' ],
244 [ langCommon
.alignMiddle
, 'middle' ],
245 [ langCommon
.alignBottom
, 'bottom' ],
246 [ langCell
.alignBaseline
, 'baseline' ]
248 setup: setupCells( function( element
) {
249 var vAlignAttr
= element
.getAttribute( 'vAlign' ),
250 vAlignStyle
= element
.getStyle( 'vertical-align' );
252 switch ( vAlignStyle
) {
253 // Ignore all other unrelated style values..
263 return vAlignStyle
|| vAlignAttr
|| '';
265 commit: function( element
) {
266 var value
= this.getValue();
269 element
.setStyle( 'vertical-align', value
);
271 element
.removeStyle( 'vertical-align' );
273 element
.removeAttribute( 'vAlign' );
284 label: langCell
.cellType
,
287 [ langCell
.data
, 'td' ],
288 [ langCell
.header
, 'th' ]
290 setup: setupCells( function( selectedCell
) {
291 return selectedCell
.getName();
293 commit: function( selectedCell
) {
294 selectedCell
.renameNode( this.getValue() );
301 label: langCell
.rowSpan
,
303 validate: validate
.integer( langCell
.invalidRowSpan
),
304 setup: setupCells( function( selectedCell
) {
305 var attrVal
= parseInt( selectedCell
.getAttribute( 'rowSpan' ), 10 );
306 if ( attrVal
&& attrVal
!= 1 )
309 commit: function( selectedCell
) {
310 var value
= parseInt( this.getValue(), 10 );
311 if ( value
&& value
!= 1 )
312 selectedCell
.setAttribute( 'rowSpan', this.getValue() );
314 selectedCell
.removeAttribute( 'rowSpan' );
320 label: langCell
.colSpan
,
322 validate: validate
.integer( langCell
.invalidColSpan
),
323 setup: setupCells( function( element
) {
324 var attrVal
= parseInt( element
.getAttribute( 'colSpan' ), 10 );
325 if ( attrVal
&& attrVal
!= 1 )
328 commit: function( selectedCell
) {
329 var value
= parseInt( this.getValue(), 10 );
330 if ( value
&& value
!= 1 )
331 selectedCell
.setAttribute( 'colSpan', this.getValue() );
333 selectedCell
.removeAttribute( 'colSpan' );
340 widths: [ '60%', '40%' ],
344 label: langCell
.bgColor
,
346 setup: setupCells( function( element
) {
347 var bgColorAttr
= element
.getAttribute( 'bgColor' ),
348 bgColorStyle
= element
.getStyle( 'background-color' );
350 return bgColorStyle
|| bgColorAttr
;
352 commit: function( selectedCell
) {
353 var value
= this.getValue();
356 selectedCell
.setStyle( 'background-color', this.getValue() );
358 selectedCell
.removeStyle( 'background-color' );
360 selectedCell
.removeAttribute( 'bgColor' );
366 'class': 'colorChooser', // jshint ignore:line
367 label: langCell
.chooseColor
,
369 // Stick the element to the bottom (#5587)
370 this.getElement().getParent().setStyle( 'vertical-align', 'bottom' );
372 onClick: function() {
373 editor
.getColorFromDialog( function( color
) {
375 this.getDialog().getContentElement( 'info', 'bgColor' ).setValue( color
);
385 widths: [ '60%', '40%' ],
389 label: langCell
.borderColor
,
391 setup: setupCells( function( element
) {
392 var borderColorAttr
= element
.getAttribute( 'borderColor' ),
393 borderColorStyle
= element
.getStyle( 'border-color' );
395 return borderColorStyle
|| borderColorAttr
;
397 commit: function( selectedCell
) {
398 var value
= this.getValue();
400 selectedCell
.setStyle( 'border-color', this.getValue() );
402 selectedCell
.removeStyle( 'border-color' );
404 selectedCell
.removeAttribute( 'borderColor' );
410 id: 'borderColorChoose',
411 'class': 'colorChooser', // jshint ignore:line
412 label: langCell
.chooseColor
,
413 style: ( rtl
? 'margin-right' : 'margin-left' ) + ': 10px',
415 // Stick the element to the bottom (#5587)
416 this.getElement().getParent().setStyle( 'vertical-align', 'bottom' );
418 onClick: function() {
419 editor
.getColorFromDialog( function( color
) {
421 this.getDialog().getContentElement( 'info', 'borderColor' ).setValue( color
);
431 this.cells
= CKEDITOR
.plugins
.tabletools
.getSelectedCells( this._
.editor
.getSelection() );
432 this.setupContent( this.cells
);
435 var selection
= this._
.editor
.getSelection(),
436 bookmarks
= selection
.createBookmarks();
438 var cells
= this.cells
;
439 for ( var i
= 0; i
< cells
.length
; i
++ )
440 this.commitContent( cells
[ i
] );
442 this._
.editor
.forceNextSelectionCheck();
443 selection
.selectBookmarks( bookmarks
);
444 this._
.editor
.selectionChange();
449 // Prevent from changing cell properties when the field's value
450 // remains unaltered, i.e. when selected multiple cells and dialog loaded
451 // only the properties of the first cell (#11439).
452 this.foreach( function( field
) {
453 if ( !field
.setup
|| !field
.commit
)
456 // Save field's value every time after "setup" is called.
457 field
.setup
= CKEDITOR
.tools
.override( field
.setup
, function( orgSetup
) {
459 orgSetup
.apply( this, arguments
);
460 saved
[ field
.id
] = field
.getValue();
464 // Compare saved value with actual value. Update cell only if value has changed.
465 field
.commit
= CKEDITOR
.tools
.override( field
.commit
, function( orgCommit
) {
467 if ( saved
[ field
.id
] !== field
.getValue() )
468 orgCommit
.apply( this, arguments
);