X-Git-Url: https://jasonwoof.com/gitweb/?p=ckeditor.git;a=blobdiff_plain;f=_source%2Fplugins%2Fdialogui%2Fplugin.js;h=1567c945bae7f5ebde5da2220b047d555054d610;hp=b6cd10c1b690f4d5f35f349db639cdd2e16ee816;hb=059b4c2fef02528bf1af189f7996e80652faddfb;hpb=c6e377a02b54abc07129d72b632763c727476a15

diff --git a/_source/plugins/dialogui/plugin.js b/_source/plugins/dialogui/plugin.js
index b6cd10c..1567c94 100644
--- a/_source/plugins/dialogui/plugin.js
+++ b/_source/plugins/dialogui/plugin.js
@@ -13,6 +13,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 	{
 		this._ || ( this._ = {} );
 		this._['default'] = this._.initValue = elementDefinition['default'] || '';
+		this._.required = elementDefinition[ 'required' ] || false;
 		var args = [ this._ ];
 		for ( var i = 1 ; i < arguments.length ; i++ )
 			args.push( arguments[i] );
@@ -34,6 +35,23 @@ CKEDITOR.plugins.add( 'dialogui' );
 			return new CKEDITOR.ui.dialog[elementDefinition.type]( dialog, elementDefinition, output );
 		}
 	},
+	containerBuilder =
+	{
+		build : function( dialog, elementDefinition, output )
+		{
+			var children = elementDefinition.children,
+				child,
+				childHtmlList = [],
+				childObjList = [];
+			for ( var i = 0 ; ( i < children.length && ( child = children[i] ) ) ; i++ )
+			{
+				var childHtml = [];
+				childHtmlList.push( childHtml );
+				childObjList.push( CKEDITOR.dialog._.uiElementBuilders[ child.type ].build( dialog, child, childHtml ) );
+			}
+			return new CKEDITOR.ui.dialog[ elementDefinition.type ]( dialog, childObjList, childHtmlList, output, elementDefinition );
+		}
+	},
 	commonPrototype =
 	{
 		isChanged : function()
@@ -129,13 +147,14 @@ CKEDITOR.plugins.add( 'dialogui' );
 				{
 					var html = [];
 					if ( elementDefinition.labelLayout != 'horizontal' )
-						html.push( '<div class="cke_dialog_ui_labeled_label" id="',
-								_.labelId,
-								'" >',
+						html.push( '<label class="cke_dialog_ui_labeled_label" ',
+								' id="'+  _.labelId + '"',
+								' for="' + _.inputId + '"',
+								' style="' + elementDefinition.labelStyle + '">',
 								elementDefinition.label,
-								'</div>',
-								'<div class="cke_dialog_ui_labeled_content">',
-								contentHtml( dialog, elementDefinition ),
+								'</label>',
+								'<div class="cke_dialog_ui_labeled_content" role="presentation">',
+								contentHtml.call( this, dialog, elementDefinition ),
 								'</div>' );
 					else
 					{
@@ -147,14 +166,17 @@ CKEDITOR.plugins.add( 'dialogui' );
 							[
 								{
 									type : 'html',
-									html : '<span class="cke_dialog_ui_labeled_label" ' +
-										'id="' + _.labelId + '">' +  CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
+									html : '<label class="cke_dialog_ui_labeled_label"' +
+										' id="' + _.labelId + '"' +
+										' for="' + _.inputId + '"' +
+										' style="' + elementDefinition.labelStyle + '">' +
+										   CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
 										'</span>'
 								},
 								{
 									type : 'html',
 									html : '<span class="cke_dialog_ui_labeled_content">' +
-										contentHtml( dialog, elementDefinition ) +
+										contentHtml.call( this, dialog, elementDefinition ) +
 										'</span>'
 								}
 							]
@@ -163,7 +185,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 					}
 					return html.join( '' );
 				};
-				CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, null, innerHTML );
+				CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, { role : 'presentation' }, innerHTML );
 			},
 
 			/**
@@ -236,12 +258,15 @@ CKEDITOR.plugins.add( 'dialogui' );
 				{
 					// IE BUG: Text input fields in IE at 100% would exceed a <td> or inline
 					// container's width, so need to wrap it inside a <div>.
-					var html = [ '<div class="cke_dialog_ui_input_', elementDefinition.type, '"' ];
+					var html = [ '<div class="cke_dialog_ui_input_', elementDefinition.type, '" role="presentation"' ];
 
 					if ( elementDefinition.width )
 						html.push( 'style="width:'+ elementDefinition.width +'" ' );
 
 					html.push( '><input ' );
+
+					attributes[ 'aria-labelledby' ] = this._.labelId;
+					this._.required && ( attributes[ 'aria-required' ] = this._.required );
 					for ( var i in attributes )
 						html.push( i + '="' + attributes[i] + '" ' );
 					html.push( ' /></div>' );
@@ -290,7 +315,9 @@ CKEDITOR.plugins.add( 'dialogui' );
 				/** @ignore */
 				var innerHTML = function()
 				{
-					var html = [ '<div class="cke_dialog_ui_input_textarea"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];
+					attributes[ 'aria-labelledby' ] = this._.labelId;
+					this._.required && ( attributes[ 'aria-required' ] = this._.required );
+					var html = [ '<div class="cke_dialog_ui_input_textarea" role="presentation"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];
 					for ( var i in attributes )
 						html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[i] ) + '" ' );
 					html.push( '>', CKEDITOR.tools.htmlEncode( me._['default'] ), '</textarea></div>' );
@@ -334,13 +361,15 @@ CKEDITOR.plugins.add( 'dialogui' );
 							{
 								id : elementDefinition.id ? elementDefinition.id + '_checkbox' : CKEDITOR.tools.getNextNumber() + '_checkbox'
 							}, true ),
