sources/plugins/dialog/dialogDefinition.js

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