X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Ftabletools%2Fdialogs%2FtableCell.js;h=1bfa3bfce47b86c32c22247d06476b32f2f80677;hb=a272c66d841421f8bf933c16535bdcde1c4649fc;hp=ad03aa4991f845b4e64ac7fd4382dccb27c9c1bb;hpb=ea7e3453c7b0f023b050aca6d9f83ab372860d91;p=ckeditor.git diff --git a/_source/plugins/tabletools/dialogs/tableCell.js b/_source/plugins/tabletools/dialogs/tableCell.js index ad03aa4..1bfa3bf 100644 --- a/_source/plugins/tabletools/dialogs/tableCell.js +++ b/_source/plugins/tabletools/dialogs/tableCell.js @@ -1,27 +1,79 @@ /* -Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved. +Copyright (c) 2003-2013, 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() + 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 : ' ' }, + rtl = editor.lang.dir == 'rtl'; + + /** + * + * @param dialogName + * @param callback [ childDialog ] + */ + function getDialogValue( dialogName, callback ) { - return { type : 'html', html : ' ' }; + var onOk = function() + { + releaseHandlers( this ); + callback( this, this._.parentDialog ); + this._.parentDialog.changeFocus(); + }; + var onCancel = function() + { + releaseHandlers( this ); + this._.parentDialog.changeFocus(); + }; + 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 ); + else + { + CKEDITOR.on( 'dialogDefinition', function( e ) + { + if ( e.data.name != dialogName ) + return; + + var definition = e.data.definition; + + e.removeListener(); + definition.onLoad = CKEDITOR.tools.override( definition.onLoad, function( orginal ) + { + return function() + { + bindToDialog( this ); + definition.onLoad = orginal; + if ( typeof orginal == 'function' ) + orginal.call( this ); + }; + } ); + }); + } } return { title : langCell.title, - minWidth : 480, - minHeight : 140, + minWidth : CKEDITOR.env.ie && CKEDITOR.env.quirks? 450 : 410, + minHeight : CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.quirks )? 230 : 220, contents : [ { id : 'info', @@ -31,7 +83,7 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) [ { type : 'hbox', - widths : [ '45%', '10%', '45%' ], + widths : [ '40%', '5%', '40%' ], children : [ { @@ -47,32 +99,48 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) { type : 'text', id : 'width', - label : langTable.width, - widths : [ '71%', '29%' ], - labelLayout : 'horizontal', + width: '100px', + label : langCommon.width, 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 unit = this.getDialog().getValueOf( 'info', 'widthType' ); - if ( this.getValue() !== '' ) - selectedCell.$.style.width = this.getValue() + unit; + 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 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' : '' }, { type : 'select', id : 'widthType', - labelLayout : 'horizontal', - widths : [ '0%', '100%' ], - label : '', + label : editor.lang.table.widthUnit, + labelStyle: 'visibility:hidden', 'default' : 'px', items : [ @@ -81,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] ); } @@ -96,109 +164,157 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) { type : 'text', id : 'height', - label : langTable.height, + label : langCommon.height, + width: '100px', 'default' : '', - 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 + html : '
'+ langTable.widthPx } ] }, - spacer(), + spacer, { type : 'select', id : 'wordWrap', - labelLayout : 'horizontal', label : langCell.wordWrap, - widths : [ '50%', '50%' ], 'default' : 'yes', items : [ [ 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', - labelLayout : 'horizontal', label : langCell.hAlign, - widths : [ '50%', '50%' ], 'default' : '', items : [ [ langCommon.notSet, '' ], - [ langTable.alignLeft, 'left' ], - [ langTable.alignCenter, 'center' ], - [ langTable.alignRight, 'right' ] + [ langCommon.alignLeft, 'left' ], + [ langCommon.alignCenter, 'center' ], + [ langCommon.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' ); } }, { type : 'select', id : 'vAlign', - labelLayout : 'horizontal', label : langCell.vAlign, - widths : [ '50%', '50%' ], 'default' : '', items : [ [ langCommon.notSet, '' ], - [ langCell.alignTop, 'top' ], - [ langCell.alignMiddle, 'middle' ], - [ langCell.alignBottom, 'bottom' ], + [ langCommon.alignTop, 'top' ], + [ langCommon.alignMiddle, 'middle' ], + [ langCommon.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, @@ -208,8 +324,6 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) type : 'select', id : 'cellType', label : langCell.cellType, - labelLayout : 'horizontal', - widths : [ '50%', '50%' ], 'default' : 'td', items : [ @@ -225,22 +339,23 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) selectedCell.renameNode( this.getValue() ); } }, - spacer(), + spacer, { type : 'text', id : 'rowSpan', label : langCell.rowSpan, - labelLayout : 'horizontal', - widths : [ '50%', '50%' ], 'default' : '', 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' ); @@ -250,60 +365,130 @@ CKEDITOR.dialog.add( 'cellProperties', function( editor ) type : 'text', id : 'colSpan', label : langCell.colSpan, - labelLayout : 'horizontal', - 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 : 'text', - id : 'bgColor', - label : langCell.bgColor, - labelLayout : 'horizontal', - widths : [ '50%', '50%' ], - 'default' : '', - setup : function( selectedCell ) - { - this.setValue( selectedCell.getAttribute( 'bgColor' ) || '' ); - }, - commit : function( selectedCell ) - { - if ( this.getValue() ) - selectedCell.setAttribute( 'bgColor', this.getValue() ); - else - selectedCell.removeAttribute( 'bgColor' ); - } + type : 'hbox', + padding : 0, + widths : [ '60%', '40%' ], + children : + [ + { + type : 'text', + id : 'bgColor', + label : langCell.bgColor, + 'default' : '', + setup : function( element ) + { + var bgColorAttr = element.getAttribute( 'bgColor' ), + bgColorStyle = element.getStyle( 'background-color' ); + + this.setValue( bgColorStyle || bgColorAttr ); + }, + commit : function( selectedCell ) + { + var value = this.getValue(); + + if ( value ) + selectedCell.setStyle( 'background-color', this.getValue() ); + else + selectedCell.removeStyle( 'background-color' ); + + selectedCell.removeAttribute( 'bgColor'); + } + }, + { + type : 'button', + id : 'bgColorChoose', + "class" : 'colorChooser', + label : langCell.chooseColor, + onLoad : function() + { + // Stick the element to the bottom (#5587) + this.getElement().getParent().setStyle( 'vertical-align', 'bottom' ); + }, + onClick : function() + { + var self = this; + getDialogValue( 'colordialog', function( colorDialog ) + { + self.getDialog().getContentElement( 'info', 'bgColor' ).setValue( + colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue() + ); + } ); + } + } + ] }, + spacer, { - type : 'text', - id : 'borderColor', - label : langCell.borderColor, - labelLayout : 'horizontal', - widths : [ '50%', '50%' ], - 'default' : '', - setup : function( selectedCell ) - { - this.setValue( selectedCell.getAttribute( 'borderColor' ) || '' ); - }, - commit : function( selectedCell ) - { - if ( this.getValue() ) - selectedCell.setAttribute( 'borderColor', this.getValue() ); - else - selectedCell.removeAttribute( 'borderColor' ); - } + type : 'hbox', + padding : 0, + widths : [ '60%', '40%' ], + children : + [ + { + type : 'text', + id : 'borderColor', + label : langCell.borderColor, + 'default' : '', + setup : function( element ) + { + var borderColorAttr = element.getAttribute( 'borderColor' ), + borderColorStyle = element.getStyle( 'border-color' ); + + this.setValue( borderColorStyle || borderColorAttr ); + }, + commit : function( selectedCell ) + { + var value = this.getValue(); + if ( value ) + selectedCell.setStyle( 'border-color', this.getValue() ); + else + selectedCell.removeStyle( 'border-color' ); + + selectedCell.removeAttribute( 'borderColor'); + } + }, + { + type : 'button', + id : 'borderColorChoose', + "class" : 'colorChooser', + label : langCell.chooseColor, + style : ( rtl ? 'margin-right' : 'margin-left' ) + ': 10px', + onLoad : function() + { + // Stick the element to the bottom (#5587) + this.getElement().getParent().setStyle( 'vertical-align', 'bottom' ); + }, + onClick : function() + { + var self = this; + getDialogValue( 'colordialog', function( colorDialog ) + { + self.getDialog().getContentElement( 'info', 'borderColor' ).setValue( + colorDialog.getContentElement( 'picker', 'selectedColor' ).getValue() + ); + } ); + } + } + ] } ] } @@ -320,9 +505,16 @@ 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 ] ); + + this._.editor.forceNextSelectionCheck(); + selection.selectBookmarks( bookmarks ); + this._.editor.selectionChange(); } }; } );