JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.4
[ckeditor.git] / _source / plugins / table / dialogs / table.js
index 215a373..7b06606 100644 (file)
@@ -18,12 +18,53 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 \r
        function tableDialog( editor, command )\r
        {\r
-               var makeElement = function( name ){ return new CKEDITOR.dom.element( name, editor.document ); };\r
+               var makeElement = function( name )\r
+                       {\r
+                               return new CKEDITOR.dom.element( name, editor.document );\r
+                       };\r
+\r
+               var dialogadvtab = editor.plugins.dialogadvtab;\r
 \r
                return {\r
                        title : editor.lang.table.title,\r
                        minWidth : 310,\r
                        minHeight : CKEDITOR.env.ie ? 310 : 280,\r
+\r
+                       onLoad : function()\r
+                       {\r
+                               var dialog = this;\r
+\r
+                               var styles = dialog.getContentElement( 'advanced', 'advStyles' );\r
+\r
+                               if ( styles )\r
+                               {\r
+                                       styles.on( 'change', function( evt )\r
+                                               {\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
+\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
+                       },\r
+\r
                        onShow : function()\r
                        {\r
                                // Detect if there's a selected table.\r
@@ -33,7 +74,9 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
 \r
                                var rowsInput = this.getContentElement( 'info', 'txtRows' ),\r
                                        colsInput = this.getContentElement( 'info', 'txtCols' ),\r
-                                       widthInput = this.getContentElement( 'info', 'txtWidth' );\r
+                                       widthInput = this.getContentElement( 'info', 'txtWidth' ),\r
+                                       heightInput = this.getContentElement( 'info', 'txtHeight' );\r
+\r
                                if ( command == 'tableProperties' )\r
                                {\r
                                        if ( ( selectedTable = editor.getSelection().getSelectedElement() ) )\r
@@ -43,6 +86,11 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                        }\r
                                        else if ( ranges.length > 0 )\r
                                        {\r
+                                               // Webkit could report the following range on cell selection (#4948):\r
+                                               // <table><tr><td>[&nbsp;</td></tr></table>]\r
+                                               if ( CKEDITOR.env.webkit )\r
+                                                       ranges[ 0 ].shrink( CKEDITOR.NODE_ELEMENT );\r
+\r
                                                var rangeRoot = ranges[0].getCommonAncestor( true );\r
                                                selectedTable = rangeRoot.getAscendant( 'table', true );\r
                                        }\r
@@ -51,20 +99,23 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                        this._.selectedElement = selectedTable;\r
                                }\r
 \r
-                               // Enable, disable and select the row, cols, width fields.\r
+                               // Enable or disable the row, cols, width fields.\r
                                if ( selectedTable )\r
                                {\r
                                        this.setupContent( selectedTable );\r
                                        rowsInput && rowsInput.disable();\r
                                        colsInput && colsInput.disable();\r
-                                       widthInput && widthInput.select();\r
                                }\r
                                else\r
                                {\r
                                        rowsInput && rowsInput.enable();\r
                                        colsInput && colsInput.enable();\r
-                                       rowsInput && rowsInput.select();\r
                                }\r
+\r
+                               // Call the onChange method for the widht and height fields so\r
+                               // they get reflected into the Advanced tab.\r
+                               widthInput && widthInput.onChange();\r
+                               heightInput && heightInput.onChange();\r
                        },\r
                        onOk : function()\r
                        {\r
@@ -154,7 +205,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                        // Should we make all first cells in a row TH?\r
                                        if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) )\r
                                        {\r
-                                               for( row = 0 ; row < table.$.rows.length ; row++ )\r
+                                               for ( row = 0 ; row < table.$.rows.length ; row++ )\r
                                                {\r
                                                        newCell = new CKEDITOR.dom.element( table.$.rows[ row ].cells[ 0 ] );\r
                                                        newCell.renameNode( 'th' );\r
@@ -165,7 +216,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                        // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)\r
                                        if ( ( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' ) )\r
                                        {\r
-                                               for( i = 0 ; i < table.$.rows.length ; i++ )\r
+                                               for ( i = 0 ; i < table.$.rows.length ; i++ )\r
                                                {\r
                                                        row = new CKEDITOR.dom.element( table.$.rows[i] );\r
                                                        if ( row.getParent().getName() == 'tbody' )\r
@@ -192,7 +243,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                        else\r
                                                table.removeStyle( 'width' );\r
 \r
-                                       if( !table.getAttribute( 'style' ) )\r
+                                       if ( !table.getAttribute( 'style' ) )\r
                                                table.removeAttribute( 'style' );\r
                                }\r
 \r
@@ -227,6 +278,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                        id : 'txtRows',\r
                                                                                        'default' : 3,\r
                                                                                        label : editor.lang.table.rows,\r
+                                                                                       required : true,\r
                                                                                        style : 'width:5em',\r
                                                                                        validate : function()\r
                                                                                        {\r
@@ -252,6 +304,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                        id : 'txtCols',\r
                                                                                        'default' : 2,\r
                                                                                        label : editor.lang.table.columns,\r
+                                                                                       required : true,\r
                                                                                        style : 'width:5em',\r
                                                                                        validate : function()\r
                                                                                        {\r
@@ -339,7 +392,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                        label : editor.lang.table.align,\r
                                                                                        items :\r
                                                                                        [\r
-                                                                                               [ editor.lang.table.alignNotSet , ''],\r
+                                                                                               [ editor.lang.common.notSet , ''],\r
                                                                                                [ editor.lang.table.alignLeft , 'left'],\r
                                                                                                [ editor.lang.table.alignCenter , 'center'],\r
                                                                                                [ editor.lang.table.alignRight , 'right']\r
@@ -373,20 +426,50 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        id : 'txtWidth',\r
                                                                                                        style : 'width:5em',\r
                                                                                                        label : editor.lang.table.width,\r
-                                                                                                       'default' : 200,\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
+                                                                                                       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
+                                                                                                       },\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 : '&nbsp;',\r
+                                                                                                       label : editor.lang.table.widthUnit,\r
+                                                                                                       labelStyle: 'visibility:hidden',\r
                                                                                                        'default' : 'pixels',\r
                                                                                                        items :\r
                                                                                                        [\r
@@ -399,6 +482,10 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                                if ( widthMatch )\r
                                                                                                                        this.setValue( widthMatch[2] == 'px' ? 'pixels' : 'percents' );\r
                                                                                                        },\r
+                                                                                                       onChange : function()\r
+                                                                                                       {\r
+                                                                                                               this.getDialog().getContentElement( 'info', 'txtWidth' ).onChange();\r
+                                                                                                       },\r
                                                                                                        commit : commitValue\r
                                                                                                }\r
                                                                                        ]\r
@@ -415,6 +502,29 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        label : editor.lang.table.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
+                                                                                                       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
+                                                                                                       },\r
+\r
                                                                                                        setup : function( selectedTable )\r
                                                                                                        {\r
                                                                                                                var heightMatch = heightPattern.exec( selectedTable.$.style.height );\r
@@ -424,8 +534,9 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                                                        commit : commitValue\r
                                                                                                },\r
                                                                                                {\r
+                                                                                                       id : 'htmlHeightType',\r
                                                                                                        type : 'html',\r
-                                                                                                       html : '<br />' + editor.lang.table.widthPx\r
+                                                                                                       html : '<div><br />' + editor.lang.table.widthPx + '</div>'\r
                                                                                                }\r
                                                                                        ]\r
                                                                                },\r
@@ -540,12 +651,15 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
                                                                        {\r
                                                                                if ( this.getValue() )\r
                                                                                        selectedTable.setAttribute( 'summary', this.getValue() );\r
+                                                                               else\r
+                                                                                       selectedTable.removeAttribute( 'summary' );\r
                                                                        }\r
                                                                }\r
                                                        ]\r
                                                }\r
                                        ]\r
-                               }\r
+                               },\r
+                               dialogadvtab && dialogadvtab.createAdvancedTab( editor )\r
                        ]\r
                };\r
        }\r