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