_source/plugins/dialog/dialogDefinition.js

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