]> git.immae.eu Git - perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git/blame - sources/plugins/dialog/dialogDefinition.js
Upgrade to 4.5.7 and add some plugin
[perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git] / sources / plugins / dialog / dialogDefinition.js
CommitLineData
7adcb81e
IB
1// jscs:disable disallowMixedSpacesAndTabs\r
2/**\r
3b35bd27 3 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
7adcb81e
IB
4 * For licensing, see LICENSE.md or http://ckeditor.com/license\r
5 */\r
6\r
7/**\r
8 * @fileOverview Defines the "virtual" dialog, dialog content and dialog button\r
9 * definition classes.\r
10 */\r
11\r
12/**\r
13 * The definition of a dialog window.\r
14 *\r
15 * This class is not really part of the API. It just illustrates the properties\r
16 * that developers can use to define and create dialogs.\r
17 *\r
18 * // There is no constructor for this class, the user just has to define an\r
19 * // object with the appropriate properties.\r
20 *\r
21 * CKEDITOR.dialog.add( 'testOnly', function( editor ) {\r
22 * return {\r
23 * title: 'Test Dialog',\r
24 * resizable: CKEDITOR.DIALOG_RESIZE_BOTH,\r
25 * minWidth: 500,\r
26 * minHeight: 400,\r
27 * contents: [\r
28 * {\r
29 * id: 'tab1',\r
30 * label: 'First Tab',\r
31 * title: 'First Tab Title',\r
32 * accessKey: 'Q',\r
33 * elements: [\r
34 * {\r
35 * type: 'text',\r
36 * label: 'Test Text 1',\r
37 * id: 'testText1',\r
38 * 'default': 'hello world!'\r
39 * }\r
40 * ]\r
41 * }\r
42 * ]\r
43 * };\r
44 * } );\r
45 *\r
46 * @class CKEDITOR.dialog.definition\r
47 */\r
48\r
49/**\r
50 * The dialog title, displayed in the dialog's header. Required.\r
51 *\r
52 * @property {String} title\r
53 */\r
54\r
55/**\r
56 * How the dialog can be resized, must be one of the four contents defined below.\r
57 *\r
58 * * {@link CKEDITOR#DIALOG_RESIZE_NONE}\r
59 * * {@link CKEDITOR#DIALOG_RESIZE_WIDTH}\r
60 * * {@link CKEDITOR#DIALOG_RESIZE_HEIGHT}\r
61 * * {@link CKEDITOR#DIALOG_RESIZE_BOTH}\r
62 *\r
63 * @property {Number} [resizable=CKEDITOR.DIALOG_RESIZE_NONE]\r
64 */\r
65\r
66/**\r
67 * The minimum width of the dialog, in pixels.\r
68 *\r
69 * @property {Number} [minWidth=600]\r
70 */\r
71\r
72/**\r
73 * The minimum height of the dialog, in pixels.\r
74 *\r
75 * @property {Number} [minHeight=400]\r
76 */\r
77\r
78\r
79/**\r
80 * The initial width of the dialog, in pixels.\r
81 *\r
82 * @since 3.5.3\r
83 * @property {Number} [width=CKEDITOR.dialog.definition#minWidth]\r
84 */\r
85\r
86/**\r
87 * The initial height of the dialog, in pixels.\r
88 *\r
89 * @since 3.5.3\r
90 * @property {Number} [height=CKEDITOR.dialog.definition.minHeight]\r
91 */\r
92\r
93/**\r
94 * The buttons in the dialog, defined as an array of\r
95 * {@link CKEDITOR.dialog.definition.button} objects.\r
96 *\r
97 * @property {Array} [buttons=[ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]]\r
98 */\r
99\r
100/**\r
101 * The contents in the dialog, defined as an array of\r
102 * {@link CKEDITOR.dialog.definition.content} objects. Required.\r
103 *\r
104 * @property {Array} contents\r
105 */\r
106\r
107/**\r
108 * The function to execute when OK is pressed.\r
109 *\r
110 * @property {Function} onOk\r
111 */\r
112\r
113/**\r
114 * The function to execute when Cancel is pressed.\r
115 *\r
116 * @property {Function} onCancel\r
117 */\r
118\r
119/**\r
120 * The function to execute when the dialog is displayed for the first time.\r
121 *\r
122 * @property {Function} onLoad\r
123 */\r
124\r
125/**\r
126 * The function to execute when the dialog is loaded (executed every time the dialog is opened).\r
127 *\r
128 * @property {Function} onShow\r
129 */\r
130\r
131/**\r
132 * This class is not really part of the API. It just illustrates the properties\r
133 * that developers can use to define and create dialog content pages.\r
134 *\r
135 * @class CKEDITOR.dialog.definition.content.\r
136 */\r
137\r
138/**\r
139 * The id of the content page.\r
140 *\r
141 * @property {String} id\r
142 */\r
143\r
144/**\r
145 * The tab label of the content page.\r
146 *\r
147 * @property {String} label\r
148 */\r
149\r
150/**\r
151 * The popup message of the tab label.\r
152 *\r
153 * @property {String} title\r
154 */\r
155\r
156/**\r
157 * The CTRL hotkey for switching to the tab.\r
158 *\r
159 * contentDefinition.accessKey = 'Q'; // Switch to this page when CTRL-Q is pressed.\r
160 *\r
161 * @property {String} accessKey\r
162 */\r
163\r
164/**\r
165 * The UI elements contained in this content page, defined as an array of\r
166 * {@link CKEDITOR.dialog.definition.uiElement} objects.\r
167 *\r
168 * @property {Array} elements\r
169 */\r
170\r
171/**\r
172 * The definition of user interface element (textarea, radio etc).\r
173 *\r
174 * This class is not really part of the API. It just illustrates the properties\r
175 * that developers can use to define and create dialog UI elements.\r
176 *\r
177 * @class CKEDITOR.dialog.definition.uiElement\r
178 * @see CKEDITOR.ui.dialog.uiElement\r
179 */\r
180\r
181/**\r
182 * The id of the UI element.\r
183 *\r
184 * @property {String} id\r
185 */\r
186\r
187/**\r
188 * The type of the UI element. Required.\r
189 *\r
190 * @property {String} type\r
191 */\r
192\r
193/**\r
194 * The popup label of the UI element.\r
195 *\r
196 * @property {String} title\r
197 */\r
198\r
199/**\r
200 * The content that needs to be allowed to enable this UI element.\r
201 * All formats accepted by {@link CKEDITOR.filter#check} may be used.\r
202 *\r
203 * When all UI elements in a tab are disabled, this tab will be disabled automatically.\r
204 *\r
205 * @property {String/Object/CKEDITOR.style} requiredContent\r
206 */\r
207\r
208/**\r
209 * CSS class names to append to the UI element.\r
210 *\r
211 * @property {String} className\r
212 */\r
213\r
214/**\r
215 * Inline CSS classes to append to the UI element.\r
216 *\r
217 * @property {String} style\r
218 */\r
219\r
220/**\r
221 * Horizontal alignment (in container) of the UI element.\r
222 *\r
223 * @property {String} align\r
224 */\r
225\r
226/**\r
227 * Function to execute the first time the UI element is displayed.\r
228 *\r
229 * @property {Function} onLoad\r
230 */\r
231\r
232/**\r
233 * Function to execute whenever the UI element's parent dialog is displayed.\r
234 *\r
235 * @property {Function} onShow\r
236 */\r
237\r
238/**\r
239 * Function to execute whenever the UI element's parent dialog is closed.\r
240 *\r
241 * @property {Function} onHide\r
242 */\r
243\r
244/**\r
245 * Function to execute whenever the UI element's parent\r
246 * dialog's {@link CKEDITOR.dialog#setupContent} method is executed.\r
247 * It usually takes care of the respective UI element as a standalone element.\r
248 *\r
249 * @property {Function} setup\r
250 */\r
251\r
252/**\r
253 * Function to execute whenever the UI element's parent\r
254 * dialog's {@link CKEDITOR.dialog#commitContent} method is executed.\r
255 * It usually takes care of the respective UI element as a standalone element.\r
256 *\r
257 * @property {Function} commit\r
258 */\r
259\r
260// ----- hbox -----------------------------------------------------------------\r
261\r
262/**\r
263 * Horizontal layout box for dialog UI elements, auto-expends to available width of container.\r
264 *\r
265 * This class is not really part of the API. It just illustrates the properties\r
266 * that developers can use to define and create horizontal layouts.\r
267 *\r
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}.\r
269 *\r
270 * // There is no constructor for this class, the user just has to define an\r
271 * // object with the appropriate properties.\r
272 *\r
273 * // Example:\r
274 * {\r
275 * type: 'hbox',\r
276 * widths: [ '25%', '25%', '50%' ],\r
277 * children: [\r
278 * {\r
279 * type: 'text',\r
280 * id: 'id1',\r
281 * width: '40px',\r
282 * },\r
283 * {\r
284 * type: 'text',\r
285 * id: 'id2',\r
286 * width: '40px',\r
287 * },\r
288 * {\r
289 * type: 'text',\r
290 * id: 'id3'\r
291 * }\r
292 * ]\r
293 * }\r
294 *\r
295 * @class CKEDITOR.dialog.definition.hbox\r
296 * @extends CKEDITOR.dialog.definition.uiElement\r
297 */\r
298\r
299/**\r
300 * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.\r
301 *\r
302 * @property {Array} children\r
303 */\r
304\r
305/**\r
306 * (Optional) The widths of child cells.\r
307 *\r
308 * @property {Array} widths\r
309 */\r
310\r
311/**\r
312 * (Optional) The height of the layout.\r
313 *\r
314 * @property {Number} height\r
315 */\r
316\r
317/**\r
318 * The CSS styles to apply to this element.\r
319 *\r
320 * @property {String} styles\r
321 */\r
322\r
323/**\r
324 * (Optional) The padding width inside child cells. Example: 0, 1.\r
325 *\r
326 * @property {Number} padding\r
327 */\r
328\r
329/**\r
330 * (Optional) The alignment of the whole layout. Example: center, top.\r
331 *\r
332 * @property {String} align\r
333 */\r
334\r
335// ----- vbox -----------------------------------------------------------------\r
336\r
337/**\r
338 * Vertical layout box for dialog UI elements.\r
339 *\r
340 * This class is not really part of the API. It just illustrates the properties\r
341 * that developers can use to define and create vertical layouts.\r
342 *\r
343 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.vbox} object and can\r
344 * be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
345 *\r
346 * // There is no constructor for this class, the user just has to define an\r
347 * // object with the appropriate properties.\r
348 *\r
349 * // Example:\r
350 * {\r
351 * type: 'vbox',\r
352 * align: 'right',\r
353 * width: '200px',\r
354 * children: [\r
355 * {\r
356 * type: 'text',\r
357 * id: 'age',\r
358 * label: 'Age'\r
359 * },\r
360 * {\r
361 * type: 'text',\r
362 * id: 'sex',\r
363 * label: 'Sex'\r
364 * },\r
365 * {\r
366 * type: 'text',\r
367 * id: 'nationality',\r
368 * label: 'Nationality'\r
369 * }\r
370 * ]\r
371 * }\r
372 *\r
373 * @class CKEDITOR.dialog.definition.vbox\r
374 * @extends CKEDITOR.dialog.definition.uiElement\r
375 */\r
376\r
377/**\r
378 * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.\r
379 *\r
380 * @property {Array} children\r
381 */\r
382\r
383/**\r
384 * (Optional) The width of the layout.\r
385 *\r
386 * @property {Array} width\r
387 */\r
388\r
389/**\r
390 * (Optional) The heights of individual cells.\r
391 *\r
392 * @property {Number} heights\r
393 */\r
394\r
395/**\r
396 * The CSS styles to apply to this element.\r
397 *\r
398 * @property {String} styles\r
399 */\r
400\r
401/**\r
402 * (Optional) The padding width inside child cells. Example: 0, 1.\r
403 *\r
404 * @property {Number} padding\r
405 */\r
406\r
407/**\r
408 * (Optional) The alignment of the whole layout. Example: center, top.\r
409 *\r
410 * @property {String} align\r
411 */\r
412\r
413/**\r
414 * (Optional) Whether the layout should expand vertically to fill its container.\r
415 *\r
416 * @property {Boolean} expand\r
417 */\r
418\r
419// ----- labeled element ------------------------------------------------------\r
420\r
421/**\r
422 * The definition of labeled user interface element (textarea, textInput etc).\r
423 *\r
424 * This class is not really part of the API. It just illustrates the properties\r
425 * that developers can use to define and create dialog UI elements.\r
426 *\r
427 * @class CKEDITOR.dialog.definition.labeledElement\r
428 * @extends CKEDITOR.dialog.definition.uiElement\r
429 * @see CKEDITOR.ui.dialog.labeledElement\r
430 */\r
431\r
432/**\r
433 * The label of the UI element.\r
434 *\r
435 * {\r
436 * type: 'text',\r
437 * label: 'My Label'\r
438 * }\r
439 *\r
440 * @property {String} label\r
441 */\r
442\r
443/**\r
444 * (Optional) Specify the layout of the label. Set to `'horizontal'` for horizontal layout.\r
445 * The default layout is vertical.\r
446 *\r
447 * {\r
448 * type: 'text',\r
449 * label: 'My Label',\r
450 * labelLayout: 'horizontal'\r
451 * }\r
452 *\r
453 * @property {String} labelLayout\r
454 */\r
455\r
456/**\r
457 * (Optional) Applies only to horizontal layouts: a two elements array of lengths to specify the widths of the\r
458 * label and the content element. See also {@link CKEDITOR.dialog.definition.labeledElement#labelLayout}.\r
459 *\r
460 * {\r
461 * type: 'text',\r
462 * label: 'My Label',\r
463 * labelLayout: 'horizontal',\r
464 * widths: [100, 200]\r
465 * }\r
466 *\r
467 * @property {Array} widths\r
468 */\r
469\r
470/**\r
471 * Specify the inline style of the uiElement label.\r
472 *\r
473 * {\r
474 * type: 'text',\r
475 * label: 'My Label',\r
476 * labelStyle: 'color: red'\r
477 * }\r
478 *\r
479 * @property {String} labelStyle\r
480 */\r
481\r
482\r
483/**\r
484 * Specify the inline style of the input element.\r
485 *\r
486 * {\r
487 * type: 'text',\r
488 * label: 'My Label',\r
489 * inputStyle: 'text-align: center'\r
490 * }\r
491 *\r
492 * @since 3.6.1\r
493 * @property {String} inputStyle\r
494 */\r
495\r
496/**\r
497 * Specify the inline style of the input element container.\r
498 *\r
499 * {\r
500 * type: 'text',\r
501 * label: 'My Label',\r
502 * controlStyle: 'width: 3em'\r
503 * }\r
504 *\r
505 * @since 3.6.1\r
506 * @property {String} controlStyle\r
507 */\r
508\r
509// ----- button ---------------------------------------------------------------\r
510\r
511/**\r
512 * The definition of a button.\r
513 *\r
514 * This class is not really part of the API. It just illustrates the properties\r
515 * that developers can use to define and create buttons.\r
516 *\r
517 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.button} object\r
518 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
519 *\r
520 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.\r
521 *\r
522 * // There is no constructor for this class, the user just has to define an\r
523 * // object with the appropriate properties.\r
524 *\r
525 * // Example:\r
526 * {\r
527 * type: 'button',\r
528 * id: 'buttonId',\r
529 * label: 'Click me',\r
530 * title: 'My title',\r
531 * onClick: function() {\r
532 * // this = CKEDITOR.ui.dialog.button\r
533 * alert( 'Clicked: ' + this.id );\r
534 * }\r
535 * }\r
536 *\r
537 * @class CKEDITOR.dialog.definition.button\r
538 * @extends CKEDITOR.dialog.definition.uiElement\r
539 */\r
540\r
541/**\r
542 * Whether the button is disabled.\r
543 *\r
544 * @property {Boolean} disabled\r
545 */\r
546\r
547/**\r
548 * The label of the UI element.\r
549 *\r
550 * @property {String} label\r
551 */\r
552\r
553// ----- checkbox ------\r
554/**\r
555 * The definition of a checkbox element.\r
556 *\r
557 * This class is not really part of the API. It just illustrates the properties\r
558 * that developers can use to define and create groups of checkbox buttons.\r
559 *\r
560 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.checkbox} object\r
561 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
562 *\r
563 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.\r
564 *\r
565 * // There is no constructor for this class, the user just has to define an\r
566 * // object with the appropriate properties.\r
567 *\r
568 * // Example:\r
569 * {\r
570 * type: 'checkbox',\r
571 * id: 'agree',\r
572 * label: 'I agree',\r
573 * 'default': 'checked',\r
574 * onClick: function() {\r
575 * // this = CKEDITOR.ui.dialog.checkbox\r
576 * alert( 'Checked: ' + this.getValue() );\r
577 * }\r
578 * }\r
579 *\r
580 * @class CKEDITOR.dialog.definition.checkbox\r
581 * @extends CKEDITOR.dialog.definition.uiElement\r
582 */\r
583\r
584/**\r
585 * (Optional) The validation function.\r
586 *\r
587 * @property {Function} validate\r
588 */\r
589\r
590/**\r
591 * The label of the UI element.\r
592 *\r
593 * @property {String} label\r
594 */\r
595\r
596/**\r
597 * The default state.\r
598 *\r
599 * @property {String} [default='' (unchecked)]\r
600 */\r
601\r
602// ----- file -----------------------------------------------------------------\r
603\r
604/**\r
605 * The definition of a file upload input.\r
606 *\r
607 * This class is not really part of the API. It just illustrates the properties\r
608 * that developers can use to define and create file upload elements.\r
609 *\r
610 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.file} object\r
611 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
612 *\r
613 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.\r
614 *\r
615 * // There is no constructor for this class, the user just has to define an\r
616 * // object with the appropriate properties.\r
617 *\r
618 * // Example:\r
619 * {\r
620 * type: 'file',\r
621 * id: 'upload',\r
622 * label: 'Select file from your computer',\r
623 * size: 38\r
624 * },\r
625 * {\r
626 * type: 'fileButton',\r
627 * id: 'fileId',\r
628 * label: 'Upload file',\r
629 * 'for': [ 'tab1', 'upload' ],\r
630 * filebrowser: {\r
631 * onSelect: function( fileUrl, data ) {\r
632 * alert( 'Successfully uploaded: ' + fileUrl );\r
633 * }\r
634 * }\r
635 * }\r
636 *\r
637 * @class CKEDITOR.dialog.definition.file\r
638 * @extends CKEDITOR.dialog.definition.labeledElement\r
639 */\r
640\r
641/**\r
642 * (Optional) The validation function.\r
643 *\r
644 * @property {Function} validate\r
645 */\r
646\r
647/**\r
648 * (Optional) The action attribute of the form element associated with this file upload input.\r
649 * If empty, CKEditor will use path to server connector for currently opened folder.\r
650 *\r
651 * @property {String} action\r
652 */\r
653\r
654/**\r
655 * The size of the UI element.\r
656 *\r
657 * @property {Number} size\r
658 */\r
659\r
660// ----- fileButton -----------------------------------------------------------\r
661\r
662/**\r
663 * The definition of a button for submitting the file in a file upload input.\r
664 *\r
665 * This class is not really part of the API. It just illustrates the properties\r
666 * that developers can use to define and create a button for submitting the file in a file upload input.\r
667 *\r
668 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.fileButton} object\r
669 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
670 *\r
671 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.\r
672 *\r
673 * @class CKEDITOR.dialog.definition.fileButton\r
674 * @extends CKEDITOR.dialog.definition.uiElement\r
675 */\r
676\r
677/**\r
678 * (Optional) The validation function.\r
679 *\r
680 * @property {Function} validate\r
681 */\r
682\r
683/**\r
684 * The label of the UI element.\r
685 *\r
686 * @property {String} label\r
687 */\r
688\r
689/**\r
690 * The instruction for CKEditor how to deal with file upload.\r
691 * By default, the file and fileButton elements will not work "as expected" if this attribute is not set.\r
692 *\r
693 * // Update field with id 'txtUrl' in the 'tab1' tab when file is uploaded.\r
694 * filebrowser: 'tab1:txtUrl'\r
695 *\r
696 * // Call custom onSelect function when file is successfully uploaded.\r
697 * filebrowser: {\r
698 * onSelect: function( fileUrl, data ) {\r
699 * alert( 'Successfully uploaded: ' + fileUrl );\r
700 * }\r
701 * }\r
702 *\r
703 * @property {String} filebrowser/Object\r
704 */\r
705\r
706/**\r
707 * An array that contains pageId and elementId of the file upload input element for which this button is created.\r
708 *\r
709 * [ pageId, elementId ]\r
710 *\r
711 * @property {String} for\r
712 */\r
713\r
714// ----- html -----------------------------------------------------------------\r
715\r
716/**\r
717 * The definition of a raw HTML element.\r
718 *\r
719 * This class is not really part of the API. It just illustrates the properties\r
720 * that developers can use to define and create elements made from raw HTML code.\r
721 *\r
722 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.html} object\r
723 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
724 *\r
725 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.\r
726 * To access HTML elements use {@link CKEDITOR.dom.document#getById}.\r
727 *\r
728 * // There is no constructor for this class, the user just has to define an\r
729 * // object with the appropriate properties.\r
730 *\r
731 * // Example 1:\r
732 * {\r
733 * type: 'html',\r
734 * html: '<h3>This is some sample HTML content.</h3>'\r
735 * }\r
736 *\r
737 * // Example 2:\r
738 * // Complete sample with document.getById() call when the "Ok" button is clicked.\r
739 * var dialogDefinition = {\r
740 * title: 'Sample dialog',\r
741 * minWidth: 300,\r
742 * minHeight: 200,\r
743 * onOk: function() {\r
744 * // "this" is now a CKEDITOR.dialog object.\r
745 * var document = this.getElement().getDocument();\r
746 * // document = CKEDITOR.dom.document\r
747 * var element = <b>document.getById( 'myDiv' );</b>\r
748 * if ( element )\r
749 * alert( element.getHtml() );\r
750 * },\r
751 * contents: [\r
752 * {\r
753 * id: 'tab1',\r
754 * label: '',\r
755 * title: '',\r
756 * elements: [\r
757 * {\r
758 * type: 'html',\r
759 * html: '<div id="myDiv">Sample <b>text</b>.</div><div id="otherId">Another div.</div>'\r
760 * }\r
761 * ]\r
762 * }\r
763 * ],\r
764 * buttons: [ CKEDITOR.dialog.cancelButton, CKEDITOR.dialog.okButton ]\r
765 * };\r
766 *\r
767 * @class CKEDITOR.dialog.definition.html\r
768 * @extends CKEDITOR.dialog.definition.uiElement\r
769 */\r
770\r
771/**\r
772 * (Required) HTML code of this element.\r
773 *\r
774 * @property {String} html\r
775 */\r
776\r
777// ----- radio ----------------------------------------------------------------\r
778\r
779/**\r
780 * The definition of a radio group.\r
781 *\r
782 * This class is not really part of the API. It just illustrates the properties\r
783 * that developers can use to define and create groups of radio buttons.\r
784 *\r
785 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.radio} object\r
786 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
787 *\r
788 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.\r
789 *\r
790 * // There is no constructor for this class, the user just has to define an\r
791 * // object with the appropriate properties.\r
792 *\r
793 * // Example:\r
794 * {\r
795 * type: 'radio',\r
796 * id: 'country',\r
797 * label: 'Which country is bigger',\r
798 * items: [ [ 'France', 'FR' ], [ 'Germany', 'DE' ] ],\r
799 * style: 'color: green',\r
800 * 'default': 'DE',\r
801 * onClick: function() {\r
802 * // this = CKEDITOR.ui.dialog.radio\r
803 * alert( 'Current value: ' + this.getValue() );\r
804 * }\r
805 * }\r
806 *\r
807 * @class CKEDITOR.dialog.definition.radio\r
808 * @extends CKEDITOR.dialog.definition.labeledElement\r
809 */\r
810\r
811/**\r
812 * The default value.\r
813 *\r
814 * @property {String} default\r
815 */\r
816\r
817/**\r
818 * (Optional) The validation function.\r
819 *\r
820 * @property {Function} validate\r
821 */\r
822\r
823/**\r
824 * An array of options. Each option is a 1- or 2-item array of format `[ 'Description', 'Value' ]`.\r
825 * If `'Value'` is missing, then the value would be assumed to be the same as the description.\r
826 *\r
827 * @property {Array} items\r
828 */\r
829\r
830// ----- selectElement --------------------------------------------------------\r
831\r
832/**\r
833 * The definition of a select element.\r
834 *\r
835 * This class is not really part of the API. It just illustrates the properties\r
836 * that developers can use to define and create select elements.\r
837 *\r
838 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.select} object\r
839 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
840 *\r
841 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.\r
842 *\r
843 * // There is no constructor for this class, the user just has to define an\r
844 * // object with the appropriate properties.\r
845 *\r
846 * // Example:\r
847 * {\r
848 * type: 'select',\r
849 * id: 'sport',\r
850 * label: 'Select your favourite sport',\r
851 * items: [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ],\r
852 * 'default': 'Football',\r
853 * onChange: function( api ) {\r
854 * // this = CKEDITOR.ui.dialog.select\r
855 * alert( 'Current value: ' + this.getValue() );\r
856 * }\r
857 * }\r
858 *\r
859 * @class CKEDITOR.dialog.definition.select\r
860 * @extends CKEDITOR.dialog.definition.labeledElement\r
861 */\r
862\r
863/**\r
864 * The default value.\r
865 *\r
866 * @property {String} default\r
867 */\r
868\r
869/**\r
870 * (Optional) The validation function.\r
871 *\r
872 * @property {Function} validate\r
873 */\r
874\r
875/**\r
876 * An array of options. Each option is a 1- or 2-item array of format `[ 'Description', 'Value' ]`.\r
877 * If `'Value'` is missing, then the value would be assumed to be the same as the description.\r
878 *\r
879 * @property {Array} items\r
880 */\r
881\r
882/**\r
883 * (Optional) Set this to true if you'd like to have a multiple-choice select box.\r
884 *\r
885 * @property {Boolean} [multiple=false]\r
886 */\r
887\r
888/**\r
889 * (Optional) The number of items to display in the select box.\r
890 *\r
891 * @property {Number} size\r
892 */\r
893\r
894// ----- textInput ------------------------------------------------------------\r
895\r
896/**\r
897 * The definition of a text field (single line).\r
898 *\r
899 * This class is not really part of the API. It just illustrates the properties\r
900 * that developers can use to define and create text fields.\r
901 *\r
902 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.textInput} object\r
903 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
904 *\r
905 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.\r
906 *\r
907 * // There is no constructor for this class, the user just has to define an\r
908 * // object with the appropriate properties.\r
909 *\r
910 * {\r
911 * type: 'text',\r
912 * id: 'name',\r
913 * label: 'Your name',\r
914 * 'default': '',\r
915 * validate: function() {\r
916 * if ( !this.getValue() ) {\r
917 * api.openMsgDialog( '', 'Name cannot be empty.' );\r
918 * return false;\r
919 * }\r
920 * }\r
921 * }\r
922 *\r
923 * @class CKEDITOR.dialog.definition.textInput\r
924 * @extends CKEDITOR.dialog.definition.labeledElement\r
925 */\r
926\r
927/**\r
928 * The default value.\r
929 *\r
930 * @property {String} default\r
931 */\r
932\r
933/**\r
934 * (Optional) The maximum length.\r
935 *\r
936 * @property {Number} maxLength\r
937 */\r
938\r
939/**\r
940 * (Optional) The size of the input field.\r
941 *\r
942 * @property {Number} size\r
943 */\r
944\r
945/**\r
946 * (Optional) The validation function.\r
947 *\r
948 * @property {Function} validate\r
949 */\r
950\r
951/**\r
952 * @property bidi\r
953 * @inheritdoc CKEDITOR.dialog.definition.textarea#bidi\r
954 */\r
955\r
956// ----- textarea -------------------------------------------------------------\r
957\r
958/**\r
959 * The definition of a text field (multiple lines).\r
960 *\r
961 * This class is not really part of the API. It just illustrates the properties\r
962 * that developers can use to define and create textarea.\r
963 *\r
964 * Once the dialog is opened, the created element becomes a {@link CKEDITOR.ui.dialog.textarea} object\r
965 * and can be accessed with {@link CKEDITOR.dialog#getContentElement}.\r
966 *\r
967 * For a complete example of dialog definition, please check {@link CKEDITOR.dialog#add}.\r
968 *\r
969* // There is no constructor for this class, the user just has to define an\r
970* // object with the appropriate properties.\r
971*\r
972* // Example:\r
973* {\r
974* type: 'textarea',\r
975* id: 'message',\r
976* label: 'Your comment',\r
977* 'default': '',\r
978* validate: function() {\r
979* if ( this.getValue().length < 5 ) {\r
980* api.openMsgDialog( 'The comment is too short.' );\r
981* return false;\r
982* }\r
983* }\r
984* }\r
985 *\r
986 * @class CKEDITOR.dialog.definition.textarea\r
987 * @extends CKEDITOR.dialog.definition.labeledElement\r
988 */\r
989\r
990/**\r
991 * The number of rows.\r
992 *\r
993 * @property {Number} rows\r
994 */\r
995\r
996/**\r
997 * The number of columns.\r
998 *\r
999 * @property {Number} cols\r
1000 */\r
1001\r
1002/**\r
1003 * (Optional) The validation function.\r
1004 *\r
1005 * @property {Function} validate\r
1006 */\r
1007\r
1008/**\r
1009 * The default value.\r
1010 *\r
1011 * @property {String} default\r
1012 */\r
1013\r
1014/**\r
1015 * Whether the text direction of this input should be togglable using the following keystrokes:\r
1016 *\r
1017 * * *Shift+Alt+End* &ndash; switch to Right-To-Left,\r
1018 * * *Shift+Alt+Home* &ndash; switch to Left-To-Right.\r
1019 *\r
1020 * By default the input will be loaded without any text direction set, which means that\r
1021 * the direction will be inherited from the editor's text direction.\r
1022 *\r
1023 * If the direction was set, a marker will be prepended to every non-empty value of this input:\r
1024 *\r
1025 * * [`\u202A`](http://unicode.org/cldr/utility/character.jsp?a=202A) &ndash; for Right-To-Left,\r
1026 * * [`\u202B`](http://unicode.org/cldr/utility/character.jsp?a=202B) &ndash; for Left-To-Right.\r
1027 *\r
1028 * This marker allows for restoring the same text direction upon the next dialog opening.\r
1029 *\r
1030 * @since 4.5\r
1031 * @property {Boolean} bidi\r
1032 */\r