/*\r
-Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.html or http://ckeditor.com/license\r
*/\r
\r
\r
function tableDialog( editor, command )\r
{\r
- var makeElement = function( name ){ return new CKEDITOR.dom.element( name, editor.document ); };\r
+ var makeElement = function( name )\r
+ {\r
+ return new CKEDITOR.dom.element( name, editor.document );\r
+ };\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
+ {\r
+ var dialog = this,\r
+ isUpdating;\r
+\r
+ var styles = dialog.getContentElement( 'advanced', 'advStyles' );\r
+\r
+ if ( styles )\r
+ {\r
+ styles.on( 'change', function( evt )\r
+ {\r
+ if ( isUpdating )\r
+ return;\r
+\r
+ // Flag to avoid recursion.\r
+ isUpdating = 1;\r
+\r
+ // Synchronize width value.\r
+ var width = this.getStyle( 'width', '' ),\r
+ txtWidth = dialog.getContentElement( 'info', 'txtWidth' ),\r
+ cmbWidthType = dialog.getContentElement( 'info', 'cmbWidthType' ),\r
+ isPx = 1;\r
+\r
+ if ( width )\r
+ {\r
+ isPx = ( width.length < 3 || width.substr( width.length - 1 ) != '%' );\r
+ width = parseInt( width, 10 );\r
+ }\r
+\r
+ txtWidth && txtWidth.setValue( width );\r
+ cmbWidthType && cmbWidthType.setValue( isPx ? 'pixels' : 'percents' );\r
+\r
+ // Synchronize height value.\r
+ var height = this.getStyle( 'height', '' ),\r
+ txtHeight = dialog.getContentElement( 'info', 'txtHeight' );\r
+\r
+ height && ( height = parseInt( height, 10 ) );\r
+ txtHeight && txtHeight.setValue( height );\r
+\r
+ isUpdating = 0;\r
+ });\r
+ }\r
+ },\r
+\r
onShow : function()\r
{\r
// Detect if there's a selected table.\r
\r
var rowsInput = this.getContentElement( 'info', 'txtRows' ),\r
colsInput = this.getContentElement( 'info', 'txtCols' ),\r
- widthInput = this.getContentElement( 'info', 'txtWidth' );\r
+ widthInput = this.getContentElement( 'info', 'txtWidth' ),\r
+ heightInput = this.getContentElement( 'info', 'txtHeight' );\r
+\r
if ( command == 'tableProperties' )\r
{\r
if ( ( selectedTable = editor.getSelection().getSelectedElement() ) )\r
}\r
else if ( ranges.length > 0 )\r
{\r
+ // Webkit could report the following range on cell selection (#4948):\r
+ // <table><tr><td>[ </td></tr></table>]\r
+ if ( CKEDITOR.env.webkit )\r
+ ranges[ 0 ].shrink( CKEDITOR.NODE_ELEMENT );\r
+\r
var rangeRoot = ranges[0].getCommonAncestor( true );\r
selectedTable = rangeRoot.getAscendant( 'table', true );\r
}\r
colsInput && colsInput.enable();\r
rowsInput && rowsInput.select();\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
{\r
+ if ( this._.selectedElement )\r
+ {\r
+ var selection = editor.getSelection(),\r
+ bms = editor.getSelection().createBookmarks();\r
+ }\r
+\r
var table = this._.selectedElement || makeElement( 'table' ),\r
me = this,\r
data = {};\r
}\r
}\r
\r
- // Modify the table headers. Depends on havint rows and cols generated\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
if ( th.type == CKEDITOR.NODE_ELEMENT )\r
{\r
th.renameNode( 'th' );\r
- if ( !i )\r
- th.setAttribute( 'scope', 'col' );\r
+ th.setAttribute( 'scope', 'col' );\r
}\r
}\r
thead.append( theRow.remove() );\r
// Should we make all first cells in a row TH?\r
if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) )\r
{\r
- for( row = 0 ; row < table.$.rows.length ; row++ )\r
+ for ( row = 0 ; row < table.$.rows.length ; row++ )\r
{\r
newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ 0 ] );\r
newCell.renameNode( 'th' );\r
- newCell.setAttribute( 'scope', 'col' );\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
{\r
- for( i = 0 ; i < table.$.rows.length ; i++ )\r
+ for ( i = 0 ; i < table.$.rows.length ; i++ )\r
{\r
row = new CKEDITOR.dom.element( table.$.rows[i] );\r
if ( row.getParent().getName() == 'tbody' )\r
{\r
newCell = new CKEDITOR.dom.element( row.$.cells[0] );\r
- newCell.renameNode( 'td');\r
+ newCell.renameNode( 'td' );\r
newCell.removeAttribute( 'scope' );\r
}\r
}\r
// Set the width and height.\r
var styles = [];\r
if ( info.txtHeight )\r
- styles.push( 'height:' + info.txtHeight + 'px' );\r
+ table.setStyle( 'height', CKEDITOR.tools.cssLength( info.txtHeight ) );\r
+ else\r
+ table.removeStyle( 'height' );\r
+\r
if ( info.txtWidth )\r
{\r
var type = info.cmbWidthType || 'pixels';\r
- styles.push( 'width:' + info.txtWidth + ( type == 'pixels' ? 'px' : '%' ) );\r
+ table.setStyle( 'width', info.txtWidth + ( type == 'pixels' ? 'px' : '%' ) );\r
}\r
- styles = styles.join( ';' );\r
- if ( styles )\r
- table.$.style.cssText = styles;\r
else\r
+ 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
+ // Properly restore the selection inside table. (#4822)\r
+ else\r
+ selection.selectBookmarks( bms );\r
\r
return true;\r
},\r
id : 'txtRows',\r
'default' : 3,\r
label : editor.lang.table.rows,\r
+ required : true,\r
style : 'width:5em',\r
validate : function()\r
{\r
id : 'txtCols',\r
'default' : 2,\r
label : editor.lang.table.columns,\r
+ required : true,\r
style : 'width:5em',\r
validate : function()\r
{\r
label : editor.lang.table.align,\r
items :\r
[\r
- [ editor.lang.table.alignNotSet , ''],\r
+ [ editor.lang.common.notSet , ''],\r
[ editor.lang.table.alignLeft , 'left'],\r
[ editor.lang.table.alignCenter , 'center'],\r
[ editor.lang.table.alignRight , 'right']\r
id : 'txtWidth',\r
style : 'width:5em',\r
label : editor.lang.table.width,\r
- 'default' : 200,\r
+ 'default' : 500,\r
validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidWidth ),\r
+\r
+ // Extra labelling of width unit type.\r
+ onLoad : function()\r
+ {\r
+ var widthType = this.getDialog().getContentElement( 'info', 'cmbWidthType' ),\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
+ onChange : function()\r
+ {\r
+ var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
+\r
+ if ( styles )\r
+ {\r
+ var value = this.getValue();\r
+\r
+ if ( value )\r
+ value += this.getDialog().getContentElement( 'info', 'cmbWidthType' ).getValue() == 'percents' ? '%' : 'px';\r
+\r
+ styles.updateStyle( 'width', value );\r
+ }\r
+ },\r
+\r
setup : function( selectedTable )\r
{\r
var widthMatch = widthPattern.exec( selectedTable.$.style.width );\r
if ( widthMatch )\r
this.setValue( widthMatch[1] );\r
+ else\r
+ this.setValue( '' );\r
},\r
commit : commitValue\r
},\r
{\r
id : 'cmbWidthType',\r
type : 'select',\r
- label : ' ',\r
+ label : editor.lang.table.widthUnit,\r
+ labelStyle: 'visibility:hidden',\r
'default' : 'pixels',\r
items :\r
[\r
if ( widthMatch )\r
this.setValue( widthMatch[2] == 'px' ? 'pixels' : 'percents' );\r
},\r
+ onChange : function()\r
+ {\r
+ this.getDialog().getContentElement( 'info', 'txtWidth' ).onChange();\r
+ },\r
commit : commitValue\r
}\r
]\r
label : editor.lang.table.height,\r
'default' : '',\r
validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidHeight ),\r
+\r
+ // Extra labelling of height unit type.\r
+ onLoad : function()\r
+ {\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
+ onChange : function()\r
+ {\r
+ var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
+\r
+ if ( styles )\r
+ {\r
+ var value = this.getValue();\r
+ styles.updateStyle( 'height', value && ( value + 'px' ) );\r
+ }\r
+ },\r
+\r
setup : function( selectedTable )\r
{\r
var heightMatch = heightPattern.exec( selectedTable.$.style.height );\r
commit : commitValue\r
},\r
{\r
+ id : 'htmlHeightType',\r
type : 'html',\r
- html : '<br />' + editor.lang.table.widthPx\r
+ html : '<div><br />' + editor.lang.table.widthPx + '</div>'\r
}\r
]\r
},\r
{\r
if ( this.getValue() )\r
selectedTable.setAttribute( 'summary', this.getValue() );\r
+ else\r
+ selectedTable.removeAttribute( 'summary' );\r
}\r
}\r
]\r
}\r
]\r
- }\r
+ },\r
+ dialogadvtab && dialogadvtab.createAdvancedTab( editor )\r
]\r
};\r
}\r