JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.4
[ckeditor.git] / _source / plugins / dialogui / plugin.js
index d8b423d..7875b5b 100644 (file)
@@ -1,5 +1,5 @@
 /*\r
-Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
 For licensing, see LICENSE.html or http://ckeditor.com/license\r
 */\r
 \r
@@ -13,6 +13,7 @@ CKEDITOR.plugins.add( 'dialogui' );
        {\r
                this._ || ( this._ = {} );\r
                this._['default'] = this._.initValue = elementDefinition['default'] || '';\r
+               this._.required = elementDefinition[ 'required' ] || false;\r
                var args = [ this._ ];\r
                for ( var i = 1 ; i < arguments.length ; i++ )\r
                        args.push( arguments[i] );\r
@@ -34,6 +35,23 @@ CKEDITOR.plugins.add( 'dialogui' );
                        return new CKEDITOR.ui.dialog[elementDefinition.type]( dialog, elementDefinition, output );\r
                }\r
        },\r
+       containerBuilder =\r
+       {\r
+               build : function( dialog, elementDefinition, output )\r
+               {\r
+                       var children = elementDefinition.children,\r
+                               child,\r
+                               childHtmlList = [],\r
+                               childObjList = [];\r
+                       for ( var i = 0 ; ( i < children.length && ( child = children[i] ) ) ; i++ )\r
+                       {\r
+                               var childHtml = [];\r
+                               childHtmlList.push( childHtml );\r
+                               childObjList.push( CKEDITOR.dialog._.uiElementBuilders[ child.type ].build( dialog, child, childHtml ) );\r
+                       }\r
+                       return new CKEDITOR.ui.dialog[ elementDefinition.type ]( dialog, childObjList, childHtmlList, output, elementDefinition );\r
+               }\r
+       },\r
        commonPrototype =\r
        {\r
                isChanged : function()\r
@@ -41,9 +59,9 @@ CKEDITOR.plugins.add( 'dialogui' );
                        return this.getValue() != this.getInitValue();\r
                },\r
 \r
-               reset : function()\r
+               reset : function( noChangeEvent )\r
                {\r
-                       this.setValue( this.getInitValue() );\r
+                       this.setValue( this.getInitValue(), noChangeEvent );\r
                },\r
 \r
                setInitValue : function()\r
@@ -69,7 +87,14 @@ CKEDITOR.plugins.add( 'dialogui' );
                                {\r
                                        dialog.on( 'load', function()\r
                                                {\r
-                                                       this.getInputElement().on( 'change', function(){ this.fire( 'change', { value : this.getValue() } ); }, this );\r
+                                                       this.getInputElement().on( 'change', function()\r
+                                                       {\r
+                                                               // Make sure 'onchange' doesn't get fired after dialog closed. (#5719)\r
+                                                               if ( !dialog.parts.dialog.isVisible() )\r
+                                                                       return;\r
+\r
+                                                               this.fire( 'change', { value : this.getValue() } );\r
+                                                       }, this );\r
                                                }, this );\r
                                        this._.domOnChangeRegistered = true;\r
                                }\r
@@ -122,20 +147,22 @@ CKEDITOR.plugins.add( 'dialogui' );
                                        return;\r
 \r
                                var _ = initPrivateObject.call( this, elementDefinition );\r
