/*\r
-Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.html or http://ckeditor.com/license\r
*/\r
\r
*/\r
\r
/**\r
+ * The definition of a dialog window.\r
+ * <div class="notapi">\r
* This class is not really part of the API. It just illustrates the properties\r
* that developers can use to define and create dialogs.\r
- * @name CKEDITOR.dialog.dialogDefinition\r
+ * </div>\r
+ * @name CKEDITOR.dialog.definition\r
* @constructor\r
* @example\r
* // There is no constructor for this class, the user just has to define an\r
\r
/**\r
* The dialog title, displayed in the dialog's header. Required.\r
- * @name CKEDITOR.dialog.dialogDefinition.prototype.title\r
+ * @name CKEDITOR.dialog.definition.prototype.title\r
* @field\r
* @type String\r
* @example\r
* <strong>CKEDITOR.DIALOG_RESIZE_WIDTH</strong><br />\r
* <strong>CKEDITOR.DIALOG_RESIZE_HEIGHT</strong><br />\r
* <strong>CKEDITOR.DIALOG_RESIZE_BOTH</strong><br />\r
- * @name CKEDITOR.dialog.dialogDefinition.prototype.resizable\r
+ * @name CKEDITOR.dialog.definition.prototype.resizable\r
* @field\r
* @type Number\r
* @default CKEDITOR.DIALOG_RESIZE_NONE\r
\r
/**\r
* The minimum width of the dialog, in pixels.\r
- * @name CKEDITOR.dialog.dialogDefinition.prototype.minWidth\r
+ * @name CKEDITOR.dialog.definition.prototype.minWidth\r
* @field\r
* @type Number\r
* @default 600\r
\r
/**\r
* The minimum height of the dialog, in pixels.\r
- * @name CKEDITOR.dialog.dialogDefinition.prototype.minHeight\r
+ * @name CKEDITOR.dialog.definition.prototype.minHeight\r
* @field\r
* @type Number\r
* @default 400\r
* @example\r
*/\r
\r
+\r
+/**\r
+ * The initial width of the dialog, in pixels.\r
+ * @name CKEDITOR.dialog.definition.prototype.width\r
+ * @field\r
+ * @type Number\r
+ * @default @CKEDITOR.dialog.definition.prototype.minWidth\r
+ * @since 3.5.3\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * The initial height of the dialog, in pixels.\r
+ * @name CKEDITOR.dialog.definition.prototype.height\r
+ * @field\r
+ * @type Number\r
+ * @default @CKEDITOR.dialog.definition.prototype.minHeight\r
+ * @since 3.5.3\r
+ * @example\r
+ */\r
+\r
/**\r
* The buttons in the dialog, defined as an array of\r
- * {@link CKEDITOR.dialog.buttonDefinition} objects.\r
- * @name CKEDITOR.dialog.dialogDefinition.prototype.buttons\r
+ * {@link CKEDITOR.dialog.definition.button} objects.\r
+ * @name CKEDITOR.dialog.definition.prototype.buttons\r
* @field\r
* @type Array\r
* @default [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]\r
\r
/**\r
* The contents in the dialog, defined as an array of\r
- * {@link CKEDITOR.dialog.contentDefinition} objects. Required.\r
- * @name CKEDITOR.dialog.dialogDefinition.prototype.contents\r
+ * {@link CKEDITOR.dialog.definition.content} objects. Required.\r
+ * @name CKEDITOR.dialog.definition.prototype.contents\r
* @field\r
* @type Array\r
* @example\r
\r
/**\r
* The function to execute when OK is pressed.\r
- * @name CKEDITOR.dialog.dialogDefinition.prototype.onOk\r
+ * @name CKEDITOR.dialog.definition.prototype.onOk\r
* @field\r
* @type Function\r
* @example\r
\r
/**\r
* The function to execute when Cancel is pressed.\r
- * @name CKEDITOR.dialog.dialogDefinition.prototype.onCancel\r
+ * @name CKEDITOR.dialog.definition.prototype.onCancel\r
* @field\r
* @type Function\r
* @example\r
\r
/**\r
* The function to execute when the dialog is displayed for the first time.\r
- * @name CKEDITOR.dialog.dialogDefinition.prototype.onLoad\r
+ * @name CKEDITOR.dialog.definition.prototype.onLoad\r
* @field\r
* @type Function\r
* @example\r
*/\r
\r
/**\r
- * This class is not really part of the API. It just illustrates the properties\r
- * that developers can use to define and create dialog content pages.\r
- * @name CKEDITOR.dialog.contentDefinition\r
+ * The function to execute when the dialog is loaded (executed every time the dialog is opened).\r
+ * @name CKEDITOR.dialog.definition.prototype.onShow\r
+ * @field\r
+ * @type Function\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * <div class="notapi">This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create dialog content pages.</div>\r
+ * @name CKEDITOR.dialog.definition.content\r
* @constructor\r
* @example\r
* // There is no constructor for this class, the user just has to define an\r
\r
/**\r
* The id of the content page.\r
- * @name CKEDITOR.dialog.contentDefinition.prototype.id\r
+ * @name CKEDITOR.dialog.definition.content.prototype.id\r
* @field\r
* @type String\r
* @example\r
\r
/**\r
* The tab label of the content page.\r
- * @name CKEDITOR.dialog.contentDefinition.prototype.label\r
+ * @name CKEDITOR.dialog.definition.content.prototype.label\r
* @field\r
* @type String\r
* @example\r
\r
/**\r
* The popup message of the tab label.\r
- * @name CKEDITOR.dialog.contentDefinition.prototype.title\r
+ * @name CKEDITOR.dialog.definition.content.prototype.title\r
* @field\r
* @type String\r
* @example\r
\r
/**\r
* The CTRL hotkey for switching to the tab.\r
- * @name CKEDITOR.dialog.contentDefinition.prototype.accessKey\r
+ * @name CKEDITOR.dialog.definition.content.prototype.accessKey\r
* @field\r
* @type String\r
* @example\r
\r
/**\r
* The UI elements contained in this content page, defined as an array of\r
- * {@link CKEDITOR.dialog.uiElementDefinition} objects.\r
- * @name CKEDITOR.dialog.contentDefinition.prototype.elements\r
+ * {@link CKEDITOR.dialog.definition.uiElement} objects.\r
+ * @name CKEDITOR.dialog.definition.content.prototype.elements\r
* @field\r
* @type Array\r
* @example\r
*/\r
\r
/**\r
+ * The definition of user interface element (textarea, radio etc).\r
+ * <div class="notapi">This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create dialog UI elements.</div>\r
+ * @name CKEDITOR.dialog.definition.uiElement\r
+ * @constructor\r
+ * @see CKEDITOR.ui.dialog.uiElement\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ */\r
+\r
+/**\r
+ * The id of the UI element.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.id\r
+ * @field\r
+ * @type String\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * The type of the UI element. Required.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.type\r
+ * @field\r
+ * @type String\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * The popup label of the UI element.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.title\r
+ * @field\r
+ * @type String\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * CSS class names to append to the UI element.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.className\r
+ * @field\r
+ * @type String\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * Inline CSS classes to append to the UI element.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.style\r
+ * @field\r
+ * @type String\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * Horizontal alignment (in container) of the UI element.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.align\r
+ * @field\r
+ * @type String\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * Function to execute the first time the UI element is displayed.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.onLoad\r
+ * @field\r
+ * @type Function\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * Function to execute whenever the UI element's parent dialog is displayed.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.onShow\r
+ * @field\r
+ * @type Function\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * Function to execute whenever the UI element's parent dialog is closed.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.onHide\r
+ * @field\r
+ * @type Function\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * Function to execute whenever the UI element's parent dialog's {@link CKEDITOR.dialog.definition.setupContent} method is executed.\r
+ * It usually takes care of the respective UI element as a standalone element.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.setup\r
+ * @field\r
+ * @type Function\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * Function to execute whenever the UI element's parent dialog's {@link CKEDITOR.dialog.definition.commitContent} method is executed.\r
+ * It usually takes care of the respective UI element as a standalone element.\r
+ * @name CKEDITOR.dialog.definition.uiElement.prototype.commit\r
+ * @field\r
+ * @type Function\r
+ * @example\r
+ */\r
+\r
+// ----- hbox -----\r
+\r
+/**\r
+ * Horizontal layout box for dialog UI elements, auto-expends to available width of container.\r
+ * <div class="notapi">\r
* This class is not really part of the API. It just illustrates the properties\r
- * that developers can use to define and create dialog buttons.\r
- * @name CKEDITOR.dialog.buttonDefinition\r
+ * that developers can use to define and create horizontal layouts.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * @name CKEDITOR.dialog.definition.hbox\r
+ * @extends CKEDITOR.dialog.definition.uiElement\r
* @constructor\r
* @example\r
* // There is no constructor for this class, the user just has to define an\r
* // object with the appropriate properties.\r
+ *\r
+ * // Example:\r
+ * {\r
+ * <b>type : 'hbox',</b>\r
+ * widths : [ '25%', '25%', '50%' ],\r
+ * children :\r
+ * [\r
+ * {\r
+ * type : 'text',\r
+ * id : 'id1',\r
+ * width : '40px',\r
+ * },\r
+ * {\r
+ * type : 'text',\r
+ * id : 'id2',\r
+ * width : '40px',\r
+ * },\r
+ * {\r
+ * type : 'text',\r
+ * id : 'id3'\r
+ * }\r
+ * ]\r
+ * }\r
*/\r
\r
/**\r
- * The id of the dialog button. Required.\r
- * @name CKEDITOR.dialog.buttonDefinition.prototype.id\r
+ * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.\r
+ * @name CKEDITOR.dialog.definition.hbox.prototype.children\r
+ * @field\r
+ * @type Array\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The widths of child cells.\r
+ * @name CKEDITOR.dialog.definition.hbox.prototype.widths\r
+ * @field\r
+ * @type Array\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The height of the layout.\r
+ * @name CKEDITOR.dialog.definition.hbox.prototype.height\r
+ * @field\r
+ * @type Number\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * The CSS styles to apply to this element.\r
+ * @name CKEDITOR.dialog.definition.hbox.prototype.styles\r
+ * @field\r
* @type String\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The padding width inside child cells. Example: 0, 1.\r
+ * @name CKEDITOR.dialog.definition.hbox.prototype.padding\r
+ * @field\r
+ * @type Number\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The alignment of the whole layout. Example: center, top.\r
+ * @name CKEDITOR.dialog.definition.hbox.prototype.align\r
+ * @field\r
+ * @type String\r
+ * @example\r
+ */\r
+\r
+// ----- vbox -----\r
+\r
+/**\r
+ * Vertical layout box for dialog UI elements.\r
+ * <div class="notapi">\r
+ * This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create vertical layouts.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * <style type="text/css">.details .detailList {display:none;} </style>\r
+ * @name CKEDITOR.dialog.definition.vbox\r
+ * @extends CKEDITOR.dialog.definition.uiElement\r
+ * @constructor\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ *\r
+ * // Example:\r
+ * {\r
+ * <b>type : 'vbox',</b>\r
+ * align : 'right',\r
+ * width : '200px',\r
+ * children :\r
+ * [\r
+ * {\r
+ * type : 'text',\r
+ * id : 'age',\r
+ * label : 'Age'\r
+ * },\r
+ * {\r
+ * type : 'text',\r
+ * id : 'sex',\r
+ * label : 'Sex'\r
+ * },\r
+ * {\r
+ * type : 'text',\r
+ * id : 'nationality',\r
+ * label : 'Nationality'\r
+ * }\r
+ * ]\r
+ * }\r
+ */\r
+\r
+/**\r
+ * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.\r
+ * @name CKEDITOR.dialog.definition.vbox.prototype.children\r
+ * @field\r
+ * @type Array\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The width of the layout.\r
+ * @name CKEDITOR.dialog.definition.vbox.prototype.width\r
+ * @field\r
+ * @type Array\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The heights of individual cells.\r
+ * @name CKEDITOR.dialog.definition.vbox.prototype.heights\r
+ * @field\r
+ * @type Number\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * The CSS styles to apply to this element.\r
+ * @name CKEDITOR.dialog.definition.vbox.prototype.styles\r
+ * @field\r
+ * @type String\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The padding width inside child cells. Example: 0, 1.\r
+ * @name CKEDITOR.dialog.definition.vbox.prototype.padding\r
+ * @field\r
+ * @type Number\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The alignment of the whole layout. Example: center, top.\r
+ * @name CKEDITOR.dialog.definition.vbox.prototype.align\r
+ * @field\r
+ * @type String\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) Whether the layout should expand vertically to fill its container.\r
+ * @name CKEDITOR.dialog.definition.vbox.prototype.expand\r
+ * @field\r
+ * @type Boolean\r
+ * @example\r
+ */\r
+\r
+// ----- labeled element ------\r
+\r
+/**\r
+ * The definition of labeled user interface element (textarea, textInput etc).\r
+ * <div class="notapi">This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create dialog UI elements.</div>\r
+ * @name CKEDITOR.dialog.definition.labeledElement\r
+ * @extends CKEDITOR.dialog.definition.uiElement\r
+ * @constructor\r
+ * @see CKEDITOR.ui.dialog.labeledElement\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ */\r
+\r
+/**\r
+ * The label of the UI element.\r
+ * @name CKEDITOR.dialog.definition.labeledElement.prototype.label\r
+ * @type String\r
+ * @field\r
+ * @example\r
+ * {\r
+ * type : 'text',\r
+ * label : 'My Label '\r
+ * }\r
+ */\r
+\r
+/**\r
+ * (Optional) Specify the layout of the label. Set to 'horizontal' for horizontal layout.\r
+ * The default layout is vertical.\r
+ * @name CKEDITOR.dialog.definition.labeledElement.prototype.labelLayout\r
+ * @type String\r
+ * @field\r
+ * @example\r
+ * {\r
+ * type : 'text',\r
+ * label : 'My Label ',\r
+ * <strong> labelLayout : 'horizontal',</strong>\r
+ * }\r
+ */\r
+\r
+/**\r
+ * (Optional) Applies only to horizontal layouts: a two elements array of lengths to specify the widths of the\r
+* label and the content element. See also {@link CKEDITOR.dialog.definition.labeledElement#labelLayout}.\r
+ * @name CKEDITOR.dialog.definition.labeledElement.prototype.widths\r
+ * @type Array\r
* @field\r
* @example\r
+ * {\r
+ * type : 'text',\r
+ * label : 'My Label ',\r
+ * labelLayout : 'horizontal',\r
+ * <strong> widths : [100, 200],</strong>\r
+ * }\r
*/\r
\r
/**\r
- * The label of the dialog button. Required.\r
- * @name CKEDITOR.dialog.buttonDefinition.prototype.label\r
+ * Specify the inline style of the uiElement label.\r
+ * @name CKEDITOR.dialog.definition.labeledElement.prototype.labelStyle\r
* @type String\r
* @field\r
* @example\r
+ * {\r
+ * type : 'text',\r
+ * label : 'My Label ',\r
+ * <strong> labelStyle : 'color: red',</strong>\r
+ * }\r
*/\r
\r
+\r
/**\r
- * The popup message of the dialog button.\r
- * @name CKEDITOR.dialog.buttonDefinition.prototype.title\r
+ * Specify the inline style of the input element.\r
+ * @name CKEDITOR.dialog.definition.labeledElement.prototype.inputStyle\r
* @type String\r
+ * @since 3.6.1\r
* @field\r
* @example\r
+ * {\r
+ * type : 'text',\r
+ * label : 'My Label ',\r
+ * <strong> inputStyle : 'text-align:center',</strong>\r
+ * }\r
*/\r
\r
/**\r
- * The CTRL hotkey for the button.\r
- * @name CKEDITOR.dialog.buttonDefinition.prototype.accessKey\r
+ * Specify the inline style of the input element container .\r
+ * @name CKEDITOR.dialog.definition.labeledElement.prototype.controlStyle\r
* @type String\r
+ * @since 3.6.1\r
* @field\r
* @example\r
- * exitButton.accessKey = 'X'; // Button will be pressed when user presses CTRL-X\r
+ * {\r
+ * type : 'text',\r
+ * label : 'My Label ',\r
+ * <strong> controlStyle : 'width:3em',</strong>\r
+ * }\r
+ */\r
+\r
+\r
+// ----- button ------\r
+\r
+/**\r
+ * The definition of a button.\r
+ * <div class="notapi">\r
+ * This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create buttons.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
+ * @name CKEDITOR.dialog.definition.button\r
+ * @extends CKEDITOR.dialog.definition.uiElement\r
+ * @constructor\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ *\r
+ * // Example:\r
+ * {\r
+ * <b>type : 'button',</b>\r
+ * id : 'buttonId',\r
+ * label : 'Click me',\r
+ * title : 'My title',\r
+ * onClick : function() {\r
+ * // this = CKEDITOR.ui.dialog.button\r
+ * alert( 'Clicked: ' + this.id );\r
+ * }\r
+ * }\r
*/\r
\r
/**\r
* Whether the button is disabled.\r
- * @name CKEDITOR.dialog.buttonDefinition.prototype.disabled\r
+ * @name CKEDITOR.dialog.definition.button.prototype.disabled\r
* @type Boolean\r
* @field\r
- * @default false\r
* @example\r
*/\r
\r
/**\r
- * The function to execute when the button is clicked.\r
- * @name CKEDITOR.dialog.buttonDefinition.prototype.onClick\r
+ * The label of the UI element.\r
+ * @name CKEDITOR.dialog.definition.button.prototype.label\r
+ * @type String\r
+ * @field\r
+ * @example\r
+ */\r
+\r
+// ----- checkbox ------\r
+\r
+/**\r
+ * The definition of a checkbox element.\r
+ * <div class="notapi">\r
+ * This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create groups of checkbox buttons.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
+ * @name CKEDITOR.dialog.definition.checkbox\r
+ * @extends CKEDITOR.dialog.definition.uiElement\r
+ * @constructor\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ *\r
+ * // Example:\r
+ * {\r
+ * <b>type : 'checkbox',</b>\r
+ * id : 'agree',\r
+ * label : 'I agree',\r
+ * 'default' : 'checked',\r
+ * onClick : function() {\r
+ * // this = CKEDITOR.ui.dialog.checkbox\r
+ * alert( 'Checked: ' + this.getValue() );\r
+ * }\r
+ * }\r
+ */\r
+\r
+/**\r
+ * (Optional) The validation function.\r
+ * @name CKEDITOR.dialog.definition.checkbox.prototype.validate\r
+ * @field\r
* @type Function\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * The label of the UI element.\r
+ * @name CKEDITOR.dialog.definition.checkbox.prototype.label\r
+ * @type String\r
+ * @field\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * The default state.\r
+ * @name CKEDITOR.dialog.definition.checkbox.prototype.default\r
+ * @type String\r
* @field\r
+ * @default\r
+ * '' (unchecked)\r
* @example\r
*/\r
\r
+// ----- file -----\r
+\r
/**\r
+ * The definition of a file upload input.\r
+ * <div class="notapi">\r
* This class is not really part of the API. It just illustrates the properties\r
- * that developers can use to define and create dialog UI elements.\r
- * @name CKEDITOR.dialog.uiElementDefinition\r
+ * that developers can use to define and create file upload elements.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
+ * @name CKEDITOR.dialog.definition.file\r
+ * @extends CKEDITOR.dialog.definition.labeledElement\r
* @constructor\r
- * @see CKEDITOR.ui.dialog.uiElement\r
* @example\r
* // There is no constructor for this class, the user just has to define an\r
* // object with the appropriate properties.\r
+ *\r
+ * // Example:\r
+ * {\r
+ * <b>type : 'file'</b>,\r
+ * id : 'upload',\r
+ * label : 'Select file from your computer',\r
+ * size : 38\r
+ * },\r
+ * {\r
+ * type : 'fileButton',\r
+ * id : 'fileId',\r
+ * label : 'Upload file',\r
+ * 'for' : [ 'tab1', 'upload' ]\r
+ * filebrowser : {\r
+ * onSelect : function( fileUrl, data ) {\r
+ * alert( 'Successfully uploaded: ' + fileUrl );\r
+ * }\r
+ * }\r
+ * }\r
*/\r
\r
/**\r
- * The id of the UI element.\r
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.id\r
+ * (Optional) The validation function.\r
+ * @name CKEDITOR.dialog.definition.file.prototype.validate\r
* @field\r
+ * @type Function\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The action attribute of the form element associated with this file upload input.\r
+ * If empty, CKEditor will use path to server connector for currently opened folder.\r
+ * @name CKEDITOR.dialog.definition.file.prototype.action\r
* @type String\r
+ * @field\r
* @example\r
*/\r
\r
/**\r
- * The type of the UI element. Required.\r
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.type\r
+ * The size of the UI element.\r
+ * @name CKEDITOR.dialog.definition.file.prototype.size\r
+ * @type Number\r
* @field\r
+ * @example\r
+ */\r
+\r
+// ----- fileButton -----\r
+\r
+/**\r
+ * The definition of a button for submitting the file in a file upload input.\r
+ * <div class="notapi">\r
+ * This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create a button for submitting the file in a file upload input.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
+ * @name CKEDITOR.dialog.definition.fileButton\r
+ * @extends CKEDITOR.dialog.definition.uiElement\r
+ * @constructor\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ *\r
+ * // Example:\r
+ * {\r
+ * type : 'file',\r
+ * id : 'upload',\r
+ * label : 'Select file from your computer',\r
+ * size : 38\r
+ * },\r
+ * {\r
+ * <b>type : 'fileButton'</b>,\r
+ * id : 'fileId',\r
+ * label : 'Upload file',\r
+ * 'for' : [ 'tab1', 'upload' ]\r
+ * filebrowser : {\r
+ * onSelect : function( fileUrl, data ) {\r
+ * alert( 'Successfully uploaded: ' + fileUrl );\r
+ * }\r
+ * }\r
+ * }\r
+ */\r
+\r
+/**\r
+ * (Optional) The validation function.\r
+ * @name CKEDITOR.dialog.definition.fileButton.prototype.validate\r
+ * @field\r
+ * @type Function\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * The label of the UI element.\r
+ * @name CKEDITOR.dialog.definition.fileButton.prototype.label\r
* @type String\r
+ * @field\r
* @example\r
*/\r
\r
/**\r
- * The popup label of the UI element.\r
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.title\r
+ * The instruction for CKEditor how to deal with file upload.\r
+ * By default, the file and fileButton elements will not work "as expected" if this attribute is not set.\r
+ * @name CKEDITOR.dialog.definition.fileButton.prototype.filebrowser\r
+ * @type String|Object\r
* @field\r
+ * @example\r
+ * // Update field with id 'txtUrl' in the 'tab1' tab when file is uploaded.\r
+ * filebrowser : 'tab1:txtUrl'\r
+ *\r
+ * // Call custom onSelect function when file is successfully uploaded.\r
+ * filebrowser : {\r
+ * onSelect : function( fileUrl, data ) {\r
+ * alert( 'Successfully uploaded: ' + fileUrl );\r
+ * }\r
+ * }\r
+ */\r
+\r
+/**\r
+ * An array that contains pageId and elementId of the file upload input element for which this button is created.\r
+ * @name CKEDITOR.dialog.definition.fileButton.prototype.for\r
* @type String\r
+ * @field\r
* @example\r
+ * [ pageId, elementId ]\r
*/\r
\r
+// ----- html -----\r
+\r
/**\r
- * CSS class names to append to the UI element.\r
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.className\r
+ * The definition of a raw HTML element.\r
+ * <div class="notapi">\r
+ * This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create elements made from raw HTML code.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.<br />\r
+ * To access HTML elements use {@link CKEDITOR.dom.document#getById}\r
+ * @name CKEDITOR.dialog.definition.html\r
+ * @extends CKEDITOR.dialog.definition.uiElement\r
+ * @constructor\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ *\r
+ * // Example 1:\r
+ * {\r
+ * <b>type : 'html',</b>\r
+ * html : '<h3>This is some sample HTML content.</h3>'\r
+ * }\r
+ * @example\r
+ * // Example 2:\r
+ * // Complete sample with document.getById() call when the "Ok" button is clicked.\r
+ * var dialogDefinition =\r
+ * {\r
+ * title : 'Sample dialog',\r
+ * minWidth : 300,\r
+ * minHeight : 200,\r
+ * onOk : function() {\r
+ * // "this" is now a CKEDITOR.dialog object.\r
+ * var document = this.getElement().getDocument();\r
+ * // document = CKEDITOR.dom.document\r
+ * var element = <b>document.getById( 'myDiv' );</b>\r
+ * if ( element )\r
+ * alert( element.getHtml() );\r
+ * },\r
+ * contents : [\r
+ * {\r
+ * id : 'tab1',\r
+ * label : '',\r
+ * title : '',\r
+ * elements :\r
+ * [\r
+ * {\r
+ * <b>type : 'html',</b>\r
+ * html : '<b><div id="myDiv">Sample <b>text</b>.</div></b><div id="otherId">Another div.</div>'\r
+ * },\r
+ * ]\r
+ * }\r
+ * ],\r
+ * buttons : [ CKEDITOR.dialog.cancelButton, CKEDITOR.dialog.okButton ]\r
+ * };\r
+ */\r
+\r
+/**\r
+ * (Required) HTML code of this element.\r
+ * @name CKEDITOR.dialog.definition.html.prototype.html\r
+ * @type String\r
* @field\r
+ * @example\r
+ */\r
+\r
+// ----- radio ------\r
+\r
+/**\r
+ * The definition of a radio group.\r
+ * <div class="notapi">\r
+ * This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create groups of radio buttons.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
+ * @name CKEDITOR.dialog.definition.radio\r
+ * @extends CKEDITOR.dialog.definition.labeledElement\r
+ * @constructor\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ *\r
+ * // Example:\r
+ * {\r
+ * <b>type : 'radio',</b>\r
+ * id : 'country',\r
+ * label : 'Which country is bigger',\r
+ * items : [ [ 'France', 'FR' ], [ 'Germany', 'DE' ] ] ,\r
+ * style : 'color:green',\r
+ * 'default' : 'DE',\r
+ * onClick : function() {\r
+ * // this = CKEDITOR.ui.dialog.radio\r
+ * alert( 'Current value: ' + this.getValue() );\r
+ * }\r
+ * }\r
+ */\r
+\r
+/**\r
+ * The default value.\r
+ * @name CKEDITOR.dialog.definition.radio.prototype.default\r
* @type String\r
+ * @field\r
* @example\r
*/\r
\r
/**\r
- * Inline CSS classes to append to the UI element.\r
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.style\r
+ * (Optional) The validation function.\r
+ * @name CKEDITOR.dialog.definition.radio.prototype.validate\r
+ * @field\r
+ * @type Function\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * 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.\r
+ * @name CKEDITOR.dialog.definition.radio.prototype.items\r
* @field\r
+ * @type Array\r
+ * @example\r
+ */\r
+\r
+// ----- selectElement ------\r
+\r
+/**\r
+ * The definition of a select element.\r
+ * <div class="notapi">\r
+ * This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create select elements.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
+ * @name CKEDITOR.dialog.definition.select\r
+ * @extends CKEDITOR.dialog.definition.labeledElement\r
+ * @constructor\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ *\r
+ * // Example:\r
+ * {\r
+ * <b>type : 'select',</b>\r
+ * id : 'sport',\r
+ * label : 'Select your favourite sport',\r
+ * items : [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ],\r
+ * 'default' : 'Football',\r
+ * onChange : function( api ) {\r
+ * // this = CKEDITOR.ui.dialog.select\r
+ * alert( 'Current value: ' + this.getValue() );\r
+ * }\r
+ * }\r
+ */\r
+\r
+/**\r
+ * The default value.\r
+ * @name CKEDITOR.dialog.definition.select.prototype.default\r
* @type String\r
+ * @field\r
* @example\r
*/\r
\r
/**\r
- * Function to execute the first time the UI element is displayed.\r
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.onLoad\r
+ * (Optional) The validation function.\r
+ * @name CKEDITOR.dialog.definition.select.prototype.validate\r
* @field\r
* @type Function\r
* @example\r
*/\r
\r
/**\r
- * Function to execute whenever the UI element's parent dialog is displayed.\r
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.onShow\r
+ * 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.\r
+ * @name CKEDITOR.dialog.definition.select.prototype.items\r
+ * @field\r
+ * @type Array\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) Set this to true if you'd like to have a multiple-choice select box.\r
+ * @name CKEDITOR.dialog.definition.select.prototype.multiple\r
+ * @type Boolean\r
+ * @field\r
+ * @example\r
+ * @default false\r
+ */\r
+\r
+/**\r
+ * (Optional) The number of items to display in the select box.\r
+ * @name CKEDITOR.dialog.definition.select.prototype.size\r
+ * @type Number\r
+ * @field\r
+ * @example\r
+ */\r
+\r
+// ----- textInput -----\r
+\r
+/**\r
+ * The definition of a text field (single line).\r
+ * <div class="notapi">\r
+ * This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create text fields.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
+ * @name CKEDITOR.dialog.definition.textInput\r
+ * @extends CKEDITOR.dialog.definition.labeledElement\r
+ * @constructor\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ *\r
+ * {\r
+ * <b>type : 'text',</b>\r
+ * id : 'name',\r
+ * label : 'Your name',\r
+ * 'default' : '',\r
+ * validate : function() {\r
+ * if ( !this.getValue() )\r
+ * {\r
+ * api.openMsgDialog( '', 'Name cannot be empty.' );\r
+ * return false;\r
+ * }\r
+ * }\r
+ * }\r
+ */\r
+\r
+/**\r
+ * The default value.\r
+ * @name CKEDITOR.dialog.definition.textInput.prototype.default\r
+ * @type String\r
+ * @field\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The maximum length.\r
+ * @name CKEDITOR.dialog.definition.textInput.prototype.maxLength\r
+ * @type Number\r
+ * @field\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The size of the input field.\r
+ * @name CKEDITOR.dialog.definition.textInput.prototype.size\r
+ * @type Number\r
+ * @field\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The validation function.\r
+ * @name CKEDITOR.dialog.definition.textInput.prototype.validate\r
* @field\r
* @type Function\r
* @example\r
*/\r
\r
+// ----- textarea ------\r
+\r
/**\r
- * Function to execute whenever the UI element's parent dialog is closed.\r
- * @name CKEDITOR.dialog.uiElementDefinition.prototype.onHide\r
+ * The definition of a text field (multiple lines).\r
+ * <div class="notapi">\r
+ * This class is not really part of the API. It just illustrates the properties\r
+ * that developers can use to define and create textarea.\r
+ * <br /><br />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}.\r
+ * </div>\r
+ * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
+ * @name CKEDITOR.dialog.definition.textarea\r
+ * @extends CKEDITOR.dialog.definition.labeledElement\r
+ * @constructor\r
+ * @example\r
+ * // There is no constructor for this class, the user just has to define an\r
+ * // object with the appropriate properties.\r
+ *\r
+ * // Example:\r
+ * {\r
+ * <b>type : 'textarea',</b>\r
+ * id : 'message',\r
+ * label : 'Your comment',\r
+ * 'default' : '',\r
+ * validate : function() {\r
+ * if ( this.getValue().length < 5 )\r
+ * {\r
+ * api.openMsgDialog( 'The comment is too short.' );\r
+ * return false;\r
+ * }\r
+ * }\r
+ * }\r
+ */\r
+\r
+/**\r
+ * The number of rows.\r
+ * @name CKEDITOR.dialog.definition.textarea.prototype.rows\r
+ * @type Number\r
+ * @field\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * The number of columns.\r
+ * @name CKEDITOR.dialog.definition.textarea.prototype.cols\r
+ * @type Number\r
+ * @field\r
+ * @example\r
+ */\r
+\r
+/**\r
+ * (Optional) The validation function.\r
+ * @name CKEDITOR.dialog.definition.textarea.prototype.validate\r
* @field\r
* @type Function\r
* @example\r
*/\r
+\r
+/**\r
+ * The default value.\r
+ * @name CKEDITOR.dialog.definition.textarea.prototype.default\r
+ * @type String\r
+ * @field\r
+ * @example\r
+ */\r