]>
git.immae.eu Git - perso/Immae/Projets/packagist/ludivine-ckeditor-component.git/blob - sources/plugins/dialog/dialogDefinition.js
6ecb49129fe21293695ddc3230a9fcc7e0a9b583
1 // jscs:disable disallowMixedSpacesAndTabs
3 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
4 * For licensing, see LICENSE.md or http://ckeditor.com/license
8 * @fileOverview Defines the "virtual" dialog, dialog content and dialog button
13 * The definition of a dialog window.
15 * This class is not really part of the API. It just illustrates the properties
16 * that developers can use to define and create dialogs.
18 * // There is no constructor for this class, the user just has to define an
19 * // object with the appropriate properties.
21 * CKEDITOR.dialog.add( 'testOnly', function( editor ) {
23 * title: 'Test Dialog',
24 * resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
31 * title: 'First Tab Title',
36 * label: 'Test Text 1',
38 * 'default': 'hello world!'
46 * @class CKEDITOR.dialog.definition
50 * The dialog title, displayed in the dialog's header. Required.
52 * @property {String} title
56 * How the dialog can be resized, must be one of the four contents defined below.
58 * * {@link CKEDITOR#DIALOG_RESIZE_NONE}
59 * * {@link CKEDITOR#DIALOG_RESIZE_WIDTH}
60 * * {@link CKEDITOR#DIALOG_RESIZE_HEIGHT}
61 * * {@link CKEDITOR#DIALOG_RESIZE_BOTH}
63 * @property {Number} [resizable=CKEDITOR.DIALOG_RESIZE_NONE]
67 * The minimum width of the dialog, in pixels.
69 * @property {Number} [minWidth=600]
73 * The minimum height of the dialog, in pixels.
75 * @property {Number} [minHeight=400]
80 * The initial width of the dialog, in pixels.
83 * @property {Number} [width=CKEDITOR.dialog.definition#minWidth]
87 * The initial height of the dialog, in pixels.
90 * @property {Number} [height=CKEDITOR.dialog.definition.minHeight]
94 * The buttons in the dialog, defined as an array of
95 * {@link CKEDITOR.dialog.definition.button} objects.
97 * @property {Array} [buttons=[ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]]
101 * The contents in the dialog, defined as an array of
102 * {@link CKEDITOR.dialog.definition.content} objects. Required.
104 * @property {Array} contents
108 * The function to execute when OK is pressed.
110 * @property {Function} onOk
114 * The function to execute when Cancel is pressed.
116 * @property {Function} onCancel
120 * The function to execute when the dialog is displayed for the first time.
122 * @property {Function} onLoad
126 * The function to execute when the dialog is loaded (executed every time the dialog is opened).
128 * @property {Function} onShow
132 * This class is not really part of the API. It just illustrates the properties
133 * that developers can use to define and create dialog content pages.
135 * @class CKEDITOR.dialog.definition.content.
139 * The id of the content page.
141 * @property {String} id
145 * The tab label of the content page.
147 * @property {String} label
151 * The popup message of the tab label.
153 * @property {String} title
157 * The CTRL hotkey for switching to the tab.
159 * contentDefinition.accessKey = 'Q'; // Switch to this page when CTRL-Q is pressed.
161 * @property {String} accessKey
165 * The UI elements contained in this content page, defined as an array of
166 * {@link CKEDITOR.dialog.definition.uiElement} objects.
168 * @property {Array} elements
172 * The definition of user interface element (textarea, radio etc).
174 * This class is not really part of the API. It just illustrates the properties
175 * that developers can use to define and create dialog UI elements.
177 * @class CKEDITOR.dialog.definition.uiElement
178 * @see CKEDITOR.ui.dialog.uiElement
182 * The id of the UI element.
184 * @property {String} id
188 * The type of the UI element. Required.
190 * @property {String} type
194 * The popup label of the UI element.
196 * @property {String} title
200 * The content that needs to be allowed to enable this UI element.
201 * All formats accepted by {@link CKEDITOR.filter#check} may be used.
203 * When all UI elements in a tab are disabled, this tab will be disabled automatically.
205 * @property {String/Object/CKEDITOR.style} requiredContent
209 * CSS class names to append to the UI element.
211 * @property {String} className
215 * Inline CSS classes to append to the UI element.
217 * @property {String} style
221 * Horizontal alignment (in container) of the UI element.
223 * @property {String} align
227 * Function to execute the first time the UI element is displayed.
229 * @property {Function} onLoad
233 * Function to execute whenever the UI element's parent dialog is displayed.
235 * @property {Function} onShow
239 * Function to execute whenever the UI element's parent dialog is closed.
241 * @property {Function} onHide
245 * Function to execute whenever the UI element's parent
246 * dialog's {@link CKEDITOR.dialog#setupContent} method is executed.
247 * It usually takes care of the respective UI element as a standalone element.
249 * @property {Function} setup
253 * Function to execute whenever the UI element's parent
254 * dialog's {@link CKEDITOR.dialog#commitContent} method is executed.
255 * It usually takes care of the respective UI element as a standalone element.
257 * @property {Function} commit
260 // ----- hbox -----------------------------------------------------------------
263 * Horizontal layout box for dialog UI elements, auto-expends to available width of container.
265 * This class is not really part of the API. It just illustrates the properties
266 * that developers can use to define and create horizontal layouts.
268 * 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}.
270 * // There is no constructor for this class, the user just has to define an
271 * // object with the appropriate properties.
276 * widths: [ '25%', '25%', '50%' ],
295 * @class CKEDITOR.dialog.definition.hbox
296 * @extends CKEDITOR.dialog.definition.uiElement
300 * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.
302 * @property {Array} children
306 * (Optional) The widths of child cells.
308 * @property {Array} widths
312 * (Optional) The height of the layout.
314 * @property {Number} height
318 * The CSS styles to apply to this element.
320 * @property {String} styles
324 * (Optional) The padding width inside child cells. Example: 0, 1.
326 * @property {Number} padding
330 * (Optional) The alignment of the whole layout. Example: center, top.
332 * @property {String} align
335 // ----- vbox -----------------------------------------------------------------
338 * Vertical layout box for dialog UI elements.
340 * This class is not really part of the API. It just illustrates the properties
341 * that developers can use to define and create vertical layouts.
343 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.vbox} object and can
344 * be accessed with {@link CKEDITOR.dialog#getContentElement}.
346 * // There is no constructor for this class, the user just has to define an
347 * // object with the appropriate properties.
368 * label: 'Nationality'
373 * @class CKEDITOR.dialog.definition.vbox
374 * @extends CKEDITOR.dialog.definition.uiElement
378 * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.
380 * @property {Array} children
384 * (Optional) The width of the layout.
386 * @property {Array} width
390 * (Optional) The heights of individual cells.
392 * @property {Number} heights
396 * The CSS styles to apply to this element.
398 * @property {String} styles
402 * (Optional) The padding width inside child cells. Example: 0, 1.
404 * @property {Number} padding
408 * (Optional) The alignment of the whole layout. Example: center, top.
410 * @property {String} align
414 * (Optional) Whether the layout should expand vertically to fill its container.
416 * @property {Boolean} expand
419 // ----- labeled element ------------------------------------------------------
422 * The definition of labeled user interface element (textarea, textInput etc).
424 * This class is not really part of the API. It just illustrates the properties
425 * that developers can use to define and create dialog UI elements.
427 * @class CKEDITOR.dialog.definition.labeledElement
428 * @extends CKEDITOR.dialog.definition.uiElement
429 * @see CKEDITOR.ui.dialog.labeledElement
433 * The label of the UI element.
440 * @property {String} label
444 * (Optional) Specify the layout of the label. Set to `'horizontal'` for horizontal layout.
445 * The default layout is vertical.
450 * labelLayout: 'horizontal'
453 * @property {String} labelLayout
457 * (Optional) Applies only to horizontal layouts: a two elements array of lengths to specify the widths of the
458 * label and the content element. See also {@link CKEDITOR.dialog.definition.labeledElement#labelLayout}.
463 * labelLayout: 'horizontal',
467 * @property {Array} widths
471 * Specify the inline style of the uiElement label.
476 * labelStyle: 'color: red'
479 * @property {String} labelStyle
484 * Specify the inline style of the input element.
489 * inputStyle: 'text-align: center'
493 * @property {String} inputStyle
497 * Specify the inline style of the input element container.
502 * controlStyle: 'width: 3em'
506 * @property {String} controlStyle
509 // ----- button ---------------------------------------------------------------
512 * The definition of a button.
514 * This class is not really part of the API. It just illustrates the properties
515 * that developers can use to define and create buttons.
517 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.button} object
518 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
520 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.
522 * // There is no constructor for this class, the user just has to define an
523 * // object with the appropriate properties.
531 * onClick: function() {
532 * // this = CKEDITOR.ui.dialog.button
533 * alert( 'Clicked: ' + this.id );
537 * @class CKEDITOR.dialog.definition.button
538 * @extends CKEDITOR.dialog.definition.uiElement
542 * Whether the button is disabled.
544 * @property {Boolean} disabled
548 * The label of the UI element.
550 * @property {String} label
553 // ----- checkbox ------
555 * The definition of a checkbox element.
557 * This class is not really part of the API. It just illustrates the properties
558 * that developers can use to define and create groups of checkbox buttons.
560 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.checkbox} object
561 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
563 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.
565 * // There is no constructor for this class, the user just has to define an
566 * // object with the appropriate properties.
573 * 'default': 'checked',
574 * onClick: function() {
575 * // this = CKEDITOR.ui.dialog.checkbox
576 * alert( 'Checked: ' + this.getValue() );
580 * @class CKEDITOR.dialog.definition.checkbox
581 * @extends CKEDITOR.dialog.definition.uiElement
585 * (Optional) The validation function.
587 * @property {Function} validate
591 * The label of the UI element.
593 * @property {String} label
599 * @property {String} [default='' (unchecked)]
602 // ----- file -----------------------------------------------------------------
605 * The definition of a file upload input.
607 * This class is not really part of the API. It just illustrates the properties
608 * that developers can use to define and create file upload elements.
610 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.file} object
611 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
613 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.
615 * // There is no constructor for this class, the user just has to define an
616 * // object with the appropriate properties.
622 * label: 'Select file from your computer',
626 * type: 'fileButton',
628 * label: 'Upload file',
629 * 'for': [ 'tab1', 'upload' ],
631 * onSelect: function( fileUrl, data ) {
632 * alert( 'Successfully uploaded: ' + fileUrl );
637 * @class CKEDITOR.dialog.definition.file
638 * @extends CKEDITOR.dialog.definition.labeledElement
642 * (Optional) The validation function.
644 * @property {Function} validate
648 * (Optional) The action attribute of the form element associated with this file upload input.
649 * If empty, CKEditor will use path to server connector for currently opened folder.
651 * @property {String} action
655 * The size of the UI element.
657 * @property {Number} size
660 // ----- fileButton -----------------------------------------------------------
663 * The definition of a button for submitting the file in a file upload input.
665 * This class is not really part of the API. It just illustrates the properties
666 * that developers can use to define and create a button for submitting the file in a file upload input.
668 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.fileButton} object
669 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
671 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.
673 * @class CKEDITOR.dialog.definition.fileButton
674 * @extends CKEDITOR.dialog.definition.uiElement
678 * (Optional) The validation function.
680 * @property {Function} validate
684 * The label of the UI element.
686 * @property {String} label
690 * The instruction for CKEditor how to deal with file upload.
691 * By default, the file and fileButton elements will not work "as expected" if this attribute is not set.
693 * // Update field with id 'txtUrl' in the 'tab1' tab when file is uploaded.
694 * filebrowser: 'tab1:txtUrl'
696 * // Call custom onSelect function when file is successfully uploaded.
698 * onSelect: function( fileUrl, data ) {
699 * alert( 'Successfully uploaded: ' + fileUrl );
703 * @property {String} filebrowser/Object
707 * An array that contains pageId and elementId of the file upload input element for which this button is created.
709 * [ pageId, elementId ]
711 * @property {String} for
714 // ----- html -----------------------------------------------------------------
717 * The definition of a raw HTML element.
719 * This class is not really part of the API. It just illustrates the properties
720 * that developers can use to define and create elements made from raw HTML code.
722 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.html} object
723 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
725 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.
726 * To access HTML elements use {@link CKEDITOR.dom.document#getById}.
728 * // There is no constructor for this class, the user just has to define an
729 * // object with the appropriate properties.
734 * html: '<h3>This is some sample HTML content.</h3>'
738 * // Complete sample with document.getById() call when the "Ok" button is clicked.
739 * var dialogDefinition = {
740 * title: 'Sample dialog',
744 * // "this" is now a CKEDITOR.dialog object.
745 * var document = this.getElement().getDocument();
746 * // document = CKEDITOR.dom.document
747 * var element = <b>document.getById( 'myDiv' );</b>
749 * alert( element.getHtml() );
759 * html: '<div id="myDiv">Sample <b>text</b>.</div><div id="otherId">Another div.</div>'
764 * buttons: [ CKEDITOR.dialog.cancelButton, CKEDITOR.dialog.okButton ]
767 * @class CKEDITOR.dialog.definition.html
768 * @extends CKEDITOR.dialog.definition.uiElement
772 * (Required) HTML code of this element.
774 * @property {String} html
777 // ----- radio ----------------------------------------------------------------
780 * The definition of a radio group.
782 * This class is not really part of the API. It just illustrates the properties
783 * that developers can use to define and create groups of radio buttons.
785 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.radio} object
786 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
788 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.
790 * // There is no constructor for this class, the user just has to define an
791 * // object with the appropriate properties.
797 * label: 'Which country is bigger',
798 * items: [ [ 'France', 'FR' ], [ 'Germany', 'DE' ] ],
799 * style: 'color: green',
801 * onClick: function() {
802 * // this = CKEDITOR.ui.dialog.radio
803 * alert( 'Current value: ' + this.getValue() );
807 * @class CKEDITOR.dialog.definition.radio
808 * @extends CKEDITOR.dialog.definition.labeledElement
814 * @property {String} default
818 * (Optional) The validation function.
820 * @property {Function} validate
824 * An array of options. Each option is a 1- or 2-item array of format `[ 'Description', 'Value' ]`.
825 * If `'Value'` is missing, then the value would be assumed to be the same as the description.
827 * @property {Array} items
830 // ----- selectElement --------------------------------------------------------
833 * The definition of a select element.
835 * This class is not really part of the API. It just illustrates the properties
836 * that developers can use to define and create select elements.
838 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.select} object
839 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
841 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.
843 * // There is no constructor for this class, the user just has to define an
844 * // object with the appropriate properties.
850 * label: 'Select your favourite sport',
851 * items: [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ],
852 * 'default': 'Football',
853 * onChange: function( api ) {
854 * // this = CKEDITOR.ui.dialog.select
855 * alert( 'Current value: ' + this.getValue() );
859 * @class CKEDITOR.dialog.definition.select
860 * @extends CKEDITOR.dialog.definition.labeledElement
866 * @property {String} default
870 * (Optional) The validation function.
872 * @property {Function} validate
876 * An array of options. Each option is a 1- or 2-item array of format `[ 'Description', 'Value' ]`.
877 * If `'Value'` is missing, then the value would be assumed to be the same as the description.
879 * @property {Array} items
883 * (Optional) Set this to true if you'd like to have a multiple-choice select box.
885 * @property {Boolean} [multiple=false]
889 * (Optional) The number of items to display in the select box.
891 * @property {Number} size
894 // ----- textInput ------------------------------------------------------------
897 * The definition of a text field (single line).
899 * This class is not really part of the API. It just illustrates the properties
900 * that developers can use to define and create text fields.
902 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.textInput} object
903 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
905 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.
907 * // There is no constructor for this class, the user just has to define an
908 * // object with the appropriate properties.
913 * label: 'Your name',
915 * validate: function() {
916 * if ( !this.getValue() ) {
917 * api.openMsgDialog( '', 'Name cannot be empty.' );
923 * @class CKEDITOR.dialog.definition.textInput
924 * @extends CKEDITOR.dialog.definition.labeledElement
930 * @property {String} default
934 * (Optional) The maximum length.
936 * @property {Number} maxLength
940 * (Optional) The size of the input field.
942 * @property {Number} size
946 * (Optional) The validation function.
948 * @property {Function} validate
953 * @inheritdoc CKEDITOR.dialog.definition.textarea#bidi
956 // ----- textarea -------------------------------------------------------------
959 * The definition of a text field (multiple lines).
961 * This class is not really part of the API. It just illustrates the properties
962 * that developers can use to define and create textarea.
964 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.textarea} object
965 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.
967 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.
969 * // There is no constructor for this class, the user just has to define an
970 * // object with the appropriate properties.
976 * label: 'Your comment',
978 * validate: function() {
979 * if ( this.getValue().length < 5 ) {
980 * api.openMsgDialog( 'The comment is too short.' );
986 * @class CKEDITOR.dialog.definition.textarea
987 * @extends CKEDITOR.dialog.definition.labeledElement
991 * The number of rows.
993 * @property {Number} rows
997 * The number of columns.
999 * @property {Number} cols
1003 * (Optional) The validation function.
1005 * @property {Function} validate
1009 * The default value.
1011 * @property {String} default
1015 * Whether the text direction of this input should be togglable using the following keystrokes:
1017 * * *Shift+Alt+End* – switch to Right-To-Left,
1018 * * *Shift+Alt+Home* – switch to Left-To-Right.
1020 * By default the input will be loaded without any text direction set, which means that
1021 * the direction will be inherited from the editor's text direction.
1023 * If the direction was set, a marker will be prepended to every non-empty value of this input:
1025 * * [`\u202A`](http://unicode.org/cldr/utility/character.jsp?a=202A) – for Right-To-Left,
1026 * * [`\u202B`](http://unicode.org/cldr/utility/character.jsp?a=202B) – for Left-To-Right.
1028 * This marker allows for restoring the same text direction upon the next dialog opening.
1031 * @property {Boolean} bidi