-                               _.labelId = CKEDITOR.tools.getNextNumber() + '_label';\r
+                               _.labelId = CKEDITOR.tools.getNextId() + '_label';\r
                                var children = this._.children = [];\r
                                /** @ignore */\r
                                var innerHTML = function()\r
                                {\r
-                                       var html = [];\r
+                                       var html = [],\r
+                                               requiredClass = elementDefinition.required ? ' cke_required' : '' ;\r
                                        if ( elementDefinition.labelLayout != 'horizontal' )\r
-                                               html.push( '<div class="cke_dialog_ui_labeled_label" id="',\r
-                                                               _.labelId,\r
-                                                               '" >',\r
+                                               html.push( '<label class="cke_dialog_ui_labeled_label' + requiredClass + '" ',\r
+                                                               ' id="'+  _.labelId + '"',\r
+                                                               ' for="' + _.inputId + '"',\r
+                                                               ' style="' + elementDefinition.labelStyle + '">',\r
                                                                elementDefinition.label,\r
-                                                               '</div>',\r
-                                                               '<div class="cke_dialog_ui_labeled_content">',\r
-                                                               contentHtml( dialog, elementDefinition ),\r
+                                                               '</label>',\r
+                                                               '<div class="cke_dialog_ui_labeled_content" role="presentation">',\r
+                                                               contentHtml.call( this, dialog, elementDefinition ),\r
                                                                '</div>' );\r
                                        else\r
                                        {\r
@@ -147,14 +174,17 @@ CKEDITOR.plugins.add( 'dialogui' );
                                                        [\r
                                                                {\r
                                                                        type : 'html',\r
-                                                                       html : '<span class="cke_dialog_ui_labeled_label" ' +\r
-                                                                               'id="' + _.labelId + '">' +  CKEDITOR.tools.htmlEncode( elementDefinition.label ) +\r
+                                                                       html : '<label class="cke_dialog_ui_labeled_label' + requiredClass + '"' +\r
+                                                                               ' id="' + _.labelId + '"' +\r
+                                                                               ' for="' + _.inputId + '"' +\r
+                                                                               ' style="' + elementDefinition.labelStyle + '">' +\r
+                                                                                  CKEDITOR.tools.htmlEncode( elementDefinition.label ) +\r
                                                                                '</span>'\r
                                                                },\r
                                                                {\r
                                                                        type : 'html',\r
                                                                        html : '<span class="cke_dialog_ui_labeled_content">' +\r
-                                                                               contentHtml( dialog, elementDefinition ) +\r
+                                                                               contentHtml.call( this, dialog, elementDefinition ) +\r
                                                                                '</span>'\r
                                                                }\r
                                                        ]\r
@@ -163,7 +193,7 @@ CKEDITOR.plugins.add( 'dialogui' );
                                        }\r
                                        return html.join( '' );\r
                                };\r
-                               CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, null, innerHTML );\r
+                               CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, { role : 'presentation' }, innerHTML );\r
                        },\r
 \r
                        /**\r
@@ -193,7 +223,7 @@ CKEDITOR.plugins.add( 'dialogui' );
                                        return;\r
 \r
                                initPrivateObject.call( this, elementDefinition );\r
-                               var domId = this._.inputId = CKEDITOR.tools.getNextNumber() + '_textInput',\r
+                               var domId = this._.inputId = CKEDITOR.tools.getNextId() + '_textInput',\r
                                        attributes = { 'class' : 'cke_dialog_ui_input_' + elementDefinition.type, id : domId, type : 'text' },\r
                                        i;\r
 \r
@@ -207,6 +237,9 @@ CKEDITOR.plugins.add( 'dialogui' );
                                if ( elementDefinition.size )\r
                                        attributes.size = elementDefinition.size;\r
 \r
+                               if ( elementDefinition.controlStyle )\r
+                                       attributes.style = elementDefinition.controlStyle;\r
+\r
                                // If user presses Enter in a text box, it implies clicking OK for the dialog.\r
                                var me = this, keyPressedOnMe = false;\r
                                dialog.on( 'load', function()\r
@@ -222,7 +255,10 @@ CKEDITOR.plugins.add( 'dialogui' );
                                                        {\r
                                                                if ( evt.data.getKeystroke() == 13 && keyPressedOnMe )\r
                                                                {\r
-                                                                       dialog.getButton( 'ok' ) && dialog.getButton( 'ok' ).click();\r
+                                                                       dialog.getButton( 'ok' ) && setTimeout( function ()\r
+                                                                       {\r
+                                                                               dialog.getButton( 'ok' ).click();\r
+                                                                       }, 0 );\r
                                                                        keyPressedOnMe = false;\r
                                                                }\r
                                                        }, null, null, 1000 );\r
@@ -233,12 +269,15 @@ CKEDITOR.plugins.add( 'dialogui' );
                                {\r
                                        // IE BUG: Text input fields in IE at 100% would exceed a <td> or inline\r
                                        // container's width, so need to wrap it inside a <div>.\r
-                                       var html = [ '<div class="cke_dialog_ui_input_', elementDefinition.type, '"' ];\r
+                                       var html = [ '<div class="cke_dialog_ui_input_', elementDefinition.type, '" role="presentation"' ];\r
 \r
                                        if ( elementDefinition.width )\r
                                                html.push( 'style="width:'+ elementDefinition.width +'" ' );\r
 \r
                                        html.push( '><input ' );\r
+\r
+                                       attributes[ 'aria-labelledby' ] = this._.labelId;\r
+                                       this._.required && ( attributes[ 'aria-required' ] = this._.required );\r
                                        for ( var i in attributes )\r
                                                html.push( i + '="' + attributes[i] + '" ' );\r
                                        html.push( ' /></div>' );\r
@@ -274,7 +313,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 \r
                                initPrivateObject.call( this, elementDefinition );\r
                                var me = this,\r
-                                       domId = this._.inputId = CKEDITOR.tools.getNextNumber() + '_textarea',\r
+                                       domId = this._.inputId = CKEDITOR.tools.getNextId() + '_textarea',\r
                                        attributes = {};\r
 \r
                                if ( elementDefinition.validate )\r
@@ -287,7 +326,9 @@ CKEDITOR.plugins.add( 'dialogui' );
                                /** @ignore */\r
                                var innerHTML = function()\r
                                {\r
-                                       var html = [ '<div class="cke_dialog_ui_input_textarea"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];\r
+                                       attributes[ 'aria-labelledby' ] = this._.labelId;\r
+                                       this._.required && ( attributes[ 'aria-required' ] = this._.required );\r
+                                       var html = [ '<div class="cke_dialog_ui_input_textarea" role="presentation"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];\r
                                        for ( var i in attributes )\r
                                                html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[i] ) + '" ' );\r
                                        html.push( '>', CKEDITOR.tools.htmlEncode( me._['default'] ), '</textarea></div>' );\r
@@ -329,15 +370,21 @@ CKEDITOR.plugins.add( 'dialogui' );
                                {\r
                                        var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,\r
                                                        {\r
-                                                               id : elementDefinition.id ? elementDefinition.id + '_checkbox' : CKEDITOR.tools.getNextNumber() + '_checkbox'\r
+                                                               id : elementDefinition.id ? elementDefinition.id + '_checkbox' : CKEDITOR.tools.getNextId() + '_checkbox'\r
                                                        }, true ),\r
-                                               html = [],\r
-                                               attributes = { 'class' : 'cke_dialog_ui_checkbox_input', type : 'checkbox' };\r
+                                               html = [];\r
+\r
+                                       var labelId = CKEDITOR.tools.getNextId() + '_label';\r
+                                       var attributes = { 'class' : 'cke_dialog_ui_checkbox_input', type : 'checkbox', 'aria-labelledby' : labelId };\r
                                        cleanInnerDefinition( myDefinition );\r
                                        if ( elementDefinition[ 'default' ] )\r
                                                attributes.checked = 'checked';\r
+\r
+                                       if (typeof myDefinition.controlStyle != 'undefined')\r
+                                               myDefinition.style = myDefinition.controlStyle;\r
+\r
                                        _.checkbox = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'input', null, attributes );\r
