_source/plugins/dialogui/plugin.js

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