--- /dev/null
+/*\r
+Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.html or http://ckeditor.com/license\r
+*/\r
+\r
+(function()\r
+{\r
+ var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,\r
+ heightPattern = /^(\d+(?:\.\d+)?)px$/;\r
+\r
+ var commitValue = function( data )\r
+ {\r
+ var id = this.id;\r
+ if ( !data.info )\r
+ data.info = {};\r
+ data.info[id] = this.getValue();\r
+ };\r
+\r
+ function tableDialog( editor, command )\r
+ {\r
+ var makeElement = function( name ){ return new CKEDITOR.dom.element( name, editor.document ); };\r
+\r
+ return {\r
+ title : editor.lang.table.title,\r
+ minWidth : 310,\r
+ minHeight : CKEDITOR.env.ie ? 310 : 280,\r
+ onShow : function()\r
+ {\r
+ // Detect if there's a selected table.\r
+ var selection = editor.getSelection(),\r
+ ranges = selection.getRanges(),\r
+ selectedTable = null;\r
+\r
+ var rowsInput = this.getContentElement( 'info', 'txtRows' ),\r
+ colsInput = this.getContentElement( 'info', 'txtCols' ),\r
+ widthInput = this.getContentElement( 'info', 'txtWidth' );\r
+ if ( command == 'tableProperties' )\r
+ {\r
+ if ( ( selectedTable = editor.getSelection().getSelectedElement() ) )\r
+ {\r
+ if ( selectedTable.getName() != 'table' )\r
+ selectedTable = null;\r
+ }\r
+ else if ( ranges.length > 0 )\r
+ {\r
+ var rangeRoot = ranges[0].getCommonAncestor( true );\r
+ selectedTable = rangeRoot.getAscendant( 'table', true );\r
+ }\r
+\r
+ // Save a reference to the selected table, and push a new set of default values.\r
+ this._.selectedElement = selectedTable;\r
+ }\r
+\r
+ // Enable, disable and select the row, cols, width fields.\r
+ if ( selectedTable )\r
+ {\r
+ this.setupContent( selectedTable );\r
+ rowsInput && rowsInput.disable();\r
+ colsInput && colsInput.disable();\r
+ widthInput && widthInput.select();\r
+ }\r
+ else\r
+ {\r
+ rowsInput && rowsInput.enable();\r
+ colsInput && colsInput.enable();\r
+ rowsInput && rowsInput.select();\r
+ }\r
+ },\r
+ onOk : function()\r
+ {\r
+ var table = this._.selectedElement || makeElement( 'table' ),\r
+ me = this,\r
+ data = {};\r
+\r
+ this.commitContent( data, table );\r
+\r
+ if ( data.info )\r
+ {\r
+ var info = data.info;\r
+\r
+ // Generate the rows and cols.\r
+ if ( !this._.selectedElement )\r
+ {\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
+ {\r
+ var row = tbody.append( makeElement( 'tr' ) );\r
+ for ( var j = 0 ; j < cols ; j++ )\r
+ {\r
+ var cell = row.append( makeElement( 'td' ) );\r
+ if ( !CKEDITOR.env.ie )\r
+ cell.append( makeElement( 'br' ) );\r
+ }\r
+ }\r
+ }\r
+\r
+ // Modify the table headers. Depends on havint 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
+ {\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
+ {\r
+ var th = theRow.getChild( i );\r
+ if ( th.type == CKEDITOR.NODE_ELEMENT )\r
+ {\r
+ th.renameNode( 'th' );\r
+ if ( !i )\r
+ th.setAttribute( 'scope', 'col' );\r
+ }\r
+ }\r
+ thead.append( theRow.remove() );\r
+ }\r
+\r
+ if ( table.$.tHead !== null && !( headers == 'row' || headers == 'both' ) )\r
+ {\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
+ {\r
+ theRow = thead.getFirst();\r
+ for ( i = 0; i < theRow.getChildCount() ; i++ )\r
+ {\r
+ var newCell = theRow.getChild( i );\r
+ if ( newCell.type == CKEDITOR.NODE_ELEMENT )\r
+ {\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
+ {\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
+ }\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
+ {\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.removeAttribute( 'scope' );\r
+ }\r
+ }\r
+ }\r
+\r
+ // Set the width and height.\r
+ var styles = [];\r
+ if ( info.txtHeight )\r
+ styles.push( 'height:' + info.txtHeight + 'px' );\r
+ if ( info.txtWidth )\r
+ {\r
+ var type = info.cmbWidthType || 'pixels';\r
+ styles.push( 'width:' + info.txtWidth + ( type == 'pixels' ? 'px' : '%' ) );\r
+ }\r
+ styles = styles.join( ';' );\r
+ if ( styles )\r
+ table.$.style.cssText = styles;\r
+ else\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
+\r
+ return true;\r
+ },\r
+ contents : [\r
+ {\r
+ id : 'info',\r
+ label : editor.lang.table.title,\r
+ elements :\r
+ [\r
+ {\r
+ type : 'hbox',\r
+ widths : [ null, null ],\r
+ styles : [ 'vertical-align:top' ],\r
+ children :\r
+ [\r
+ {\r
+ type : 'vbox',\r
+ padding : 0,\r
+ children :\r
+ [\r
+ {\r
+ type : 'text',\r
+ id : 'txtRows',\r
+ 'default' : 3,\r
+ label : editor.lang.table.rows,\r
+ style : 'width:5em',\r
+ validate : function()\r
+ {\r
+ var pass = true,\r
+ value = this.getValue();\r
+ pass = pass && CKEDITOR.dialog.validate.integer()( value )\r
+ && value > 0;\r
+ if ( !pass )\r
+ {\r
+ alert( editor.lang.table.invalidRows );\r
+ this.select();\r
+ }\r
+ return pass;\r
+ },\r
+ setup : function( selectedElement )\r
+ {\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
+ style : 'width:5em',\r
+ validate : function()\r
+ {\r
+ var pass = true,\r
+ value = this.getValue();\r
+ pass = pass && CKEDITOR.dialog.validate.integer()( value )\r
+ && value > 0;\r
+ if ( !pass )\r
+ {\r
+ alert( editor.lang.table.invalidCols );\r
+ this.select();\r
+ }\r
+ return pass;\r
+ },\r
+ setup : function( selectedTable )\r
+ {\r
+ this.setValue( selectedTable.$.rows[0].cells.length);\r
+ },\r
+ commit : commitValue\r
+ },\r
+ {\r
+ type : 'html',\r
+ html : ' '\r
+ },\r
+ {\r
+ type : 'select',\r
+ id : 'selHeaders',\r
+ 'default' : '',\r
+ label : editor.lang.table.headers,\r
+ items :\r
+ [\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
+ {\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
+ {\r
+ // If just one cell isn't a TH then it isn't a header column\r
+ if ( selectedTable.$.rows[row].cells[0].nodeName.toLowerCase() != 'th' )\r
+ {\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
+ 'default' : 1,\r
+ label : editor.lang.table.border,\r
+ style : 'width:3em',\r
+ validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidBorder ),\r
+ setup : function( selectedTable )\r
+ {\r
+ this.setValue( selectedTable.getAttribute( 'border' ) || '' );\r
+ },\r
+ commit : function( data, selectedTable )\r
+ {\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
+ 'default' : '',\r
+ label : editor.lang.table.align,\r
+ items :\r
+ [\r
+ [ editor.lang.table.alignNotSet , ''],\r
+ [ editor.lang.table.alignLeft , 'left'],\r
+ [ editor.lang.table.alignCenter , 'center'],\r
+ [ editor.lang.table.alignRight , 'right']\r
+ ],\r
+ setup : function( selectedTable )\r
+ {\r
+ this.setValue( selectedTable.getAttribute( 'align' ) || '' );\r
+ },\r
+ commit : function( data, selectedTable )\r
+ {\r
+ if ( this.getValue() )\r
+ selectedTable.setAttribute( 'align', this.getValue() );\r
+ else\r
+ selectedTable.removeAttribute( 'align' );\r
+ }\r
+ }\r
+ ]\r
+ },\r
+ {\r
+ type : 'vbox',\r
+ padding : 0,\r
+ children :\r
+ [\r
+ {\r
+ type : 'hbox',\r
+ widths : [ '5em' ],\r
+ children :\r
+ [\r
+ {\r
+ type : 'text',\r
+ id : 'txtWidth',\r
+ style : 'width:5em',\r
+ label : editor.lang.table.width,\r
+ 'default' : 200,\r
+ validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidWidth ),\r
+ setup : function( selectedTable )\r
+ {\r
+ var widthMatch = widthPattern.exec( selectedTable.$.style.width );\r
+ if ( widthMatch )\r
+ this.setValue( widthMatch[1] );\r
+ },\r
+ commit : commitValue\r
+ },\r
+ {\r
+ id : 'cmbWidthType',\r
+ type : 'select',\r
+ label : ' ',\r
+ 'default' : 'pixels',\r
+ items :\r
+ [\r
+ [ editor.lang.table.widthPx , 'pixels'],\r
+ [ editor.lang.table.widthPc , 'percents']\r
+ ],\r
+ setup : function( selectedTable )\r
+ {\r
+ var widthMatch = widthPattern.exec( selectedTable.$.style.width );\r
+ if ( widthMatch )\r
+ this.setValue( widthMatch[2] == 'px' ? 'pixels' : 'percents' );\r
+ },\r
+ commit : commitValue\r
+ }\r
+ ]\r
+ },\r
+ {\r
+ type : 'hbox',\r
+ widths : [ '5em' ],\r
+ children :\r
+ [\r
+ {\r
+ type : 'text',\r
+ id : 'txtHeight',\r
+ style : 'width:5em',\r
+ label : editor.lang.table.height,\r
+ 'default' : '',\r
+ validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidHeight ),\r
+ setup : function( selectedTable )\r
+ {\r
+ var heightMatch = heightPattern.exec( selectedTable.$.style.height );\r
+ if ( heightMatch )\r
+ this.setValue( heightMatch[1] );\r
+ },\r
+ commit : commitValue\r
+ },\r
+ {\r
+ type : 'html',\r
+ html : '<br />' + editor.lang.table.widthPx\r
+ }\r
+ ]\r
+ },\r
+ {\r
+ type : 'html',\r
+ html : ' '\r
+ },\r
+ {\r
+ type : 'text',\r
+ id : 'txtCellSpace',\r
+ style : 'width:3em',\r
+ label : editor.lang.table.cellSpace,\r
+ 'default' : 1,\r
+ validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellSpacing ),\r
+ setup : function( selectedTable )\r
+ {\r
+ this.setValue( selectedTable.getAttribute( 'cellSpacing' ) || '' );\r
+ },\r
+ commit : function( data, selectedTable )\r
+ {\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
+ style : 'width:3em',\r
+ label : editor.lang.table.cellPad,\r
+ 'default' : 1,\r
+ validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellPadding ),\r
+ setup : function( selectedTable )\r
+ {\r
+ this.setValue( selectedTable.getAttribute( 'cellPadding' ) || '' );\r
+ },\r
+ commit : function( data, selectedTable )\r
+ {\r
+ if ( this.getValue() )\r
+ selectedTable.setAttribute( 'cellPadding', this.getValue() );\r
+ else\r
+ selectedTable.removeAttribute( 'cellPadding' );\r
+ }\r
+ }\r
+ ]\r
+ }\r
+ ]\r
+ },\r
+ {\r
+ type : 'html',\r
+ align : 'right',\r
+ html : ''\r
+ },\r
+ {\r
+ type : 'vbox',\r
+ padding : 0,\r
+ children :\r
+ [\r
+ {\r
+ type : 'text',\r
+ id : 'txtCaption',\r
+ label : editor.lang.table.caption,\r
+ setup : function( selectedTable )\r
+ {\r
+ var nodeList = selectedTable.getElementsByTag( 'caption' );\r
+ if ( nodeList.count() > 0 )\r
+ {\r
+ var caption = nodeList.getItem( 0 );\r
+ caption = ( caption.getChild( 0 ) && caption.getChild( 0 ).getText() ) || '';\r
+ caption = CKEDITOR.tools.trim( caption );\r
+ this.setValue( caption );\r
+ }\r
+ },\r
+ commit : function( data, table )\r
+ {\r
+ var caption = this.getValue(),\r
+ captionElement = table.getElementsByTag( 'caption' );\r
+ if ( caption )\r
+ {\r
+ if ( captionElement.count() > 0 )\r
+ {\r
+ captionElement = captionElement.getItem( 0 );\r
+ captionElement.setHtml( '' );\r
+ }\r
+ else\r
+ {\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
+ }\r
+ else if ( captionElement.count() > 0 )\r
+ {\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
+ label : editor.lang.table.summary,\r
+ setup : function( selectedTable )\r
+ {\r
+ this.setValue( selectedTable.getAttribute( 'summary' ) || '' );\r
+ },\r
+ commit : function( data, selectedTable )\r
+ {\r
+ if ( this.getValue() )\r
+ selectedTable.setAttribute( 'summary', this.getValue() );\r
+ }\r
+ }\r
+ ]\r
+ }\r
+ ]\r
+ }\r
+ ]\r
+ };\r
+ }\r
+\r
+ CKEDITOR.dialog.add( 'table', function( editor )\r
+ {\r
+ return tableDialog( editor, 'table' );\r
+ } );\r
+ CKEDITOR.dialog.add( 'tableProperties', function( editor )\r
+ {\r
+ return tableDialog( editor, 'tableProperties' );\r
+ } );\r
+})();\r
Got questions, comments, patches, etc.? Contact Jason Woofenden