_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  * Function to execute the first time the UI element is displayed.\r
 268  * @name CKEDITOR.dialog.definition.uiElement.prototype.onLoad\r
 269  * @field\r
 270  * @type Function\r
 271  * @example\r
 272  */\r
 273 \r
 274 /**\r
 275  * Function to execute whenever the UI element's parent dialog is displayed.\r
 276  * @name CKEDITOR.dialog.definition.uiElement.prototype.onShow\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 closed.\r
 284  * @name CKEDITOR.dialog.definition.uiElement.prototype.onHide\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's {@link CKEDITOR.dialog.definition.setupContent} method is executed.\r
 292  * It usually takes care of the respective UI element as a standalone element.\r
 293  * @name CKEDITOR.dialog.definition.uiElement.prototype.setup\r
 294  * @field\r
 295  * @type Function\r
 296  * @example\r
 297  */\r
 298 \r
 299 /**\r
 300  * Function to execute whenever the UI element's parent dialog's {@link CKEDITOR.dialog.definition.commitContent} method is executed.\r
 301  * It usually takes care of the respective UI element as a standalone element.\r
 302  * @name CKEDITOR.dialog.definition.uiElement.prototype.commit\r
 303  * @field\r
 304  * @type Function\r
 305  * @example\r
 306  */\r
 307 \r
 308 // ----- hbox -----\r
 309 \r
 310 /**\r
 311  * Horizontal layout box for dialog UI elements, auto-expends to available width of container.\r
 312  * <div class="notapi">\r
 313  * This class is not really part of the API. It just illustrates the properties\r
 314  * that developers can use to define and create horizontal layouts.\r
 315  * <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
 316  * </div>\r
 317  * @name CKEDITOR.dialog.definition.hbox\r
 318  * @extends CKEDITOR.dialog.definition.uiElement\r
 319  * @constructor\r
 320  * @example\r
 321  * // There is no constructor for this class, the user just has to define an\r
 322  * // object with the appropriate properties.\r
 323  *\r
 324  * // Example:\r
 325  * {\r
 326  *      <b>type : 'hbox',</b>\r
 327  *      widths : [ '25%', '25%', '50%' ],\r
 328  *      children :\r
 329  *      [\r
 330  *              {\r
 331  *                      type : 'text',\r
 332  *                      id : 'id1',\r
 333  *                      width : '40px',\r
 334  *              },\r
 335  *              {\r
 336  *                      type : 'text',\r
 337  *                      id : 'id2',\r
 338  *                      width : '40px',\r
 339  *              },\r
 340  *              {\r
 341  *                      type : 'text',\r
 342  *                      id : 'id3'\r
 343  *              }\r
 344  *      ]\r
 345  * }\r
 346  */\r
 347 \r
 348 /**\r
 349  * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.\r
 350  * @name CKEDITOR.dialog.definition.hbox.prototype.children\r
 351  * @field\r
 352  * @type Array\r
 353  * @example\r
 354  */\r
 355 \r
 356 /**\r
 357  * (Optional) The widths of child cells.\r
 358  * @name CKEDITOR.dialog.definition.hbox.prototype.widths\r
 359  * @field\r
 360  * @type Array\r
 361  * @example\r
 362  */\r
 363 \r
 364 /**\r
 365  * (Optional) The height of the layout.\r
 366  * @name CKEDITOR.dialog.definition.hbox.prototype.height\r
 367  * @field\r
 368  * @type Number\r
 369  * @example\r
 370  */\r
 371 \r
 372 /**\r
 373  * The CSS styles to apply to this element.\r
 374  * @name CKEDITOR.dialog.definition.hbox.prototype.styles\r
 375  * @field\r
 376  * @type String\r
 377  * @example\r
 378  */\r
 379 \r
 380 /**\r
 381  * (Optional) The padding width inside child cells. Example: 0, 1.\r
 382  * @name CKEDITOR.dialog.definition.hbox.prototype.padding\r
 383  * @field\r
 384  * @type Number\r
 385  * @example\r
 386  */\r
 387 \r
 388 /**\r
 389  * (Optional) The alignment of the whole layout. Example: center, top.\r
 390  * @name CKEDITOR.dialog.definition.hbox.prototype.align\r
 391  * @field\r
 392  * @type String\r
 393  * @example\r
 394  */\r
 395 \r
 396 // ----- vbox -----\r
 397 \r
 398 /**\r
 399  * Vertical layout box for dialog UI elements.\r
 400  * <div class="notapi">\r
 401  * This class is not really part of the API. It just illustrates the properties\r
 402  * that developers can use to define and create vertical layouts.\r
 403  * <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
 404  * </div>\r
 405  * <style type="text/css">.details .detailList {display:none;} </style>\r
 406  * @name CKEDITOR.dialog.definition.vbox\r
 407  * @extends CKEDITOR.dialog.definition.uiElement\r
 408  * @constructor\r
 409  * @example\r
 410  * // There is no constructor for this class, the user just has to define an\r
 411  * // object with the appropriate properties.\r
 412  *\r
 413  * // Example:\r
 414  * {\r
 415  *      <b>type : 'vbox',</b>\r
 416  *      align : 'right',\r
 417  *      width : '200px',\r
 418  *      children :\r
 419  *      [\r
 420  *              {\r
 421  *                      type : 'text',\r
 422  *                      id : 'age',\r
 423  *                      label : 'Age'\r
 424  *              },\r
 425  *              {\r
 426  *                      type : 'text',\r
 427  *                      id : 'sex',\r
 428  *                      label : 'Sex'\r
 429  *              },\r
 430  *              {\r
 431  *                      type : 'text',\r
 432  *                      id : 'nationality',\r
 433  *                      label : 'Nationality'\r
 434  *              }\r
 435  *      ]\r
 436  * }\r
 437  */\r
 438 \r
 439 /**\r
 440  * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this container.\r
 441  * @name CKEDITOR.dialog.definition.vbox.prototype.children\r
 442  * @field\r
 443  * @type Array\r
 444  * @example\r
 445  */\r
 446 \r
 447 /**\r
 448  * (Optional) The width of the layout.\r
 449  * @name CKEDITOR.dialog.definition.vbox.prototype.width\r
 450  * @field\r
 451  * @type Array\r
 452  * @example\r
 453  */\r
 454 \r
 455 /**\r
 456  * (Optional) The heights of individual cells.\r
 457  * @name CKEDITOR.dialog.definition.vbox.prototype.heights\r
 458  * @field\r
 459  * @type Number\r
 460  * @example\r
 461  */\r
 462 \r
 463 /**\r
 464  * The CSS styles to apply to this element.\r
 465  * @name CKEDITOR.dialog.definition.vbox.prototype.styles\r
 466  * @field\r
 467  * @type String\r
 468  * @example\r
 469  */\r
 470 \r
 471 /**\r
 472  * (Optional) The padding width inside child cells. Example: 0, 1.\r
 473  * @name CKEDITOR.dialog.definition.vbox.prototype.padding\r
 474  * @field\r
 475  * @type Number\r
 476  * @example\r
 477  */\r
 478 \r
 479 /**\r
 480  * (Optional) The alignment of the whole layout. Example: center, top.\r
 481  * @name CKEDITOR.dialog.definition.vbox.prototype.align\r
 482  * @field\r
 483  * @type String\r
 484  * @example\r
 485  */\r
 486 \r
 487 /**\r
 488  * (Optional) Whether the layout should expand vertically to fill its container.\r
 489  * @name CKEDITOR.dialog.definition.vbox.prototype.expand\r
 490  * @field\r
 491  * @type Boolean\r
 492  * @example\r
 493  */\r
 494 \r
 495 // ----- button ------\r
 496 \r
 497 /**\r
 498  * The definition of a button.\r
 499  * <div class="notapi">\r
 500  * This class is not really part of the API. It just illustrates the properties\r
 501  * that developers can use to define and create buttons.\r
 502  * <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
 503  * </div>\r
 504  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
 505  * @name CKEDITOR.dialog.definition.button\r
 506  * @extends CKEDITOR.dialog.definition.uiElement\r
 507  * @constructor\r
 508  * @example\r
 509  * // There is no constructor for this class, the user just has to define an\r
 510  * // object with the appropriate properties.\r
 511  *\r
 512  * // Example:\r
 513  * {\r
 514  *      <b>type : 'button',</b>\r
 515  *      id : 'buttonId',\r
 516  *      label : 'Click me',\r
 517  *      title : 'My title',\r
 518  *      onClick : function() {\r
 519  *              // this = CKEDITOR.ui.dialog.button\r
 520  *              alert( 'Clicked: ' + this.id );\r
 521  *      }\r
 522  * }\r
 523  */\r
 524 \r
 525 /**\r
 526  * Whether the button is disabled.\r
 527  * @name CKEDITOR.dialog.definition.button.prototype.disabled\r
 528  * @type Boolean\r
 529  * @field\r
 530  * @example\r
 531  */\r
 532 \r
 533 /**\r
 534  * The label of the UI element.\r
 535  * @name CKEDITOR.dialog.definition.button.prototype.label\r
 536  * @type String\r
 537  * @field\r
 538  * @example\r
 539  */\r
 540 \r
 541 // ----- checkbox ------\r
 542 \r
 543 /**\r
 544  * The definition of a checkbox element.\r
 545  * <div class="notapi">\r
 546  * This class is not really part of the API. It just illustrates the properties\r
 547  * that developers can use to define and create groups of checkbox buttons.\r
 548  * <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
 549  * </div>\r
 550  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
 551  * @name CKEDITOR.dialog.definition.checkbox\r
 552  * @extends CKEDITOR.dialog.definition.uiElement\r
 553  * @constructor\r
 554  * @example\r
 555  * // There is no constructor for this class, the user just has to define an\r
 556  * // object with the appropriate properties.\r
 557  *\r
 558  * // Example:\r
 559  * {\r
 560  *      <b>type : 'checkbox',</b>\r
 561  *      id : 'agree',\r
 562  *      label : 'I agree',\r
 563  *      'default' : 'checked',\r
 564  *      onClick : function() {\r
 565  *              // this = CKEDITOR.ui.dialog.checkbox\r
 566  *              alert( 'Checked: ' + this.getValue() );\r
 567  *      }\r
 568  * }\r
 569  */\r
 570 \r
 571 /**\r
 572  * (Optional) The validation function.\r
 573  * @name CKEDITOR.dialog.definition.checkbox.prototype.validate\r
 574  * @field\r
 575  * @type Function\r
 576  * @example\r
 577  */\r
 578 \r
 579 /**\r
 580  * The label of the UI element.\r
 581  * @name CKEDITOR.dialog.definition.checkbox.prototype.label\r
 582  * @type String\r
 583  * @field\r
 584  * @example\r
 585  */\r
 586 \r
 587 /**\r
 588  * The default state.\r
 589  * @name CKEDITOR.dialog.definition.checkbox.prototype.default\r
 590  * @type String\r
 591  * @field\r
 592  * @default\r
 593  * '' (unchecked)\r
 594  * @example\r
 595  */\r
 596 \r
 597 // ----- file -----\r
 598 \r
 599 /**\r
 600  * The definition of a file upload input.\r
 601  * <div class="notapi">\r
 602  * This class is not really part of the API. It just illustrates the properties\r
 603  * that developers can use to define and create file upload elements.\r
 604  * <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
 605  * </div>\r
 606  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
 607  * @name CKEDITOR.dialog.definition.file\r
 608  * @extends CKEDITOR.dialog.definition.uiElement\r
 609  * @constructor\r
 610  * @example\r
 611  * // There is no constructor for this class, the user just has to define an\r
 612  * // object with the appropriate properties.\r
 613  *\r
 614  * // Example:\r
 615  * {\r
 616  *      <b>type : 'file'</b>,\r
 617  *      id : 'upload',\r
 618  *      label : 'Select file from your computer',\r
 619  *      size : 38\r
 620  * },\r
 621  * {\r
 622  *      type : 'fileButton',\r
 623  *      id : 'fileId',\r
 624  *      label : 'Upload file',\r
 625  *      'for' : [ 'tab1', 'upload' ]\r
 626  *      filebrowser : {\r
 627  *              onSelect : function( fileUrl, data ) {\r
 628  *                      alert( 'Successfully uploaded: ' + fileUrl );\r
 629  *              }\r
 630  *      }\r
 631  * }\r
 632  */\r
 633 \r
 634 /**\r
 635  * (Optional) The validation function.\r
 636  * @name CKEDITOR.dialog.definition.file.prototype.validate\r
 637  * @field\r
 638  * @type Function\r
 639  * @example\r
 640  */\r
 641 \r
 642 /**\r
 643  * The label of the UI element.\r
 644  * @name CKEDITOR.dialog.definition.file.prototype.label\r
 645  * @type String\r
 646  * @field\r
 647  * @example\r
 648  */\r
 649 \r
 650 /**\r
 651  * (Optional) The action attribute of the form element associated with this file upload input.\r
 652  * If empty, CKEditor will use path to server connector for currently opened folder.\r
 653  * @name CKEDITOR.dialog.definition.file.prototype.action\r
 654  * @type String\r
 655  * @field\r
 656  * @example\r
 657  */\r
 658 \r
 659 /**\r
 660  * The size of the UI element.\r
 661  * @name CKEDITOR.dialog.definition.file.prototype.size\r
 662  * @type Number\r
 663  * @field\r
 664  * @example\r
 665  */\r
 666 \r
 667 // ----- fileButton -----\r
 668 \r
 669 /**\r
 670  * The definition of a button for submitting the file in a file upload input.\r
 671  * <div class="notapi">\r
 672  * This class is not really part of the API. It just illustrates the properties\r
 673  * that developers can use to define and create a button for submitting the file in a file upload input.\r
 674  * <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
 675  * </div>\r
 676  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
 677  * @name CKEDITOR.dialog.definition.fileButton\r
 678  * @extends CKEDITOR.dialog.definition.uiElement\r
 679  * @constructor\r
 680  * @example\r
 681  * // There is no constructor for this class, the user just has to define an\r
 682  * // object with the appropriate properties.\r
 683  *\r
 684  * // Example:\r
 685  * {\r
 686  *      type : 'file',\r
 687  *      id : 'upload',\r
 688  *      label : 'Select file from your computer',\r
 689  *      size : 38\r
 690  * },\r
 691  * {\r
 692  *      <b>type : 'fileButton'</b>,\r
 693  *      id : 'fileId',\r
 694  *      label : 'Upload file',\r
 695  *      'for' : [ 'tab1', 'upload' ]\r
 696  *      filebrowser : {\r
 697  *              onSelect : function( fileUrl, data ) {\r
 698  *                      alert( 'Successfully uploaded: ' + fileUrl );\r
 699  *              }\r
 700  *      }\r
 701  * }\r
 702  */\r
 703 \r
 704 /**\r
 705  * (Optional) The validation function.\r
 706  * @name CKEDITOR.dialog.definition.fileButton.prototype.validate\r
 707  * @field\r
 708  * @type Function\r
 709  * @example\r
 710  */\r
 711 \r
 712 /**\r
 713  * The label of the UI element.\r
 714  * @name CKEDITOR.dialog.definition.fileButton.prototype.label\r
 715  * @type String\r
 716  * @field\r
 717  * @example\r
 718  */\r
 719 \r
 720 /**\r
 721  * The instruction for CKEditor how to deal with file upload.\r
 722  * By default, the file and fileButton elements will not work "as expected" if this attribute is not set.\r
 723  * @name CKEDITOR.dialog.definition.fileButton.prototype.filebrowser\r
 724  * @type String|Object\r
 725  * @field\r
 726  * @example\r
 727  * // Update field with id 'txtUrl' in the 'tab1' tab when file is uploaded.\r
 728  * filebrowser : 'tab1:txtUrl'\r
 729  *\r
 730  * // Call custom onSelect function when file is successfully uploaded.\r
 731  * filebrowser : {\r
 732  *      onSelect : function( fileUrl, data ) {\r
 733  *              alert( 'Successfully uploaded: ' + fileUrl );\r
 734  *      }\r
 735  * }\r
 736  */\r
 737 \r
 738 /**\r
 739  * An array that contains pageId and elementId of the file upload input element for which this button is created.\r
 740  * @name CKEDITOR.dialog.definition.fileButton.prototype.for\r
 741  * @type String\r
 742  * @field\r
 743  * @example\r
 744  * [ pageId, elementId ]\r
 745  */\r
 746 \r
 747 // ----- html -----\r
 748 \r
 749 /**\r
 750  * The definition of a raw HTML element.\r
 751  * <div class="notapi">\r
 752  * This class is not really part of the API. It just illustrates the properties\r
 753  * that developers can use to define and create elements made from raw HTML code.\r
 754  * <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
 755  * </div>\r
 756  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.<br />\r
 757  * To access HTML elements use {@link CKEDITOR.dom.document#getById}\r
 758  * @name CKEDITOR.dialog.definition.html\r
 759  * @extends CKEDITOR.dialog.definition.uiElement\r
 760  * @constructor\r
 761  * @example\r
 762  * // There is no constructor for this class, the user just has to define an\r
 763  * // object with the appropriate properties.\r
 764  *\r
 765  * // Example 1:\r
 766  * {\r
 767  *      <b>type : 'html',</b>\r
 768  *      html : '&lt;h3>This is some sample HTML content.&lt;/h3>'\r
 769  * }\r
 770  * @example\r
 771  * // Example 2:\r
 772  * // Complete sample with document.getById() call when the "Ok" button is clicked.\r
 773  * var dialogDefinition =\r
 774  * {\r
 775  *      title : 'Sample dialog',\r
 776  *      minWidth : 300,\r
 777  *      minHeight : 200,\r
 778  *      onOk : function() {\r
 779  *              // "this" is now a CKEDITOR.dialog object.\r
 780  *              var document = this.getElement().getDocument();\r
 781  *              // document = CKEDITOR.dom.document\r
 782  *              var element = <b>document.getById( 'myDiv' );</b>\r
 783  *              if ( element )\r
 784  *                      alert( element.getHtml() );\r
 785  *      },\r
 786  *      contents : [\r
 787  *              {\r
 788  *                      id : 'tab1',\r
 789  *                      label : '',\r
 790  *                      title : '',\r
 791  *                      elements :\r
 792  *                      [\r
 793  *                              {\r
 794  *                                      <b>type : 'html',</b>\r
 795  *                                      html : '<b>&lt;div id="myDiv">Sample &lt;b>text&lt;/b>.&lt;/div></b>&lt;div id="otherId">Another div.&lt;/div>'\r
 796  *                              },\r
 797  *                      ]\r
 798  *              }\r
 799  *      ],\r
 800  *      buttons : [ CKEDITOR.dialog.cancelButton, CKEDITOR.dialog.okButton ]\r
 801  * };\r
 802  */\r
 803 \r
 804 /**\r
 805  * (Required) HTML code of this element.\r
 806  * @name CKEDITOR.dialog.definition.html.prototype.html\r
 807  * @type String\r
 808  * @field\r
 809  * @example\r
 810  */\r
 811 \r
 812 // ----- radio ------\r
 813 \r
 814 /**\r
 815  * The definition of a radio group.\r
 816  * <div class="notapi">\r
 817  * This class is not really part of the API. It just illustrates the properties\r
 818  * that developers can use to define and create groups of radio buttons.\r
 819  * <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
 820  * </div>\r
 821  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
 822  * @name CKEDITOR.dialog.definition.radio\r
 823  * @extends CKEDITOR.dialog.definition.uiElement\r
 824  * @constructor\r
 825  * @example\r
 826  * // There is no constructor for this class, the user just has to define an\r
 827  * // object with the appropriate properties.\r
 828  *\r
 829  * // Example:\r
 830  * {\r
 831  *      <b>type : 'radio',</b>\r
 832  *      id : 'country',\r
 833  *      label : 'Which country is bigger',\r
 834  *      items : [ [ 'France', 'FR' ], [ 'Germany', 'DE' ] ] ,\r
 835  *      style : 'color:green',\r
 836  *      'default' : 'DE',\r
 837  *      onClick : function() {\r
 838  *              // this = CKEDITOR.ui.dialog.radio\r
 839  *              alert( 'Current value: ' + this.getValue() );\r
 840  *      }\r
 841  * }\r
 842  */\r
 843 \r
 844 /**\r
 845  * The default value.\r
 846  * @name CKEDITOR.dialog.definition.radio.prototype.default\r
 847  * @type String\r
 848  * @field\r
 849  * @example\r
 850  */\r
 851 \r
 852 /**\r
 853  * (Optional) The validation function.\r
 854  * @name CKEDITOR.dialog.definition.radio.prototype.validate\r
 855  * @field\r
 856  * @type Function\r
 857  * @example\r
 858  */\r
 859 \r
 860 /**\r
 861  *  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
 862  * @name CKEDITOR.dialog.definition.radio.prototype.items\r
 863  * @field\r
 864  * @type Array\r
 865  * @example\r
 866  */\r
 867 \r
 868 /**\r
 869  * The label of the UI element.\r
 870  * @name CKEDITOR.dialog.definition.radio.prototype.label\r
 871  * @type String\r
 872  * @field\r
 873  * @example\r
 874  */\r
 875 \r
 876 // ----- selectElement ------\r
 877 \r
 878 /**\r
 879  * The definition of a select element.\r
 880  * <div class="notapi">\r
 881  * This class is not really part of the API. It just illustrates the properties\r
 882  * that developers can use to define and create select elements.\r
 883  * <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
 884  * </div>\r
 885  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
 886  * @name CKEDITOR.dialog.definition.select\r
 887  * @extends CKEDITOR.dialog.definition.uiElement\r
 888  * @constructor\r
 889  * @example\r
 890  * // There is no constructor for this class, the user just has to define an\r
 891  * // object with the appropriate properties.\r
 892  *\r
 893  * // Example:\r
 894  * {\r
 895  *      <b>type : 'select',</b>\r
 896  *      id : 'sport',\r
 897  *      label : 'Select your favourite sport',\r
 898  *      items : [ [ 'Basketball' ], [ 'Baseball' ], [ 'Hockey' ], [ 'Football' ] ],\r
 899  *      'default' : 'Football',\r
 900  *      onChange : function( api ) {\r
 901  *              // this = CKEDITOR.ui.dialog.select\r
 902  *              alert( 'Current value: ' + this.getValue() );\r
 903  *      }\r
 904  * }\r
 905  */\r
 906 \r
 907 /**\r
 908  * The default value.\r
 909  * @name CKEDITOR.dialog.definition.select.prototype.default\r
 910  * @type String\r
 911  * @field\r
 912  * @example\r
 913  */\r
 914 \r
 915 /**\r
 916  * (Optional) The validation function.\r
 917  * @name CKEDITOR.dialog.definition.select.prototype.validate\r
 918  * @field\r
 919  * @type Function\r
 920  * @example\r
 921  */\r
 922 \r
 923 /**\r
 924  *  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
 925  * @name CKEDITOR.dialog.definition.select.prototype.items\r
 926  * @field\r
 927  * @type Array\r
 928  * @example\r
 929  */\r
 930 \r
 931 /**\r
 932  * (Optional) Set this to true if you'd like to have a multiple-choice select box.\r
 933  * @name CKEDITOR.dialog.definition.select.prototype.multiple\r
 934  * @type Boolean\r
 935  * @field\r
 936  * @example\r
 937  * @default false\r
 938  */\r
 939 \r
 940 /**\r
 941  * (Optional) The number of items to display in the select box.\r
 942  * @name CKEDITOR.dialog.definition.select.prototype.size\r
 943  * @type Number\r
 944  * @field\r
 945  * @example\r
 946  */\r
 947 \r
 948 /**\r
 949  * The label of the UI element.\r
 950  * @name CKEDITOR.dialog.definition.select.prototype.label\r
 951  * @type String\r
 952  * @field\r
 953  * @example\r
 954  */\r
 955 \r
 956 // ----- textInput -----\r
 957 \r
 958 /**\r
 959  * The definition of a text field (single line).\r
 960  * <div class="notapi">\r
 961  * This class is not really part of the API. It just illustrates the properties\r
 962  * that developers can use to define and create text fields.\r
 963  * <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
 964  * </div>\r
 965  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
 966  * @name CKEDITOR.dialog.definition.textInput\r
 967  * @extends CKEDITOR.dialog.definition.uiElement\r
 968  * @constructor\r
 969  * @example\r
 970  * // There is no constructor for this class, the user just has to define an\r
 971  * // object with the appropriate properties.\r
 972  *\r
 973  * {\r
 974  *      <b>type : 'text',</b>\r
 975  *      id : 'name',\r
 976  *      label : 'Your name',\r
 977  *      'default' : '',\r
 978  *      validate : function() {\r
 979  *              if ( !this.getValue() )\r
 980  *              {\r
 981  *                      api.openMsgDialog( '', 'Name cannot be empty.' );\r
 982  *                      return false;\r
 983  *              }\r
 984  *      }\r
 985  * }\r
 986  */\r
 987 \r
 988 /**\r
 989  * The default value.\r
 990  * @name CKEDITOR.dialog.definition.textInput.prototype.default\r
 991  * @type String\r
 992  * @field\r
 993  * @example\r
 994  */\r
 995 \r
 996 /**\r
 997  * (Optional) The maximum length.\r
 998  * @name CKEDITOR.dialog.definition.textInput.prototype.maxLength\r
 999  * @type Number\r
1000  * @field\r
1001  * @example\r
1002  */\r
1003 \r
1004 /**\r
1005  * (Optional) The size of the input field.\r
1006  * @name CKEDITOR.dialog.definition.textInput.prototype.size\r
1007  * @type Number\r
1008  * @field\r
1009  * @example\r
1010  */\r
1011 \r
1012 /**\r
1013  * (Optional) The validation function.\r
1014  * @name CKEDITOR.dialog.definition.textInput.prototype.validate\r
1015  * @field\r
1016  * @type Function\r
1017  * @example\r
1018  */\r
1019 \r
1020 /**\r
1021  * The label of the UI element.\r
1022  * @name CKEDITOR.dialog.definition.textInput.prototype.label\r
1023  * @type String\r
1024  * @field\r
1025  * @example\r
1026  */\r
1027 \r
1028 // ----- textarea ------\r
1029 \r
1030 /**\r
1031  * The definition of a text field (multiple lines).\r
1032  * <div class="notapi">\r
1033  * This class is not really part of the API. It just illustrates the properties\r
1034  * that developers can use to define and create textarea.\r
1035  * <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
1036  * </div>\r
1037  * For a complete example of dialog definition, please check {@link CKEDITOR.dialog.add}.\r
1038  * @name CKEDITOR.dialog.definition.textarea\r
1039  * @extends CKEDITOR.dialog.definition.uiElement\r
1040  * @constructor\r
1041  * @example\r
1042  * // There is no constructor for this class, the user just has to define an\r
1043  * // object with the appropriate properties.\r
1044  *\r
1045  * // Example:\r
1046  * {\r
1047  *      <b>type : 'textarea',</b>\r
1048  *      id : 'message',\r
1049  *      label : 'Your comment',\r
1050  *      'default' : '',\r
1051  *      validate : function() {\r
1052  *              if ( this.getValue().length < 5 )\r
1053  *              {\r
1054  *                      api.openMsgDialog( 'The comment is too short.' );\r
1055  *                      return false;\r
1056  *              }\r
1057  *      }\r
1058  * }\r
1059  */\r
1060 \r
1061 /**\r
1062  * The number of rows.\r
1063  * @name CKEDITOR.dialog.definition.textarea.prototype.rows\r
1064  * @type Number\r
1065  * @field\r
1066  * @example\r
1067  */\r
1068 \r
1069 /**\r
1070  * The number of columns.\r
1071  * @name CKEDITOR.dialog.definition.textarea.prototype.cols\r
1072  * @type Number\r
1073  * @field\r
1074  * @example\r
1075  */\r
1076 \r
1077 /**\r
1078  * (Optional) The validation function.\r
1079  * @name CKEDITOR.dialog.definition.textarea.prototype.validate\r
1080  * @field\r
1081  * @type Function\r
1082  * @example\r
1083  */\r
1084 \r
1085 /**\r
1086  * The default value.\r
1087  * @name CKEDITOR.dialog.definition.textarea.prototype.default\r
1088  * @type String\r
1089  * @field\r
1090  * @example\r
1091  */\r
1092 \r
1093 /**\r
1094  * The label of the UI element.\r
1095  * @name CKEDITOR.dialog.definition.textarea.prototype.label\r
1096  * @type String\r
1097  * @field\r
1098  * @example\r
1099  */\r