X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fdialog%2FdialogDefinition.js;h=d0f04c2248ba2340dea266b723a16234b0f10b0b;hb=refs%2Ftags%2Fv3.5.3;hp=76778345353c1b8dbe27ed8ad4ba353f66d5ed01;hpb=48b1db88210b4160dce439c6e3e32e14af8c106b;p=ckeditor.git
diff --git a/_source/plugins/dialog/dialogDefinition.js b/_source/plugins/dialog/dialogDefinition.js
index 7677834..d0f04c2 100644
--- a/_source/plugins/dialog/dialogDefinition.js
+++ b/_source/plugins/dialog/dialogDefinition.js
@@ -9,9 +9,12 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
*/
/**
+ * The definition of a dialog window.
+ *
* This class is not really part of the API. It just illustrates the properties
* that developers can use to define and create dialogs.
- * @name CKEDITOR.dialog.dialogDefinition
+ *
+ * @name CKEDITOR.dialog.definition
* @constructor
* @example
* // There is no constructor for this class, the user just has to define an
@@ -46,7 +49,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The dialog title, displayed in the dialog's header. Required.
- * @name CKEDITOR.dialog.dialogDefinition.prototype.title
+ * @name CKEDITOR.dialog.definition.prototype.title
* @field
* @type String
* @example
@@ -59,7 +62,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
* CKEDITOR.DIALOG_RESIZE_WIDTH
* CKEDITOR.DIALOG_RESIZE_HEIGHT
* CKEDITOR.DIALOG_RESIZE_BOTH
- * @name CKEDITOR.dialog.dialogDefinition.prototype.resizable
+ * @name CKEDITOR.dialog.definition.prototype.resizable
* @field
* @type Number
* @default CKEDITOR.DIALOG_RESIZE_NONE
@@ -68,7 +71,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The minimum width of the dialog, in pixels.
- * @name CKEDITOR.dialog.dialogDefinition.prototype.minWidth
+ * @name CKEDITOR.dialog.definition.prototype.minWidth
* @field
* @type Number
* @default 600
@@ -77,17 +80,38 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The minimum height of the dialog, in pixels.
- * @name CKEDITOR.dialog.dialogDefinition.prototype.minHeight
+ * @name CKEDITOR.dialog.definition.prototype.minHeight
* @field
* @type Number
* @default 400
* @example
*/
+
+/**
+ * The initial width of the dialog, in pixels.
+ * @name CKEDITOR.dialog.definition.prototype.width
+ * @field
+ * @type Number
+ * @default @CKEDITOR.dialog.definition.prototype.minWidth
+ * @since 3.5.3
+ * @example
+ */
+
+/**
+ * The initial height of the dialog, in pixels.
+ * @name CKEDITOR.dialog.definition.prototype.height
+ * @field
+ * @type Number
+ * @default @CKEDITOR.dialog.definition.prototype.minHeight
+ * @since 3.5.3
+ * @example
+ */
+
/**
* The buttons in the dialog, defined as an array of
- * {@link CKEDITOR.dialog.buttonDefinition} objects.
- * @name CKEDITOR.dialog.dialogDefinition.prototype.buttons
+ * {@link CKEDITOR.dialog.definition.button} objects.
+ * @name CKEDITOR.dialog.definition.prototype.buttons
* @field
* @type Array
* @default [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]
@@ -96,8 +120,8 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The contents in the dialog, defined as an array of
- * {@link CKEDITOR.dialog.contentDefinition} objects. Required.
- * @name CKEDITOR.dialog.dialogDefinition.prototype.contents
+ * {@link CKEDITOR.dialog.definition.content} objects. Required.
+ * @name CKEDITOR.dialog.definition.prototype.contents
* @field
* @type Array
* @example
@@ -105,7 +129,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The function to execute when OK is pressed.
- * @name CKEDITOR.dialog.dialogDefinition.prototype.onOk
+ * @name CKEDITOR.dialog.definition.prototype.onOk
* @field
* @type Function
* @example
@@ -113,7 +137,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The function to execute when Cancel is pressed.
- * @name CKEDITOR.dialog.dialogDefinition.prototype.onCancel
+ * @name CKEDITOR.dialog.definition.prototype.onCancel
* @field
* @type Function
* @example
@@ -121,16 +145,24 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The function to execute when the dialog is displayed for the first time.
- * @name CKEDITOR.dialog.dialogDefinition.prototype.onLoad
+ * @name CKEDITOR.dialog.definition.prototype.onLoad
* @field
* @type Function
* @example
*/
/**
- * This class is not really part of the API. It just illustrates the properties
- * that developers can use to define and create dialog content pages.
- * @name CKEDITOR.dialog.contentDefinition
+ * The function to execute when the dialog is loaded (executed every time the dialog is opened).
+ * @name CKEDITOR.dialog.definition.prototype.onShow
+ * @field
+ * @type Function
+ * @example
+ */
+
+/**
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create dialog content pages.
+ * @name CKEDITOR.dialog.definition.content
* @constructor
* @example
* // There is no constructor for this class, the user just has to define an
@@ -139,7 +171,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The id of the content page.
- * @name CKEDITOR.dialog.contentDefinition.prototype.id
+ * @name CKEDITOR.dialog.definition.content.prototype.id
* @field
* @type String
* @example
@@ -147,7 +179,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The tab label of the content page.
- * @name CKEDITOR.dialog.contentDefinition.prototype.label
+ * @name CKEDITOR.dialog.definition.content.prototype.label
* @field
* @type String
* @example
@@ -155,7 +187,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The popup message of the tab label.
- * @name CKEDITOR.dialog.contentDefinition.prototype.title
+ * @name CKEDITOR.dialog.definition.content.prototype.title
* @field
* @type String
* @example
@@ -163,7 +195,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The CTRL hotkey for switching to the tab.
- * @name CKEDITOR.dialog.contentDefinition.prototype.accessKey
+ * @name CKEDITOR.dialog.definition.content.prototype.accessKey
* @field
* @type String
* @example
@@ -172,144 +204,878 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
/**
* The UI elements contained in this content page, defined as an array of
- * {@link CKEDITOR.dialog.uiElementDefinition} objects.
- * @name CKEDITOR.dialog.contentDefinition.prototype.elements
+ * {@link CKEDITOR.dialog.definition.uiElement} objects.
+ * @name CKEDITOR.dialog.definition.content.prototype.elements
* @field
* @type Array
* @example
*/
/**
+ * The definition of user interface element (textarea, radio etc).
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create dialog UI elements.
+ * @name CKEDITOR.dialog.definition.uiElement
+ * @constructor
+ * @see CKEDITOR.ui.dialog.uiElement
+ * @example
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ */
+
+/**
+ * The id of the UI element.
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.id
+ * @field
+ * @type String
+ * @example
+ */
+
+/**
+ * The type of the UI element. Required.
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.type
+ * @field
+ * @type String
+ * @example
+ */
+
+/**
+ * The popup label of the UI element.
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.title
+ * @field
+ * @type String
+ * @example
+ */
+
+/**
+ * CSS class names to append to the UI element.
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.className
+ * @field
+ * @type String
+ * @example
+ */
+
+/**
+ * Inline CSS classes to append to the UI element.
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.style
+ * @field
+ * @type String
+ * @example
+ */
+
+/**
+ * Function to execute the first time the UI element is displayed.
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.onLoad
+ * @field
+ * @type Function
+ * @example
+ */
+
+/**
+ * Function to execute whenever the UI element's parent dialog is displayed.
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.onShow
+ * @field
+ * @type Function
+ * @example
+ */
+
+/**
+ * Function to execute whenever the UI element's parent dialog is closed.
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.onHide
+ * @field
+ * @type Function
+ * @example
+ */
+
+// ----- hbox -----
+
+/**
+ * Horizontal layout box for dialog UI elements, auto-expends to available width of container.
+ *
* This class is not really part of the API. It just illustrates the properties
- * that developers can use to define and create dialog buttons.
- * @name CKEDITOR.dialog.buttonDefinition
+ * that developers can use to define and create horizontal layouts.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.hbox} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * @name CKEDITOR.dialog.definition.hbox
+ * @extends CKEDITOR.dialog.definition.uiElement
* @constructor
* @example
* // There is no constructor for this class, the user just has to define an
* // object with the appropriate properties.
+ *
+ * // Example:
+ * {
+ * type : 'hbox',
+ * widths : [ '25%', '25%', '50%' ],
+ * children :
+ * [
+ * {
+ * type : 'text',
+ * id : 'id1',
+ * width : '40px',
+ * },
+ * {
+ * type : 'text',
+ * id : 'id2',
+ * width : '40px',
+ * },
+ * {
+ * type : 'text',
+ * id : 'id3'
+ * }
+ * ]
+ * }
+ */
+
+/**
+ * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.
+ * @name CKEDITOR.dialog.definition.hbox.prototype.children
+ * @field
+ * @type Array
+ * @example
+ */
+
+/**
+ * (Optional) The widths of child cells.
+ * @name CKEDITOR.dialog.definition.hbox.prototype.widths
+ * @field
+ * @type Array
+ * @example
+ */
+
+/**
+ * (Optional) The height of the layout.
+ * @name CKEDITOR.dialog.definition.hbox.prototype.height
+ * @field
+ * @type Number
+ * @example
*/
/**
- * The id of the dialog button. Required.
- * @name CKEDITOR.dialog.buttonDefinition.prototype.id
+ * The CSS styles to apply to this element.
+ * @name CKEDITOR.dialog.definition.hbox.prototype.styles
+ * @field
* @type String
+ * @example
+ */
+
+/**
+ * (Optional) The padding width inside child cells. Example: 0, 1.
+ * @name CKEDITOR.dialog.definition.hbox.prototype.padding
* @field
+ * @type Number
* @example
*/
/**
- * The label of the dialog button. Required.
- * @name CKEDITOR.dialog.buttonDefinition.prototype.label
+ * (Optional) The alignment of the whole layout. Example: center, top.
+ * @name CKEDITOR.dialog.definition.hbox.prototype.align
+ * @field
* @type String
+ * @example
+ */
+
+// ----- vbox -----
+
+/**
+ * Vertical layout box for dialog UI elements.
+ *
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create vertical layouts.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.vbox} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ *
+ * @name CKEDITOR.dialog.definition.vbox
+ * @extends CKEDITOR.dialog.definition.uiElement
+ * @constructor
+ * @example
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ *
+ * // Example:
+ * {
+ * type : 'vbox',
+ * align : 'right',
+ * width : '200px',
+ * children :
+ * [
+ * {
+ * type : 'text',
+ * id : 'age',
+ * label : 'Age'
+ * },
+ * {
+ * type : 'text',
+ * id : 'sex',
+ * label : 'Sex'
+ * },
+ * {
+ * type : 'text',
+ * id : 'nationality',
+ * label : 'Nationality'
+ * }
+ * ]
+ * }
+ */
+
+/**
+ * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.
+ * @name CKEDITOR.dialog.definition.vbox.prototype.children
+ * @field
+ * @type Array
+ * @example
+ */
+
+/**
+ * (Optional) The width of the layout.
+ * @name CKEDITOR.dialog.definition.vbox.prototype.width
+ * @field
+ * @type Array
+ * @example
+ */
+
+/**
+ * (Optional) The heights of individual cells.
+ * @name CKEDITOR.dialog.definition.vbox.prototype.heights
* @field
+ * @type Number
* @example
*/
/**
- * The popup message of the dialog button.
- * @name CKEDITOR.dialog.buttonDefinition.prototype.title
+ * The CSS styles to apply to this element.
+ * @name CKEDITOR.dialog.definition.vbox.prototype.styles
+ * @field
* @type String
+ * @example
+ */
+
+/**
+ * (Optional) The padding width inside child cells. Example: 0, 1.
+ * @name CKEDITOR.dialog.definition.vbox.prototype.padding
* @field
+ * @type Number
* @example
*/
/**
- * The CTRL hotkey for the button.
- * @name CKEDITOR.dialog.buttonDefinition.prototype.accessKey
+ * (Optional) The alignment of the whole layout. Example: center, top.
+ * @name CKEDITOR.dialog.definition.vbox.prototype.align
+ * @field
* @type String
+ * @example
+ */
+
+/**
+ * (Optional) Whether the layout should expand vertically to fill its container.
+ * @name CKEDITOR.dialog.definition.vbox.prototype.expand
* @field
+ * @type Boolean
+ * @example
+ */
+
+// ----- button ------
+
+/**
+ * The definition of a button.
+ *
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create buttons.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.button} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * @name CKEDITOR.dialog.definition.button
+ * @extends CKEDITOR.dialog.definition.uiElement
+ * @constructor
* @example
- * exitButton.accessKey = 'X'; // Button will be pressed when user presses CTRL-X
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ *
+ * // Example:
+ * {
+ * type : 'button',
+ * id : 'buttonId',
+ * label : 'Click me',
+ * title : 'My title',
+ * onClick : function() {
+ * // this = CKEDITOR.ui.dialog.button
+ * alert( 'Clicked: ' + this.id );
+ * }
+ * }
*/
/**
* Whether the button is disabled.
- * @name CKEDITOR.dialog.buttonDefinition.prototype.disabled
+ * @name CKEDITOR.dialog.definition.button.prototype.disabled
* @type Boolean
* @field
- * @default false
* @example
*/
/**
- * The function to execute when the button is clicked.
- * @name CKEDITOR.dialog.buttonDefinition.prototype.onClick
+ * The label of the UI element.
+ * @name CKEDITOR.dialog.definition.button.prototype.label
+ * @type String
+ * @field
+ * @example
+ */
+
+// ----- checkbox ------
+
+/**
+ * The definition of a checkbox element.
+ *
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create groups of checkbox buttons.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.checkbox} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * @name CKEDITOR.dialog.definition.checkbox
+ * @extends CKEDITOR.dialog.definition.uiElement
+ * @constructor
+ * @example
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ *
+ * // Example:
+ * {
+ * type : 'checkbox',
+ * id : 'agree',
+ * label : 'I agree',
+ * 'default' : 'checked',
+ * onClick : function() {
+ * // this = CKEDITOR.ui.dialog.checkbox
+ * alert( 'Checked: ' + this.getValue() );
+ * }
+ * }
+ */
+
+/**
+ * (Optional) The validation function.
+ * @name CKEDITOR.dialog.definition.checkbox.prototype.validate
+ * @field
* @type Function
+ * @example
+ */
+
+/**
+ * The label of the UI element.
+ * @name CKEDITOR.dialog.definition.checkbox.prototype.label
+ * @type String
+ * @field
+ * @example
+ */
+
+/**
+ * The default state.
+ * @name CKEDITOR.dialog.definition.checkbox.prototype.default
+ * @type String
* @field
+ * @default
+ * '' (unchecked)
* @example
*/
+// ----- file -----
+
/**
+ * The definition of a file upload input.
+ *
* This class is not really part of the API. It just illustrates the properties
- * that developers can use to define and create dialog UI elements.
- * @name CKEDITOR.dialog.uiElementDefinition
+ * that developers can use to define and create file upload elements.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.file} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * @name CKEDITOR.dialog.definition.file
+ * @extends CKEDITOR.dialog.definition.uiElement
* @constructor
- * @see CKEDITOR.ui.dialog.uiElement
* @example
* // There is no constructor for this class, the user just has to define an
* // object with the appropriate properties.
+ *
+ * // Example:
+ * {
+ * type : 'file',
+ * id : 'upload',
+ * label : 'Select file from your computer',
+ * size : 38
+ * },
+ * {
+ * type : 'fileButton',
+ * id : 'fileId',
+ * label : 'Upload file',
+ * 'for' : [ 'tab1', 'upload' ]
+ * filebrowser : {
+ * onSelect : function( fileUrl, data ) {
+ * alert( 'Successfully uploaded: ' + fileUrl );
+ * }
+ * }
+ * }
*/
/**
- * The id of the UI element.
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.id
+ * (Optional) The validation function.
+ * @name CKEDITOR.dialog.definition.file.prototype.validate
+ * @field
+ * @type Function
+ * @example
+ */
+
+/**
+ * The label of the UI element.
+ * @name CKEDITOR.dialog.definition.file.prototype.label
+ * @type String
* @field
+ * @example
+ */
+
+/**
+ * (Optional) The action attribute of the form element associated with this file upload input.
+ * If empty, CKEditor will use path to server connector for currently opened folder.
+ * @name CKEDITOR.dialog.definition.file.prototype.action
* @type String
+ * @field
* @example
*/
/**
- * The type of the UI element. Required.
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.type
+ * The size of the UI element.
+ * @name CKEDITOR.dialog.definition.file.prototype.size
+ * @type Number
* @field
+ * @example
+ */
+
+// ----- fileButton -----
+
+/**
+ * The definition of a button for submitting the file in a file upload input.
+ *
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create a button for submitting the file in a file upload input.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.fileButton} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * @name CKEDITOR.dialog.definition.fileButton
+ * @extends CKEDITOR.dialog.definition.uiElement
+ * @constructor
+ * @example
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ *
+ * // Example:
+ * {
+ * type : 'file',
+ * id : 'upload',
+ * label : 'Select file from your computer',
+ * size : 38
+ * },
+ * {
+ * type : 'fileButton',
+ * id : 'fileId',
+ * label : 'Upload file',
+ * 'for' : [ 'tab1', 'upload' ]
+ * filebrowser : {
+ * onSelect : function( fileUrl, data ) {
+ * alert( 'Successfully uploaded: ' + fileUrl );
+ * }
+ * }
+ * }
+ */
+
+/**
+ * (Optional) The validation function.
+ * @name CKEDITOR.dialog.definition.fileButton.prototype.validate
+ * @field
+ * @type Function
+ * @example
+ */
+
+/**
+ * The label of the UI element.
+ * @name CKEDITOR.dialog.definition.fileButton.prototype.label
* @type String
+ * @field
* @example
*/
/**
- * The popup label of the UI element.
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.title
+ * The instruction for CKEditor how to deal with file upload.
+ * By default, the file and fileButton elements will not work "as expected" if this attribute is not set.
+ * @name CKEDITOR.dialog.definition.fileButton.prototype.filebrowser
+ * @type String|Object
* @field
+ * @example
+ * // Update field with id 'txtUrl' in the 'tab1' tab when file is uploaded.
+ * filebrowser : 'tab1:txtUrl'
+ *
+ * // Call custom onSelect function when file is successfully uploaded.
+ * filebrowser : {
+ * onSelect : function( fileUrl, data ) {
+ * alert( 'Successfully uploaded: ' + fileUrl );
+ * }
+ * }
+ */
+
+/**
+ * An array that contains pageId and elementId of the file upload input element for which this button is created.
+ * @name CKEDITOR.dialog.definition.fileButton.prototype.for
* @type String
+ * @field
* @example
+ * [ pageId, elementId ]
*/
+// ----- html -----
+
/**
- * CSS class names to append to the UI element.
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.className
+ * The definition of a raw HTML element.
+ *
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create elements made from raw HTML code.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.html} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * To access HTML elements use {@link CKEDITOR.dom.document#getById}
+ * @name CKEDITOR.dialog.definition.html
+ * @extends CKEDITOR.dialog.definition.uiElement
+ * @constructor
+ * @example
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ *
+ * // Example 1:
+ * {
+ * type : 'html',
+ * html : '<h3>This is some sample HTML content.</h3>'
+ * }
+ * @example
+ * // Example 2:
+ * // Complete sample with document.getById() call when the "Ok" button is clicked.
+ * var dialogDefinition =
+ * {
+ * title : 'Sample dialog',
+ * minWidth : 300,
+ * minHeight : 200,
+ * onOk : function() {
+ * // "this" is now a CKEDITOR.dialog object.
+ * var document = this.getElement().getDocument();
+ * // document = CKEDITOR.dom.document
+ * var element = document.getById( 'myDiv' );
+ * if ( element )
+ * alert( element.getHtml() );
+ * },
+ * contents : [
+ * {
+ * id : 'tab1',
+ * label : '',
+ * title : '',
+ * elements :
+ * [
+ * {
+ * type : 'html',
+ * html : '<div id="myDiv">Sample <b>text</b>.</div><div id="otherId">Another div.</div>'
+ * },
+ * ]
+ * }
+ * ],
+ * buttons : [ CKEDITOR.dialog.cancelButton, CKEDITOR.dialog.okButton ]
+ * };
+ */
+
+/**
+ * (Required) HTML code of this element.
+ * @name CKEDITOR.dialog.definition.html.prototype.html
+ * @type String
* @field
+ * @example
+ */
+
+// ----- radio ------
+
+/**
+ * The definition of a radio group.
+ *
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create groups of radio buttons.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.radio} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * @name CKEDITOR.dialog.definition.radio
+ * @extends CKEDITOR.dialog.definition.uiElement
+ * @constructor
+ * @example
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ *
+ * // Example:
+ * {
+ * type : 'radio',
+ * id : 'country',
+ * label : 'Which country is bigger',
+ * items : [ [ 'France', 'FR' ], [ 'Germany', 'DE' ] ] ,
+ * style : 'color:green',
+ * 'default' : 'DE',
+ * onClick : function() {
+ * // this = CKEDITOR.ui.dialog.radio
+ * alert( 'Current value: ' + this.getValue() );
+ * }
+ * }
+ */
+
+/**
+ * The default value.
+ * @name CKEDITOR.dialog.definition.radio.prototype.default
* @type String
+ * @field
* @example
*/
/**
- * Inline CSS classes to append to the UI element.
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.style
+ * (Optional) The validation function.
+ * @name CKEDITOR.dialog.definition.radio.prototype.validate
+ * @field
+ * @type Function
+ * @example
+ */
+
+/**
+ * An array of options. Each option is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value' is missing, then the value would be assumed to be the same as the description.
+ * @name CKEDITOR.dialog.definition.radio.prototype.items
* @field
+ * @type Array
+ * @example
+ */
+
+/**
+ * The label of the UI element.
+ * @name CKEDITOR.dialog.definition.radio.prototype.label
* @type String
+ * @field
* @example
*/
+// ----- selectElement ------
+
/**
- * Function to execute the first time the UI element is displayed.
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.onLoad
+ * The definition of a select element.
+ *
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create select elements.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.select} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * @name CKEDITOR.dialog.definition.select
+ * @extends CKEDITOR.dialog.definition.uiElement
+ * @constructor
+ * @example
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ *
+ * // Example:
+ * {
+ * type : 'select',
+ * id : 'sport',
+ * label : 'Select your favourite sport',
+ * items : [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ],
+ * 'default' : 'Football',
+ * onChange : function( api ) {
+ * // this = CKEDITOR.ui.dialog.select
+ * alert( 'Current value: ' + this.getValue() );
+ * }
+ * }
+ */
+
+/**
+ * The default value.
+ * @name CKEDITOR.dialog.definition.select.prototype.default
+ * @type String
+ * @field
+ * @example
+ */
+
+/**
+ * (Optional) The validation function.
+ * @name CKEDITOR.dialog.definition.select.prototype.validate
* @field
* @type Function
* @example
*/
/**
- * Function to execute whenever the UI element's parent dialog is displayed.
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.onShow
+ * An array of options. Each option is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value' is missing, then the value would be assumed to be the same as the description.
+ * @name CKEDITOR.dialog.definition.select.prototype.items
+ * @field
+ * @type Array
+ * @example
+ */
+
+/**
+ * (Optional) Set this to true if you'd like to have a multiple-choice select box.
+ * @name CKEDITOR.dialog.definition.select.prototype.multiple
+ * @type Boolean
+ * @field
+ * @example
+ * @default false
+ */
+
+/**
+ * (Optional) The number of items to display in the select box.
+ * @name CKEDITOR.dialog.definition.select.prototype.size
+ * @type Number
+ * @field
+ * @example
+ */
+
+/**
+ * The label of the UI element.
+ * @name CKEDITOR.dialog.definition.select.prototype.label
+ * @type String
+ * @field
+ * @example
+ */
+
+// ----- textInput -----
+
+/**
+ * The definition of a text field (single line).
+ *
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create text fields.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.textInput} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * @name CKEDITOR.dialog.definition.textInput
+ * @extends CKEDITOR.dialog.definition.uiElement
+ * @constructor
+ * @example
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ *
+ * {
+ * type : 'text',
+ * id : 'name',
+ * label : 'Your name',
+ * 'default' : '',
+ * validate : function() {
+ * if ( !this.getValue() )
+ * {
+ * api.openMsgDialog( '', 'Name cannot be empty.' );
+ * return false;
+ * }
+ * }
+ * }
+ */
+
+/**
+ * The default value.
+ * @name CKEDITOR.dialog.definition.textInput.prototype.default
+ * @type String
+ * @field
+ * @example
+ */
+
+/**
+ * (Optional) The maximum length.
+ * @name CKEDITOR.dialog.definition.textInput.prototype.maxLength
+ * @type Number
+ * @field
+ * @example
+ */
+
+/**
+ * (Optional) The size of the input field.
+ * @name CKEDITOR.dialog.definition.textInput.prototype.size
+ * @type Number
+ * @field
+ * @example
+ */
+
+/**
+ * (Optional) The validation function.
+ * @name CKEDITOR.dialog.definition.textInput.prototype.validate
* @field
* @type Function
* @example
*/
/**
- * Function to execute whenever the UI element's parent dialog is closed.
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.onHide
+ * The label of the UI element.
+ * @name CKEDITOR.dialog.definition.textInput.prototype.label
+ * @type String
+ * @field
+ * @example
+ */
+
+// ----- textarea ------
+
+/**
+ * The definition of a text field (multiple lines).
+ *
+ * This class is not really part of the API. It just illustrates the properties
+ * that developers can use to define and create textarea.
+ *
Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.textarea} object and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
+ *
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.
+ * @name CKEDITOR.dialog.definition.textarea
+ * @extends CKEDITOR.dialog.definition.uiElement
+ * @constructor
+ * @example
+ * // There is no constructor for this class, the user just has to define an
+ * // object with the appropriate properties.
+ *
+ * // Example:
+ * {
+ * type : 'textarea',
+ * id : 'message',
+ * label : 'Your comment',
+ * 'default' : '',
+ * validate : function() {
+ * if ( this.getValue().length < 5 )
+ * {
+ * api.openMsgDialog( 'The comment is too short.' );
+ * return false;
+ * }
+ * }
+ * }
+ */
+
+/**
+ * The number of rows.
+ * @name CKEDITOR.dialog.definition.textarea.prototype.rows
+ * @type Number
+ * @field
+ * @example
+ */
+
+/**
+ * The number of columns.
+ * @name CKEDITOR.dialog.definition.textarea.prototype.cols
+ * @type Number
+ * @field
+ * @example
+ */
+
+/**
+ * (Optional) The validation function.
+ * @name CKEDITOR.dialog.definition.textarea.prototype.validate
* @field
* @type Function
* @example
*/
+
+/**
+ * The default value.
+ * @name CKEDITOR.dialog.definition.textarea.prototype.default
+ * @type String
+ * @field
+ * @example
+ */
+
+/**
+ * The label of the UI element.
+ * @name CKEDITOR.dialog.definition.textarea.prototype.label
+ * @type String
+ * @field
+ * @example
+ */