+++ /dev/null
-/*\r
-Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.\r
-For licensing, see LICENSE.html or http://ckeditor.com/license\r
-*/\r
-\r
-CKEDITOR.dialog.add( 'cellProperties', function( editor )\r
- {\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
- heightPattern = /^(\d+(?:\.\d+)?)px$/,\r
- bind = CKEDITOR.tools.bind,\r
- spacer = { type : 'html', html : ' ' },\r
- rtl = editor.lang.dir == 'rtl';\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, this._.parentDialog );\r
- this._.parentDialog.changeFocus();\r
- };\r
- var onCancel = function()\r
- {\r
- releaseHandlers( this );\r
- this._.parentDialog.changeFocus();\r
- };\r
- var releaseHandlers = function( dialog )\r
- {\r
- dialog.removeListener( 'ok', onOk );\r
- dialog.removeListener( 'cancel', onCancel );\r
- };\r
- var bindToDialog = function( dialog )\r
- {\r
- dialog.on( 'ok', onOk );\r
- dialog.on( '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 : CKEDITOR.env.ie && CKEDITOR.env.quirks? 450 : 410,\r
- minHeight : CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks )? 230 : 220,\r
- contents : [\r
- {\r
- id : 'info',\r
- label : langCell.title,\r
- accessKey : 'I',\r
- elements :\r
- [\r
- {\r
- type : 'hbox',\r
- widths : [ '40%', '5%', '40%' ],\r
- children :\r
- [\r
- {\r
- type : 'vbox',\r
- padding : 0,\r
- children :\r
- [\r
- {\r
- type : 'hbox',\r
- widths : [ '70%', '30%' ],\r
- children :\r
- [\r
- {\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
- {\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 : function( element )\r
- {\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
- 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
- [\r
- [ langTable.widthPx, 'px' ],\r
- [ langTable.widthPc, '%' ]\r
- ],\r
- setup : function( selectedCell )\r
- {\r
- var widthMatch = widthPattern.exec( selectedCell.getStyle( 'width' ) || selectedCell.getAttribute( 'width' ) );\r
- if ( widthMatch )\r
- this.setValue( widthMatch[2] );\r
- }\r
- }\r
- ]\r
- },\r
- {\r
- type : 'hbox',\r
- widths : [ '70%', '30%' ],\r
- children :\r
- [\r
- {\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
- {\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 : function( element )\r
- {\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
- 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
- },\r
- spacer,\r
- {\r
- type : 'select',\r
- id : 'wordWrap',\r
- label : langCell.wordWrap,\r
- 'default' : 'yes',\r
- items :\r
- [\r
- [ langCell.yes, 'yes' ],\r
- [ langCell.no, 'no' ]\r
- ],\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
- 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
- [\r
- [ langCommon.notSet, '' ],\r
- [ langCommon.alignLeft, 'left' ],\r
- [ langCommon.alignCenter, 'center' ],\r
- [ langCommon.alignRight, 'right' ]\r
- ],\r
- setup : function( element )\r
- {\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
- 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
- [\r
- [ langCommon.notSet, '' ],\r
- [ langCommon.alignTop, 'top' ],\r
- [ langCommon.alignMiddle, 'middle' ],\r
- [ langCommon.alignBottom, 'bottom' ],\r
- [ langCell.alignBaseline, 'baseline' ]\r
- ],\r
- setup : function( element )\r
- {\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( element )\r
- {\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
- },\r
- spacer,\r
- {\r
- type : 'vbox',\r
- padding : 0,\r
- children :\r
- [\r
- {\r
- type : 'select',\r
- id : 'cellType',\r
- label : langCell.cellType,\r
- 'default' : 'td',\r
- items :\r
- [\r
- [ langCell.data, 'td' ],\r
- [ langCell.header, 'th' ]\r
- ],\r
- setup : function( selectedCell )\r
- {\r
- this.setValue( selectedCell.getName() );\r
- },\r
- commit : function( selectedCell )\r
- {\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 : function( selectedCell )\r
- {\r
- var attrVal = parseInt( selectedCell.getAttribute( 'rowSpan' ), 10 );\r
- if ( attrVal && attrVal != 1 )\r
- this.setValue( attrVal );\r
- },\r
- commit : function( selectedCell )\r
- {\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 : function( element )\r
- {\r
- var attrVal = parseInt( element.getAttribute( 'colSpan' ), 10 );\r
- if ( attrVal && attrVal != 1 )\r
- this.setValue( attrVal );\r
- },\r
- commit : function( selectedCell )\r
- {\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
- [\r
- {\r
- type : 'text',\r
- id : 'bgColor',\r
- label : langCell.bgColor,\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
- "class" : 'colorChooser',\r
- label : langCell.chooseColor,\r
- onLoad : function()\r
- {\r
- // Stick the element to the bottom (#5587)\r
- this.getElement().getParent().setStyle( 'vertical-align', 'bottom' );\r
- },\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 : 'hbox',\r
- padding : 0,\r
- widths : [ '60%', '40%' ],\r
- children :\r
- [\r
- {\r
- type : 'text',\r
- id : 'borderColor',\r
- label : langCell.borderColor,\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
- "class" : 'colorChooser',\r
- label : langCell.chooseColor,\r
- style : ( rtl ? 'margin-right' : 'margin-left' ) + ': 10px',\r
- onLoad : function()\r
- {\r
- // Stick the element to the bottom (#5587)\r
- this.getElement().getParent().setStyle( 'vertical-align', 'bottom' );\r
- },\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
- }\r
- ]\r
- }\r
- ],\r
- onShow : function()\r
- {\r
- this.cells = CKEDITOR.plugins.tabletools.getSelectedCells(\r
- this._.editor.getSelection() );\r
- this.setupContent( this.cells[ 0 ] );\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
- this._.editor.forceNextSelectionCheck();\r
- selection.selectBookmarks( bookmarks );\r
- this._.editor.selectionChange();\r
- }\r
- };\r
- } );\r
Got questions, comments, patches, etc.? Contact Jason Woofenden