Ticket #7114: 7114_2.patch

_source/lang/en.js

@@ -606 +606 @@
                 toolbar         : 'IFrame',
                 noUrl           : 'Please type the iframe URL',
                 scrolling       : 'Enable scrollbars',
-                border          : 'Show frame border'
+                border          : 'Show frame border',
+                widthPx         : 'pixels',
+                widthPc         : 'percent',
+                widthUnit               : 'width unit'
         },
 
         font :

_source/plugins/fakeobjects/plugin.js

@@ -25 +25 @@
                                         if ( style )
                                         {
                                                 // Get the width from the style.
-                                                var match = /(?:^|\s)width\s*:\s*(\d+)/i.exec( style ),
-                                                        width = match && match[1];
+                                                var matchWidth = /(?:^|\s)width\s*:\s*(\d+)(%)?/i.exec( style ),
+                                                        width = matchWidth && matchWidth[1];
 
                                                 // Get the height from the style.
-                                                match = /(?:^|\s)height\s*:\s*(\d+)/i.exec( style );
-                                                var height = match && match[1];
+                                                var matchHeight = /(?:^|\s)height\s*:\s*(\d+)(%)?/i.exec( style ),
+                                                        height = matchHeight && matchHeight[1];
 
                                                 if ( width )
-                                                        realElement.attributes.width = width;
+                                                        realElement.attributes.width = width + ( matchWidth[ 2 ] || '' );
 
                                                 if ( height )
-                                                        realElement.attributes.height = height;
+                                                        realElement.attributes.height = height + ( matchHeight[ 2 ] || '' );
                                         }
                                 }
 

_source/plugins/iframe/dialogs/iframe.js

@@ -11 +11 @@
         {
                 scrolling : { 'true' : 'yes', 'false' : 'no' },
                 frameborder : { 'true' : '1', 'false' : '0' }
-        };
+        },
+        widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/;
 
         function loadValue( iframeNode )
         {
@@ -26 +27 @@
                 }
         }
 
