/* Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ /** * @fileOverview Defines the "virtual" dialog, dialog content and dialog button * definition classes. */ /** * 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.definition * @constructor * @example * // There is no constructor for this class, the user just has to define an * // object with the appropriate properties. * * CKEDITOR.dialog.add( 'testOnly', function( editor ) * { * return { * title : 'Test Dialog', * resizable : CKEDITOR.DIALOG_RESIZE_BOTH, * minWidth : 500, * minHeight : 400, * contents : [ * { * id : 'tab1', * label : 'First Tab', * title : 'First Tab Title', * accessKey : 'Q', * elements : [ * { * type : 'text', * label : 'Test Text 1', * id : 'testText1', * 'default' : 'hello world!' * } * ] * } * ] * }; * }); */ /** * The dialog title, displayed in the dialog's header. Required. * @name CKEDITOR.dialog.definition.prototype.title * @field * @type String * @example */ /** * How the dialog can be resized, must be one of the four contents defined below. *

* CKEDITOR.DIALOG_RESIZE_NONE
* CKEDITOR.DIALOG_RESIZE_WIDTH
* CKEDITOR.DIALOG_RESIZE_HEIGHT
* CKEDITOR.DIALOG_RESIZE_BOTH
* @name CKEDITOR.dialog.definition.prototype.resizable * @field * @type Number * @default CKEDITOR.DIALOG_RESIZE_NONE * @example */ /** * The minimum width of the dialog, in pixels. * @name CKEDITOR.dialog.definition.prototype.minWidth * @field * @type Number * @default 600 * @example */ /** * The minimum height of the dialog, in pixels. * @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.definition.button} objects. * @name CKEDITOR.dialog.definition.prototype.buttons * @field * @type Array * @default [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ] * @example */ /** * The contents in the dialog, defined as an array of * {@link CKEDITOR.dialog.definition.content} objects. Required. * @name CKEDITOR.dialog.definition.prototype.contents * @field * @type Array * @example */ /** * The function to execute when OK is pressed. * @name CKEDITOR.dialog.definition.prototype.onOk * @field * @type Function * @example */ /** * The function to execute when Cancel is pressed. * @name CKEDITOR.dialog.definition.prototype.onCancel * @field * @type Function * @example */ /** * The function to execute when the dialog is displayed for the first time. * @name CKEDITOR.dialog.definition.prototype.onLoad * @field * @type Function * @example */ /** * 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 * // object with the appropriate properties. */ /** * The id of the content page. * @name CKEDITOR.dialog.definition.content.prototype.id * @field * @type String * @example */ /** * The tab label of the content page. * @name CKEDITOR.dialog.definition.content.prototype.label * @field * @type String * @example */ /** * The popup message of the tab label. * @name CKEDITOR.dialog.definition.content.prototype.title * @field * @type String * @example */ /** * The CTRL hotkey for switching to the tab. * @name CKEDITOR.dialog.definition.content.prototype.accessKey * @field * @type String * @example * contentDefinition.accessKey = 'Q'; // Switch to this page when CTRL-Q is pressed. */ /** * The UI elements contained in this content page, defined as an array of * {@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 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 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 */ /** * (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 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 */ /** * (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 * // 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.definition.button.prototype.disabled * @type Boolean * @field * @example */ /** * 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 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 * @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.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 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 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 ----- /** * 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 */ /** * (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 ------ /** * 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 */ /** * 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 */ /** * 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 */