Ticket #5418: 5418_3.patch

File 5418_3.patch, 8.6 KB (added by Tobiasz Cudnik, 9 years ago)
  • _source/plugins/table/plugin.js

     
    55
    66CKEDITOR.plugins.add( 'table',
    77{
     8        requires : [ 'dialogadvtab' ],
     9
    810        init : function( editor )
    911        {
    1012                var table = CKEDITOR.plugins.table,
  • _source/plugins/table/dialogs/table.js

     
    2020        {
    2121                var makeElement = function( name ){ return new CKEDITOR.dom.element( name, editor.document ); };
    2222
     23                var commitInternally = editor.plugins.dialogadvtab.commitInternally;
     24
    2325                return {
    2426                        title : editor.lang.table.title,
    2527                        minWidth : 310,
     
    392394                                                                                                                inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
    393395                                                                                                        },
    394396
     397                                                                                                        onChange : function()
     398                                                                                                        {
     399                                                                                                                commitInternally.call( this, [ 'advanced:advStyles' ] );
     400                                                                                                        },
     401
    395402                                                                                                        setup : function( selectedTable )
    396403                                                                                                        {
    397404                                                                                                                var widthMatch = widthPattern.exec( selectedTable.$.style.width );
     
    447454                                                                                                                inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
    448455                                                                                                        },
    449456
     457                                                                                                        onChange : function()
     458                                                                                                        {
     459                                                                                                                commitInternally.call( this, [ 'advanced:advStyles' ] );
     460                                                                                                        },
     461
    450462                                                                                                        setup : function( selectedTable )
    451463                                                                                                        {
    452464                                                                                                                var heightMatch = heightPattern.exec( selectedTable.$.style.height );
     
    580592                                                        ]
    581593                                                }
    582594                                        ]
    583                                 }
     595                                },
     596                                editor.plugins.dialogadvtab.createAdvancedTab()
    584597                        ]
    585598                };
    586599        }
  • _source/plugins/dialogadvtab/plugin.js

     
     1/*
     2Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
     3For licensing, see LICENSE.html or http://ckeditor.com/license
     4*/
     5(function()
     6{
     7       
     8var advParamsMap = {
     9        'advLangDir' : 'dir',
     10        'advCSSClasses' : 'class',
     11        'advStyles' : 'style',
     12        'advId' : 'id'
     13};
     14
     15var setupAdvParams = function( element )
     16{
     17        var attrName = advParamsMap[ this.id ];
     18
     19        // Try to get existing value first in case of inChange commit.
     20        var value = this.getValue() || element && element.hasAttribute( attrName ) && element.getAttribute( attrName ) || '';
     21
     22        // Compatibility with showborders plugin.
     23        if ( attrName == 'class' )
     24                value = value.replace( /cke_show_border/g, '' );
     25        else if ( attrName == 'style' )
     26        {
     27                // Check if we've already read element value.
     28                if ( !this._elementStyleRead && element )
     29                {
     30                        value = element.hasAttribute( attrName ) && element.getAttribute( attrName );
     31                        this._elementStyleRead = 1;
     32                }
     33
     34                // Inherit width value from width field.
     35                var widthField = this.getDialog().getContentElement( 'info', 'txtWidth');
     36                var widthFieldValue = widthField.getValue();
     37
     38                if ( widthFieldValue )
     39                {
     40                        var widthUnit = this.getDialog().getContentElement( 'info', 'cmbWidthType').getValue();
     41                        widthUnit = widthUnit == 'percents' ? '%' : 'px';
     42
     43                        widthFieldValue = 'width: ' + widthFieldValue + widthUnit + ';';
     44                        if ( value )
     45                                value = value.replace( /\s*width: .+?;\s*/, '' );
     46                        value = value ? value + '; ' + widthFieldValue : widthFieldValue;
     47                }
     48                else
     49                        value = value.replace( /\s*width: .+?;\s*/, '' );
     50
     51                // Inherit height value from height field.
     52                var heightField = this.getDialog().getContentElement( 'info', 'txtHeight');
     53                var heightFieldValue = heightField.getValue();
     54                if ( heightFieldValue )
     55                {
     56                        heightFieldValue = 'height: ' + heightFieldValue + 'px;';
     57                        if ( value )
     58                                value = value.replace( /\s*height: .+?;\s*/, '' );
     59                        value = value ? value + '; ' + heightFieldValue : heightFieldValue;
     60                }
     61                else
     62                        value = value.replace( /\s*height: .+?;\s*/, '' );
     63
     64                if ( value )
     65                        value = value.replace( /\s*;\s*;\s*/g, ';' );
     66        }
     67
     68        if ( value !== undefined )
     69                this.setValue( value )
     70};
     71
     72var commitAdvParams = function( data, element )
     73{
     74        element = data instanceof CKEDITOR.dom.element ? data : element;
     75
     76        var value = this.getValue();
     77        if ( value )
     78        {
     79                var attrName = advParamsMap[ this.id ];
     80
     81                // Compatibility with showborders plugin.
     82                if ( attrName == 'style' )
     83                {
     84                        this._elementStyleRead = 0;
     85                }
     86                else if ( attrName == 'class' )
     87                                value += ' cke_show_border';
     88
     89                if ( element )
     90                        element.setAttribute( attrName, value );
     91        }
     92        else
     93                element.removeAttribute( attrName, value );
     94};
     95
     96CKEDITOR.plugins.add( 'dialogadvtab',
     97{
     98        // Synchronous field values to other impacted fields is required, e.g. div styles
     99        // change should also alter inline-style text.
     100        commitInternally: function( targetFields )
     101        {
     102                var dialog = this.getDialog(),
     103                        element = dialog._.selectedElement;
     104
     105                // Commit this field and broadcast to target fields.
     106                //                      this.commit( element, true );
     107
     108                targetFields = [].concat( targetFields );
     109                var length = targetFields.length, field;
     110                for ( var i = 0; i < length; i++ )
     111                {
     112                        field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
     113                        field && field.setup && field.setup( element, true );
     114                }
     115        },
     116
     117        /**
     118         *
     119         * @param tabConfig
     120         * id, dir, classes, styles
     121         */
     122        createAdvancedTab : function( tabConfig )
     123        {
     124                if ( tabConfig === undefined )
     125                {
     126                        tabConfig = { id:1, dir:1, classes:1, styles:1 };
     127                }
     128
     129                var result =
     130                {
     131                        id : 'advanced',
     132                        label : editor.lang.link.advanced,
     133                        title : editor.lang.link.advanced,
     134                        elements :
     135                                [
     136                                        {
     137                                                type : 'vbox',
     138                                                padding : 1,
     139                                                children : []
     140                                        }
     141                                ]
     142                };
     143
     144                if ( tabConfig.id || tabConfig.dir )
     145                {
     146                        result.elements[ 0 ].children.push(
     147                                {
     148                                        type : 'hbox',
     149                                        widths : [ '45%', '45%' ],
     150                                        children : []
     151                                });
     152
     153                        if ( tabConfig.id )
     154                                result.elements[ 0 ].children[ 0 ].children.push(
     155                                        {
     156                                                type : 'text',
     157                                                id : 'advId',
     158                                                label : editor.lang.link.id,
     159                                                setup : setupAdvParams,
     160                                                commit : commitAdvParams
     161                                        });
     162
     163                        if ( tabConfig.dir )
     164                                result.elements[ 0 ].children[ 0 ].children.push(
     165                                        {
     166                                                type : 'select',
     167                                                id : 'advLangDir',
     168                                                label : editor.lang.link.langDir,
     169                                                'default' : '',
     170                                                style : 'width:110px',
     171                                                items :
     172                                                [
     173                                                        [ editor.lang.common.notSet, '' ],
     174                                                        [ editor.lang.link.langDirLTR, 'ltr' ],
     175                                                        [ editor.lang.link.langDirRTL, 'rtl' ]
     176                                                ],
     177                                                setup : setupAdvParams,
     178                                                commit : commitAdvParams
     179                                        });
     180                }
     181
     182                if ( tabConfig.styles || tabConfig.classes )
     183                {
     184                        result.elements[ 0 ].children.push(
     185                                {
     186                                        type : 'hbox',
     187                                        widths : [ '45%', '45%' ],
     188                                        children : []
     189                                });
     190
     191                        var position = result.elements[ 0 ].children.length - 1;
     192
     193                        if ( tabConfig.id )
     194                                result.elements[ 0 ].children[ position ].children.push(
     195                                        {
     196                                                type : 'text',
     197                                                label : editor.lang.link.styles,
     198                                                'default' : '',
     199                                                id : 'advStyles',
     200                                                onChange : function()
     201                                                {
     202                                                        // Transaction prevents from recursive calls to onChange() of this field.
     203                                                        if ( this._duringTransaction )
     204                                                                return;
     205
     206                                                        this._duringTransaction = 1;
     207
     208                                                        var value = this.getValue(),
     209                                                                dialog = this.getDialog(),
     210                                                                match;
     211
     212                                                        // Synchronize width value.
     213                                                        match = value.match( /width\s*:\s*(\d+)(px|%)/ );
     214                                                        if ( match )
     215                                                        {
     216                                                                dialog.getContentElement( 'info', 'txtWidth' ).setValue( match[ 1 ] );
     217                                                                dialog.getContentElement( 'info', 'cmbWidthType' ).setValue(
     218                                                                        match[ 2 ] == 'px' ? 'pixels' : 'percents'
     219                                                                );
     220                                                        }
     221
     222                                                        // Synchronize height value.
     223                                                        match = value.match( /height\s*:\s*(\d+)(px|%)/ );
     224                                                        if ( match )
     225                                                        {
     226                                                                dialog.getContentElement( 'info', 'txtHeight' ).setValue( match[ 1 ] );
     227                                                        }
     228
     229                                                        this._duringTransaction = 0;
     230                                                },
     231                                                setup : setupAdvParams,
     232                                                commit : commitAdvParams
     233
     234                                        });
     235
     236                        if ( tabConfig.classes )
     237                                result.elements[ 0 ].children[ position ].children.push(
     238                                        {
     239                                                type : 'hbox',
     240                                                widths : [ '45%', '55%' ],
     241                                                children :
     242                                                [
     243                                                        {
     244                                                                type : 'text',
     245                                                                label : editor.lang.link.cssClasses,
     246                                                                'default' : '',
     247                                                                id : 'advCSSClasses',
     248                                                                setup : setupAdvParams,
     249                                                                commit : commitAdvParams
     250
     251                                                        }
     252                                                ]
     253                                        });
     254                }
     255
     256                return result;
     257        }
     258});
     259
     260})();
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy