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  */