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