Initial commit

[perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git] / sources / plugins / tabletools / dialogs / tableCell.js

/**\r
 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.\r
 * For licensing, see LICENSE.md or http://ckeditor.com/license\r
 */\r
\r
CKEDITOR.dialog.add( 'cellProperties', function( editor ) {\r
	var langTable = editor.lang.table,\r
		langCell = langTable.cell,\r
		langCommon = editor.lang.common,\r
		validate = CKEDITOR.dialog.validate,\r
		widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,\r
		spacer = { type: 'html', html: ' ' },\r
		rtl = editor.lang.dir == 'rtl',\r
		colorDialog = editor.plugins.colordialog;\r
\r
	// Returns a function, which runs regular "setup" for all selected cells to find out\r
	// whether the initial value of the field would be the same for all cells. If so,\r
	// the value is displayed just as if a regular "setup" was executed. Otherwise,\r
	// i.e. when there are several cells of different value of the property, a field\r
	// gets empty value.\r
	//\r
	// * @param {Function} setup Setup function which returns a value instead of setting it.\r
	// * @returns {Function} A function to be used in dialog definition.\r
	function setupCells( setup ) {\r
		return function( cells ) {\r
			var fieldValue = setup( cells[ 0 ] );\r
\r
			// If one of the cells would have a different value of the\r
			// property, set the empty value for a field.\r
			for ( var i = 1; i < cells.length; i++ ) {\r
				if ( setup( cells[ i ] ) !== fieldValue ) {\r
					fieldValue = null;\r
					break;\r
				}\r
			}\r
\r
			// Setting meaningful or empty value only makes sense\r
			// when setup returns some value. Otherwise, a *default* value\r
			// is used for that field.\r
			if ( typeof fieldValue != 'undefined' ) {\r
				this.setValue( fieldValue );\r
\r
				// The only way to have an empty select value in Firefox is\r
				// to set a negative selectedIndex.\r
				if ( CKEDITOR.env.gecko && this.type == 'select' && !fieldValue )\r
					this.getInputElement().$.selectedIndex = -1;\r
			}\r
		};\r
	}\r
\r
	// Reads the unit of width property of the table cell.\r
	//\r
	// * @param {CKEDITOR.dom.element} cell An element representing table cell.\r
	// * @returns {String} A unit of width: 'px', '%' or undefined if none.\r
	function getCellWidthType( cell ) {\r
		var match = widthPattern.exec(\r
			cell.getStyle( 'width' ) || cell.getAttribute( 'width' ) );\r
\r
		if ( match )\r
			return match[ 2 ];\r
	}\r
\r
	return {\r
		title: langCell.title,\r
		minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 450 : 410,\r
		minHeight: CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks ) ? 230 : 220,\r
		contents: [ {\r
			id: 'info',\r
			label: langCell.title,\r
			accessKey: 'I',\r
			elements: [ {\r
				type: 'hbox',\r
				widths: [ '40%', '5%', '40%' ],\r
				children: [ {\r
					type: 'vbox',\r
					padding: 0,\r
					children: [ {\r
						type: 'hbox',\r
						widths: [ '70%', '30%' ],\r
						children: [ {\r
							type: 'text',\r
							id: 'width',\r
							width: '100px',\r
							label: langCommon.width,\r
							validate: validate.number( langCell.invalidWidth ),\r
\r
							// Extra labelling of width unit type.\r
							onLoad: function() {\r
								var widthType = this.getDialog().getContentElement( 'info', 'widthType' ),\r
									labelElement = widthType.getElement(),\r
									inputElement = this.getInputElement(),\r
									ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );\r
\r
								inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );\r
							},\r
\r
							setup: setupCells( function( element ) {\r
								var widthAttr = parseInt( element.getAttribute( 'width' ), 10 ),\r
									widthStyle = parseInt( element.getStyle( 'width' ), 10 );\r
\r
								return !isNaN( widthStyle ) ? widthStyle :\r
									!isNaN( widthAttr ) ? widthAttr : '';\r
							} ),\r
							commit: function( element ) {\r
								var value = parseInt( this.getValue(), 10 ),\r
\r
									// There might be no widthType value, i.e. when multiple cells are\r
									// selected but some of them have width expressed in pixels and some\r
									// of them in percent. Try to re-read the unit from the cell in such\r
									// case (#11439).\r
									unit = this.getDialog().getValueOf( 'info', 'widthType' ) || getCellWidthType( element );\r
\r
								if ( !isNaN( value ) )\r
									element.setStyle( 'width', value + unit );\r
								else\r
									element.removeStyle( 'width' );\r
\r
								element.removeAttribute( 'width' );\r
							},\r
							'default': ''\r
						},\r
						{\r
							type: 'select',\r
							id: 'widthType',\r
							label: editor.lang.table.widthUnit,\r
							labelStyle: 'visibility:hidden',\r
							'default': 'px',\r
							items: [\r
								[ langTable.widthPx, 'px' ],\r
								[ langTable.widthPc, '%' ]\r
							],\r
							setup: setupCells( getCellWidthType )\r
						} ]\r
					},\r
					{\r
						type: 'hbox',\r
						widths: [ '70%', '30%' ],\r
						children: [ {\r
							type: 'text',\r
							id: 'height',\r
							label: langCommon.height,\r
							width: '100px',\r
							'default': '',\r
							validate: validate.number( langCell.invalidHeight ),\r
\r
							// Extra labelling of height unit type.\r
							onLoad: function() {\r
								var heightType = this.getDialog().getContentElement( 'info', 'htmlHeightType' ),\r
									labelElement = heightType.getElement(),\r
									inputElement = this.getInputElement(),\r
									ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );\r
\r
								inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );\r
							},\r
\r
							setup: setupCells( function( element ) {\r
								var heightAttr = parseInt( element.getAttribute( 'height' ), 10 ),\r
									heightStyle = parseInt( element.getStyle( 'height' ), 10 );\r
\r
								return !isNaN( heightStyle ) ? heightStyle :\r
									!isNaN( heightAttr ) ? heightAttr : '';\r
							} ),\r
							commit: function( element ) {\r
								var value = parseInt( this.getValue(), 10 );\r
\r
								if ( !isNaN( value ) )\r
									element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );\r
								else\r
									element.removeStyle( 'height' );\r
\r
								element.removeAttribute( 'height' );\r
							}\r
						},\r
						{\r
							id: 'htmlHeightType',\r
							type: 'html',\r
							html: '<br />' + langTable.widthPx\r
						} ]\r
					},\r
					spacer,\r
					{\r
						type: 'select',\r
						id: 'wordWrap',\r
						label: langCell.wordWrap,\r
						'default': 'yes',\r
						items: [\r
							[ langCell.yes, 'yes' ],\r
							[ langCell.no, 'no' ]\r
						],\r
						setup: setupCells( function( element ) {\r
							var wordWrapAttr = element.getAttribute( 'noWrap' ),\r
								wordWrapStyle = element.getStyle( 'white-space' );\r
\r
							if ( wordWrapStyle == 'nowrap' || wordWrapAttr )\r
								return 'no';\r
						} ),\r
						commit: function( element ) {\r
							if ( this.getValue() == 'no' )\r
								element.setStyle( 'white-space', 'nowrap' );\r
							else\r
								element.removeStyle( 'white-space' );\r
\r
							element.removeAttribute( 'noWrap' );\r
						}\r
					},\r
					spacer,\r
					{\r
						type: 'select',\r
						id: 'hAlign',\r
						label: langCell.hAlign,\r
						'default': '',\r
						items: [\r
							[ langCommon.notSet, '' ],\r
							[ langCommon.alignLeft, 'left' ],\r
							[ langCommon.alignCenter, 'center' ],\r
							[ langCommon.alignRight, 'right' ],\r
							[ langCommon.alignJustify, 'justify' ]\r
						],\r
						setup: setupCells( function( element ) {\r
							var alignAttr = element.getAttribute( 'align' ),\r
								textAlignStyle = element.getStyle( 'text-align' );\r
\r
							return textAlignStyle || alignAttr || '';\r
						} ),\r
						commit: function( selectedCell ) {\r
							var value = this.getValue();\r
\r
							if ( value )\r
								selectedCell.setStyle( 'text-align', value );\r
							else\r
								selectedCell.removeStyle( 'text-align' );\r
\r
							selectedCell.removeAttribute( 'align' );\r
						}\r
					},\r
					{\r
						type: 'select',\r
						id: 'vAlign',\r
						label: langCell.vAlign,\r
						'default': '',\r
						items: [\r
							[ langCommon.notSet, '' ],\r
							[ langCommon.alignTop, 'top' ],\r
							[ langCommon.alignMiddle, 'middle' ],\r
							[ langCommon.alignBottom, 'bottom' ],\r
							[ langCell.alignBaseline, 'baseline' ]\r
						],\r
						setup: setupCells( function( element ) {\r
							var vAlignAttr = element.getAttribute( 'vAlign' ),\r
								vAlignStyle = element.getStyle( 'vertical-align' );\r
\r
							switch ( vAlignStyle ) {\r
								// Ignore all other unrelated style values..\r
								case 'top':\r
								case 'middle':\r
								case 'bottom':\r
								case 'baseline':\r
									break;\r
								default:\r
									vAlignStyle = '';\r
							}\r
\r
							return vAlignStyle || vAlignAttr || '';\r
						} ),\r
						commit: function( element ) {\r
							var value = this.getValue();\r
\r
							if ( value )\r
								element.setStyle( 'vertical-align', value );\r
							else\r
								element.removeStyle( 'vertical-align' );\r
\r
							element.removeAttribute( 'vAlign' );\r
						}\r
					} ]\r
				},\r
				spacer,\r
				{\r
					type: 'vbox',\r
					padding: 0,\r
					children: [ {\r
						type: 'select',\r
						id: 'cellType',\r
						label: langCell.cellType,\r
						'default': 'td',\r
						items: [\r
							[ langCell.data, 'td' ],\r
							[ langCell.header, 'th' ]\r
						],\r
						setup: setupCells( function( selectedCell ) {\r
							return selectedCell.getName();\r
						} ),\r
						commit: function( selectedCell ) {\r
							selectedCell.renameNode( this.getValue() );\r
						}\r
					},\r
					spacer,\r
					{\r
						type: 'text',\r
						id: 'rowSpan',\r
						label: langCell.rowSpan,\r
						'default': '',\r
						validate: validate.integer( langCell.invalidRowSpan ),\r
						setup: setupCells( function( selectedCell ) {\r
							var attrVal = parseInt( selectedCell.getAttribute( 'rowSpan' ), 10 );\r
							if ( attrVal && attrVal != 1 )\r
								return attrVal;\r
						} ),\r
						commit: function( selectedCell ) {\r
							var value = parseInt( this.getValue(), 10 );\r
							if ( value && value != 1 )\r
								selectedCell.setAttribute( 'rowSpan', this.getValue() );\r
							else\r
								selectedCell.removeAttribute( 'rowSpan' );\r
						}\r
					},\r
					{\r
						type: 'text',\r
						id: 'colSpan',\r
						label: langCell.colSpan,\r
						'default': '',\r
						validate: validate.integer( langCell.invalidColSpan ),\r
						setup: setupCells( function( element ) {\r
							var attrVal = parseInt( element.getAttribute( 'colSpan' ), 10 );\r
							if ( attrVal && attrVal != 1 )\r
								return attrVal;\r
						} ),\r
						commit: function( selectedCell ) {\r
							var value = parseInt( this.getValue(), 10 );\r
							if ( value && value != 1 )\r
								selectedCell.setAttribute( 'colSpan', this.getValue() );\r
							else\r
								selectedCell.removeAttribute( 'colSpan' );\r
						}\r
					},\r
					spacer,\r
					{\r
						type: 'hbox',\r
						padding: 0,\r
						widths: [ '60%', '40%' ],\r
						children: [ {\r
							type: 'text',\r
							id: 'bgColor',\r
							label: langCell.bgColor,\r
							'default': '',\r
							setup: setupCells( function( element ) {\r
								var bgColorAttr = element.getAttribute( 'bgColor' ),\r
									bgColorStyle = element.getStyle( 'background-color' );\r
\r
								return bgColorStyle || bgColorAttr;\r
							} ),\r
							commit: function( selectedCell ) {\r
								var value = this.getValue();\r
\r
								if ( value )\r
									selectedCell.setStyle( 'background-color', this.getValue() );\r
								else\r
									selectedCell.removeStyle( 'background-color' );\r
\r
								selectedCell.removeAttribute( 'bgColor' );\r
							}\r
						},\r
						colorDialog ? {\r
							type: 'button',\r
							id: 'bgColorChoose',\r
							'class': 'colorChooser', // jshint ignore:line\r
							label: langCell.chooseColor,\r
							onLoad: function() {\r
								// Stick the element to the bottom (#5587)\r
								this.getElement().getParent().setStyle( 'vertical-align', 'bottom' );\r
							},\r
							onClick: function() {\r
								editor.getColorFromDialog( function( color ) {\r
									if ( color )\r
										this.getDialog().getContentElement( 'info', 'bgColor' ).setValue( color );\r
									this.focus();\r
								}, this );\r
							}\r
						} : spacer ]\r
					},\r
					spacer,\r
					{\r
						type: 'hbox',\r
						padding: 0,\r
						widths: [ '60%', '40%' ],\r
						children: [ {\r
							type: 'text',\r
							id: 'borderColor',\r
							label: langCell.borderColor,\r
							'default': '',\r
							setup: setupCells( function( element ) {\r
								var borderColorAttr = element.getAttribute( 'borderColor' ),\r
									borderColorStyle = element.getStyle( 'border-color' );\r
\r
								return borderColorStyle || borderColorAttr;\r
							} ),\r
							commit: function( selectedCell ) {\r
								var value = this.getValue();\r
								if ( value )\r
									selectedCell.setStyle( 'border-color', this.getValue() );\r
								else\r
									selectedCell.removeStyle( 'border-color' );\r
\r
								selectedCell.removeAttribute( 'borderColor' );\r
							}\r
						},\r
\r
						colorDialog ? {\r
							type: 'button',\r
							id: 'borderColorChoose',\r
							'class': 'colorChooser', // jshint ignore:line\r
							label: langCell.chooseColor,\r
							style: ( rtl ? 'margin-right' : 'margin-left' ) + ': 10px',\r
							onLoad: function() {\r
								// Stick the element to the bottom (#5587)\r
								this.getElement().getParent().setStyle( 'vertical-align', 'bottom' );\r
							},\r
							onClick: function() {\r
								editor.getColorFromDialog( function( color ) {\r
									if ( color )\r
										this.getDialog().getContentElement( 'info', 'borderColor' ).setValue( color );\r
									this.focus();\r
								}, this );\r
							}\r
						} : spacer ]\r
					} ]\r
				} ]\r
			} ]\r
		} ],\r
		onShow: function() {\r
			this.cells = CKEDITOR.plugins.tabletools.getSelectedCells( this._.editor.getSelection() );\r
			this.setupContent( this.cells );\r
		},\r
		onOk: function() {\r
			var selection = this._.editor.getSelection(),\r
				bookmarks = selection.createBookmarks();\r
\r
			var cells = this.cells;\r
			for ( var i = 0; i < cells.length; i++ )\r
				this.commitContent( cells[ i ] );\r
\r
			this._.editor.forceNextSelectionCheck();\r
			selection.selectBookmarks( bookmarks );\r
			this._.editor.selectionChange();\r
		},\r
		onLoad: function() {\r
			var saved = {};\r
\r
			// Prevent from changing cell properties when the field's value\r
			// remains unaltered, i.e. when selected multiple cells and dialog loaded\r
			// only the properties of the first cell (#11439).\r
			this.foreach( function( field ) {\r
				if ( !field.setup || !field.commit )\r
					return;\r
\r
				// Save field's value every time after "setup" is called.\r
				field.setup = CKEDITOR.tools.override( field.setup, function( orgSetup ) {\r
					return function() {\r
						orgSetup.apply( this, arguments );\r
						saved[ field.id ] = field.getValue();\r
					};\r
				} );\r
\r
				// Compare saved value with actual value. Update cell only if value has changed.\r
				field.commit = CKEDITOR.tools.override( field.commit, function( orgCommit ) {\r
					return function() {\r
						if ( saved[ field.id ] !== field.getValue() )\r
							orgCommit.apply( this, arguments );\r
					};\r
				} );\r
			} );\r
		}\r
	};\r
} );\r