-                                       html.push( ' <label for="', attributes.id, '">',\r
+                                       html.push( ' <label id="', labelId, '" for="', attributes.id, '">',\r
                                                        CKEDITOR.tools.htmlEncode( elementDefinition.label ),\r
                                                        '</label>' );\r
                                        return html.join( '' );\r
@@ -382,22 +429,23 @@ CKEDITOR.plugins.add( 'dialogui' );
                                var innerHTML = function()\r
                                {\r
                                        var inputHtmlList = [], html = [],\r
-                                               commonAttributes = { 'class' : 'cke_dialog_ui_radio_item' },\r
-                                               commonName = elementDefinition.id ? elementDefinition.id + '_radio' : CKEDITOR.tools.getNextNumber() + '_radio';\r
+                                               commonAttributes = { 'class' : 'cke_dialog_ui_radio_item', 'aria-labelledby' : this._.labelId },\r
+                                               commonName = elementDefinition.id ? elementDefinition.id + '_radio' : CKEDITOR.tools.getNextId() + '_radio';\r
                                        for ( var i = 0 ; i < elementDefinition.items.length ; i++ )\r
                                        {\r
                                                var item = elementDefinition.items[i],\r
                                                        title = item[2] !== undefined ? item[2] : item[0],\r
                                                        value = item[1] !== undefined ? item[1] : item[0],\r
+                                                       inputId = CKEDITOR.tools.getNextId() + '_radio_input',\r
+                                                       labelId = inputId + '_label',\r
                                                        inputDefinition = CKEDITOR.tools.extend( {}, elementDefinition,\r
                                                                        {\r
-                                                                               id : CKEDITOR.tools.getNextNumber() + '_radio_input',\r
+                                                                               id : inputId,\r
                                                                                title : null,\r
                                                                                type : null\r
                                                                        }, true ),\r
                                                        labelDefinition = CKEDITOR.tools.extend( {}, inputDefinition,\r
                                                                        {\r
-                                                                               id : null,\r
                                                                                title : title\r
                                                                        }, true ),\r
                                                        inputAttributes =\r
@@ -405,16 +453,21 @@ CKEDITOR.plugins.add( 'dialogui' );
                                                                type : 'radio',\r
                                                                'class' : 'cke_dialog_ui_radio_input',\r
                                                                name : commonName,\r
-                                                               value : value\r
+                                                               value : value,\r
+                                                               'aria-labelledby' : labelId\r
                                                        },\r
                                                        inputHtml = [];\r
                                                if ( me._['default'] == value )\r
                                                        inputAttributes.checked = 'checked';\r
                                                cleanInnerDefinition( inputDefinition );\r
                                                cleanInnerDefinition( labelDefinition );\r
+\r
+                                               if (typeof inputDefinition.controlStyle != 'undefined')\r
+                                                       inputDefinition.style = inputDefinition.controlStyle;\r
+\r
                                                children.push( new CKEDITOR.ui.dialog.uiElement( dialog, inputDefinition, inputHtml, 'input', null, inputAttributes ) );\r
                                                inputHtml.push( ' ' );\r
-                                               new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { 'for' : inputAttributes.id },\r
+                                               new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { id : labelId, 'for' : inputAttributes.id },\r
                                                           item[0] );\r
                                                inputHtmlList.push( inputHtml.join( '' ) );\r
                                        }\r
@@ -470,6 +523,15 @@ CKEDITOR.plugins.add( 'dialogui' );
                                                                        me.fire( 'click', { dialog : me.getDialog() } );\r
                                                                        evt.data.preventDefault();\r
                                                                } );\r
+\r
+                                                       element.on( 'keydown', function( evt )\r
+                                                               {\r
+                                                                       if ( evt.data.getKeystroke() in { 32:1 } )\r
+                                                                       {\r
+                                                                               me.click();\r
+                                                                               evt.data.preventDefault();\r
+                                                                       }\r
+                                                               } );\r
                                                })();\r
 \r
                                                element.unselectable();\r
@@ -478,6 +540,7 @@ CKEDITOR.plugins.add( 'dialogui' );
                                var outerDefinition = CKEDITOR.tools.extend( {}, elementDefinition );\r
                                delete outerDefinition.style;\r
 \r
+                               var labelId = CKEDITOR.tools.getNextId() + '_label';\r
                                CKEDITOR.ui.dialog.uiElement.call(\r
                                        this,\r
                                        dialog,\r
@@ -490,9 +553,11 @@ CKEDITOR.plugins.add( 'dialogui' );
                                                href : 'javascript:void(0)',\r
                                                title : elementDefinition.label,\r
                                                hidefocus : 'true',\r
-                                               'class' : elementDefinition['class']\r
+                                               'class' : elementDefinition['class'],\r
+                                               role : 'button',\r
+                                               'aria-labelledby' : labelId\r
                                        },\r
-                                       '<span class="cke_dialog_ui_button">' +\r
+                                       '<span id="' + labelId + '" class="cke_dialog_ui_button">' +\r
                                                CKEDITOR.tools.htmlEncode( elementDefinition.label ) +\r
                                        '</span>' );\r
                        },\r
@@ -531,16 +596,17 @@ CKEDITOR.plugins.add( 'dialogui' );
                                if ( elementDefinition.validate )\r
                                        this.validate = elementDefinition.validate;\r
 \r
+                               _.inputId = CKEDITOR.tools.getNextId() + '_select';\r
                                /** @ignore */\r
                                var innerHTML = function()\r
                                {\r
                                        var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,\r
                                                        {\r
-                                                               id : elementDefinition.id ? elementDefinition.id + '_select' : CKEDITOR.tools.getNextNumber() + '_select'\r
+                                                               id : elementDefinition.id ? elementDefinition.id + '_select' : CKEDITOR.tools.getNextId() + '_select'\r
                                                        }, true ),\r
                                                html = [],\r
                                                innerHTML = [],\r
-                                               attributes = { 'class' : 'cke_dialog_ui_input_select' };\r
+                                               attributes = { 'id' : _.inputId, 'class' : 'cke_dialog_ui_input_select', 'aria-labelledby' : this._.labelId };\r
 \r
                                        // Add multiple and size attributes from element definition.\r
                                        if ( elementDefinition.size != undefined )\r
@@ -556,6 +622,9 @@ CKEDITOR.plugins.add( 'dialogui' );
                                                        CKEDITOR.tools.htmlEncode( item[0] ) );\r
                                        }\r
 \r
+                                       if (typeof myDefinition.controlStyle != 'undefined')\r
+                                               myDefinition.style = myDefinition.controlStyle;\r
+\r
                                        _.select = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'select', null, attributes, innerHTML.join( '' ) );\r
                                        return html.join( '' );\r
                                };\r
@@ -594,10 +663,10 @@ CKEDITOR.plugins.add( 'dialogui' );
                                /** @ignore */\r
                                var innerHTML = function()\r
                                {\r
-                                       _.frameId = CKEDITOR.tools.getNextNumber() + '_fileInput';\r
+                                       _.frameId = CKEDITOR.tools.getNextId() + '_fileInput';\r
 \r
                                        // Support for custom document.domain in IE.\r
-                                       var isCustomDomain = CKEDITOR.env.ie && document.domain != window.location.hostname;\r
+                                       var isCustomDomain = CKEDITOR.env.isCustomDomain();\r
 \r
                                        var html = [\r
                                                '<iframe' +\r
@@ -720,13 +789,14 @@ CKEDITOR.plugins.add( 'dialogui' );
                                                theirHtml = '<span>' + theirHtml + '</span>';\r
 \r
                                        // Look for focus function in definition.\r
-                                       if ( elementDefinition.focus )\r
+                                       var focus = elementDefinition.focus;\r
+                                       if ( focus )\r
                                        {\r
                                                var oldFocus = this.focus;\r
                                                this.focus = function()\r
                                                {\r
                                                        oldFocus.call( this );\r
-                                                       elementDefinition.focus.call( this );\r
+                                                       typeof focus == 'function' && focus.call( this );\r
                                                        this.fire( 'focus' );\r
                                                };\r
                                                if ( elementDefinition.isFocusable )\r
@@ -752,7 +822,45 @@ CKEDITOR.plugins.add( 'dialogui' );
 \r
                                        htmlList.push( [ theirMatch[1], ' ', myMatch[1] || '', theirMatch[2] ].join( '' ) );\r
                                };\r
-                       })()\r
+                       })(),\r
+\r
+                       /**\r
+                        * Form fieldset for grouping dialog UI elements.\r
+                        * @constructor\r
+                        * @extends CKEDITOR.ui.dialog.uiElement\r
+                        * @param {CKEDITOR.dialog} dialog Parent dialog object.\r
+                        * @param {Array} childObjList\r
+                        * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this\r
+                        * container.\r
+                        * @param {Array} childHtmlList\r
+                        * Array of HTML code that correspond to the HTML output of all the\r
+                        * objects in childObjList.\r
+                        * @param {Array} htmlList\r
+                        * Array of HTML code that this element will output to.\r
+                        * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition\r
+                        * The element definition. Accepted fields:\r
+                        * <ul>\r
+                        *      <li><strong>label</strong> (Optional) The legend of the this fieldset.</li>\r
+                        *      <li><strong>children</strong> (Required) An array of dialog field definitions which will be grouped inside this fieldset. </li>\r
+                        * </ul>\r
+                        */\r
+                       fieldset : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )\r
+                       {\r
+                               var legendLabel = elementDefinition.label;\r
+                               /** @ignore */\r
+                               var innerHTML = function()\r
+                               {\r
+                                       var html = [];\r
+                                       legendLabel && html.push( '<legend>' + legendLabel + '</legend>' );\r
+                                       for ( var i = 0; i < childHtmlList.length; i++ )\r
+                                               html.push( childHtmlList[ i ] );\r
+                                       return html.join( '' );\r
+                               };\r
+\r
+                               this._ = { children : childObjList };\r
+                               CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'fieldset', null, null, innerHTML );\r
+                       }\r
+\r
                }, true );\r
 \r
        CKEDITOR.ui.dialog.html.prototype = new CKEDITOR.ui.dialog.uiElement;\r