-						html = [],
-						attributes = { 'class' : 'cke_dialog_ui_checkbox_input', type : 'checkbox' };
+						html = [];
+
+					var labelId = CKEDITOR.tools.getNextNumber() + '_label';
+					var attributes = { 'class' : 'cke_dialog_ui_checkbox_input', type : 'checkbox', 'aria-labelledby' : labelId };
 					cleanInnerDefinition( myDefinition );
 					if ( elementDefinition[ 'default' ] )
 						attributes.checked = 'checked';
 					_.checkbox = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'input', null, attributes );
-					html.push( ' <label for="', attributes.id, '">',
+					html.push( ' <label id="', labelId, '" for="', attributes.id, '">',
 							CKEDITOR.tools.htmlEncode( elementDefinition.label ),
 							'</label>' );
 					return html.join( '' );
@@ -385,22 +414,23 @@ CKEDITOR.plugins.add( 'dialogui' );
 				var innerHTML = function()
 				{
 					var inputHtmlList = [], html = [],
-						commonAttributes = { 'class' : 'cke_dialog_ui_radio_item' },
+						commonAttributes = { 'class' : 'cke_dialog_ui_radio_item', 'aria-labelledby' : this._.labelId },
 						commonName = elementDefinition.id ? elementDefinition.id + '_radio' : CKEDITOR.tools.getNextNumber() + '_radio';
 					for ( var i = 0 ; i < elementDefinition.items.length ; i++ )
 					{
 						var item = elementDefinition.items[i],
 							title = item[2] !== undefined ? item[2] : item[0],
 							value = item[1] !== undefined ? item[1] : item[0],
+							inputId = CKEDITOR.tools.getNextNumber() + '_radio_input',
+							labelId = inputId + '_label',
 							inputDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
 									{
-										id : CKEDITOR.tools.getNextNumber() + '_radio_input',
+										id : inputId,
 										title : null,
 										type : null
 									}, true ),
 							labelDefinition = CKEDITOR.tools.extend( {}, inputDefinition,
 									{
-										id : null,
 										title : title
 									}, true ),
 							inputAttributes =
@@ -408,7 +438,8 @@ CKEDITOR.plugins.add( 'dialogui' );
 								type : 'radio',
 								'class' : 'cke_dialog_ui_radio_input',
 								name : commonName,
-								value : value
+								value : value,
+								'aria-labelledby' : labelId
 							},
 							inputHtml = [];
 						if ( me._['default'] == value )
@@ -417,7 +448,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 						cleanInnerDefinition( labelDefinition );
 						children.push( new CKEDITOR.ui.dialog.uiElement( dialog, inputDefinition, inputHtml, 'input', null, inputAttributes ) );
 						inputHtml.push( ' ' );
-						new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { 'for' : inputAttributes.id },
+						new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { id : labelId, 'for' : inputAttributes.id },
 							   item[0] );
 						inputHtmlList.push( inputHtml.join( '' ) );
 					}
@@ -473,6 +504,15 @@ CKEDITOR.plugins.add( 'dialogui' );
 									me.fire( 'click', { dialog : me.getDialog() } );
 									evt.data.preventDefault();
 								} );
+
+							element.on( 'keydown', function( evt )
+								{
+									if ( evt.data.getKeystroke() in { 32:1, 13:1 } )
+									{
+										me.click();
+										evt.data.preventDefault();
+									}
+								} );
 						})();
 
 						element.unselectable();
@@ -481,6 +521,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 				var outerDefinition = CKEDITOR.tools.extend( {}, elementDefinition );
 				delete outerDefinition.style;
 
