X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Ftabletools%2Fdialogs%2FtableCell.js;h=7518ab152c55cc7cc9cd827ebe96b3de68e1e141;hb=055b6b0792ce7dc53d47af606b367c04b927c2ab;hp=1491a24c8b1efe3901628c6147267bc1609b1103;hpb=8761695d9b70afe75905deaac88f78c1f8aeb32d;p=ckeditor.git diff --git a/_source/plugins/tabletools/dialogs/tableCell.js b/_source/plugins/tabletools/dialogs/tableCell.js index 1491a24..7518ab1 100644 --- a/_source/plugins/tabletools/dialogs/tableCell.js +++ b/_source/plugins/tabletools/dialogs/tableCell.js @@ -1,22 +1,18 @@ /* -Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved. +Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.dialog.add( 'cellProperties', function( editor ) { - var langTable = editor.lang.table; - var langCell = langTable.cell; - var langCommon = editor.lang.common; - var validate = CKEDITOR.dialog.validate; - var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/, - heightPattern = /^(\d+(?:\.\d+)?)px$/; - var bind = CKEDITOR.tools.bind; - - function spacer() - { - return { type : 'html', html : ' ' }; - } + var langTable = editor.lang.table, + langCell = langTable.cell, + langCommon = editor.lang.common, + validate = CKEDITOR.dialog.validate, + widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/, + heightPattern = /^(\d+(?:\.\d+)?)px$/, + bind = CKEDITOR.tools.bind, + spacer = { type : 'html', html : ' ' }; /** * @@ -34,16 +30,16 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) { releaseHandlers( this ); }; - var bindToDialog = function( dialog ) - { - dialog.on( 'ok', onOk ); - dialog.on( 'cancel', onCancel ); - }; var releaseHandlers = function( dialog ) { dialog.removeListener( 'ok', onOk ); dialog.removeListener( 'cancel', onCancel ); }; + var bindToDialog = function( dialog ) + { + dialog.on( 'ok', onOk ); + dialog.on( 'cancel', onCancel ); + }; editor.execCommand( dialogName ); if ( editor._.storedDialogs.colordialog ) bindToDialog( editor._.storedDialogs.colordialog ); @@ -104,19 +100,37 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) widths : [ '71%', '29%' ], labelLayout : 'horizontal', validate : validate[ 'number' ]( langCell.invalidWidth ), - setup : function( selectedCell ) + + // Extra labelling of width unit type. + onLoad : function() { - var widthMatch = widthPattern.exec( selectedCell.$.style.width ); - if ( widthMatch ) - this.setValue( widthMatch[1] ); + var widthType = this.getDialog().getContentElement( 'info', 'widthType' ), + labelElement = widthType.getElement(), + inputElement = this.getInputElement(), + ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' ); + + inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) ); }, - commit : function( selectedCell ) + + setup : function( element ) + { + var widthAttr = parseInt( element.getAttribute( 'width' ), 10 ), + widthStyle = parseInt( element.getStyle( 'width' ), 10 ); + + !isNaN( widthAttr ) && this.setValue( widthAttr ); + !isNaN( widthStyle ) && this.setValue( widthStyle ); + }, + commit : function( element ) { - var unit = this.getDialog().getValueOf( 'info', 'widthType' ); - if ( this.getValue() !== '' ) - selectedCell.$.style.width = this.getValue() + unit; + var value = parseInt( this.getValue(), 10 ), + unit = this.getDialog().getValueOf( 'info', 'widthType' ); + + if ( !isNaN( value ) ) + element.setStyle( 'width', value + unit ); else - selectedCell.$.style.width = ''; + element.removeStyle( 'width' ); + + element.removeAttribute( 'width' ); }, 'default' : '' }, @@ -125,7 +139,8 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) id : 'widthType', labelLayout : 'horizontal', widths : [ '0%', '100%' ], - label : '', + label : editor.lang.table.widthUnit, + labelStyle: 'display:none', 'default' : 'px', items : [ @@ -134,7 +149,7 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) ], setup : function( selectedCell ) { - var widthMatch = widthPattern.exec( selectedCell.$.style.width ); + var widthMatch = widthPattern.exec( selectedCell.getStyle( 'width' ) || selectedCell.getAttribute( 'width' ) ); if ( widthMatch ) this.setValue( widthMatch[2] ); } @@ -154,27 +169,46 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) widths : [ '71%', '29%' ], labelLayout : 'horizontal', validate : validate[ 'number' ]( langCell.invalidHeight ), - setup : function( selectedCell ) + + // Extra labelling of height unit type. + onLoad : function() { - var heightMatch = heightPattern.exec( selectedCell.$.style.height ); - if ( heightMatch ) - this.setValue( heightMatch[1] ); + var heightType = this.getDialog().getContentElement( 'info', 'htmlHeightType' ), + labelElement = heightType.getElement(), + inputElement = this.getInputElement(), + ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' ); + + inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) ); }, - commit : function( selectedCell ) + + setup : function( element ) + { + var heightAttr = parseInt( element.getAttribute( 'height' ), 10 ), + heightStyle = parseInt( element.getStyle( 'height' ), 10 ); + + !isNaN( heightAttr ) && this.setValue( heightAttr ); + !isNaN( heightStyle ) && this.setValue( heightStyle ); + }, + commit : function( element ) { - if ( this.getValue() !== '' ) - selectedCell.$.style.height = this.getValue() + 'px'; + var value = parseInt( this.getValue(), 10 ); + + if ( !isNaN( value ) ) + element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); else - selectedCell.$.style.height = ''; + element.removeStyle( 'height' ); + + element.removeAttribute( 'height' ); } }, { + id : 'htmlHeightType', type : 'html', html : langTable.widthPx } ] }, - spacer(), + spacer, { type : 'select', id : 'wordWrap', @@ -187,15 +221,25 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) [ langCell.yes, 'yes' ], [ langCell.no, 'no' ] ], - commit : function( selectedCell ) + setup : function( element ) + { + var wordWrapAttr = element.getAttribute( 'noWrap' ), + wordWrapStyle = element.getStyle( 'white-space' ); + + if ( wordWrapStyle == 'nowrap' || wordWrapAttr ) + this.setValue( 'no' ); + }, + commit : function( element ) { if ( this.getValue() == 'no' ) - selectedCell.setAttribute( 'noWrap', 'nowrap' ); + element.setStyle( 'white-space', 'nowrap' ); else - selectedCell.removeAttribute( 'noWrap' ); + element.removeStyle( 'white-space' ); + + element.removeAttribute( 'noWrap' ); } }, - spacer(), + spacer, { type : 'select', id : 'hAlign', @@ -210,16 +254,23 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) [ langTable.alignCenter, 'center' ], [ langTable.alignRight, 'right' ] ], - setup : function( selectedCell ) + setup : function( element ) { - this.setValue( selectedCell.getAttribute( 'align' ) || '' ); + var alignAttr = element.getAttribute( 'align' ), + textAlignStyle = element.getStyle( 'text-align'); + + this.setValue( textAlignStyle || alignAttr || '' ); }, commit : function( selectedCell ) { - if ( this.getValue() ) - selectedCell.setAttribute( 'align', this.getValue() ); + var value = this.getValue(); + + if ( value ) + selectedCell.setStyle( 'text-align', value ); else - selectedCell.removeAttribute( 'align' ); + selectedCell.removeStyle( 'text-align' ); + + selectedCell.removeAttribute( 'align' ); } }, { @@ -237,21 +288,40 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) [ langCell.alignBottom, 'bottom' ], [ langCell.alignBaseline, 'baseline' ] ], - setup : function( selectedCell ) + setup : function( element ) { - this.setValue( selectedCell.getAttribute( 'vAlign' ) || '' ); + var vAlignAttr = element.getAttribute( 'vAlign' ), + vAlignStyle = element.getStyle( 'vertical-align' ); + + switch( vAlignStyle ) + { + // Ignore all other unrelated style values.. + case 'top': + case 'middle': + case 'bottom': + case 'baseline': + break; + default: + vAlignStyle = ''; + } + + this.setValue( vAlignStyle || vAlignAttr || '' ); }, - commit : function( selectedCell ) + commit : function( element ) { - if ( this.getValue() ) - selectedCell.setAttribute( 'vAlign', this.getValue() ); + var value = this.getValue(); + + if ( value ) + element.setStyle( 'vertical-align', value ); else - selectedCell.removeAttribute( 'vAlign' ); + element.removeStyle( 'vertical-align' ); + + element.removeAttribute( 'vAlign' ); } } ] }, - spacer(), + spacer, { type : 'vbox', padding : 0, @@ -278,7 +348,7 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) selectedCell.renameNode( this.getValue() ); } }, - spacer(), + spacer, { type : 'text', id : 'rowSpan', @@ -289,11 +359,14 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) validate : validate.integer( langCell.invalidRowSpan ), setup : function( selectedCell ) { - this.setValue( selectedCell.getAttribute( 'rowSpan' ) || '' ); + var attrVal = parseInt( selectedCell.getAttribute( 'rowSpan' ), 10 ); + if ( attrVal && attrVal != 1 ) + this.setValue( attrVal ); }, commit : function( selectedCell ) { - if ( this.getValue() ) + var value = parseInt( this.getValue(), 10 ); + if ( value && value != 1 ) selectedCell.setAttribute( 'rowSpan', this.getValue() ); else selectedCell.removeAttribute( 'rowSpan' ); @@ -307,19 +380,22 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) widths : [ '50%', '50%' ], 'default' : '', validate : validate.integer( langCell.invalidColSpan ), - setup : function( selectedCell ) + setup : function( element ) { - this.setValue( selectedCell.getAttribute( 'colSpan' ) || '' ); + var attrVal = parseInt( element.getAttribute( 'colSpan' ), 10 ); + if ( attrVal && attrVal != 1 ) + this.setValue( attrVal ); }, commit : function( selectedCell ) { - if ( this.getValue() ) + var value = parseInt( this.getValue(), 10 ); + if ( value && value != 1 ) selectedCell.setAttribute( 'colSpan', this.getValue() ); else selectedCell.removeAttribute( 'colSpan' ); } }, - spacer(), + spacer, { type : 'hbox', padding : 0, @@ -333,16 +409,23 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) labelLayout : 'horizontal', widths : [ '70%', '30%' ], 'default' : '', - setup : function( selectedCell ) + setup : function( element ) { - this.setValue( selectedCell.getAttribute( 'bgColor' ) || '' ); + var bgColorAttr = element.getAttribute( 'bgColor' ), + bgColorStyle = element.getStyle( 'background-color' ); + + this.setValue( bgColorStyle || bgColorAttr ); }, commit : function( selectedCell ) { - if ( this.getValue() ) - selectedCell.setAttribute( 'bgColor', this.getValue() ); + var value = this.getValue(); + + if ( value ) + selectedCell.setStyle( 'background-color', this.getValue() ); else - selectedCell.removeAttribute( 'bgColor' ); + selectedCell.removeStyle( 'background-color' ); + + selectedCell.removeAttribute( 'bgColor'); } }, { @@ -363,7 +446,7 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) } ] }, - spacer(), + spacer, { type : 'hbox', padding : 0, @@ -377,16 +460,22 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) labelLayout : 'horizontal', widths : [ '70%', '30%' ], 'default' : '', - setup : function( selectedCell ) + setup : function( element ) { - this.setValue( selectedCell.getStyle( 'border-color' ) || '' ); + var borderColorAttr = element.getAttribute( 'borderColor' ), + borderColorStyle = element.getStyle( 'border-color' ); + + this.setValue( borderColorStyle || borderColorAttr ); }, commit : function( selectedCell ) { - if ( this.getValue() ) + var value = this.getValue(); + if ( value ) selectedCell.setStyle( 'border-color', this.getValue() ); else selectedCell.removeStyle( 'border-color' ); + + selectedCell.removeAttribute( 'borderColor'); } }, { @@ -422,9 +511,14 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) }, onOk : function() { + var selection = this._.editor.getSelection(), + bookmarks = selection.createBookmarks(); + var cells = this.cells; for ( var i = 0 ; i < cells.length ; i++ ) this.commitContent( cells[ i ] ); + + selection.selectBookmarks( bookmarks ); } }; } );