@@ -838,7 +946,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 \r
                                isVisible : function()\r
                                {\r
-                                       return !!this.getElement().$.firstChild.offsetHeight;\r
+                                       return this.getElement().getFirst().isVisible();\r
                                },\r
 \r
                                isEnabled : function()\r
@@ -952,8 +1060,8 @@ CKEDITOR.plugins.add( 'dialogui' );
                                 */\r
                                setValue : function( value )\r
                                {\r
-                                       value = value || '';\r
-                                       return CKEDITOR.ui.dialog.uiElement.prototype.setValue.call( this, value );\r
+                                       !value && ( value = '' );\r
+                                       return CKEDITOR.ui.dialog.uiElement.prototype.setValue.apply( this, arguments );\r
                                },\r
 \r
                                keyboardFocusable : true\r
@@ -1048,11 +1156,12 @@ CKEDITOR.plugins.add( 'dialogui' );
                                 * Sets the state of the checkbox.\r
                                 * @example\r
                                 * @param {Boolean} true to tick the checkbox, false to untick it.\r
+                                * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.\r
                                 */\r
-                               setValue : function( checked )\r
+                               setValue : function( checked, noChangeEvent )\r
                                {\r
                                        this.getInputElement().$.checked = checked;\r
-                                       this.fire( 'change', { value : checked } );\r
+                                       !noChangeEvent && this.fire( 'change', { value : checked } );\r
                                },\r
 \r
                                /**\r
@@ -1114,14 +1223,15 @@ CKEDITOR.plugins.add( 'dialogui' );
                                 * Checks one of the radio buttons in this button group.\r
                                 * @example\r
                                 * @param {String} value The value of the button to be chcked.\r
+                                * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.\r
                                 */\r
-                               setValue : function( value )\r
+                               setValue : function( value, noChangeEvent )\r
                                {\r
                                        var children = this._.children,\r
                                                item;\r
                                        for ( var i = 0 ; ( i < children.length ) && ( item = children[i] ) ; i++ )\r
                                                item.getElement().$.checked = ( item.getValue() == value );\r
-                                       this.fire( 'change', { value : value } );\r
+                                       !noChangeEvent && this.fire( 'change', { value : value } );\r
                                },\r
 \r
                                /**\r
@@ -1230,12 +1340,43 @@ CKEDITOR.plugins.add( 'dialogui' );
                                 * @returns {String} The value of the action.\r
                                 * @example\r
                                 */\r