+				var labelId = CKEDITOR.tools.getNextNumber() + '_label';
 				CKEDITOR.ui.dialog.uiElement.call(
 					this,
 					dialog,
@@ -493,9 +534,11 @@ CKEDITOR.plugins.add( 'dialogui' );
 						href : 'javascript:void(0)',
 						title : elementDefinition.label,
 						hidefocus : 'true',
-						'class' : elementDefinition['class']
+						'class' : elementDefinition['class'],
+						role : 'button',
+						'aria-labelledby' : labelId
 					},
-					'<span class="cke_dialog_ui_button">' +
+					'<span id="' + labelId + '" class="cke_dialog_ui_button">' +
 						CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
 					'</span>' );
 			},
@@ -534,6 +577,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 				if ( elementDefinition.validate )
 					this.validate = elementDefinition.validate;
 
+				_.inputId = CKEDITOR.tools.getNextNumber() + '_select';
 				/** @ignore */
 				var innerHTML = function()
 				{
@@ -543,7 +587,7 @@ CKEDITOR.plugins.add( 'dialogui' );
 							}, true ),
 						html = [],
 						innerHTML = [],
-						attributes = { 'class' : 'cke_dialog_ui_input_select' };
+						attributes = { 'id' : _.inputId, 'class' : 'cke_dialog_ui_input_select', 'aria-labelledby' : this._.labelId };
 
 					// Add multiple and size attributes from element definition.
 					if ( elementDefinition.size != undefined )
@@ -723,13 +767,14 @@ CKEDITOR.plugins.add( 'dialogui' );
 						theirHtml = '<span>' + theirHtml + '</span>';
 
 					// Look for focus function in definition.
-					if ( elementDefinition.focus )
+					var focus = elementDefinition.focus;
+					if ( focus )
 					{
 						var oldFocus = this.focus;
 						this.focus = function()
 						{
 							oldFocus.call( this );
-							elementDefinition.focus.call( this );
+							typeof focus == 'function' && focus.call( this );
 							this.fire( 'focus' );
 						};
 						if ( elementDefinition.isFocusable )
@@ -755,7 +800,45 @@ CKEDITOR.plugins.add( 'dialogui' );
 
 					htmlList.push( [ theirMatch[1], ' ', myMatch[1] || '', theirMatch[2] ].join( '' ) );
 				};
-			})()
+			})(),
+
+			/**
+			 * Form fieldset for grouping dialog UI elements.
+			 * @constructor
+			 * @extends CKEDITOR.ui.dialog.uiElement
+			 * @param {CKEDITOR.dialog} dialog Parent dialog object.
+			 * @param {Array} childObjList
+			 * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this
+			 * container.
+			 * @param {Array} childHtmlList
+			 * Array of HTML code that correspond to the HTML output of all the
+			 * objects in childObjList.
+			 * @param {Array} htmlList
+			 * Array of HTML code that this element will output to.
+			 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+			 * The element definition. Accepted fields:
+			 * <ul>
+			 * 	<li><strong>label</strong> (Optional) The legend of the this fieldset.</li>
+			 * 	<li><strong>children</strong> (Required) An array of dialog field definitions which will be grouped inside this fieldset. </li>
+			 * </ul>
+			 */
+			fieldset : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )
+			{
+				var legendLabel = elementDefinition.label;
+				/** @ignore */
+				var innerHTML = function()
+				{
+					var html = [];
+					legendLabel && html.push( '<legend>' + legendLabel + '</legend>' );
+					for ( var i = 0; i < childHtmlList.length; i++ )
+						html.push( childHtmlList[ i ] );
+					return html.join( '' );
+				};
+
+				this._ = { children : childObjList };
+				CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'fieldset', null, null, innerHTML );
+			}
+
 		}, true );
 
 	CKEDITOR.ui.dialog.html.prototype = new CKEDITOR.ui.dialog.uiElement;
@@ -1309,6 +1392,8 @@ CKEDITOR.plugins.add( 'dialogui' );
 
 	CKEDITOR.ui.dialog.fileButton.prototype = new CKEDITOR.ui.dialog.button;
 
+	CKEDITOR.ui.dialog.fieldset.prototype = CKEDITOR.tools.clone( CKEDITOR.ui.dialog.hbox.prototype );
+
 	CKEDITOR.dialog.addUIElement( 'text', textBuilder );
 	CKEDITOR.dialog.addUIElement( 'password', textBuilder );
 	CKEDITOR.dialog.addUIElement( 'textarea', commonBuilder );
@@ -1319,4 +1404,5 @@ CKEDITOR.plugins.add( 'dialogui' );
 	CKEDITOR.dialog.addUIElement( 'file', commonBuilder );
 	CKEDITOR.dialog.addUIElement( 'fileButton', commonBuilder );
 	CKEDITOR.dialog.addUIElement( 'html', commonBuilder );
+	CKEDITOR.dialog.addUIElement( 'fieldset', containerBuilder );
 })();