_source/plugins/dialogui/plugin.js

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