-                               getAction : function( action )\r
+                               getAction : function()\r
                                {\r
                                        return this.getInputElement().getParent().$.action;\r
                                },\r
 \r
                                /**\r
+                                * The events must be applied on the inner input element, and\r
+                                * that must be done when the iframe & form has been loaded\r
+                                */\r
+                               registerEvents : function( definition )\r
+                               {\r
+                                       var regex = /^on([A-Z]\w+)/,\r
+                                               match;\r
+\r
+                                       var registerDomEvent = function( uiElement, dialog, eventName, func )\r
+                                       {\r
+                                               uiElement.on( 'formLoaded', function()\r
+                                               {\r
+                                                       uiElement.getInputElement().on( eventName, func, uiElement );\r
+                                               });\r
+                                       };\r
+\r
+                                       for ( var i in definition )\r
+                                       {\r
+                                               if ( !( match = i.match( regex ) ) )\r
+                                                       continue;\r
+\r
+                                               if ( this.eventProcessors[i] )\r
+                                                       this.eventProcessors[i].call( this, this._.dialog, definition[i] );\r
+                                               else\r
+                                                       registerDomEvent( this, this._.dialog, match[1].toLowerCase(), definition[i] );\r
+                                       }\r
+\r
+                                       return this;\r
+                               },\r
+\r
+                               /**\r
                                 * Redraws the file input and resets the file path in the file input.\r
                                 * The redraw logic is necessary because non-IE browsers tend to clear\r
                                 * the &lt;iframe&gt; containing the file input after closing the dialog.\r
@@ -1246,7 +1387,36 @@ CKEDITOR.plugins.add( 'dialogui' );
                                        var frameElement = CKEDITOR.document.getById( this._.frameId ),\r
                                                frameDocument = frameElement.getFrameDocument(),\r
                                                elementDefinition = this._.definition,\r
-                                               buttons = this._.buttons;\r
+                                               buttons = this._.buttons,\r
+                                               callNumber = this.formLoadedNumber,\r
+                                               unloadNumber = this.formUnloadNumber,\r
+                                               langDir = this._.dialog._.editor.lang.dir,\r
+                                               langCode = this._.dialog._.editor.langCode;\r
+\r
+                                       // The callback function for the iframe, but we must call tools.addFunction only once\r
+                                       // so we store the function number in this.formLoadedNumber\r
+                                       if (!callNumber)\r
+                                       {\r
+                                               callNumber = this.formLoadedNumber = CKEDITOR.tools.addFunction(\r
+                                                       function()\r
+                                                       {\r
+                                                               // Now we can apply the events to the input type=file\r
+                                                               this.fire( 'formLoaded' ) ;\r
+                                                       }, this ) ;\r
+\r
+                                               // Remove listeners attached to the content of the iframe (the file input)\r
+                                               unloadNumber = this.formUnloadNumber = CKEDITOR.tools.addFunction(\r
+                                                       function()\r
+                                                       {\r
+                                                               this.getInputElement().clearCustomData();\r
+                                                       }, this ) ;\r
+\r
+                                               this.getDialog()._.editor.on( 'destroy', function()\r
+                                                               {\r
+                                                                       CKEDITOR.tools.removeFunction( callNumber );\r
+                                                                       CKEDITOR.tools.removeFunction( unloadNumber );\r
+                                                               } );\r
+                                       }\r
 \r
                                        function generateFormField()\r
                                        {\r
@@ -1260,8 +1430,8 @@ CKEDITOR.plugins.add( 'dialogui' );
                                                if ( elementDefinition.size )\r
                                                        size = elementDefinition.size - ( CKEDITOR.env.ie  ? 7 : 0 );   // "Browse" button is bigger in IE.\r
 \r
-                                               frameDocument.$.write( [ '<html><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">',\r
-                                                               '<form enctype="multipart/form-data" method="POST" action="',\r
+                                               frameDocument.$.write( [ '<html dir="' + langDir + '" lang="' + langCode + '"><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">',\r
+                                                               '<form enctype="multipart/form-data" method="POST" dir="' + langDir + '" lang="' + langCode + '" action="',\r
                                                                CKEDITOR.tools.htmlEncode( elementDefinition.action ),\r
                                                                '">',\r
                                                                '<input type="file" name="',\r
@@ -1270,7 +1440,9 @@ CKEDITOR.plugins.add( 'dialogui' );
                                                                CKEDITOR.tools.htmlEncode( size > 0 ? size : "" ),\r
                                                                '" />',\r
                                                                '</form>',\r
-                                                               '</body></html>' ].join( '' ) );\r
+                                                               '</body></html>',\r
+                                                               '<script>window.parent.CKEDITOR.tools.callFunction(' + callNumber + ');',\r
+                                                               'window.onbeforeunload = function() {window.parent.CKEDITOR.tools.callFunction(' + unloadNumber + ')}</script>' ].join( '' ) );\r
 \r
                                                frameDocument.$.close();\r
 \r
@@ -1287,10 +1459,18 @@ CKEDITOR.plugins.add( 'dialogui' );
 \r
                                getValue : function()\r
                                {\r
-                                       // The file path returned from the input tag is incomplete anyway, so it's\r
-                                       // safe to ignore it and prevent the confirmation dialog from appearing.\r
-                                       // (Part of #3465)\r
-                                       return '';\r
+                                       return this.getInputElement().$.value;\r
+                               },\r
+\r
+                               /***\r
+                                * The default value of input type="file" is an empty string, but during initialization\r
+                                * of this UI element, the iframe still isn't ready so it can't be read from that object\r
+                                * Setting it manually prevents later issues about the current value ("") being different\r
+                                * of the initial value (undefined as it asked for .value of a div)\r
+                                */\r
+                               setInitValue : function()\r
+                               {\r
+                                       this._.initValue = '';\r
                                },\r
 \r
                                /**\r
@@ -1299,13 +1479,35 @@ CKEDITOR.plugins.add( 'dialogui' );
                                 * @type Object\r
                                 * @example\r
                                 */\r
