/*\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
return { type : 'html', html : ' ' };\r
}\r
\r
+ /**\r
+ *\r
+ * @param dialogName\r
+ * @param callback [ childDialog ]\r
+ */\r
+ function getDialogValue( dialogName, callback )\r
+ {\r
+ var onOk = function()\r
+ {\r
+ releaseHandlers( this );\r
+ callback( this );\r
+ };\r
+ var onCancel = function()\r
+ {\r
+ releaseHandlers( this );\r
+ };\r
+ var bindToDialog = function( dialog )\r
+ {\r
+ dialog.on( 'ok', onOk );\r
+ dialog.on( 'cancel', onCancel );\r
+ };\r
+ var releaseHandlers = function( dialog )\r
+ {\r
+ dialog.removeListener( 'ok', onOk );\r
+ dialog.removeListener( 'cancel', onCancel );\r
+ };\r
+ editor.execCommand( dialogName );\r
+ if ( editor._.storedDialogs.colordialog )\r
+ bindToDialog( editor._.storedDialogs.colordialog );\r
+ else\r
+ {\r
+ CKEDITOR.on( 'dialogDefinition', function( e )\r
+ {\r
+ if ( e.data.name != dialogName )\r
+ return;\r
+\r
+ var definition = e.data.definition;\r
+\r
+ e.removeListener();\r
+ definition.onLoad = CKEDITOR.tools.override( definition.onLoad, function( orginal )\r
+ {\r
+ return function()\r
+ {\r
+ bindToDialog( this );\r
+ definition.onLoad = orginal;\r
+ if ( typeof orginal == 'function' )\r
+ orginal.call( this );\r
+ };\r
+ } );\r
+ });\r
+ }\r
+ }\r
+\r
return {\r
title : langCell.title,\r
- minWidth : 480,\r
- minHeight : 140,\r
+ minWidth : CKEDITOR.env.ie && CKEDITOR.env.quirks ? 550 : 480,\r
+ minHeight : CKEDITOR.env.ie ? ( CKEDITOR.env.quirks ? 180 : 150 ) : 140,\r
contents : [\r
{\r
id : 'info',\r
[\r
{\r
type : 'hbox',\r
- widths : [ '45%', '10%', '45%' ],\r
+ widths : [ '40%', '5%', '40%' ],\r
children :\r
[\r
{\r
widths : [ '71%', '29%' ],\r
labelLayout : 'horizontal',\r
validate : validate[ 'number' ]( langCell.invalidWidth ),\r
- setup : function( selectedCell )\r
+\r
+ // Extra labelling of width unit type.\r
+ onLoad : function()\r
{\r
- var widthMatch = widthPattern.exec( selectedCell.$.style.width );\r
- if ( widthMatch )\r
- this.setValue( widthMatch[1] );\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
- commit : function( selectedCell )\r
+\r
+ setup : function( element )\r
{\r
- var unit = this.getDialog().getValueOf( 'info', 'widthType' );\r
- if ( this.getValue() !== '' )\r
- selectedCell.$.style.width = this.getValue() + unit;\r
+ var widthAttr = parseInt( element.getAttribute( 'width' ), 10 ),\r
+ widthStyle = parseInt( element.getStyle( 'width' ), 10 );\r
+\r
+ !isNaN( widthAttr ) && this.setValue( widthAttr );\r
+ !isNaN( widthStyle ) && this.setValue( widthStyle );\r
+ },\r
+ commit : function( element )\r
+ {\r
+ var value = parseInt( this.getValue(), 10 ),\r
+ unit = this.getDialog().getValueOf( 'info', 'widthType' );\r
+\r
+ if ( !isNaN( value ) )\r
+ element.setStyle( 'width', value + unit );\r
else\r
- selectedCell.$.style.width = '';\r
+ element.removeStyle( 'width' );\r
+\r
+ element.removeAttribute( 'width' );\r
},\r
'default' : ''\r
},\r
id : 'widthType',\r
labelLayout : 'horizontal',\r
widths : [ '0%', '100%' ],\r
- label : '',\r
+ label : editor.lang.table.widthUnit,\r
+ labelStyle: 'display:none',\r
'default' : 'px',\r
items :\r
[\r
widths : [ '71%', '29%' ],\r
labelLayout : 'horizontal',\r
validate : validate[ 'number' ]( langCell.invalidHeight ),\r
- setup : function( selectedCell )\r
+\r
+ // Extra labelling of height unit type.\r
+ onLoad : function()\r
{\r
- var heightMatch = heightPattern.exec( selectedCell.$.style.height );\r
- if ( heightMatch )\r
- this.setValue( heightMatch[1] );\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
- commit : function( selectedCell )\r
+\r
+ setup : function( element )\r
{\r
- if ( this.getValue() !== '' )\r
- selectedCell.$.style.height = this.getValue() + 'px';\r
+ var heightAttr = parseInt( element.getAttribute( 'height' ), 10 ),\r
+ heightStyle = parseInt( element.getStyle( 'height' ), 10 );\r
+\r
+ !isNaN( heightAttr ) && this.setValue( heightAttr );\r
+ !isNaN( heightStyle ) && this.setValue( heightStyle );\r
+ },\r
+ commit : function( element )\r
+ {\r
+ var value = parseInt( this.getValue(), 10 );\r
+\r
+ if ( !isNaN( value ) )\r
+ element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );\r
else\r
- selectedCell.$.style.height = '';\r
+ element.removeStyle( 'height' );\r
+\r
+ element.removeAttribute( 'height' );\r
}\r
},\r
{\r
+ id : 'htmlHeightType',\r
type : 'html',\r
html : langTable.widthPx\r
}\r
[ langCell.yes, 'yes' ],\r
[ langCell.no, 'no' ]\r
],\r
- commit : function( selectedCell )\r
+ setup : function( element )\r
+ {\r
+ var wordWrapAttr = element.getAttribute( 'noWrap' ),\r
+ wordWrapStyle = element.getStyle( 'white-space' );\r
+\r
+ if ( wordWrapStyle == 'nowrap' || wordWrapAttr )\r
+ this.setValue( 'no' );\r
+ },\r
+ commit : function( element )\r
{\r
if ( this.getValue() == 'no' )\r
- selectedCell.setAttribute( 'noWrap', 'nowrap' );\r
+ element.setStyle( 'white-space', 'nowrap' );\r
else\r
- selectedCell.removeAttribute( 'noWrap' );\r
+ element.removeStyle( 'white-space' );\r
+\r
+ element.removeAttribute( 'noWrap' );\r
}\r
},\r
spacer(),\r
[ langTable.alignCenter, 'center' ],\r
[ langTable.alignRight, 'right' ]\r
],\r
- setup : function( selectedCell )\r
+ setup : function( element )\r
{\r
- this.setValue( selectedCell.getAttribute( 'align' ) || '' );\r
+ var alignAttr = element.getAttribute( 'align' ),\r
+ textAlignStyle = element.getStyle( 'text-align');\r
+\r
+ this.setValue( textAlignStyle || alignAttr || '' );\r
},\r
commit : function( selectedCell )\r
{\r
- if ( this.getValue() )\r
- selectedCell.setAttribute( 'align', this.getValue() );\r
+ var value = this.getValue();\r
+\r
+ if ( value )\r
+ selectedCell.setStyle( 'text-align', value );\r
else\r
- selectedCell.removeAttribute( 'align' );\r
+ selectedCell.removeStyle( 'text-align' );\r
+\r
+ selectedCell.removeAttribute( 'align' );\r
}\r
},\r
{\r
[ langCell.alignBottom, 'bottom' ],\r
[ langCell.alignBaseline, 'baseline' ]\r
],\r
- setup : function( selectedCell )\r
+ setup : function( element )\r
{\r
- this.setValue( selectedCell.getAttribute( 'vAlign' ) || '' );\r
+ var vAlignAttr = element.getAttribute( 'vAlign' ),\r
+ vAlignStyle = element.getStyle( 'vertical-align' );\r
+\r
+ switch( vAlignStyle )\r
+ {\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
+ this.setValue( vAlignStyle || vAlignAttr || '' );\r
},\r
- commit : function( selectedCell )\r
+ commit : function( element )\r
{\r
- if ( this.getValue() )\r
- selectedCell.setAttribute( 'vAlign', this.getValue() );\r
+ var value = this.getValue();\r
+\r
+ if ( value )\r
+ element.setStyle( 'vertical-align', value );\r
else\r
- selectedCell.removeAttribute( 'vAlign' );\r
+ element.removeStyle( 'vertical-align' );\r
+\r
+ element.removeAttribute( 'vAlign' );\r
}\r
}\r
]\r
validate : validate.integer( langCell.invalidRowSpan ),\r
setup : function( selectedCell )\r
{\r
- this.setValue( selectedCell.getAttribute( 'rowSpan' ) || '' );\r
+ var attrVal = parseInt( selectedCell.getAttribute( 'rowSpan' ), 10 );\r
+ if ( attrVal && attrVal != 1 )\r
+ this.setValue( attrVal );\r
},\r
commit : function( selectedCell )\r
{\r
- if ( this.getValue() )\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
widths : [ '50%', '50%' ],\r
'default' : '',\r
validate : validate.integer( langCell.invalidColSpan ),\r
- setup : function( selectedCell )\r
+ setup : function( element )\r
{\r
- this.setValue( selectedCell.getAttribute( 'colSpan' ) || '' );\r
+ var attrVal = parseInt( element.getAttribute( 'colSpan' ), 10 );\r
+ if ( attrVal && attrVal != 1 )\r
+ this.setValue( attrVal );\r
},\r
commit : function( selectedCell )\r
{\r
- if ( this.getValue() )\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
spacer(),\r
{\r
- type : 'text',\r
- id : 'bgColor',\r
- label : langCell.bgColor,\r
- labelLayout : 'horizontal',\r
- widths : [ '50%', '50%' ],\r
- 'default' : '',\r
- setup : function( selectedCell )\r
- {\r
- this.setValue( selectedCell.getAttribute( 'bgColor' ) || '' );\r
- },\r
- commit : function( selectedCell )\r
- {\r
- if ( this.getValue() )\r
- selectedCell.setAttribute( 'bgColor', this.getValue() );\r
- else\r
- selectedCell.removeAttribute( 'bgColor' );\r
- }\r
+ type : 'hbox',\r
+ padding : 0,\r
+ widths : [ '80%', '20%' ],\r
+ children :\r
+ [\r
+ {\r
+ type : 'text',\r
+ id : 'bgColor',\r
+ label : langCell.bgColor,\r
+ labelLayout : 'horizontal',\r
+ widths : [ '70%', '30%' ],\r
+ 'default' : '',\r
+ setup : function( element )\r
+ {\r
+ var bgColorAttr = element.getAttribute( 'bgColor' ),\r
+ bgColorStyle = element.getStyle( 'background-color' );\r
+\r
+ this.setValue( bgColorStyle || bgColorAttr );\r
+ },\r
+ commit : function( selectedCell )\r
+ {\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
+ {\r
+ type : 'button',\r
+ id : 'bgColorChoose',\r
+ label : langCell.chooseColor,\r
+ style : 'margin-left: 10px',\r
+ onClick : function()\r
+ {\r
+ var self = this;\r
+ getDialogValue( 'colordialog', function( colorDialog )\r
+ {\r
+ self.getDialog().getContentElement( 'info', 'bgColor' ).setValue(\r
+ colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()\r
+ );\r
+ } );\r
+ }\r
+ }\r
+ ]\r
},\r
+ spacer(),\r
{\r
- type : 'text',\r
- id : 'borderColor',\r
- label : langCell.borderColor,\r
- labelLayout : 'horizontal',\r
- widths : [ '50%', '50%' ],\r
- 'default' : '',\r
- setup : function( selectedCell )\r
- {\r
- this.setValue( selectedCell.getAttribute( 'borderColor' ) || '' );\r
- },\r
- commit : function( selectedCell )\r
- {\r
- if ( this.getValue() )\r
- selectedCell.setAttribute( 'borderColor', this.getValue() );\r
- else\r
- selectedCell.removeAttribute( 'borderColor' );\r
- }\r
+ type : 'hbox',\r
+ padding : 0,\r
+ widths : [ '80%', '20%' ],\r
+ children :\r
+ [\r
+ {\r
+ type : 'text',\r
+ id : 'borderColor',\r
+ label : langCell.borderColor,\r
+ labelLayout : 'horizontal',\r
+ widths : [ '70%', '30%' ],\r
+ 'default' : '',\r
+ setup : function( element )\r
+ {\r
+ var borderColorAttr = element.getAttribute( 'borderColor' ),\r
+ borderColorStyle = element.getStyle( 'border-color' );\r
+\r
+ this.setValue( borderColorStyle || borderColorAttr );\r
+ },\r
+ commit : function( selectedCell )\r
+ {\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
+ type : 'button',\r
+ id : 'borderColorChoose',\r
+ label : langCell.chooseColor,\r
+ style : 'margin-left: 10px',\r
+ onClick : function()\r
+ {\r
+ var self = this;\r
+ getDialogValue( 'colordialog', function( colorDialog )\r
+ {\r
+ self.getDialog().getContentElement( 'info', 'borderColor' ).setValue(\r
+ colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue()\r
+ );\r
+ } );\r
+ }\r
+ }\r
+ ]\r
}\r
]\r
}\r
},\r
onOk : function()\r
{\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
+ selection.selectBookmarks( bookmarks );\r
}\r
};\r
} );\r
Got questions, comments, patches, etc.? Contact Jason Woofenden