Initial commit

[perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git] / sources / plugins / table / dialogs / table.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
( function() {\r
	var defaultToPixel = CKEDITOR.tools.cssLength;\r
\r
	var commitValue = function( data ) {\r
			var id = this.id;\r
			if ( !data.info )\r
				data.info = {};\r
			data.info[ id ] = this.getValue();\r
		};\r
\r
	function tableColumns( table ) {\r
		var cols = 0,\r
			maxCols = 0;\r
		for ( var i = 0, row, rows = table.$.rows.length; i < rows; i++ ) {\r
			row = table.$.rows[ i ], cols = 0;\r
			for ( var j = 0, cell, cells = row.cells.length; j < cells; j++ ) {\r
				cell = row.cells[ j ];\r
				cols += cell.colSpan;\r
			}\r
\r
			cols > maxCols && ( maxCols = cols );\r
		}\r
\r
		return maxCols;\r
	}\r
\r
\r
	// Whole-positive-integer validator.\r
	function validatorNum( msg ) {\r
		return function() {\r
			var value = this.getValue(),\r
				pass = !!( CKEDITOR.dialog.validate.integer()( value ) && value > 0 );\r
\r
			if ( !pass ) {\r
				alert( msg ); // jshint ignore:line\r
				this.select();\r
			}\r
\r
			return pass;\r
		};\r
	}\r
\r
	function tableDialog( editor, command ) {\r
		var makeElement = function( name ) {\r
				return new CKEDITOR.dom.element( name, editor.document );\r
			};\r
\r
		var editable = editor.editable();\r
\r
		var dialogadvtab = editor.plugins.dialogadvtab;\r
\r
		return {\r
			title: editor.lang.table.title,\r
			minWidth: 310,\r
			minHeight: CKEDITOR.env.ie ? 310 : 280,\r
\r
			onLoad: function() {\r
				var dialog = this;\r
\r
				var styles = dialog.getContentElement( 'advanced', 'advStyles' );\r
\r
				if ( styles ) {\r
					styles.on( 'change', function() {\r
						// Synchronize width value.\r
						var width = this.getStyle( 'width', '' ),\r
							txtWidth = dialog.getContentElement( 'info', 'txtWidth' );\r
\r
						txtWidth && txtWidth.setValue( width, true );\r
\r
						// Synchronize height value.\r
						var height = this.getStyle( 'height', '' ),\r
							txtHeight = dialog.getContentElement( 'info', 'txtHeight' );\r
\r
						txtHeight && txtHeight.setValue( height, true );\r
					} );\r
				}\r
			},\r
\r
			onShow: function() {\r
				// Detect if there's a selected table.\r
				var selection = editor.getSelection(),\r
					ranges = selection.getRanges(),\r
					table;\r
\r
				var rowsInput = this.getContentElement( 'info', 'txtRows' ),\r
					colsInput = this.getContentElement( 'info', 'txtCols' ),\r
					widthInput = this.getContentElement( 'info', 'txtWidth' ),\r
					heightInput = this.getContentElement( 'info', 'txtHeight' );\r
\r
				if ( command == 'tableProperties' ) {\r
					var selected = selection.getSelectedElement();\r
					if ( selected && selected.is( 'table' ) )\r
						table = selected;\r
					else if ( ranges.length > 0 ) {\r
						// Webkit could report the following range on cell selection (#4948):\r
						// <table><tr><td>[&nbsp;</td></tr></table>]\r
						if ( CKEDITOR.env.webkit )\r
							ranges[ 0 ].shrink( CKEDITOR.NODE_ELEMENT );\r
\r
						table = editor.elementPath( ranges[ 0 ].getCommonAncestor( true ) ).contains( 'table', 1 );\r
					}\r
\r
					// Save a reference to the selected table, and push a new set of default values.\r
					this._.selectedElement = table;\r
				}\r
\r
				// Enable or disable the row, cols, width fields.\r
				if ( table ) {\r
					this.setupContent( table );\r
					rowsInput && rowsInput.disable();\r
					colsInput && colsInput.disable();\r
				} else {\r
					rowsInput && rowsInput.enable();\r
					colsInput && colsInput.enable();\r
				}\r
\r
				// Call the onChange method for the widht and height fields so\r
				// they get reflected into the Advanced tab.\r
				widthInput && widthInput.onChange();\r
				heightInput && heightInput.onChange();\r
			},\r
			onOk: function() {\r
				var selection = editor.getSelection(),\r
					bms = this._.selectedElement && selection.createBookmarks();\r
\r
				var table = this._.selectedElement || makeElement( 'table' ),\r
					data = {};\r
\r
				this.commitContent( data, table );\r
\r
				if ( data.info ) {\r
					var info = data.info;\r
\r
					// Generate the rows and cols.\r
					if ( !this._.selectedElement ) {\r
						var tbody = table.append( makeElement( 'tbody' ) ),\r
							rows = parseInt( info.txtRows, 10 ) || 0,\r
							cols = parseInt( info.txtCols, 10 ) || 0;\r
\r
						for ( var i = 0; i < rows; i++ ) {\r
							var row = tbody.append( makeElement( 'tr' ) );\r
							for ( var j = 0; j < cols; j++ ) {\r
								var cell = row.append( makeElement( 'td' ) );\r
								cell.appendBogus();\r
							}\r
						}\r
					}\r
\r
					// Modify the table headers. Depends on having rows and cols generated\r
					// correctly so it can't be done in commit functions.\r
\r
					// Should we make a <thead>?\r
					var headers = info.selHeaders;\r
					if ( !table.$.tHead && ( headers == 'row' || headers == 'both' ) ) {\r
						var thead = new CKEDITOR.dom.element( table.$.createTHead() );\r
						tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );\r
						var theRow = tbody.getElementsByTag( 'tr' ).getItem( 0 );\r
\r
						// Change TD to TH:\r
						for ( i = 0; i < theRow.getChildCount(); i++ ) {\r
							var th = theRow.getChild( i );\r
							// Skip bookmark nodes. (#6155)\r
							if ( th.type == CKEDITOR.NODE_ELEMENT && !th.data( 'cke-bookmark' ) ) {\r
								th.renameNode( 'th' );\r
								th.setAttribute( 'scope', 'col' );\r
							}\r
						}\r
						thead.append( theRow.remove() );\r
					}\r
\r
					if ( table.$.tHead !== null && !( headers == 'row' || headers == 'both' ) ) {\r
						// Move the row out of the THead and put it in the TBody:\r
						thead = new CKEDITOR.dom.element( table.$.tHead );\r
						tbody = table.getElementsByTag( 'tbody' ).getItem( 0 );\r
\r
						var previousFirstRow = tbody.getFirst();\r
						while ( thead.getChildCount() > 0 ) {\r
							theRow = thead.getFirst();\r
							for ( i = 0; i < theRow.getChildCount(); i++ ) {\r
								var newCell = theRow.getChild( i );\r
								if ( newCell.type == CKEDITOR.NODE_ELEMENT ) {\r
									newCell.renameNode( 'td' );\r
									newCell.removeAttribute( 'scope' );\r
								}\r
							}\r
							theRow.insertBefore( previousFirstRow );\r
						}\r
						thead.remove();\r
					}\r
\r
					// Should we make all first cells in a row TH?\r
					if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) ) {\r
						for ( row = 0; row < table.$.rows.length; row++ ) {\r
							newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ 0 ] );\r
							newCell.renameNode( 'th' );\r
							newCell.setAttribute( 'scope', 'row' );\r
						}\r
					}\r
\r
					// Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)\r
					if ( ( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' ) ) {\r
						for ( i = 0; i < table.$.rows.length; i++ ) {\r
							row = new CKEDITOR.dom.element( table.$.rows[ i ] );\r
							if ( row.getParent().getName() == 'tbody' ) {\r
								newCell = new CKEDITOR.dom.element( row.$.cells[ 0 ] );\r
								newCell.renameNode( 'td' );\r
								newCell.removeAttribute( 'scope' );\r
							}\r
						}\r
					}\r
\r
					// Set the width and height.\r
					info.txtHeight ? table.setStyle( 'height', info.txtHeight ) : table.removeStyle( 'height' );\r
					info.txtWidth ? table.setStyle( 'width', info.txtWidth ) : table.removeStyle( 'width' );\r
\r
					if ( !table.getAttribute( 'style' ) )\r
						table.removeAttribute( 'style' );\r
				}\r
\r
				// Insert the table element if we're creating one.\r
				if ( !this._.selectedElement ) {\r
					editor.insertElement( table );\r
					// Override the default cursor position after insertElement to place\r
					// cursor inside the first cell (#7959), IE needs a while.\r
					setTimeout( function() {\r
						var firstCell = new CKEDITOR.dom.element( table.$.rows[ 0 ].cells[ 0 ] );\r
						var range = editor.createRange();\r
						range.moveToPosition( firstCell, CKEDITOR.POSITION_AFTER_START );\r
						range.select();\r
					}, 0 );\r
				}\r
				// Properly restore the selection, (#4822) but don't break\r
				// because of this, e.g. updated table caption.\r
				else {\r
					try {\r
						selection.selectBookmarks( bms );\r
					} catch ( er ) {\r
					}\r
				}\r
			},\r
			contents: [ {\r
				id: 'info',\r
				label: editor.lang.table.title,\r
				elements: [ {\r
					type: 'hbox',\r
					widths: [ null, null ],\r
					styles: [ 'vertical-align:top' ],\r
					children: [ {\r
						type: 'vbox',\r
						padding: 0,\r
						children: [ {\r
							type: 'text',\r
							id: 'txtRows',\r
							'default': 3,\r
							label: editor.lang.table.rows,\r
							required: true,\r
							controlStyle: 'width:5em',\r
							validate: validatorNum( editor.lang.table.invalidRows ),\r
							setup: function( selectedElement ) {\r
								this.setValue( selectedElement.$.rows.length );\r
							},\r
							commit: commitValue\r
						},\r
						{\r
							type: 'text',\r
							id: 'txtCols',\r
							'default': 2,\r
							label: editor.lang.table.columns,\r
							required: true,\r
							controlStyle: 'width:5em',\r
							validate: validatorNum( editor.lang.table.invalidCols ),\r
							setup: function( selectedTable ) {\r
								this.setValue( tableColumns( selectedTable ) );\r
							},\r
							commit: commitValue\r
						},\r
						{\r
							type: 'html',\r
							html: '&nbsp;'\r
						},\r
						{\r
							type: 'select',\r
							id: 'selHeaders',\r
							requiredContent: 'th',\r
							'default': '',\r
							label: editor.lang.table.headers,\r
							items: [\r
								[ editor.lang.table.headersNone, '' ],\r
								[ editor.lang.table.headersRow, 'row' ],\r
								[ editor.lang.table.headersColumn, 'col' ],\r
								[ editor.lang.table.headersBoth, 'both' ]\r
							],\r
							setup: function( selectedTable ) {\r
								// Fill in the headers field.\r
								var dialog = this.getDialog();\r
								dialog.hasColumnHeaders = true;\r
\r
								// Check if all the first cells in every row are TH\r
								for ( var row = 0; row < selectedTable.$.rows.length; row++ ) {\r
									// If just one cell isn't a TH then it isn't a header column\r
									var headCell = selectedTable.$.rows[ row ].cells[ 0 ];\r
									if ( headCell && headCell.nodeName.toLowerCase() != 'th' ) {\r
										dialog.hasColumnHeaders = false;\r
										break;\r
									}\r
								}\r
\r
								// Check if the table contains <thead>.\r
								if ( ( selectedTable.$.tHead !== null ) )\r
									this.setValue( dialog.hasColumnHeaders ? 'both' : 'row' );\r
								else\r
									this.setValue( dialog.hasColumnHeaders ? 'col' : '' );\r
							},\r
							commit: commitValue\r
						},\r
						{\r
							type: 'text',\r
							id: 'txtBorder',\r
							requiredContent: 'table[border]',\r
							// Avoid setting border which will then disappear.\r
							'default': editor.filter.check( 'table[border]' ) ? 1 : 0,\r
							label: editor.lang.table.border,\r
							controlStyle: 'width:3em',\r
							validate: CKEDITOR.dialog.validate.number( editor.lang.table.invalidBorder ),\r
							setup: function( selectedTable ) {\r
								this.setValue( selectedTable.getAttribute( 'border' ) || '' );\r
							},\r
							commit: function( data, selectedTable ) {\r
								if ( this.getValue() )\r
									selectedTable.setAttribute( 'border', this.getValue() );\r
								else\r
									selectedTable.removeAttribute( 'border' );\r
							}\r
						},\r
						{\r
							id: 'cmbAlign',\r
							type: 'select',\r
							requiredContent: 'table[align]',\r
							'default': '',\r
							label: editor.lang.common.align,\r
							items: [\r
								[ editor.lang.common.notSet, '' ],\r
								[ editor.lang.common.alignLeft, 'left' ],\r
								[ editor.lang.common.alignCenter, 'center' ],\r
								[ editor.lang.common.alignRight, 'right' ]\r
							],\r
							setup: function( selectedTable ) {\r
								this.setValue( selectedTable.getAttribute( 'align' ) || '' );\r
							},\r
							commit: function( data, selectedTable ) {\r
								if ( this.getValue() )\r
									selectedTable.setAttribute( 'align', this.getValue() );\r
								else\r
									selectedTable.removeAttribute( 'align' );\r
							}\r
						} ]\r
					},\r
					{\r
						type: 'vbox',\r
						padding: 0,\r
						children: [ {\r
							type: 'hbox',\r
							widths: [ '5em' ],\r
							children: [ {\r
								type: 'text',\r
								id: 'txtWidth',\r
								requiredContent: 'table{width}',\r
								controlStyle: 'width:5em',\r
								label: editor.lang.common.width,\r
								title: editor.lang.common.cssLengthTooltip,\r
								// Smarter default table width. (#9600)\r
								'default': editor.filter.check( 'table{width}' ) ? ( editable.getSize( 'width' ) < 500 ? '100%' : 500 ) : 0,\r
								getValue: defaultToPixel,\r
								validate: CKEDITOR.dialog.validate.cssLength( editor.lang.common.invalidCssLength.replace( '%1', editor.lang.common.width ) ),\r
								onChange: function() {\r
									var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
									styles && styles.updateStyle( 'width', this.getValue() );\r
								},\r
								setup: function( selectedTable ) {\r
									var val = selectedTable.getStyle( 'width' );\r
									this.setValue( val );\r
								},\r
								commit: commitValue\r
							} ]\r
						},\r
						{\r
							type: 'hbox',\r
							widths: [ '5em' ],\r
							children: [ {\r
								type: 'text',\r
								id: 'txtHeight',\r
								requiredContent: 'table{height}',\r
								controlStyle: 'width:5em',\r
								label: editor.lang.common.height,\r
								title: editor.lang.common.cssLengthTooltip,\r
								'default': '',\r
								getValue: defaultToPixel,\r
								validate: CKEDITOR.dialog.validate.cssLength( editor.lang.common.invalidCssLength.replace( '%1', editor.lang.common.height ) ),\r
								onChange: function() {\r
									var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
									styles && styles.updateStyle( 'height', this.getValue() );\r
								},\r
\r
								setup: function( selectedTable ) {\r
									var val = selectedTable.getStyle( 'height' );\r
									val && this.setValue( val );\r
								},\r
								commit: commitValue\r
							} ]\r
						},\r
						{\r
							type: 'html',\r
							html: '&nbsp;'\r
						},\r
						{\r
							type: 'text',\r
							id: 'txtCellSpace',\r
							requiredContent: 'table[cellspacing]',\r
							controlStyle: 'width:3em',\r
							label: editor.lang.table.cellSpace,\r
							'default': editor.filter.check( 'table[cellspacing]' ) ? 1 : 0,\r
							validate: CKEDITOR.dialog.validate.number( editor.lang.table.invalidCellSpacing ),\r
							setup: function( selectedTable ) {\r
								this.setValue( selectedTable.getAttribute( 'cellSpacing' ) || '' );\r
							},\r
							commit: function( data, selectedTable ) {\r
								if ( this.getValue() )\r
									selectedTable.setAttribute( 'cellSpacing', this.getValue() );\r
								else\r
									selectedTable.removeAttribute( 'cellSpacing' );\r
							}\r
						},\r
						{\r
							type: 'text',\r
							id: 'txtCellPad',\r
							requiredContent: 'table[cellpadding]',\r
							controlStyle: 'width:3em',\r
							label: editor.lang.table.cellPad,\r
							'default': editor.filter.check( 'table[cellpadding]' ) ? 1 : 0,\r
							validate: CKEDITOR.dialog.validate.number( editor.lang.table.invalidCellPadding ),\r
							setup: function( selectedTable ) {\r
								this.setValue( selectedTable.getAttribute( 'cellPadding' ) || '' );\r
							},\r
							commit: function( data, selectedTable ) {\r
								if ( this.getValue() )\r
									selectedTable.setAttribute( 'cellPadding', this.getValue() );\r
								else\r
									selectedTable.removeAttribute( 'cellPadding' );\r
							}\r
						} ]\r
					} ]\r
				},\r
				{\r
					type: 'html',\r
					align: 'right',\r
					html: ''\r
				},\r
				{\r
					type: 'vbox',\r
					padding: 0,\r
					children: [ {\r
						type: 'text',\r
						id: 'txtCaption',\r
						requiredContent: 'caption',\r
						label: editor.lang.table.caption,\r
						setup: function( selectedTable ) {\r
							this.enable();\r
\r
							var nodeList = selectedTable.getElementsByTag( 'caption' );\r
							if ( nodeList.count() > 0 ) {\r
								var caption = nodeList.getItem( 0 );\r
								var firstElementChild = caption.getFirst( CKEDITOR.dom.walker.nodeType( CKEDITOR.NODE_ELEMENT ) );\r
\r
								if ( firstElementChild && !firstElementChild.equals( caption.getBogus() ) ) {\r
									this.disable();\r
									this.setValue( caption.getText() );\r
									return;\r
								}\r
\r
								caption = CKEDITOR.tools.trim( caption.getText() );\r
								this.setValue( caption );\r
							}\r
						},\r
						commit: function( data, table ) {\r
							if ( !this.isEnabled() )\r
								return;\r
\r
							var caption = this.getValue(),\r
								captionElement = table.getElementsByTag( 'caption' );\r
							if ( caption ) {\r
								if ( captionElement.count() > 0 ) {\r
									captionElement = captionElement.getItem( 0 );\r
									captionElement.setHtml( '' );\r
								} else {\r
									captionElement = new CKEDITOR.dom.element( 'caption', editor.document );\r
									if ( table.getChildCount() )\r
										captionElement.insertBefore( table.getFirst() );\r
									else\r
										captionElement.appendTo( table );\r
								}\r
								captionElement.append( new CKEDITOR.dom.text( caption, editor.document ) );\r
							} else if ( captionElement.count() > 0 ) {\r
								for ( var i = captionElement.count() - 1; i >= 0; i-- )\r
									captionElement.getItem( i ).remove();\r
							}\r
						}\r
					},\r
					{\r
						type: 'text',\r
						id: 'txtSummary',\r
						bidi: true,\r
						requiredContent: 'table[summary]',\r
						label: editor.lang.table.summary,\r
						setup: function( selectedTable ) {\r
							this.setValue( selectedTable.getAttribute( 'summary' ) || '' );\r
						},\r
						commit: function( data, selectedTable ) {\r
							if ( this.getValue() )\r
								selectedTable.setAttribute( 'summary', this.getValue() );\r
							else\r
								selectedTable.removeAttribute( 'summary' );\r
						}\r
					} ]\r
				} ]\r
			},\r
			dialogadvtab && dialogadvtab.createAdvancedTab( editor, null, 'table' )\r
		] };\r
	}\r
\r
	CKEDITOR.dialog.add( 'table', function( editor ) {\r
		return tableDialog( editor, 'table' );\r
	} );\r
	CKEDITOR.dialog.add( 'tableProperties', function( editor ) {\r
		return tableDialog( editor, 'tableProperties' );\r
	} );\r
} )();\r