-                               eventProcessors : commonEventProcessors,\r
+                               eventProcessors :\r
+                               {\r
+                                       onChange : function( dialog, func )\r
+                                       {\r
+                                               // If this method is called several times (I'm not sure about how this can happen but the default\r
+                                               // onChange processor includes this protection)\r
+                                               // In order to reapply to the new element, the property is deleted at the beggining of the registerEvents method\r
+                                               if ( !this._.domOnChangeRegistered )\r
+                                               {\r
+                                                       // By listening for the formLoaded event, this handler will get reapplied when a new\r
+                                                       // form is created\r
+                                                       this.on( 'formLoaded', function()\r
+                                                       {\r
+                                                               this.getInputElement().on( 'change', function(){ this.fire( 'change', { value : this.getValue() } ); }, this );\r
+                                                       }, this );\r
+                                                       this._.domOnChangeRegistered = true;\r
+                                               }\r
+\r
+                                               this.on( 'change', func );\r
+                                       }\r
+                               },\r
 \r
                                keyboardFocusable : true\r
                        }, true );\r
 \r
        CKEDITOR.ui.dialog.fileButton.prototype = new CKEDITOR.ui.dialog.button;\r
 \r
+       CKEDITOR.ui.dialog.fieldset.prototype = CKEDITOR.tools.clone( CKEDITOR.ui.dialog.hbox.prototype );\r
+\r
        CKEDITOR.dialog.addUIElement( 'text', textBuilder );\r
        CKEDITOR.dialog.addUIElement( 'password', textBuilder );\r
        CKEDITOR.dialog.addUIElement( 'textarea', commonBuilder );\r
@@ -1316,4 +1518,5 @@ CKEDITOR.plugins.add( 'dialogui' );
        CKEDITOR.dialog.addUIElement( 'file', commonBuilder );\r
        CKEDITOR.dialog.addUIElement( 'fileButton', commonBuilder );\r
        CKEDITOR.dialog.addUIElement( 'html', commonBuilder );\r
+       CKEDITOR.dialog.addUIElement( 'fieldset', containerBuilder );\r
 })();\r