JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.6.1
[ckeditor.git] / _source / plugins / table / dialogs / table.js
index b6e7405..2ceebdc 100644 (file)
@@ -5,8 +5,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 \r
 (function()\r
 {\r
-       var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,\r
-               heightPattern = /^(\d+(?:\.\d+)?)px$/;\r
+       var defaultToPixel = CKEDITOR.tools.cssLength;\r
 \r
        var commitValue = function( data )\r
        {\r
@@ -42,24 +41,14 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                {\r
                                                        // Synchronize width value.\r
                                                        var width = this.getStyle( 'width', '' ),\r
-                                                               txtWidth = dialog.getContentElement( 'info', 'txtWidth' ),\r
-                                                               cmbWidthType = dialog.getContentElement( 'info', 'cmbWidthType' ),\r
-                                                               isPx = 1;\r
-\r
-                                                       if ( width )\r
-                                                       {\r
-                                                               isPx = ( width.length < 3 || width.substr( width.length - 1 ) != '%' );\r
-                                                               width = parseInt( width, 10 );\r
-                                                       }\r
+                                                               txtWidth = dialog.getContentElement( 'info', 'txtWidth' );\r
 \r
                                                        txtWidth && txtWidth.setValue( width, true );\r
-                                                       cmbWidthType && cmbWidthType.setValue( isPx ? 'pixels' : 'percents', true );\r
 \r
                                                        // Synchronize height value.\r
                                                        var height = this.getStyle( 'height', '' ),\r
                                                                txtHeight = dialog.getContentElement( 'info', 'txtHeight' );\r
 \r
-                                                       height && ( height = parseInt( height, 10 ) );\r
                                                        txtHeight && txtHeight.setValue( height, true );\r
                                                });\r
                                }\r
@@ -116,11 +105,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                        },\r
                        onOk : function()\r
                        {\r
-                               if ( this._.selectedElement )\r
-                               {\r
-                                       var selection = editor.getSelection(),\r
-                                               bms = selection.createBookmarks();\r
-                               }\r
+                               var selection = editor.getSelection(),\r
+                                       bms = this._.selectedElement && selection.createBookmarks();\r
 \r
                                var table = this._.selectedElement || makeElement( 'table' ),\r
                                        me = this,\r
@@ -227,19 +213,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                        }\r
 \r
                                        // Set the width and height.\r
-                                       var styles = [];\r
-                                       if ( info.txtHeight )\r
-                                               table.setStyle( 'height', CKEDITOR.tools.cssLength( info.txtHeight ) );\r
-                                       else\r
-                                               table.removeStyle( 'height' );\r
-\r
-                                       if ( info.txtWidth )\r
-                                       {\r
-                                               var type = info.cmbWidthType || 'pixels';\r
-                                               table.setStyle( 'width', info.txtWidth + ( type == 'pixels' ? 'px' : '%' ) );\r
-                                       }\r
-                                       else\r
-                                               table.removeStyle( 'width' );\r
+                                       info.txtHeight ? table.setStyle( 'height', info.txtHeight ) : table.removeStyle( 'height' );\r
+                                       info.txtWidth ? table.setStyle( 'width', info.txtWidth ) : table.removeStyle( 'width' );\r
 \r
                                        if ( !table.getAttribute( 'style' ) )\r
                                                table.removeAttribute( 'style' );\r
@@ -247,12 +222,22 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 \r
                                // Insert the table element if we're creating one.\r
                                if ( !this._.selectedElement )\r
+                               {\r
                                        editor.insertElement( table );\r
-                               // Properly restore the selection inside table. (#4822)\r
+                                       // Override the default cursor position after insertElement to place\r
+                                       // cursor inside the first cell (#7959), IE needs a while.\r
+                                       setTimeout( function()\r
+                                               {\r
+                                                       var firstCell = new CKEDITOR.dom.element( table.$.rows[ 0 ].cells[ 0 ] );\r
+                                                       var range = new CKEDITOR.dom.range( editor.document );\r
+                                                       range.moveToPosition( firstCell, CKEDITOR.POSITION_AFTER_START );\r
+                                                       range.select( 1 );\r
+                                               }, 0 );\r
+                               }\r
+                               // Properly restore the selection, (#4822) but don't break\r
+                               // because of this, e.g. updated table caption.\r
                                else\r
