_source/plugins/dialogui/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 /** @fileoverview The "dialogui" plugin. */\r
   7 \r
   8 CKEDITOR.plugins.add( 'dialogui' );\r
   9 \r
  10 (function()\r
  11 {\r
  12         var initPrivateObject = function( elementDefinition )\r
  13         {\r
  14                 this._ || ( this._ = {} );\r
  15                 this._['default'] = this._.initValue = elementDefinition['default'] || '';\r
  16                 this._.required = elementDefinition[ 'required' ] || false;\r
  17                 var args = [ this._ ];\r
  18                 for ( var i = 1 ; i < arguments.length ; i++ )\r
  19                         args.push( arguments[i] );\r
  20                 args.push( true );\r
  21                 CKEDITOR.tools.extend.apply( CKEDITOR.tools, args );\r
  22                 return this._;\r
  23         },\r
  24         textBuilder =\r
  25         {\r
  26                 build : function( dialog, elementDefinition, output )\r
  27                 {\r
  28                         return new CKEDITOR.ui.dialog.textInput( dialog, elementDefinition, output );\r
  29                 }\r
  30         },\r
  31         commonBuilder =\r
  32         {\r
  33                 build : function( dialog, elementDefinition, output )\r
  34                 {\r
  35                         return new CKEDITOR.ui.dialog[elementDefinition.type]( dialog, elementDefinition, output );\r
  36                 }\r
  37         },\r
  38         containerBuilder =\r
  39         {\r
  40                 build : function( dialog, elementDefinition, output )\r
  41                 {\r
  42                         var children = elementDefinition.children,\r
  43                                 child,\r
  44                                 childHtmlList = [],\r
  45                                 childObjList = [];\r
  46                         for ( var i = 0 ; ( i < children.length && ( child = children[i] ) ) ; i++ )\r
  47                         {\r
  48                                 var childHtml = [];\r
  49                                 childHtmlList.push( childHtml );\r
  50                                 childObjList.push( CKEDITOR.dialog._.uiElementBuilders[ child.type ].build( dialog, child, childHtml ) );\r
  51                         }\r
  52                         return new CKEDITOR.ui.dialog[ elementDefinition.type ]( dialog, childObjList, childHtmlList, output, elementDefinition );\r
  53                 }\r
  54         },\r
  55         commonPrototype =\r
  56         {\r
  57                 isChanged : function()\r
  58                 {\r
  59                         return this.getValue() != this.getInitValue();\r
  60                 },\r
  61 \r
  62                 reset : function( noChangeEvent )\r
  63                 {\r
  64                         this.setValue( this.getInitValue(), noChangeEvent );\r
  65                 },\r
  66 \r
  67                 setInitValue : function()\r
  68                 {\r
  69                         this._.initValue = this.getValue();\r
  70                 },\r
  71 \r
  72                 resetInitValue : function()\r
  73                 {\r
  74                         this._.initValue = this._['default'];\r
  75                 },\r
  76 \r
  77                 getInitValue : function()\r
  78                 {\r
  79                         return this._.initValue;\r
  80                 }\r
  81         },\r
  82         commonEventProcessors = CKEDITOR.tools.extend( {}, CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors,\r
  83                 {\r
  84                         onChange : function( dialog, func )\r
  85                         {\r
  86                                 if ( !this._.domOnChangeRegistered )\r
  87                                 {\r
  88                                         dialog.on( 'load', function()\r
  89                                                 {\r
  90                                                         this.getInputElement().on( 'change', function()\r
  91                                                         {\r
  92                                                                 // Make sure 'onchange' doesn't get fired after dialog closed. (#5719)\r
  93                                                                 if ( !dialog.parts.dialog.isVisible() )\r
  94                                                                         return;\r
  95 \r
  96                                                                 this.fire( 'change', { value : this.getValue() } );\r
  97                                                         }, this );\r
  98                                                 }, this );\r
  99                                         this._.domOnChangeRegistered = true;\r
 100                                 }\r
 101 \r
 102                                 this.on( 'change', func );\r
 103                         }\r
 104                 }, true ),\r
 105         eventRegex = /^on([A-Z]\w+)/,\r
 106         cleanInnerDefinition = function( def )\r
 107         {\r
 108                 // An inner UI element should not have the parent's type, title or events.\r
 109                 for ( var i in def )\r
 110                 {\r
 111                         if ( eventRegex.test( i ) || i == 'title' || i == 'type' )\r
 112                                 delete def[i];\r
 113                 }\r
 114                 return def;\r
 115         };\r
 116 \r
 117         CKEDITOR.tools.extend( CKEDITOR.ui.dialog,\r
 118                 /** @lends CKEDITOR.ui.dialog */\r
 119                 {\r
 120                         /**\r
 121                          * Base class for all dialog elements with a textual label on the left.\r
 122                          * @constructor\r
 123                          * @example\r
 124                          * @extends CKEDITOR.ui.dialog.uiElement\r
 125                          * @param {CKEDITOR.dialog} dialog\r
 126                          * Parent dialog object.\r
 127                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 128                          * The element definition. Accepted fields:\r
 129                          * <ul>\r
 130                          *      <li><strong>label</strong> (Required) The label string.</li>\r
 131                          *      <li><strong>labelLayout</strong> (Optional) Put 'horizontal' here if the\r
 132                          *      label element is to be layed out horizontally. Otherwise a vertical\r
 133                          *      layout will be used.</li>\r
 134                          *      <li><strong>widths</strong> (Optional) This applies only for horizontal\r
 135                          *      layouts - an 2-element array of lengths to specify the widths of the\r
 136                          *      label and the content element.</li>\r
 137                          * </ul>\r
 138                          * @param {Array} htmlList\r
 139                          * List of HTML code to output to.\r
 140                          * @param {Function} contentHtml\r
 141                          * A function returning the HTML code string to be added inside the content\r
 142                          * cell.\r
 143                          */\r
 144                         labeledElement : function( dialog, elementDefinition, htmlList, contentHtml )\r
 145                         {\r
 146                                 if ( arguments.length < 4 )\r
 147                                         return;\r
 148 \r
 149                                 var _ = initPrivateObject.call( this, elementDefinition );\r
 150                                 _.labelId = CKEDITOR.tools.getNextId() + '_label';\r
 151                                 var children = this._.children = [];\r
 152                                 /** @ignore */\r
 153                                 var innerHTML = function()\r
 154                                 {\r
 155                                         var html = [],\r
 156                                                 requiredClass = elementDefinition.required ? ' cke_required' : '' ;\r
 157                                         if ( elementDefinition.labelLayout != 'horizontal' )\r
 158                                                 html.push( '<label class="cke_dialog_ui_labeled_label' + requiredClass + '" ',\r
 159                                                                 ' id="'+  _.labelId + '"',\r
 160                                                                 ( _.inputId? ' for="' + _.inputId + '"' : '' ),\r
 161                                                                 ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +'>',\r
 162                                                                 elementDefinition.label,\r
 163                                                                 '</label>',\r
 164                                                                 '<div class="cke_dialog_ui_labeled_content"' + ( elementDefinition.controlStyle ? ' style="' + elementDefinition.controlStyle + '"' : '' ) + ' role="presentation">',\r
 165                                                                 contentHtml.call( this, dialog, elementDefinition ),\r
 166                                                                 '</div>' );\r
 167                                         else\r
 168                                         {\r
 169                                                 var hboxDefinition = {\r
 170                                                         type : 'hbox',\r
 171                                                         widths : elementDefinition.widths,\r
 172                                                         padding : 0,\r
 173                                                         children :\r
 174                                                         [\r
 175                                                                 {\r
 176                                                                         type : 'html',\r
 177                                                                         html : '<label class="cke_dialog_ui_labeled_label' + requiredClass + '"' +\r
 178                                                                                 ' id="' + _.labelId + '"' +\r
 179                                                                                 ' for="' + _.inputId + '"' +\r
 180                                                                                 ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +'>' +\r
 181                                                                                    CKEDITOR.tools.htmlEncode( elementDefinition.label ) +\r
 182                                                                                 '</span>'\r
 183                                                                 },\r
 184                                                                 {\r
 185                                                                         type : 'html',\r
 186                                                                         html : '<span class="cke_dialog_ui_labeled_content"' + ( elementDefinition.controlStyle ? ' style="' + elementDefinition.controlStyle + '"' : '' ) + '>' +\r
 187                                                                                 contentHtml.call( this, dialog, elementDefinition ) +\r
 188                                                                                 '</span>'\r
 189                                                                 }\r
 190                                                         ]\r
 191                                                 };\r
 192                                                 CKEDITOR.dialog._.uiElementBuilders.hbox.build( dialog, hboxDefinition, html );\r
 193                                         }\r
 194                                         return html.join( '' );\r
 195                                 };\r
 196                                 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, { role : 'presentation' }, innerHTML );\r
 197                         },\r
 198 \r
 199                         /**\r
 200                          * A text input with a label. This UI element class represents both the\r
 201                          * single-line text inputs and password inputs in dialog boxes.\r
 202                          * @constructor\r
 203                          * @example\r
 204                          * @extends CKEDITOR.ui.dialog.labeledElement\r
 205                          * @param {CKEDITOR.dialog} dialog\r
 206                          * Parent dialog object.\r
 207                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 208                          * The element definition. Accepted fields:\r
 209                          * <ul>\r
 210                          *      <li><strong>default</strong> (Optional) The default value.</li>\r
 211                          *      <li><strong>validate</strong> (Optional) The validation function. </li>\r
 212                          *      <li><strong>maxLength</strong> (Optional) The maximum length of text box\r
 213                          *      contents.</li>\r
 214                          *      <li><strong>size</strong> (Optional) The size of the text box. This is\r
 215                          *      usually overridden by the size defined by the skin, however.</li>\r
 216                          * </ul>\r
 217                          * @param {Array} htmlList\r
 218                          * List of HTML code to output to.\r
 219                          */\r
 220                         textInput : function( dialog, elementDefinition, htmlList )\r
 221                         {\r
 222                                 if ( arguments.length < 3 )\r
 223                                         return;\r
 224 \r
 225                                 initPrivateObject.call( this, elementDefinition );\r
 226                                 var domId = this._.inputId = CKEDITOR.tools.getNextId() + '_textInput',\r
 227                                         attributes = { 'class' : 'cke_dialog_ui_input_' + elementDefinition.type, id : domId, type : elementDefinition.type },\r
 228                                         i;\r
 229 \r
 230                                 // Set the validator, if any.\r
 231                                 if ( elementDefinition.validate )\r
 232                                         this.validate = elementDefinition.validate;\r
 233 \r
 234                                 // Set the max length and size.\r
 235                                 if ( elementDefinition.maxLength )\r
 236                                         attributes.maxlength = elementDefinition.maxLength;\r
 237                                 if ( elementDefinition.size )\r
 238                                         attributes.size = elementDefinition.size;\r
 239 \r
 240                                 if ( elementDefinition.inputStyle )\r
 241                                         attributes.style = elementDefinition.inputStyle;\r
 242 \r
 243                                 /** @ignore */\r
 244                                 var innerHTML = function()\r
 245                                 {\r
 246                                         // IE BUG: Text input fields in IE at 100% would exceed a <td> or inline\r
 247                                         // container's width, so need to wrap it inside a <div>.\r
 248                                         var html = [ '<div class="cke_dialog_ui_input_', elementDefinition.type, '" role="presentation"' ];\r
 249 \r
 250                                         if ( elementDefinition.width )\r
 251                                                 html.push( 'style="width:'+ elementDefinition.width +'" ' );\r
 252 \r
 253                                         html.push( '><input ' );\r
 254 \r
 255                                         attributes[ 'aria-labelledby' ] = this._.labelId;\r
 256                                         this._.required && ( attributes[ 'aria-required' ] = this._.required );\r
 257                                         for ( var i in attributes )\r
 258                                                 html.push( i + '="' + attributes[i] + '" ' );\r
 259                                         html.push( ' /></div>' );\r
 260                                         return html.join( '' );\r
 261                                 };\r
 262                                 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );\r
 263                         },\r
 264 \r
 265                         /**\r
 266                          * A text area with a label on the top or left.\r
 267                          * @constructor\r
 268                          * @extends CKEDITOR.ui.dialog.labeledElement\r
 269                          * @example\r
 270                          * @param {CKEDITOR.dialog} dialog\r
 271                          * Parent dialog object.\r
 272                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 273                          * The element definition. Accepted fields:\r
 274                          * <ul>\r
 275                          *      <li><strong>rows</strong> (Optional) The number of rows displayed.\r
 276                          *      Defaults to 5 if not defined.</li>\r
 277                          *      <li><strong>cols</strong> (Optional) The number of cols displayed.\r
 278                          *      Defaults to 20 if not defined. Usually overridden by skins.</li>\r
 279                          *      <li><strong>default</strong> (Optional) The default value.</li>\r
 280                          *      <li><strong>validate</strong> (Optional) The validation function. </li>\r
 281                          * </ul>\r
 282                          * @param {Array} htmlList\r
 283                          * List of HTML code to output to.\r
 284                          */\r
 285                         textarea : function( dialog, elementDefinition, htmlList )\r
 286                         {\r
 287                                 if ( arguments.length < 3 )\r
 288                                         return;\r
 289 \r
 290                                 initPrivateObject.call( this, elementDefinition );\r
 291                                 var me = this,\r
 292                                         domId = this._.inputId = CKEDITOR.tools.getNextId() + '_textarea',\r
 293                                         attributes = {};\r
 294 \r
 295                                 if ( elementDefinition.validate )\r
 296                                         this.validate = elementDefinition.validate;\r
 297 \r
 298                                 // Generates the essential attributes for the textarea tag.\r
 299                                 attributes.rows = elementDefinition.rows || 5;\r
 300                                 attributes.cols = elementDefinition.cols || 20;\r
 301 \r
 302                                 if ( typeof elementDefinition.inputStyle != 'undefined' )\r
 303                                         attributes.style = elementDefinition.inputStyle;\r
 304 \r
 305 \r
 306                                 /** @ignore */\r
 307                                 var innerHTML = function()\r
 308                                 {\r
 309                                         attributes[ 'aria-labelledby' ] = this._.labelId;\r
 310                                         this._.required && ( attributes[ 'aria-required' ] = this._.required );\r
 311                                         var html = [ '<div class="cke_dialog_ui_input_textarea" role="presentation"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];\r
 312                                         for ( var i in attributes )\r
 313                                                 html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[i] ) + '" ' );\r
 314                                         html.push( '>', CKEDITOR.tools.htmlEncode( me._['default'] ), '</textarea></div>' );\r
 315                                         return html.join( '' );\r
 316                                 };\r
 317                                 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );\r
 318                         },\r
 319 \r
 320                         /**\r
 321                          * A single checkbox with a label on the right.\r
 322                          * @constructor\r
 323                          * @extends CKEDITOR.ui.dialog.uiElement\r
 324                          * @example\r
 325                          * @param {CKEDITOR.dialog} dialog\r
 326                          * Parent dialog object.\r
 327                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 328                          * The element definition. Accepted fields:\r
 329                          * <ul>\r
 330                          *      <li><strong>checked</strong> (Optional) Whether the checkbox is checked\r
 331                          *      on instantiation. Defaults to false.</li>\r
 332                          *      <li><strong>validate</strong> (Optional) The validation function.</li>\r
 333                          *      <li><strong>label</strong> (Optional) The checkbox label.</li>\r
 334                          * </ul>\r
 335                          * @param {Array} htmlList\r
 336                          * List of HTML code to output to.\r
 337                          */\r
 338                         checkbox : function( dialog, elementDefinition, htmlList )\r
 339                         {\r
 340                                 if ( arguments.length < 3 )\r
 341                                         return;\r
 342 \r
 343                                 var _ = initPrivateObject.call( this, elementDefinition, { 'default' : !!elementDefinition[ 'default' ] } );\r
 344 \r
 345                                 if ( elementDefinition.validate )\r
 346                                         this.validate = elementDefinition.validate;\r
 347 \r
 348                                 /** @ignore */\r
 349                                 var innerHTML = function()\r
 350                                 {\r
 351                                         var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,\r
 352                                                         {\r
 353                                                                 id : elementDefinition.id ? elementDefinition.id + '_checkbox' : CKEDITOR.tools.getNextId() + '_checkbox'\r
 354                                                         }, true ),\r
 355                                                 html = [];\r
 356 \r
 357                                         var labelId = CKEDITOR.tools.getNextId() + '_label';\r
 358                                         var attributes = { 'class' : 'cke_dialog_ui_checkbox_input', type : 'checkbox', 'aria-labelledby' : labelId };\r
 359                                         cleanInnerDefinition( myDefinition );\r
 360                                         if ( elementDefinition[ 'default' ] )\r
 361                                                 attributes.checked = 'checked';\r
 362 \r
 363                                         if ( typeof myDefinition.inputStyle != 'undefined' )\r
 364                                                 myDefinition.style = myDefinition.inputStyle;\r
 365 \r
 366                                         _.checkbox = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'input', null, attributes );\r
 367                                         html.push( ' <label id="', labelId, '" for="', attributes.id, '"' + ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) + '>',\r
 368                                                         CKEDITOR.tools.htmlEncode( elementDefinition.label ),\r
 369                                                         '</label>' );\r
 370                                         return html.join( '' );\r
 371                                 };\r
 372 \r
 373                                 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'span', null, null, innerHTML );\r
 374                         },\r
 375 \r
 376                         /**\r
 377                          * A group of radio buttons.\r
 378                          * @constructor\r
 379                          * @example\r
 380                          * @extends CKEDITOR.ui.dialog.labeledElement\r
 381                          * @param {CKEDITOR.dialog} dialog\r
 382                          * Parent dialog object.\r
 383                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 384                          * The element definition. Accepted fields:\r
 385                          * <ul>\r
 386                          *      <li><strong>default</strong> (Required) The default value.</li>\r
 387                          *      <li><strong>validate</strong> (Optional) The validation function.</li>\r
 388                          *      <li><strong>items</strong> (Required) An array of options. Each option\r
 389                          *      is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value'\r
 390                          *      is missing, then the value would be assumed to be the same as the\r
 391                          *      description.</li>\r
 392                          * </ul>\r
 393                          * @param {Array} htmlList\r
 394                          * List of HTML code to output to.\r
 395                          */\r
 396                         radio : function( dialog, elementDefinition, htmlList )\r
 397                         {\r
 398                                 if ( arguments.length < 3)\r
 399                                         return;\r
 400 \r
 401                                 initPrivateObject.call( this, elementDefinition );\r
 402                                 if ( !this._['default'] )\r
 403                                         this._['default'] = this._.initValue = elementDefinition.items[0][1];\r
 404                                 if ( elementDefinition.validate )\r
 405                                         this.validate = elementDefinition.valdiate;\r
 406                                 var children = [], me = this;\r
 407 \r
 408                                 /** @ignore */\r
 409                                 var innerHTML = function()\r
 410                                 {\r
 411                                         var inputHtmlList = [], html = [],\r
 412                                                 commonAttributes = { 'class' : 'cke_dialog_ui_radio_item', 'aria-labelledby' : this._.labelId },\r
 413                                                 commonName = elementDefinition.id ? elementDefinition.id + '_radio' : CKEDITOR.tools.getNextId() + '_radio';\r
 414                                         for ( var i = 0 ; i < elementDefinition.items.length ; i++ )\r
 415                                         {\r
 416                                                 var item = elementDefinition.items[i],\r
 417                                                         title = item[2] !== undefined ? item[2] : item[0],\r
 418                                                         value = item[1] !== undefined ? item[1] : item[0],\r
 419                                                         inputId = CKEDITOR.tools.getNextId() + '_radio_input',\r
 420                                                         labelId = inputId + '_label',\r
 421                                                         inputDefinition = CKEDITOR.tools.extend( {}, elementDefinition,\r
 422                                                                         {\r
 423                                                                                 id : inputId,\r
 424                                                                                 title : null,\r
 425                                                                                 type : null\r
 426                                                                         }, true ),\r
 427                                                         labelDefinition = CKEDITOR.tools.extend( {}, inputDefinition,\r
 428                                                                         {\r
 429                                                                                 title : title\r
 430                                                                         }, true ),\r
 431                                                         inputAttributes =\r
 432                                                         {\r
 433                                                                 type : 'radio',\r
 434                                                                 'class' : 'cke_dialog_ui_radio_input',\r
 435                                                                 name : commonName,\r
 436                                                                 value : value,\r
 437                                                                 'aria-labelledby' : labelId\r
 438                                                         },\r
 439                                                         inputHtml = [];\r
 440                                                 if ( me._['default'] == value )\r
 441                                                         inputAttributes.checked = 'checked';\r
 442                                                 cleanInnerDefinition( inputDefinition );\r
 443                                                 cleanInnerDefinition( labelDefinition );\r
 444 \r
 445                                                 if ( typeof inputDefinition.inputStyle != 'undefined' )\r
 446                                                         inputDefinition.style = inputDefinition.inputStyle;\r
 447 \r
 448                                                 children.push( new CKEDITOR.ui.dialog.uiElement( dialog, inputDefinition, inputHtml, 'input', null, inputAttributes ) );\r
 449                                                 inputHtml.push( ' ' );\r
 450                                                 new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { id : labelId, 'for' : inputAttributes.id },\r
 451                                                            item[0] );\r
 452                                                 inputHtmlList.push( inputHtml.join( '' ) );\r
 453                                         }\r
 454                                         new CKEDITOR.ui.dialog.hbox( dialog, children, inputHtmlList, html );\r
 455                                         return html.join( '' );\r
 456                                 };\r
 457 \r
 458                                 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );\r
 459                                 this._.children = children;\r
 460                         },\r
 461 \r
 462                         /**\r
 463                          * A button with a label inside.\r
 464                          * @constructor\r
 465                          * @example\r
 466                          * @extends CKEDITOR.ui.dialog.uiElement\r
 467                          * @param {CKEDITOR.dialog} dialog\r
 468                          * Parent dialog object.\r
 469                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 470                          * The element definition. Accepted fields:\r
 471                          * <ul>\r
 472                          *      <li><strong>label</strong> (Required) The button label.</li>\r
 473                          *      <li><strong>disabled</strong> (Optional) Set to true if you want the\r
 474                          *      button to appear in disabled state.</li>\r
 475                          * </ul>\r
 476                          * @param {Array} htmlList\r
 477                          * List of HTML code to output to.\r
 478                          */\r
 479                         button : function( dialog, elementDefinition, htmlList )\r
 480                         {\r
 481                                 if ( !arguments.length )\r
 482                                         return;\r
 483 \r
 484                                 if ( typeof elementDefinition == 'function' )\r
 485                                         elementDefinition = elementDefinition( dialog.getParentEditor() );\r
 486 \r
 487                                 initPrivateObject.call( this, elementDefinition, { disabled : elementDefinition.disabled || false } );\r
 488 \r
 489                                 // Add OnClick event to this input.\r
 490                                 CKEDITOR.event.implementOn( this );\r
 491 \r
 492                                 var me = this;\r
 493 \r
 494                                 // Register an event handler for processing button clicks.\r
 495                                 dialog.on( 'load', function( eventInfo )\r
 496                                         {\r
 497                                                 var element = this.getElement();\r
 498 \r
 499                                                 (function()\r
 500                                                 {\r
 501                                                         element.on( 'click', function( evt )\r
 502                                                                 {\r
 503                                                                         me.fire( 'click', { dialog : me.getDialog() } );\r
 504                                                                         evt.data.preventDefault();\r
 505                                                                 } );\r
 506 \r
 507                                                         element.on( 'keydown', function( evt )\r
 508                                                                 {\r
 509                                                                         if ( evt.data.getKeystroke() in { 32:1 } )\r
 510                                                                         {\r
 511                                                                                 me.click();\r
 512                                                                                 evt.data.preventDefault();\r
 513                                                                         }\r
 514                                                                 } );\r
 515                                                 })();\r
 516 \r
 517                                                 element.unselectable();\r
 518                                         }, this );\r
 519 \r
 520                                 var outerDefinition = CKEDITOR.tools.extend( {}, elementDefinition );\r
 521                                 delete outerDefinition.style;\r
 522 \r
 523                                 var labelId = CKEDITOR.tools.getNextId() + '_label';\r
 524                                 CKEDITOR.ui.dialog.uiElement.call(\r
 525                                         this,\r
 526                                         dialog,\r
 527                                         outerDefinition,\r
 528                                         htmlList,\r
 529                                         'a',\r
 530                                         null,\r
 531                                         {\r
 532                                                 style : elementDefinition.style,\r
 533                                                 href : 'javascript:void(0)',\r
 534                                                 title : elementDefinition.label,\r
 535                                                 hidefocus : 'true',\r
 536                                                 'class' : elementDefinition['class'],\r
 537                                                 role : 'button',\r
 538                                                 'aria-labelledby' : labelId\r
 539                                         },\r
 540                                         '<span id="' + labelId + '" class="cke_dialog_ui_button">' +\r
 541                                                 CKEDITOR.tools.htmlEncode( elementDefinition.label ) +\r
 542                                         '</span>' );\r
 543                         },\r
 544 \r
 545                         /**\r
 546                          * A select box.\r
 547                          * @extends CKEDITOR.ui.dialog.uiElement\r
 548                          * @example\r
 549                          * @constructor\r
 550                          * @param {CKEDITOR.dialog} dialog\r
 551                          * Parent dialog object.\r
 552                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 553                          * The element definition. Accepted fields:\r
 554                          * <ul>\r
 555                          *      <li><strong>default</strong> (Required) The default value.</li>\r
 556                          *      <li><strong>validate</strong> (Optional) The validation function.</li>\r
 557                          *      <li><strong>items</strong> (Required) An array of options. Each option\r
 558                          *      is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value'\r
 559                          *      is missing, then the value would be assumed to be the same as the\r
 560                          *      description.</li>\r
 561                          *      <li><strong>multiple</strong> (Optional) Set this to true if you'd like\r
 562                          *      to have a multiple-choice select box.</li>\r
 563                          *      <li><strong>size</strong> (Optional) The number of items to display in\r
 564                          *      the select box.</li>\r
 565                          * </ul>\r
 566                          * @param {Array} htmlList\r
 567                          * List of HTML code to output to.\r
 568                          */\r
 569                         select : function( dialog, elementDefinition, htmlList )\r
 570                         {\r
 571                                 if ( arguments.length < 3 )\r
 572                                         return;\r
 573 \r
 574                                 var _ = initPrivateObject.call( this, elementDefinition );\r
 575 \r
 576                                 if ( elementDefinition.validate )\r
 577                                         this.validate = elementDefinition.validate;\r
 578 \r
 579                                 _.inputId = CKEDITOR.tools.getNextId() + '_select';\r
 580                                 /** @ignore */\r
 581                                 var innerHTML = function()\r
 582                                 {\r
 583                                         var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,\r
 584                                                         {\r
 585                                                                 id : elementDefinition.id ? elementDefinition.id + '_select' : CKEDITOR.tools.getNextId() + '_select'\r
 586                                                         }, true ),\r
 587                                                 html = [],\r
 588                                                 innerHTML = [],\r
 589                                                 attributes = { 'id' : _.inputId, 'class' : 'cke_dialog_ui_input_select', 'aria-labelledby' : this._.labelId };\r
 590 \r
 591                                         // Add multiple and size attributes from element definition.\r
 592                                         if ( elementDefinition.size != undefined )\r
 593                                                 attributes.size = elementDefinition.size;\r
 594                                         if ( elementDefinition.multiple != undefined )\r
 595                                                 attributes.multiple = elementDefinition.multiple;\r
 596 \r
 597                                         cleanInnerDefinition( myDefinition );\r
 598                                         for ( var i = 0, item ; i < elementDefinition.items.length && ( item = elementDefinition.items[i] ) ; i++ )\r
 599                                         {\r
 600                                                 innerHTML.push( '<option value="',\r
 601                                                         CKEDITOR.tools.htmlEncode( item[1] !== undefined ? item[1] : item[0] ).replace( /"/g, '&quot;' ), '" /> ',\r
 602                                                         CKEDITOR.tools.htmlEncode( item[0] ) );\r
 603                                         }\r
 604 \r
 605                                         if ( typeof myDefinition.inputStyle != 'undefined' )\r
 606                                                 myDefinition.style = myDefinition.inputStyle;\r
 607 \r
 608                                         _.select = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'select', null, attributes, innerHTML.join( '' ) );\r
 609                                         return html.join( '' );\r
 610                                 };\r
 611 \r
 612                                 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );\r
 613                         },\r
 614 \r
 615                         /**\r
 616                          * A file upload input.\r
 617                          * @extends CKEDITOR.ui.dialog.labeledElement\r
 618                          * @example\r
 619                          * @constructor\r
 620                          * @param {CKEDITOR.dialog} dialog\r
 621                          * Parent dialog object.\r
 622                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 623                          * The element definition. Accepted fields:\r
 624                          * <ul>\r
 625                          *      <li><strong>validate</strong> (Optional) The validation function.</li>\r
 626                          * </ul>\r
 627                          * @param {Array} htmlList\r
 628                          * List of HTML code to output to.\r
 629                          */\r
 630                         file : function( dialog, elementDefinition, htmlList )\r
 631                         {\r
 632                                 if ( arguments.length < 3 )\r
 633                                         return;\r
 634 \r
 635                                 if ( elementDefinition['default'] === undefined )\r
 636                                         elementDefinition['default'] = '';\r
 637 \r
 638                                 var _ = CKEDITOR.tools.extend( initPrivateObject.call( this, elementDefinition ), { definition : elementDefinition, buttons : [] } );\r
 639 \r
 640                                 if ( elementDefinition.validate )\r
 641                                         this.validate = elementDefinition.validate;\r
 642 \r
 643                                 /** @ignore */\r
 644                                 var innerHTML = function()\r
 645                                 {\r
 646                                         _.frameId = CKEDITOR.tools.getNextId() + '_fileInput';\r
 647 \r
 648                                         // Support for custom document.domain in IE.\r
 649                                         var isCustomDomain = CKEDITOR.env.isCustomDomain();\r
 650 \r
 651                                         var html = [\r
 652                                                 '<iframe' +\r
 653                                                         ' frameborder="0"' +\r
 654                                                         ' allowtransparency="0"' +\r
 655                                                         ' class="cke_dialog_ui_input_file"' +\r
 656                                                         ' role="presentation"' +\r
 657                                                         ' id="', _.frameId, '"' +\r
 658                                                         ' title="', elementDefinition.label, '"' +\r
 659                                                         ' src="javascript:void(' ];\r
 660 \r
 661                                         html.push(\r
 662                                                         isCustomDomain ?\r
 663                                                                 '(function(){' +\r
 664                                                                         'document.open();' +\r
 665                                                                         'document.domain=\'' + document.domain + '\';' +\r
 666                                                                         'document.close();' +\r
 667                                                                 '})()'\r
 668                                                         :\r
 669                                                                 '0' );\r
 670 \r
 671                                         html.push(\r
 672                                                         ')">' +\r
 673                                                 '</iframe>' );\r
 674 \r
 675                                         return html.join( '' );\r
 676                                 };\r
 677 \r
 678                                 // IE BUG: Parent container does not resize to contain the iframe automatically.\r
 679                                 dialog.on( 'load', function()\r
 680                                         {\r
 681                                                 var iframe = CKEDITOR.document.getById( _.frameId ),\r
 682                                                         contentDiv = iframe.getParent();\r
 683                                                 contentDiv.addClass( 'cke_dialog_ui_input_file' );\r
 684                                         } );\r
 685 \r
 686                                 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );\r
 687                         },\r
 688 \r
 689                         /**\r
 690                          * A button for submitting the file in a file upload input.\r
 691                          * @extends CKEDITOR.ui.dialog.button\r
 692                          * @example\r
 693                          * @constructor\r
 694                          * @param {CKEDITOR.dialog} dialog\r
 695                          * Parent dialog object.\r
 696                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 697                          * The element definition. Accepted fields:\r
 698                          * <ul>\r
 699                          *      <li><strong>for</strong> (Required) The file input's page and element Id\r
 700                          *      to associate to, in a 2-item array format: [ 'page_id', 'element_id' ].\r
 701                          *      </li>\r
 702                          *      <li><strong>validate</strong> (Optional) The validation function.</li>\r
 703                          * </ul>\r
 704                          * @param {Array} htmlList\r
 705                          * List of HTML code to output to.\r
 706                          */\r
 707                         fileButton : function( dialog, elementDefinition, htmlList )\r
 708                         {\r
 709                                 if ( arguments.length < 3 )\r
 710                                         return;\r
 711 \r
 712                                 var _ = initPrivateObject.call( this, elementDefinition ),\r
 713                                         me = this;\r
 714 \r
 715                                 if ( elementDefinition.validate )\r
 716                                         this.validate = elementDefinition.validate;\r
 717 \r
 718                                 var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition );\r
 719                                 var onClick = myDefinition.onClick;\r
 720                                 myDefinition.className = ( myDefinition.className ? myDefinition.className + ' ' : '' ) + 'cke_dialog_ui_button';\r
 721                                 myDefinition.onClick = function( evt )\r
 722                                 {\r
 723                                         var target = elementDefinition[ 'for' ];                // [ pageId, elementId ]\r
 724                                         if ( !onClick || onClick.call( this, evt ) !== false )\r
 725                                         {\r
 726                                                 dialog.getContentElement( target[0], target[1] ).submit();\r
 727                                                 this.disable();\r
 728                                         }\r
 729                                 };\r
 730 \r
 731                                 dialog.on( 'load', function()\r
 732                                                 {\r
 733                                                         dialog.getContentElement( elementDefinition[ 'for' ][0], elementDefinition[ 'for' ][1] )._.buttons.push( me );\r
 734                                                 } );\r
 735 \r
 736                                 CKEDITOR.ui.dialog.button.call( this, dialog, myDefinition, htmlList );\r
 737                         },\r
 738 \r
 739                         html : (function()\r
 740                         {\r
 741                                 var myHtmlRe = /^\s*<[\w:]+\s+([^>]*)?>/,\r
 742                                         theirHtmlRe = /^(\s*<[\w:]+(?:\s+[^>]*)?)((?:.|\r|\n)+)$/,\r
 743                                         emptyTagRe = /\/$/;\r
 744                                 /**\r
 745                                  * A dialog element made from raw HTML code.\r
 746                                  * @extends CKEDITOR.ui.dialog.uiElement\r
 747                                  * @name CKEDITOR.ui.dialog.html\r
 748                                  * @param {CKEDITOR.dialog} dialog Parent dialog object.\r
 749                                  * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition Element definition.\r
 750                                  * Accepted fields:\r
 751                                  * <ul>\r
 752                                  *      <li><strong>html</strong> (Required) HTML code of this element.</li>\r
 753                                  * </ul>\r
 754                                  * @param {Array} htmlList List of HTML code to be added to the dialog's content area.\r
 755                                  * @example\r
 756                                  * @constructor\r
 757                                  */\r
 758                                 return function( dialog, elementDefinition, htmlList )\r
 759                                 {\r
 760                                         if ( arguments.length < 3 )\r
 761                                                 return;\r
 762 \r
 763                                         var myHtmlList = [],\r
 764                                                 myHtml,\r
 765                                                 theirHtml = elementDefinition.html,\r
 766                                                 myMatch, theirMatch;\r
 767 \r
 768                                         // If the HTML input doesn't contain any tags at the beginning, add a <span> tag around it.\r
 769                                         if ( theirHtml.charAt( 0 ) != '<' )\r
 770                                                 theirHtml = '<span>' + theirHtml + '</span>';\r
 771 \r
 772                                         // Look for focus function in definition.\r
 773                                         var focus = elementDefinition.focus;\r
 774                                         if ( focus )\r
 775                                         {\r
 776                                                 var oldFocus = this.focus;\r
 777                                                 this.focus = function()\r
 778                                                 {\r
 779                                                         oldFocus.call( this );\r
 780                                                         typeof focus == 'function' && focus.call( this );\r
 781                                                         this.fire( 'focus' );\r
 782                                                 };\r
 783                                                 if ( elementDefinition.isFocusable )\r
 784                                                 {\r
 785                                                         var oldIsFocusable = this.isFocusable;\r
 786                                                         this.isFocusable = oldIsFocusable;\r
 787                                                 }\r
 788                                                 this.keyboardFocusable = true;\r
 789                                         }\r
 790 \r
 791                                         CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, myHtmlList, 'span', null, null, '' );\r
 792 \r
 793                                         // Append the attributes created by the uiElement call to the real HTML.\r
 794                                         myHtml = myHtmlList.join( '' );\r
 795                                         myMatch = myHtml.match( myHtmlRe );\r
 796                                         theirMatch = theirHtml.match( theirHtmlRe ) || [ '', '', '' ];\r
 797 \r
 798                                         if ( emptyTagRe.test( theirMatch[1] ) )\r
 799                                         {\r
 800                                                 theirMatch[1] = theirMatch[1].slice( 0, -1 );\r
 801                                                 theirMatch[2] = '/' + theirMatch[2];\r
 802                                         }\r
 803 \r
 804                                         htmlList.push( [ theirMatch[1], ' ', myMatch[1] || '', theirMatch[2] ].join( '' ) );\r
 805                                 };\r
 806                         })(),\r
 807 \r
 808                         /**\r
 809                          * Form fieldset for grouping dialog UI elements.\r
 810                          * @constructor\r
 811                          * @extends CKEDITOR.ui.dialog.uiElement\r
 812                          * @param {CKEDITOR.dialog} dialog Parent dialog object.\r
 813                          * @param {Array} childObjList\r
 814                          * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this\r
 815                          * container.\r
 816                          * @param {Array} childHtmlList\r
 817                          * Array of HTML code that correspond to the HTML output of all the\r
 818                          * objects in childObjList.\r
 819                          * @param {Array} htmlList\r
 820                          * Array of HTML code that this element will output to.\r
 821                          * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
 822                          * The element definition. Accepted fields:\r
 823                          * <ul>\r
 824                          *      <li><strong>label</strong> (Optional) The legend of the this fieldset.</li>\r
 825                          *      <li><strong>children</strong> (Required) An array of dialog field definitions which will be grouped inside this fieldset. </li>\r
 826                          * </ul>\r
 827                          */\r
 828                         fieldset : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )\r
 829                         {\r
 830                                 var legendLabel = elementDefinition.label;\r
 831                                 /** @ignore */\r
 832                                 var innerHTML = function()\r
 833                                 {\r
 834                                         var html = [];\r
 835                                         legendLabel && html.push( '<legend' +\r
 836                                                 ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +\r
 837                                                 '>' + legendLabel + '</legend>' );\r
 838                                         for ( var i = 0; i < childHtmlList.length; i++ )\r
 839                                                 html.push( childHtmlList[ i ] );\r
 840                                         return html.join( '' );\r
 841                                 };\r
 842 \r
 843                                 this._ = { children : childObjList };\r
 844                                 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'fieldset', null, null, innerHTML );\r
 845                         }\r
 846 \r
 847                 }, true );\r
 848 \r
 849         CKEDITOR.ui.dialog.html.prototype = new CKEDITOR.ui.dialog.uiElement;\r
 850 \r
 851         CKEDITOR.ui.dialog.labeledElement.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,\r
 852                         /** @lends CKEDITOR.ui.dialog.labeledElement.prototype */\r
 853                         {\r
 854                                 /**\r
 855                                  * Sets the label text of the element.\r
 856                                  * @param {String} label The new label text.\r
 857                                  * @returns {CKEDITOR.ui.dialog.labeledElement} The current labeled element.\r
 858                                  * @example\r
 859                                  */\r
 860                                 setLabel : function( label )\r
 861                                 {\r
 862                                         var node = CKEDITOR.document.getById( this._.labelId );\r
 863                                         if ( node.getChildCount() < 1 )\r
 864                                                 ( new CKEDITOR.dom.text( label, CKEDITOR.document ) ).appendTo( node );\r
 865                                         else\r
 866                                                 node.getChild( 0 ).$.nodeValue = label;\r
 867                                         return this;\r
 868                                 },\r
 869 \r
 870                                 /**\r
 871                                  * Retrieves the current label text of the elment.\r
 872                                  * @returns {String} The current label text.\r
 873                                  * @example\r
 874                                  */\r
 875                                 getLabel : function()\r
 876                                 {\r
 877                                         var node = CKEDITOR.document.getById( this._.labelId );\r
 878                                         if ( !node || node.getChildCount() < 1 )\r
 879                                                 return '';\r
 880                                         else\r
 881                                                 return node.getChild( 0 ).getText();\r
 882                                 },\r
 883 \r
 884                                 /**\r
 885                                  * Defines the onChange event for UI element definitions.\r
 886                                  * @field\r
 887                                  * @type Object\r
 888                                  * @example\r
 889                                  */\r
 890                                 eventProcessors : commonEventProcessors\r
 891                         }, true );\r
 892 \r
 893         CKEDITOR.ui.dialog.button.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,\r
 894                         /** @lends CKEDITOR.ui.dialog.button.prototype */\r
 895                         {\r
 896                                 /**\r
 897                                  * Simulates a click to the button.\r
 898                                  * @example\r
 899                                  * @returns {Object} Return value of the 'click' event.\r
 900                                  */\r
 901                                 click : function()\r
 902                                 {\r
 903                                         if ( !this._.disabled )\r
 904                                                 return this.fire( 'click', { dialog : this._.dialog } );\r
 905                                         this.getElement().$.blur();\r
 906                                         return false;\r
 907                                 },\r
 908 \r
 909                                 /**\r
 910                                  * Enables the button.\r
 911                                  * @example\r
 912                                  */\r
 913                                 enable : function()\r
 914                                 {\r
 915                                         this._.disabled = false;\r
 916                                         var element = this.getElement();\r
 917                                         element && element.removeClass( 'cke_disabled' );\r
 918                                 },\r
 919 \r
 920                                 /**\r
 921                                  * Disables the button.\r
 922                                  * @example\r
 923                                  */\r
 924                                 disable : function()\r
 925                                 {\r
 926                                         this._.disabled = true;\r
 927                                         this.getElement().addClass( 'cke_disabled' );\r
 928                                 },\r
 929 \r
 930                                 isVisible : function()\r
 931                                 {\r
 932                                         return this.getElement().getFirst().isVisible();\r
 933                                 },\r
 934 \r
 935                                 isEnabled : function()\r
 936                                 {\r
 937                                         return !this._.disabled;\r
 938                                 },\r
 939 \r
 940                                 /**\r
 941                                  * Defines the onChange event and onClick for button element definitions.\r
 942                                  * @field\r
 943                                  * @type Object\r
 944                                  * @example\r
 945                                  */\r
 946                                 eventProcessors : CKEDITOR.tools.extend( {}, CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors,\r
 947                                         {\r
 948                                                 /** @ignore */\r
 949                                                 onClick : function( dialog, func )\r
 950                                                 {\r
 951                                                         this.on( 'click', function()\r
 952                                                                 {\r
 953                                                                         // Some browsers (Chrome, IE8, IE7 compat mode) don't move\r
 954                                                                         // focus to clicked button. Force this.\r
 955                                                                         this.getElement().focus();\r
 956                                                                         func.apply( this, arguments );\r
 957                                                                 });\r
 958                                                 }\r
 959                                         }, true ),\r
 960 \r
 961                                 /**\r
 962                                  * Handler for the element's access key up event. Simulates a click to\r
 963                                  * the button.\r
 964                                  * @example\r
 965                                  */\r
 966                                 accessKeyUp : function()\r
 967                                 {\r
 968                                         this.click();\r
 969                                 },\r
 970 \r
 971                                 /**\r
 972                                  * Handler for the element's access key down event. Simulates a mouse\r
 973                                  * down to the button.\r
 974                                  * @example\r
 975                                  */\r
 976                                 accessKeyDown : function()\r
 977                                 {\r
 978                                         this.focus();\r
 979                                 },\r
 980 \r
 981                                 keyboardFocusable : true\r
 982                         }, true );\r
 983 \r
 984         CKEDITOR.ui.dialog.textInput.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,\r
 985                         /** @lends CKEDITOR.ui.dialog.textInput.prototype */\r
 986                         {\r
 987                                 /**\r
 988                                  * Gets the text input DOM element under this UI object.\r
 989                                  * @example\r
 990                                  * @returns {CKEDITOR.dom.element} The DOM element of the text input.\r
 991                                  */\r
 992                                 getInputElement : function()\r
 993                                 {\r
 994                                         return CKEDITOR.document.getById( this._.inputId );\r
 995                                 },\r
 996 \r
 997                                 /**\r
 998                                  * Puts focus into the text input.\r
 999                                  * @example\r
1000                                  */\r
1001                                 focus : function()\r
1002                                 {\r
1003                                         var me = this.selectParentTab();\r
1004 \r
1005                                         // GECKO BUG: setTimeout() is needed to workaround invisible selections.\r
1006                                         setTimeout( function()\r
1007                                                 {\r
1008                                                         var element = me.getInputElement();\r
1009                                                         element && element.$.focus();\r
1010                                                 }, 0 );\r
1011                                 },\r
1012 \r
1013                                 /**\r
1014                                  * Selects all the text in the text input.\r
1015                                  * @example\r
1016                                  */\r
1017                                 select : function()\r
1018                                 {\r
1019                                         var me = this.selectParentTab();\r
1020 \r
1021                                         // GECKO BUG: setTimeout() is needed to workaround invisible selections.\r
1022                                         setTimeout( function()\r
1023                                                 {\r
1024                                                         var e = me.getInputElement();\r
1025                                                         if ( e )\r
1026                                                         {\r
1027                                                                 e.$.focus();\r
1028                                                                 e.$.select();\r
1029                                                         }\r
1030                                                 }, 0 );\r
1031                                 },\r
1032 \r
1033                                 /**\r
1034                                  * Handler for the text input's access key up event. Makes a select()\r
1035                                  * call to the text input.\r
1036                                  * @example\r
1037                                  */\r
1038                                 accessKeyUp : function()\r
1039                                 {\r
1040                                         this.select();\r
1041                                 },\r
1042 \r
1043                                 /**\r
1044                                  * Sets the value of this text input object.\r
1045                                  * @param {Object} value The new value.\r
1046                                  * @returns {CKEDITOR.ui.dialog.textInput} The current UI element.\r
1047                                  * @example\r
1048                                  * uiElement.setValue( 'Blamo' );\r
1049                                  */\r
1050                                 setValue : function( value )\r
1051                                 {\r
1052                                         !value && ( value = '' );\r
1053                                         return CKEDITOR.ui.dialog.uiElement.prototype.setValue.apply( this, arguments );\r
1054                                 },\r
1055 \r
1056                                 keyboardFocusable : true\r
1057                         }, commonPrototype, true );\r
1058 \r
1059         CKEDITOR.ui.dialog.textarea.prototype = new CKEDITOR.ui.dialog.textInput();\r
1060 \r
1061         CKEDITOR.ui.dialog.select.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,\r
1062                         /** @lends CKEDITOR.ui.dialog.select.prototype */\r
1063                         {\r
1064                                 /**\r
1065                                  * Gets the DOM element of the select box.\r
1066                                  * @returns {CKEDITOR.dom.element} The &lt;select&gt; element of this UI\r
1067                                  * element.\r
1068                                  * @example\r
1069                                  */\r
1070                                 getInputElement : function()\r
1071                                 {\r
1072                                         return this._.select.getElement();\r
1073                                 },\r
1074 \r
1075                                 /**\r
1076                                  * Adds an option to the select box.\r
1077                                  * @param {String} label Option label.\r
1078                                  * @param {String} value (Optional) Option value, if not defined it'll be\r
1079                                  * assumed to be the same as the label.\r
1080                                  * @param {Number} index (Optional) Position of the option to be inserted\r
1081                                  * to. If not defined the new option will be inserted to the end of list.\r
1082                                  * @example\r
1083                                  * @returns {CKEDITOR.ui.dialog.select} The current select UI element.\r
1084                                  */\r
1085                                 add : function( label, value, index )\r
1086                                 {\r
1087                                         var option = new CKEDITOR.dom.element( 'option', this.getDialog().getParentEditor().document ),\r
1088                                                 selectElement = this.getInputElement().$;\r
1089                                         option.$.text = label;\r
1090                                         option.$.value = ( value === undefined || value === null ) ? label : value;\r
1091                                         if ( index === undefined || index === null )\r
1092                                         {\r
1093                                                 if ( CKEDITOR.env.ie )\r
1094                                                         selectElement.add( option.$ );\r
1095                                                 else\r
1096                                                         selectElement.add( option.$, null );\r
1097                                         }\r
1098                                         else\r
1099                                                 selectElement.add( option.$, index );\r
1100                                         return this;\r
1101                                 },\r
1102 \r
1103                                 /**\r
1104                                  * Removes an option from the selection list.\r
1105                                  * @param {Number} index Index of the option to be removed.\r
1106                                  * @example\r
1107                                  * @returns {CKEDITOR.ui.dialog.select} The current select UI element.\r
1108                                  */\r
1109                                 remove : function( index )\r
1110                                 {\r
1111                                         var selectElement = this.getInputElement().$;\r
1112                                         selectElement.remove( index );\r
1113                                         return this;\r
1114                                 },\r
1115 \r
1116                                 /**\r
1117                                  * Clears all options out of the selection list.\r
1118                                  * @returns {CKEDITOR.ui.dialog.select} The current select UI element.\r
1119                                  */\r
1120                                 clear : function()\r
1121                                 {\r
1122                                         var selectElement = this.getInputElement().$;\r
1123                                         while ( selectElement.length > 0 )\r
1124                                                 selectElement.remove( 0 );\r
1125                                         return this;\r
1126                                 },\r
1127 \r
1128                                 keyboardFocusable : true\r
1129                         }, commonPrototype, true );\r
1130 \r
1131         CKEDITOR.ui.dialog.checkbox.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,\r
1132                         /** @lends CKEDITOR.ui.dialog.checkbox.prototype */\r
1133                         {\r
1134                                 /**\r
1135                                  * Gets the checkbox DOM element.\r
1136                                  * @example\r
1137                                  * @returns {CKEDITOR.dom.element} The DOM element of the checkbox.\r
1138                                  */\r
1139                                 getInputElement : function()\r
1140                                 {\r
1141                                         return this._.checkbox.getElement();\r
1142                                 },\r
1143 \r
1144                                 /**\r
1145                                  * Sets the state of the checkbox.\r
1146                                  * @example\r
1147                                  * @param {Boolean} true to tick the checkbox, false to untick it.\r
1148                                  * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.\r
1149                                  */\r
1150                                 setValue : function( checked, noChangeEvent )\r
1151                                 {\r
1152                                         this.getInputElement().$.checked = checked;\r
1153                                         !noChangeEvent && this.fire( 'change', { value : checked } );\r
1154                                 },\r
1155 \r
1156                                 /**\r
1157                                  * Gets the state of the checkbox.\r
1158                                  * @example\r
1159                                  * @returns {Boolean} true means the checkbox is ticked, false means it's not ticked.\r
1160                                  */\r
1161                                 getValue : function()\r
1162                                 {\r
1163                                         return this.getInputElement().$.checked;\r
1164                                 },\r
1165 \r
1166                                 /**\r
1167                                  * Handler for the access key up event. Toggles the checkbox.\r
1168                                  * @example\r
1169                                  */\r
1170                                 accessKeyUp : function()\r
1171                                 {\r
1172                                         this.setValue( !this.getValue() );\r
1173                                 },\r
1174 \r
1175                                 /**\r
1176                                  * Defines the onChange event for UI element definitions.\r
1177                                  * @field\r
1178                                  * @type Object\r
1179                                  * @example\r
1180                                  */\r
1181                                 eventProcessors :\r
1182                                 {\r
1183                                         onChange : function( dialog, func )\r
1184                                         {\r
1185                                                 if ( !CKEDITOR.env.ie || ( CKEDITOR.env.version > 8 ) )\r
1186                                                         return commonEventProcessors.onChange.apply( this, arguments );\r
1187                                                 else\r
1188                                                 {\r
1189                                                         dialog.on( 'load', function()\r
1190                                                                 {\r
1191                                                                         var element = this._.checkbox.getElement();\r
1192                                                                         element.on( 'propertychange', function( evt )\r
1193                                                                                 {\r
1194                                                                                         evt = evt.data.$;\r
1195                                                                                         if ( evt.propertyName == 'checked' )\r
1196                                                                                                 this.fire( 'change', { value : element.$.checked } );\r
1197                                                                                 }, this );\r
1198                                                                 }, this );\r
1199                                                         this.on( 'change', func );\r
1200                                                 }\r
1201                                                 return null;\r
1202                                         }\r
1203                                 },\r
1204 \r
1205                                 keyboardFocusable : true\r
1206                         }, commonPrototype, true );\r
1207 \r
1208         CKEDITOR.ui.dialog.radio.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,\r
1209                         /** @lends CKEDITOR.ui.dialog.radio.prototype */\r
1210                         {\r
1211                                 /**\r
1212                                  * Checks one of the radio buttons in this button group.\r
1213                                  * @example\r
1214                                  * @param {String} value The value of the button to be chcked.\r
1215                                  * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.\r
1216                                  */\r
1217                                 setValue : function( value, noChangeEvent )\r
1218                                 {\r
1219                                         var children = this._.children,\r
1220                                                 item;\r
1221                                         for ( var i = 0 ; ( i < children.length ) && ( item = children[i] ) ; i++ )\r
1222                                                 item.getElement().$.checked = ( item.getValue() == value );\r
1223                                         !noChangeEvent && this.fire( 'change', { value : value } );\r
1224                                 },\r
1225 \r
1226                                 /**\r
1227                                  * Gets the value of the currently checked radio button.\r
1228                                  * @example\r
1229                                  * @returns {String} The currently checked button's value.\r
1230                                  */\r
1231                                 getValue : function()\r
1232                                 {\r
1233                                         var children = this._.children;\r
1234                                         for ( var i = 0 ; i < children.length ; i++ )\r
1235                                         {\r
1236                                                 if ( children[i].getElement().$.checked )\r
1237                                                         return children[i].getValue();\r
1238                                         }\r
1239                                         return null;\r
1240                                 },\r
1241 \r
1242                                 /**\r
1243                                  * Handler for the access key up event. Focuses the currently\r
1244                                  * selected radio button, or the first radio button if none is\r
1245                                  * selected.\r
1246                                  * @example\r
1247                                  */\r
1248                                 accessKeyUp : function()\r
1249                                 {\r
1250                                         var children = this._.children, i;\r
1251                                         for ( i = 0 ; i < children.length ; i++ )\r
1252                                         {\r
1253                                                 if ( children[i].getElement().$.checked )\r
1254                                                 {\r
1255                                                         children[i].getElement().focus();\r
1256                                                         return;\r
1257                                                 }\r
1258                                         }\r
1259                                         children[0].getElement().focus();\r
1260                                 },\r
1261 \r
1262                                 /**\r
1263                                  * Defines the onChange event for UI element definitions.\r
1264                                  * @field\r
1265                                  * @type Object\r
1266                                  * @example\r
1267                                  */\r
1268                                 eventProcessors :\r
1269                                 {\r
1270                                         onChange : function( dialog, func )\r
1271                                         {\r
1272                                                 if ( !CKEDITOR.env.ie )\r
1273                                                         return commonEventProcessors.onChange.apply( this, arguments );\r
1274                                                 else\r
1275                                                 {\r
1276                                                         dialog.on( 'load', function()\r
1277                                                                 {\r
1278                                                                         var children = this._.children, me = this;\r
1279                                                                         for ( var i = 0 ; i < children.length ; i++ )\r
1280                                                                         {\r
1281                                                                                 var element = children[i].getElement();\r
1282                                                                                 element.on( 'propertychange', function( evt )\r
1283                                                                                         {\r
1284                                                                                                 evt = evt.data.$;\r
1285                                                                                                 if ( evt.propertyName == 'checked' && this.$.checked )\r
1286                                                                                                         me.fire( 'change', { value : this.getAttribute( 'value' ) } );\r
1287                                                                                         } );\r
1288                                                                         }\r
1289                                                                 }, this );\r
1290                                                         this.on( 'change', func );\r
1291                                                 }\r
1292                                                 return null;\r
1293                                         }\r
1294                                 },\r
1295 \r
1296                                 keyboardFocusable : true\r
1297                         }, commonPrototype, true );\r
1298 \r
1299         CKEDITOR.ui.dialog.file.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,\r
1300                         commonPrototype,\r
1301                         /** @lends CKEDITOR.ui.dialog.file.prototype */\r
1302                         {\r
1303                                 /**\r
1304                                  * Gets the &lt;input&gt; element of this file input.\r
1305                                  * @returns {CKEDITOR.dom.element} The file input element.\r
1306                                  * @example\r
1307                                  */\r
1308                                 getInputElement : function()\r
1309                                 {\r
1310                                         var frameDocument = CKEDITOR.document.getById( this._.frameId ).getFrameDocument();\r
1311                                         return frameDocument.$.forms.length > 0 ?\r
1312                                                 new CKEDITOR.dom.element( frameDocument.$.forms[0].elements[0] ) :\r
1313                                                 this.getElement();\r
1314                                 },\r
1315 \r
1316                                 /**\r
1317                                  * Uploads the file in the file input.\r
1318                                  * @returns {CKEDITOR.ui.dialog.file} This object.\r
1319                                  * @example\r
1320                                  */\r
1321                                 submit : function()\r
1322                                 {\r
1323                                         this.getInputElement().getParent().$.submit();\r
1324                                         return this;\r
1325                                 },\r
1326 \r
1327                                 /**\r
1328                                  * Get the action assigned to the form.\r
1329                                  * @returns {String} The value of the action.\r
1330                                  * @example\r
1331                                  */\r
1332                                 getAction : function()\r
1333                                 {\r
1334                                         return this.getInputElement().getParent().$.action;\r
1335                                 },\r
1336 \r
1337                                 /**\r
1338                                  * The events must be applied on the inner input element, and\r
1339                                  * that must be done when the iframe & form has been loaded\r
1340                                  */\r
1341                                 registerEvents : function( definition )\r
1342                                 {\r
1343                                         var regex = /^on([A-Z]\w+)/,\r
1344                                                 match;\r
1345 \r
1346                                         var registerDomEvent = function( uiElement, dialog, eventName, func )\r
1347                                         {\r
1348                                                 uiElement.on( 'formLoaded', function()\r
1349                                                 {\r
1350                                                         uiElement.getInputElement().on( eventName, func, uiElement );\r
1351                                                 });\r
1352                                         };\r
1353 \r
1354                                         for ( var i in definition )\r
1355                                         {\r
1356                                                 if ( !( match = i.match( regex ) ) )\r
1357                                                         continue;\r
1358 \r
1359                                                 if ( this.eventProcessors[i] )\r
1360                                                         this.eventProcessors[i].call( this, this._.dialog, definition[i] );\r
1361                                                 else\r
1362                                                         registerDomEvent( this, this._.dialog, match[1].toLowerCase(), definition[i] );\r
1363                                         }\r
1364 \r
1365                                         return this;\r
1366                                 },\r
1367 \r
1368                                 /**\r
1369                                  * Redraws the file input and resets the file path in the file input.\r
1370                                  * The redraw logic is necessary because non-IE browsers tend to clear\r
1371                                  * the &lt;iframe&gt; containing the file input after closing the dialog.\r
1372                                  * @example\r
1373                                  */\r
1374                                 reset : function()\r
1375                                 {\r
1376                                         var _ = this._,\r
1377                                                 frameElement = CKEDITOR.document.getById( _.frameId ),\r
1378                                                 frameDocument = frameElement.getFrameDocument(),\r
1379                                                 elementDefinition = _.definition,\r
1380                                                 buttons = _.buttons,\r
1381                                                 callNumber = this.formLoadedNumber,\r
1382                                                 unloadNumber = this.formUnloadNumber,\r
1383                                                 langDir = _.dialog._.editor.lang.dir,\r
1384                                                 langCode = _.dialog._.editor.langCode;\r
1385 \r
1386                                         // The callback function for the iframe, but we must call tools.addFunction only once\r
1387                                         // so we store the function number in this.formLoadedNumber\r
1388                                         if ( !callNumber )\r
1389                                         {\r
1390                                                 callNumber = this.formLoadedNumber = CKEDITOR.tools.addFunction(\r
1391                                                         function()\r
1392                                                         {\r
1393                                                                 // Now we can apply the events to the input type=file\r
1394                                                                 this.fire( 'formLoaded' ) ;\r
1395                                                         }, this ) ;\r
1396 \r
1397                                                 // Remove listeners attached to the content of the iframe (the file input)\r
1398                                                 unloadNumber = this.formUnloadNumber = CKEDITOR.tools.addFunction(\r
1399                                                         function()\r
1400                                                         {\r
1401                                                                 this.getInputElement().clearCustomData();\r
1402                                                         }, this ) ;\r
1403 \r
1404                                                 this.getDialog()._.editor.on( 'destroy', function()\r
1405                                                                 {\r
1406                                                                         CKEDITOR.tools.removeFunction( callNumber );\r
1407                                                                         CKEDITOR.tools.removeFunction( unloadNumber );\r
1408                                                                 } );\r
1409                                         }\r
1410 \r
1411                                         function generateFormField()\r
1412                                         {\r
1413                                                 frameDocument.$.open();\r
1414 \r
1415                                                 // Support for custom document.domain in IE.\r
1416                                                 if ( CKEDITOR.env.isCustomDomain() )\r
1417                                                         frameDocument.$.domain = document.domain;\r
1418 \r
1419                                                 var size = '';\r
1420                                                 if ( elementDefinition.size )\r
1421                                                         size = elementDefinition.size - ( CKEDITOR.env.ie  ? 7 : 0 );   // "Browse" button is bigger in IE.\r
1422 \r
1423                                                 var inputId = _.frameId + '_input';\r
1424 \r
1425                                                 frameDocument.$.write( [ '<html dir="' + langDir + '" lang="' + langCode + '"><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">',\r
1426                                                                 '<form enctype="multipart/form-data" method="POST" dir="' + langDir + '" lang="' + langCode + '" action="',\r
1427                                                                 CKEDITOR.tools.htmlEncode( elementDefinition.action ),\r
1428                                                                 '">',\r
1429                                                                 // Replicate the field label inside of iframe.\r
1430                                                             '<label id="', _.labelId, '" for="', inputId, '" style="display:none">',\r
1431                                                                 CKEDITOR.tools.htmlEncode( elementDefinition.label ),\r
1432                                                                 '</label>',\r
1433                                                                 '<input id="', inputId, '" aria-labelledby="', _.labelId,'" type="file" name="',\r
1434                                                                 CKEDITOR.tools.htmlEncode( elementDefinition.id || 'cke_upload' ),\r
1435                                                                 '" size="',\r
1436                                                                 CKEDITOR.tools.htmlEncode( size > 0 ? size : "" ),\r
1437                                                                 '" />',\r
1438                                                                 '</form>',\r
1439                                                                 '</body></html>',\r
1440                                                                 '<script>window.parent.CKEDITOR.tools.callFunction(' + callNumber + ');',\r
1441                                                                 'window.onbeforeunload = function() {window.parent.CKEDITOR.tools.callFunction(' + unloadNumber + ')}</script>' ].join( '' ) );\r
1442 \r
1443                                                 frameDocument.$.close();\r
1444 \r
1445                                                 for ( var i = 0 ; i < buttons.length ; i++ )\r
1446                                                         buttons[i].enable();\r
1447                                         }\r
1448 \r
1449                                         // #3465: Wait for the browser to finish rendering the dialog first.\r
1450                                         if ( CKEDITOR.env.gecko )\r
1451                                                 setTimeout( generateFormField, 500 );\r
1452                                         else\r
1453                                                 generateFormField();\r
1454                                 },\r
1455 \r
1456                                 getValue : function()\r
1457                                 {\r
1458                                         return this.getInputElement().$.value || '';\r
1459                                 },\r
1460 \r
1461                                 /***\r
1462                                  * The default value of input type="file" is an empty string, but during initialization\r
1463                                  * of this UI element, the iframe still isn't ready so it can't be read from that object\r
1464                                  * Setting it manually prevents later issues about the current value ("") being different\r
1465                                  * of the initial value (undefined as it asked for .value of a div)\r
1466                                  */\r
1467                                 setInitValue : function()\r
1468                                 {\r
1469                                         this._.initValue = '';\r
1470                                 },\r
1471 \r
1472                                 /**\r
1473                                  * Defines the onChange event for UI element definitions.\r
1474                                  * @field\r
1475                                  * @type Object\r
1476                                  * @example\r
1477                                  */\r
1478                                 eventProcessors :\r
1479                                 {\r
1480                                         onChange : function( dialog, func )\r
1481                                         {\r
1482                                                 // If this method is called several times (I'm not sure about how this can happen but the default\r
1483                                                 // onChange processor includes this protection)\r
1484                                                 // In order to reapply to the new element, the property is deleted at the beggining of the registerEvents method\r
1485                                                 if ( !this._.domOnChangeRegistered )\r
1486                                                 {\r
1487                                                         // By listening for the formLoaded event, this handler will get reapplied when a new\r
1488                                                         // form is created\r
1489                                                         this.on( 'formLoaded', function()\r
1490                                                         {\r
1491                                                                 this.getInputElement().on( 'change', function(){ this.fire( 'change', { value : this.getValue() } ); }, this );\r
1492                                                         }, this );\r
1493                                                         this._.domOnChangeRegistered = true;\r
1494                                                 }\r
1495 \r
1496                                                 this.on( 'change', func );\r
1497                                         }\r
1498                                 },\r
1499 \r
1500                                 keyboardFocusable : true\r
1501                         }, true );\r
1502 \r
1503         CKEDITOR.ui.dialog.fileButton.prototype = new CKEDITOR.ui.dialog.button;\r
1504 \r
1505         CKEDITOR.ui.dialog.fieldset.prototype = CKEDITOR.tools.clone( CKEDITOR.ui.dialog.hbox.prototype );\r
1506 \r
1507         CKEDITOR.dialog.addUIElement( 'text', textBuilder );\r
1508         CKEDITOR.dialog.addUIElement( 'password', textBuilder );\r
1509         CKEDITOR.dialog.addUIElement( 'textarea', commonBuilder );\r
1510         CKEDITOR.dialog.addUIElement( 'checkbox', commonBuilder );\r
1511         CKEDITOR.dialog.addUIElement( 'radio', commonBuilder );\r
1512         CKEDITOR.dialog.addUIElement( 'button', commonBuilder );\r
1513         CKEDITOR.dialog.addUIElement( 'select', commonBuilder );\r
1514         CKEDITOR.dialog.addUIElement( 'file', commonBuilder );\r
1515         CKEDITOR.dialog.addUIElement( 'fileButton', commonBuilder );\r
1516         CKEDITOR.dialog.addUIElement( 'html', commonBuilder );\r
1517         CKEDITOR.dialog.addUIElement( 'fieldset', containerBuilder );\r
1518 })();\r
1519 \r
1520 /**\r
1521  * Fired when the value of the uiElement is changed\r
1522  * @name CKEDITOR.ui.dialog.uiElement#change\r
1523  * @event\r
1524  */\r
1525 \r
1526 /**\r
1527  * Fired when the inner frame created by the element is ready.\r
1528  * Each time the button is used or the dialog is loaded a new\r
1529  * form might be created.\r
1530  * @name CKEDITOR.ui.dialog.fileButton#formLoaded\r
1531  * @event\r
1532  */\r