Ticket #5418: 5418_5.patch

_source/lang/en.js

@@ -105 +105 @@
                 targetTop               : 'Topmost Window (_top)',
                 targetSelf              : 'Same Window (_self)',
                 targetParent    : 'Parent Window (_parent)',
+                advanced        : 'Advanced',
+                langDirLTR              : 'Left to Right (LTR)',
+                langDirRTL              : 'Right to Left (RTL)',
+                styles                  : 'Style',
+                cssClasses              : 'Stylesheet Classes',
 
                 // Put the voice-only part of the label in the span.
                 unavailable             : '%1<span class="cke_accessibility">, unavailable</span>'

_source/plugins/showborders/plugin.js

@@ -161 +161 @@
                                                 selectedTable[ ( !value || value <= 0 ) ? 'addClass' : 'removeClass' ]( showBorderClassName );
                                         };
                         } );
+
+                        var advTab = dialogDefinition.getContents( 'advanced' ),
+                                classField = advTab && advTab.get( 'advCSSClasses' );
+
+                        if ( classField )
+                        {
+                                classField.setup = CKEDITOR.tools.override( classField.setup, function( originalSetup )
+                                        {
+                                                return function()
+                                                        {
+                                                                originalSetup.apply( this, arguments );
+                                                                this.setValue( this.getValue().replace( /cke_show_border/, '' ) );
+                                                        };
+                                        });
+
+                                classField.commit = CKEDITOR.tools.override( classField.commit, function( originalCommit )
+                                        {
+                                                return function( data, element )
+                                                        {
+                                                                originalCommit.apply( this, arguments );
+                                                                
+                                                                if ( !parseInt( element.getAttribute( 'border' ) ) )
+                                                                        element.addClass( 'cke_show_border' );
+                                                        };
+                                        });
+                        }
                 }
         });
 

_source/plugins/table/dialogs/table.js

@@ -18 +18 @@
 
         function tableDialog( editor, command )
         {
-                var makeElement = function( name ){ return new CKEDITOR.dom.element( name, editor.document ); };
+                var makeElement = function( name )
+                        {
+                                return new CKEDITOR.dom.element( name, editor.document );
+                        };
+                
+                var dialogadvtab = editor.plugins.dialogadvtab;
 
                 return {
                         title : editor.lang.table.title,
                         minWidth : 310,
                         minHeight : CKEDITOR.env.ie ? 310 : 280,
+                        
+                        onLoad : function()
+                        {
+                                var dialog = this,
+                                        isUpdating;
+
+                                dialog.getContentElement( 'advanced', 'advStyles' ).on( 'change', function( evt )
+                                        {
+                                                if ( isUpdating )
+                                                        return;
+                                                
+                                                // Flag to avoid recursion.
+                                                isUpdating = 1;
+                                                
+                                                // Synchronize width value.
+                                                var width = this.getStyle( 'width', '' ),
+                                                        isPx = 1;
+
+                                                if ( width )
+                                                {
+                                                        isPx = ( width.length < 3 || width.substr( width.length - 1 ) != '%' );
+                                                        width = parseInt( width );
+                                                }
+                                                        
+                                                dialog.getContentElement( 'info', 'txtWidth' ).setValue( width );
+                                                dialog.getContentElement( 'info', 'cmbWidthType' ).setValue( isPx ? 'pixels' : 'percents' );
+                                                
+                                                // Synchronize height value.
+                                                var height = this.getStyle( 'height', '' );
+                                                height && ( height = parseInt( height, 10 ) );
+                                                dialog.getContentElement( 'info', 'txtHeight' ).setValue( height );
+
+                                                isUpdating = 0;
+                                        });
+                        },
+                        
                         onShow : function()
                         {
                                 // Detect if there's a selected table.
@@ -70 +111 @@
                                         colsInput && colsInput.enable();
                                         rowsInput && rowsInput.select();
                                 }
+
+                                // Call the onChange method for the widht and height fields so
+                                // they get reflected into the Advanced tab.
+                                widthInput.onChange();
+                                this.getContentElement( 'info', 'txtHeight' ).onChange();
                         },
                         onOk : function()
                         {
@@ -380 +426 @@
                                                                                                         id : 'txtWidth',
                                                                                                         style : 'width:5em',
                                                                                                         label : editor.lang.table.width,
-                                                                                                        'default' : 200,
+                                                                                                        'default' : 500,
                                                                                                         validate : CKEDITOR.dialog.validate['number']( editor.lang.table.invalidWidth ),
 
                                                                                                         // Extra labelling of width unit type.
@@ -394 +440 @@
                                                                                                                 inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
                                                                                                         },
 
+                                                                                                        onChange : function()
+                                                                                                        {
+                                                                                                                var value = this.getValue();
+                                                                                                                
+                                                                                                                if ( value )
+                                                                                                                        value += this.getDialog().getContentElement( 'info', 'cmbWidthType' ).getValue() == 'percents' ? '%' : 'px';
+
+                                                                                                                this.getDialog()
+                                                                                                                        .getContentElement( 'advanced', 'advStyles' )
+                                                                                                                        .updateStyle( 'width', value );
+                                                                                                        },
+
                                                                                                         setup : function( selectedTable )
                                                                                                         {
                                                                                                                 var widthMatch = widthPattern.exec( selectedTable.$.style.width );
@@ -421 +479 @@
                                                                                                                 if ( widthMatch )
                                                                                                                         this.setValue( widthMatch[2] == 'px' ? 'pixels' : 'percents' );
                                                                                                         },
+                                                                                                        onChange : function()
+                                                                                                        {
+                                                                                                                this.getDialog().getContentElement( 'info', 'txtWidth' ).onChange();
+                                                                                                        },
                                                                                                         commit : commitValue
                                                                                                 }
                                                                                         ]
@@ -449 +511 @@
                                                                                                                 inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
                                                                                                         },
 
+                                                                                                        onChange : function()
+                                                                                                        {
+                                                                                                                var value = this.getValue();
+
+                                                                                                                this.getDialog()
+                                                                                                                        .getContentElement( 'advanced', 'advStyles' )
+                                                                                                                        .updateStyle( 'height', value && ( value + 'px' ) );
+                                                                                                        },
+
                                                                                                         setup : function( selectedTable )
                                                                                                         {
                                                                                                                 var heightMatch = heightPattern.exec( selectedTable.$.style.height );
@@ -582 +653 @@
                                                         ]
                                                 }
                                         ]
-                                }
+                                },
+                                dialogadvtab.createAdvancedTab( editor )
                         ]
                 };
         }

_source/plugins/table/plugin.js

@@ -5 +5 @@
 
 CKEDITOR.plugins.add( 'table',
 {
+        requires : [ 'dialog', 'dialogadvtab' ],
+
         init : function( editor )
         {
                 var table = CKEDITOR.plugins.table,