-                                       selection.selectBookmarks( bms );\r
-\r
-                               return true;\r
+                                       try { selection.selectBookmarks( bms ); } catch( er ){}\r
                        },\r
                        contents : [\r
                                {\r
@@ -277,7 +262,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                        'default' : 3,\r
                                                                                        label : editor.lang.table.rows,\r
                                                                                        required : true,\r
-                                                                                       style : 'width:5em',\r
+                                                                                       controlStyle : 'width:5em',\r
                                                                                        validate : function()\r
                                                                                        {\r
                                                                                                var pass = true,\r
@@ -303,7 +288,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                        'default' : 2,\r
                                                                                        label : editor.lang.table.columns,\r
                                                                                        required : true,\r
-                                                                                       style : 'width:5em',\r
+                                                                                       controlStyle : 'width:5em',\r
                                                                                        validate : function()\r
                                                                                        {\r
                                                                                                var pass = true,\r
@@ -369,7 +354,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                        id : 'txtBorder',\r
                                                                                        'default' : 1,\r
                                                                                        label : editor.lang.table.border,\r
-                                                                                       style : 'width:3em',\r
+                                                                                       controlStyle : 'width:3em',\r
                                                                                        validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidBorder ),\r
                                                                                        setup : function( selectedTable )\r
                                                                                        {\r
@@ -422,67 +407,20 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                {\r
                                                                                                        type : 'text',\r
                                                                                                        id : 'txtWidth',\r
-                                                                                                       style : 'width:5em',\r
+                                                                                                       controlStyle : 'width:5em',\r
                                                                                                        label : editor.lang.common.width,\r
                                                                                                        'default' : 500,\r
-                                                                                                       validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidWidth ),\r
-\r
-                                                                                                       // Extra labelling of width unit type.\r
-                                                                                                       onLoad : function()\r
-                                                                                                       {\r
-                                                                                                               var widthType = this.getDialog().getContentElement( 'info', 'cmbWidthType' ),\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
+                                                                                                       getValue : defaultToPixel,\r
+                                                                                                       validate : CKEDITOR.dialog.validate.cssLength( editor.lang.common.invalidCssLength.replace( '%1', editor.lang.common.width ) ),\r
                                                                                                        onChange : function()\r
                                                                                                        {\r
                                                                                                                var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
-\r
-                                                                                                               if ( styles )\r
-                                                                                                               {\r
-                                                                                                                       var value = this.getValue();\r
-\r
-                                                                                                                       if ( value )\r
-                                                                                                                               value += this.getDialog().getContentElement( 'info', 'cmbWidthType' ).getValue() == 'percents' ? '%' : 'px';\r
-\r
-                                                                                                                       styles.updateStyle( 'width', value );\r
-                                                                                                               }\r
+                                                                                                               styles && styles.updateStyle( 'width', this.getValue() );\r
                                                                                                        },\r
-\r
                                                                                                        setup : function( selectedTable )\r
                                                                                                        {\r
-                                                                                                               var widthMatch = widthPattern.exec( selectedTable.$.style.width );\r
-                                                                                                               if ( widthMatch )\r
-                                                                                                                       this.setValue( widthMatch[1] );\r
-                                                                                                               else\r
-                                                                                                                       this.setValue( '' );\r
-                                                                                                       },\r
-                                                                                                       commit : commitValue\r
-                                                                                               },\r
-                                                                                               {\r
-                                                                                                       id : 'cmbWidthType',\r
-                                                                                                       type : 'select',\r
-                                                                                                       label : editor.lang.table.widthUnit,\r
-                                                                                                       labelStyle: 'visibility:hidden',\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
-                                                                                                       onChange : function()\r
-                                                                                                       {\r
-                                                                                                               this.getDialog().getContentElement( 'info', 'txtWidth' ).onChange();\r
+                                                                                                               var val = selectedTable.getStyle( 'width' );\r
+                                                                                                               val && this.setValue( val );\r
                                                                                                        },\r
                                                                                                        commit : commitValue\r
                                                                                                }\r
@@ -496,45 +434,23 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                {\r
                                                                                                        type : 'text',\r
                                                                                                        id : 'txtHeight',\r
-                                                                                                       style : 'width:5em',\r
+                                                                                                       controlStyle : 'width:5em',\r
                                                                                                        label : editor.lang.common.height,\r
                                                                                                        'default' : '',\r
-                                                                                                       validate : CKEDITOR.dialog.validate['number']( editor.lang.table.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
+                                                                                                       getValue : defaultToPixel,\r
+                                                                                                       validate : CKEDITOR.dialog.validate.cssLength( editor.lang.common.invalidCssLength.replace( '%1', editor.lang.common.height ) ),\r
                                                                                                        onChange : function()\r
                                                                                                        {\r
                                                                                                                var styles = this.getDialog().getContentElement( 'advanced', 'advStyles' );\r
-\r
-                                                                                                               if ( styles )\r
-                                                                                                               {\r
-                                                                                                                       var value = this.getValue();\r
-                                                                                                                       styles.updateStyle( 'height', value && ( value + 'px' ) );\r
-                                                                                                               }\r
+                                                                                                               styles && styles.updateStyle( 'height', this.getValue() );\r
                                                                                                        },\r
 \r
                                                                                                        setup : function( selectedTable )\r
                                                                                                        {\r
-                                                                                                               var heightMatch = heightPattern.exec( selectedTable.$.style.height );\r
-                                                                                                               if ( heightMatch )\r
-                                                                                                                       this.setValue( heightMatch[1] );\r
+                                                                                                               var val = selectedTable.getStyle( 'width' );\r
+                                                                                                               val && this.setValue( val );\r
                                                                                                        },\r
                                                                                                        commit : commitValue\r
-                                                                                               },\r
-                                                                                               {\r
-                                                                                                       id : 'htmlHeightType',\r
-                                                                                                       type : 'html',\r
-                                                                                                       html : '<div><br />' + editor.lang.table.widthPx + '</div>'\r
                                                                                                }\r
                                                                                        ]\r
                                                                                },\r
@@ -545,10 +461,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                {\r
                                                                                        type : 'text',\r
                                                                                        id : 'txtCellSpace',\r
-                                                                                       style : 'width:3em',\r
+                                                                                       controlStyle : 'width:3em',\r
                                                                                        label : editor.lang.table.cellSpace,\r
                                                                                        'default' : 1,\r
-                                                                                       validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellSpacing ),\r
+                                                                                       validate : CKEDITOR.dialog.validate.number( editor.lang.table.invalidCellSpacing ),\r
                                                                                        setup : function( selectedTable )\r
                                                                                        {\r
                                                                                                this.setValue( selectedTable.getAttribute( 'cellSpacing' ) || '' );\r
@@ -564,10 +480,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                {\r
                                                                                        type : 'text',\r
                                                                                        id : 'txtCellPad',\r
-                                                                                       style : 'width:3em',\r
+                                                                                       controlStyle : 'width:3em',\r
                                                                                        label : editor.lang.table.cellPad,\r
                                                                                        'default' : 1,\r
-                                                                                       validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellPadding ),\r
+                                                                                       validate : CKEDITOR.dialog.validate.number( editor.lang.table.invalidCellPadding ),\r
                                                                                        setup : function( selectedTable )\r
                                                                                        {\r
                                                                                                this.setValue( selectedTable.getAttribute( 'cellPadding' ) || '' );\r
@@ -600,16 +516,30 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                        label : editor.lang.table.caption,\r
                                                                        setup : function( selectedTable )\r
                                                                        {\r
+                                                                               this.enable();\r
+\r
                                                                                var nodeList = selectedTable.getElementsByTag( 'caption' );\r
                                                                                if ( nodeList.count() > 0 )\r
                                                                                {\r
                                                                                        var caption = nodeList.getItem( 0 );\r
+                                                                                       var firstElementChild = caption.getFirst( CKEDITOR.dom.walker.nodeType( CKEDITOR.NODE_ELEMENT ) );\r
+\r
+                                                                                       if ( firstElementChild && !firstElementChild.equals( caption.getBogus() ) )\r
+                                                                                       {\r
+                                                                                               this.disable();\r
+                                                                                               this.setValue( caption.getText() );\r
+                                                                                               return;\r
+                                                                                       }\r
+\r
                                                                                        caption = CKEDITOR.tools.trim( caption.getText() );\r
                                                                                        this.setValue( caption );\r
                                                                                }\r
                                                                        },\r
                                                                        commit : function( data, table )\r
                                                                        {\r
+                                                                               if ( !this.isEnabled() )\r
+                                                                                       return;\r
+\r
                                                                                var caption = this.getValue(),\r
                                                                                        captionElement = table.getElementsByTag( 'caption' );\r
                                                                                if ( caption )\r