-        function commitValue( iframeNode )
+        function commitValue( iframeNode, value )
         {
                 var isRemove = this.getValue() === '',
-                        isCheckbox = this instanceof CKEDITOR.ui.dialog.checkbox,
-                        value = this.getValue();
+                        isCheckbox = this instanceof CKEDITOR.ui.dialog.checkbox;
+                value = typeof value == 'string' ? value : this.getValue();
+
                 if ( isRemove )
                         iframeNode.removeAttribute( this.att || this.id );
                 else if ( isCheckbox )
@@ -115 +117 @@
                                                 },
                                                 {
                                                         type : 'hbox',
+                                                        widths : [ '50%', '50%' ],
                                                         children :
                                                         [
                                                                 {
-                                                                        id : 'width',
-                                                                        type : 'text',
-                                                                        style : 'width:100%',
-                                                                        labelLayout : 'vertical',
-                                                                        label : commonLang.width,
-                                                                        validate : CKEDITOR.dialog.validate.integer( commonLang.invalidWidth ),
-                                                                        setup : function( iframeNode, fakeImage )
-                                                                        {
-                                                                                loadValue.apply( this, arguments );
-                                                                                if ( fakeImage )
+                                                                        type : 'vbox', 
+                                                                        children :
+                                                                        [
                                                                                 {
-                                                                                        var fakeImageWidth = parseInt( fakeImage.$.style.width, 10 );
-                                                                                        if ( !isNaN( fakeImageWidth ) )
-                                                                                                this.setValue( fakeImageWidth );
-                                                                                }
-                                                                        },
-                                                                        commit : function( iframeNode, extraStyles )
-                                                                        {
-                                                                                commitValue.apply( this, arguments );
-                                                                                if ( this.getValue() )
-                                                                                        extraStyles.width = this.getValue() + 'px';
-                                                                        }
-                                                                },
-                                                                {
-                                                                        id : 'height',
-                                                                        type : 'text',
-                                                                        style : 'width:100%',
-                                                                        labelLayout : 'vertical',
-                                                                        label : commonLang.height,
-                                                                        validate : CKEDITOR.dialog.validate.integer( commonLang.invalidHeight ),
-                                                                        setup : function( iframeNode, fakeImage )
-                                                                        {
-                                                                                loadValue.apply( this, arguments );
-                                                                                if ( fakeImage )
+                                                                                        type : 'hbox',
+                                                                                        padding : 1,
+                                                                                        children :
+                                                                                        [
+                                                                                                {
+                                                                                                        id : 'width',
+                                                                                                        type : 'text',
+                                                                                                        labelLayout : 'vertical',
+                                                                                                        label : commonLang.width,
+                                                                                                        validate : CKEDITOR.dialog.validate.integer( commonLang.invalidWidth ),
+
+                                                                                                        // Extra labelling of width unit type.
+                                                                                                        onLoad : function()
+                                                                                                        {
+                                                                                                                var labelElement = this.getDialog().getContentElement( 'info', 'widthType' ).getElement(),
+                                                                                                                        inputElement = this.getInputElement(),
+                                                                                                                        ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );
+
+                                                                                                                inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
+                                                                                                        },
+                                                                                                        setup : function( iframeNode, fakeImage )
+                                                                                                        {
+                                                                                                                loadValue.apply( this, arguments );
+                                                                                                                if ( fakeImage )
+                                                                                                                {
+                                                                                                                        var widthMatch = widthPattern.exec( fakeImage.$.style.width );
+                                                                                                                        if ( widthMatch )
+                                                                                                                        {
+                                                                                                                                this.setValue( widthMatch[ 1 ] );
+                                                                                                                                var type = this.getDialog().getContentElement( 'info', 'widthType' );
+                                                                                                                                type && type.setValue( widthMatch[ 2 ] == '%' ? 'percents' : 'pixels' );
+                                                                                                                        }
+                                                                                                                }
+                                                                                                        },
+                                                                                                        commit : function( iframeNode, extraStyles )
+                                                                                                        {
+                                                                                                                var type = this.getDialog().getContentElement( 'info', 'widthType' ),
+                                                                                                                        value = this.getValue();
+                                                                                                                if ( value )
+                                                                                                                {
+                                                                                                                        var suffix = !type || type.getValue() == 'pixels' ? 'px' : '%';
+                                                                                                                        extraStyles.width = this.getValue() + suffix;
+                                                                                                                        value += ( suffix == 'px' ? '' : '%' );
+                                                                                                                }
+                                                                                                                commitValue.call( this, iframeNode, value );
+                                                                                                        }
+                                                                                                },
+                                                                                                {
+                                                                                                        id : 'widthType',
+                                                                                                        type : 'select',
+                                                                                                        label : iframeLang.widthUnit,
+                                                                                                        labelStyle: 'visibility:hidden',
+                                                                                                        'default' : 'pixels',
+                                                                                                        items :
+                                                                                                        [
+                                                                                                                [ iframeLang.widthPx , 'pixels' ],
+                                                                                                                [ iframeLang.widthPc , 'percents' ]
+                                                                                                        ]
+                                                                                                }
+                                                                                        ]
+                                                                                },
                                                                                 {
-                                                                                        var fakeImageHeight = parseInt( fakeImage.$.style.height, 10 );
-                                                                                        if ( !isNaN( fakeImageHeight ) )
-                                                                                                this.setValue( fakeImageHeight );
+                                                                                        type : 'hbox',
+                                                                                        padding : 1,
+                                                                                        children :
+                                                                                        [
+                                                                                                {
+                                                                                                        id : 'height',
+                                                                                                        type : 'text',
+                                                                                                        labelLayout : 'vertical',
+                                                                                                        label : commonLang.height,
+                                                                                                        validate : CKEDITOR.dialog.validate.integer( commonLang.invalidHeight ),
+
+                                                                                                        // Extra labelling of height unit type.
+                                                                                                        onLoad : function()
+                                                                                                        {
+                                                                                                                var labelElement = this.getDialog().getContentElement( 'info', 'heightType' ).getElement(),
+                                                                                                                        inputElement = this.getInputElement(),
+                                                                                                                        ariaLabelledByAttr = inputElement.getAttribute( 'aria-labelledby' );
+
+                                                                                                                inputElement.setAttribute( 'aria-labelledby', [ ariaLabelledByAttr, labelElement.$.id ].join( ' ' ) );
+                                                                                                        },
+                                                                                                        setup : function( iframeNode, fakeImage )
+                                                                                                        {
+                                                                                                                loadValue.apply( this, arguments );
+                                                                                                                if ( fakeImage )
+                                                                                                                {
+                                                                                                                        var fakeImageHeight = parseInt( fakeImage.$.style.height, 10 );
+                                                                                                                        if ( !isNaN( fakeImageHeight ) )
+                                                                                                                                this.setValue( fakeImageHeight );
+                                                                                                                }
+                                                                                                        },
+                                                                                                        commit : function( iframeNode, extraStyles )
+                                                                                                        {
+                                                                                                                commitValue.apply( this, arguments );
+                                                                                                                if ( this.getValue() )
+                                                                                                                        extraStyles.height = this.getValue() + 'px';
+                                                                                                        }
+                                                                                                },
+                                                                                                {
+                                                                                                        id : 'heightType',
+                                                                                                        type : 'html',
+                                                                                                        html : '<div><br />' + iframeLang.widthPx + '</div>'
+                                                                                                }
+                                                                                        ]
                                                                                 }
-                                                                        },
-                                                                        commit : function( iframeNode, extraStyles )
-                                                                        {
-                                                                                commitValue.apply( this, arguments );
-                                                                                if ( this.getValue() )
-                                                                                        extraStyles.height = this.getValue() + 'px';
-                                                                        }
+                                                                        ]
                                                                 },
                                                                 {
                                                                         id : 'align',
@@ -178 +246 @@
                                                                                 [ commonLang.alignMiddle , 'middle' ],
                                                                                 [ commonLang.alignBottom , 'bottom' ]
                                                                         ],
-                                                                        style : 'width:100%',
                                                                         labelLayout : 'vertical',
                                                                         label : commonLang.align,
                                                                         setup : function( iframeNode, fakeImage )