_source/plugins/dialog/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 /**\r
   7  * @fileOverview The floating dialog plugin.\r
   8  */\r
   9 \r
  10 CKEDITOR.plugins.add( 'dialog',\r
  11         {\r
  12                 requires : [ 'dialogui' ]\r
  13         });\r
  14 \r
  15 /**\r
  16  * No resize for this dialog.\r
  17  * @constant\r
  18  */\r
  19 CKEDITOR.DIALOG_RESIZE_NONE = 0;\r
  20 \r
  21 /**\r
  22  * Only allow horizontal resizing for this dialog, disable vertical resizing.\r
  23  * @constant\r
  24  */\r
  25 CKEDITOR.DIALOG_RESIZE_WIDTH = 1;\r
  26 \r
  27 /**\r
  28  * Only allow vertical resizing for this dialog, disable horizontal resizing.\r
  29  * @constant\r
  30  */\r
  31 CKEDITOR.DIALOG_RESIZE_HEIGHT = 2;\r
  32 \r
  33 /*\r
  34  * Allow the dialog to be resized in both directions.\r
  35  * @constant\r
  36  */\r
  37 CKEDITOR.DIALOG_RESIZE_BOTH = 3;\r
  38 \r
  39 (function()\r
  40 {\r
  41         function isTabVisible( tabId )\r
  42         {\r
  43                 return !!this._.tabs[ tabId ][ 0 ].$.offsetHeight;\r
  44         }\r
  45 \r
  46         function getPreviousVisibleTab()\r
  47         {\r
  48                 var tabId = this._.currentTabId,\r
  49                         length = this._.tabIdList.length,\r
  50                         tabIndex = CKEDITOR.tools.indexOf( this._.tabIdList, tabId ) + length;\r
  51 \r
  52                 for ( var i = tabIndex - 1 ; i > tabIndex - length ; i-- )\r
  53                 {\r
  54                         if ( isTabVisible.call( this, this._.tabIdList[ i % length ] ) )\r
  55                                 return this._.tabIdList[ i % length ];\r
  56                 }\r
  57 \r
  58                 return null;\r
  59         }\r
  60 \r
  61         function getNextVisibleTab()\r
  62         {\r
  63                 var tabId = this._.currentTabId,\r
  64                         length = this._.tabIdList.length,\r
  65                         tabIndex = CKEDITOR.tools.indexOf( this._.tabIdList, tabId );\r
  66 \r
  67                 for ( var i = tabIndex + 1 ; i < tabIndex + length ; i++ )\r
  68                 {\r
  69                         if ( isTabVisible.call( this, this._.tabIdList[ i % length ] ) )\r
  70                                 return this._.tabIdList[ i % length ];\r
  71                 }\r
  72 \r
  73                 return null;\r
  74         }\r
  75 \r
  76         // Stores dialog related data from skin definitions. e.g. margin sizes.\r
  77         var skinData = {};\r
  78 \r
  79         /**\r
  80          * This is the base class for runtime dialog objects. An instance of this\r
  81          * class represents a single named dialog for a single editor instance.\r
  82          * @param {Object} editor The editor which created the dialog.\r
  83          * @param {String} dialogName The dialog's registered name.\r
  84          * @constructor\r
  85          * @example\r
  86          * var dialogObj = new CKEDITOR.dialog( editor, 'smiley' );\r
  87          */\r
  88         CKEDITOR.dialog = function( editor, dialogName )\r
  89         {\r
  90                 // Load the dialog definition.\r
  91                 var definition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ];\r
  92                 if ( !definition )\r
  93                 {\r
  94                         console.log( 'Error: The dialog "' + dialogName + '" is not defined.' );\r
  95                         return;\r
  96                 }\r
  97 \r
  98                 // Completes the definition with the default values.\r
  99                 definition = CKEDITOR.tools.extend( definition( editor ), defaultDialogDefinition );\r
 100 \r
 101                 // Clone a functionally independent copy for this dialog.\r
 102                 definition = CKEDITOR.tools.clone( definition );\r
 103 \r
 104                 // Create a complex definition object, extending it with the API\r
 105                 // functions.\r
 106                 definition = new definitionObject( this, definition );\r
 107 \r
 108                 // Fire the "dialogDefinition" event, making it possible to customize\r
 109                 // the dialog definition.\r
 110                 this.definition = definition = CKEDITOR.fire( 'dialogDefinition',\r
 111                         {\r
 112                                 name : dialogName,\r
 113                                 definition : definition\r
 114                         }\r
 115                         , editor ).definition;\r
 116 \r
 117                 var doc = CKEDITOR.document;\r
 118 \r
 119                 var themeBuilt = editor.theme.buildDialog( editor );\r
 120 \r
 121                 // Initialize some basic parameters.\r
 122                 this._ =\r
 123                 {\r
 124                         editor : editor,\r
 125                         element : themeBuilt.element,\r
 126                         name : dialogName,\r
 127                         contentSize : { width : 0, height : 0 },\r
 128                         size : { width : 0, height : 0 },\r
 129                         updateSize : false,\r
 130                         contents : {},\r
 131                         buttons : {},\r
 132                         accessKeyMap : {},\r
 133 \r
 134                         // Initialize the tab and page map.\r
 135                         tabs : {},\r
 136                         tabIdList : [],\r
 137                         currentTabId : null,\r
 138                         currentTabIndex : null,\r
 139                         pageCount : 0,\r
 140                         lastTab : null,\r
 141                         tabBarMode : false,\r
 142 \r
 143                         // Initialize the tab order array for input widgets.\r
 144                         focusList : [],\r
 145                         currentFocusIndex : 0,\r
 146                         hasFocus : false\r
 147                 };\r
 148 \r
 149                 this.parts = themeBuilt.parts;\r
 150 \r
 151                 // Set the startup styles for the dialog, avoiding it enlarging the\r
 152                 // page size on the dialog creation.\r
 153                 this.parts.dialog.setStyles(\r
 154                         {\r
 155                                 position : CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed',\r
 156                                 top : 0,\r
 157                                 left: 0,\r
 158                                 visibility : 'hidden'\r
 159                         });\r
 160 \r
 161                 // Call the CKEDITOR.event constructor to initialize this instance.\r
 162                 CKEDITOR.event.call( this );\r
 163 \r
 164                 // Initialize load, show, hide, ok and cancel events.\r
 165                 if ( definition.onLoad )\r
 166                         this.on( 'load', definition.onLoad );\r
 167 \r
 168                 if ( definition.onShow )\r
 169                         this.on( 'show', definition.onShow );\r
 170 \r
 171                 if ( definition.onHide )\r
 172                         this.on( 'hide', definition.onHide );\r
 173 \r
 174                 if ( definition.onOk )\r
 175                 {\r
 176                         this.on( 'ok', function( evt )\r
 177                                 {\r
 178                                         if ( definition.onOk.call( this, evt ) === false )\r
 179                                                 evt.data.hide = false;\r
 180                                 });\r
 181                 }\r
 182 \r
 183                 if ( definition.onCancel )\r
 184                 {\r
 185                         this.on( 'cancel', function( evt )\r
 186                                 {\r
 187                                         if ( definition.onCancel.call( this, evt ) === false )\r
 188                                                 evt.data.hide = false;\r
 189                                 });\r
 190                 }\r
 191 \r
 192                 var me = this;\r
 193 \r
 194                 // Iterates over all items inside all content in the dialog, calling a\r
 195                 // function for each of them.\r
 196                 var iterContents = function( func )\r
 197                 {\r
 198                         var contents = me._.contents,\r
 199                                 stop = false;\r
 200 \r
 201                         for ( var i in contents )\r
 202                         {\r
 203                                 for ( var j in contents[i] )\r
 204                                 {\r
 205                                         stop = func.call( this, contents[i][j] );\r
 206                                         if ( stop )\r
 207                                                 return;\r
 208                                 }\r
 209                         }\r
 210                 };\r
 211 \r
 212                 this.on( 'ok', function( evt )\r
 213                         {\r
 214                                 iterContents( function( item )\r
 215                                         {\r
 216                                                 if ( item.validate )\r
 217                                                 {\r
 218                                                         var isValid = item.validate( this );\r
 219 \r
 220                                                         if ( typeof isValid == 'string' )\r
 221                                                         {\r
 222                                                                 alert( isValid );\r
 223                                                                 isValid = false;\r
 224                                                         }\r
 225 \r
 226                                                         if ( isValid === false )\r
 227                                                         {\r
 228                                                                 if ( item.select )\r
 229                                                                         item.select();\r
 230                                                                 else\r
 231                                                                         item.focus();\r
 232 \r
 233                                                                 evt.data.hide = false;\r
 234                                                                 evt.stop();\r
 235                                                                 return true;\r
 236                                                         }\r
 237                                                 }\r
 238                                         });\r
 239                         }, this, null, 0 );\r
 240 \r
 241                 this.on( 'cancel', function( evt )\r
 242                         {\r
 243                                 iterContents( function( item )\r
 244                                         {\r
 245                                                 if ( item.isChanged() )\r
 246                                                 {\r
 247                                                         if ( !confirm( editor.lang.common.confirmCancel ) )\r
 248                                                                 evt.data.hide = false;\r
 249                                                         return true;\r
 250                                                 }\r
 251                                         });\r
 252                         }, this, null, 0 );\r
 253 \r
 254                 this.parts.close.on( 'click', function( evt )\r
 255                                 {\r
 256                                         if ( this.fire( 'cancel', { hide : true } ).hide !== false )\r
 257                                                 this.hide();\r
 258                                 }, this );\r
 259 \r
 260                 function changeFocus( forward )\r
 261                 {\r
 262                         var focusList = me._.focusList,\r
 263                                 offset = forward ? 1 : -1;\r
 264                         if ( focusList.length < 1 )\r
 265                                 return;\r
 266 \r
 267                         var currentIndex = ( me._.currentFocusIndex + offset + focusList.length ) % focusList.length;\r
 268                         while ( !focusList[ currentIndex ].isFocusable() )\r
 269                         {\r
 270                                 currentIndex = ( currentIndex + offset + focusList.length ) % focusList.length;\r
 271                                 if ( currentIndex == me._.currentFocusIndex )\r
 272                                         break;\r
 273                         }\r
 274                         focusList[ currentIndex ].focus();\r
 275                 }\r
 276 \r
 277                 function focusKeydownHandler( evt )\r
 278                 {\r
 279                         // If I'm not the top dialog, ignore.\r
 280                         if ( me != CKEDITOR.dialog._.currentTop )\r
 281                                 return;\r
 282 \r
 283                         var keystroke = evt.data.getKeystroke(),\r
 284                                 processed = false;\r
 285                         if ( keystroke == 9 || keystroke == CKEDITOR.SHIFT + 9 )\r
 286                         {\r
 287                                 var shiftPressed = ( keystroke == CKEDITOR.SHIFT + 9 );\r
 288 \r
 289                                 // Handling Tab and Shift-Tab.\r
 290                                 if ( me._.tabBarMode )\r
 291                                 {\r
 292                                         // Change tabs.\r
 293                                         var nextId = shiftPressed ? getPreviousVisibleTab.call( me ) : getNextVisibleTab.call( me );\r
 294                                         me.selectPage( nextId );\r
 295                                         me._.tabs[ nextId ][ 0 ].focus();\r
 296                                 }\r
 297                                 else\r
 298                                 {\r
 299                                         // Change the focus of inputs.\r
 300                                         changeFocus( !shiftPressed );\r
 301                                 }\r
 302 \r
 303                                 processed = true;\r
 304                         }\r
 305                         else if ( keystroke == CKEDITOR.ALT + 121 && !me._.tabBarMode )\r
 306                         {\r
 307                                 // Alt-F10 puts focus into the current tab item in the tab bar.\r
 308                                 me._.tabBarMode = true;\r
 309                                 me._.tabs[ me._.currentTabId ][ 0 ].focus();\r
 310                                 processed = true;\r
 311                         }\r
 312                         else if ( ( keystroke == 37 || keystroke == 39 ) && me._.tabBarMode )\r
 313                         {\r
 314                                 // Arrow keys - used for changing tabs.\r
 315                                 nextId = ( keystroke == 37 ? getPreviousVisibleTab.call( me ) : getNextVisibleTab.call( me ) );\r
 316                                 me.selectPage( nextId );\r
 317                                 me._.tabs[ nextId ][ 0 ].focus();\r
 318                                 processed = true;\r
 319                         }\r
 320 \r
 321                         if ( processed )\r
 322                         {\r
 323                                 evt.stop();\r
 324                                 evt.data.preventDefault();\r
 325                         }\r
 326                 }\r
 327 \r
 328                 // Add the dialog keyboard handlers.\r
 329                 this.on( 'show', function()\r
 330                         {\r
 331                                 CKEDITOR.document.on( 'keydown', focusKeydownHandler, this, null, 0 );\r
 332 \r
 333                                 if ( CKEDITOR.env.ie6Compat )\r
 334                                 {\r
 335                                         var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
 336                                         coverDoc.on( 'keydown', focusKeydownHandler, this, null, 0 );\r
 337                                 }\r
 338                         } );\r
 339                 this.on( 'hide', function()\r
 340                         {\r
 341                                 CKEDITOR.document.removeListener( 'keydown', focusKeydownHandler );\r
 342                         } );\r
 343                 this.on( 'iframeAdded', function( evt )\r
 344                         {\r
 345                                 var doc = new CKEDITOR.dom.document( evt.data.iframe.$.contentWindow.document );\r
 346                                 doc.on( 'keydown', focusKeydownHandler, this, null, 0 );\r
 347                         } );\r
 348 \r
 349                 // Auto-focus logic in dialog.\r
 350                 this.on( 'show', function()\r
 351                         {\r
 352                                 if ( !this._.hasFocus )\r
 353                                 {\r
 354                                         this._.currentFocusIndex = -1;\r
 355                                         changeFocus( true );\r
 356 \r
 357                                         /*\r
 358                                          * IE BUG: If the initial focus went into a non-text element (e.g. button),\r
 359                                          * then IE would still leave the caret inside the editing area.\r
 360                                          */\r
 361                                         if ( this._.editor.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
 362                                         {\r
 363                                                 var $selection = editor.document.$.selection,\r
 364                                                         $range = $selection.createRange();\r
 365 \r
 366                                                 if ( $range )\r
 367                                                 {\r
 368                                                         if ( $range.parentElement && $range.parentElement().ownerDocument == editor.document.$\r
 369                                                           || $range.item && $range.item( 0 ).ownerDocument == editor.document.$ )\r
 370                                                         {\r
 371                                                                 var $myRange = document.body.createTextRange();\r
 372                                                                 $myRange.moveToElementText( this.getElement().getFirst().$ );\r
 373                                                                 $myRange.collapse( true );\r
 374                                                                 $myRange.select();\r
 375                                                         }\r
 376                                                 }\r
 377                                         }\r
 378                                 }\r
 379                         }, this, null, 0xffffffff );\r
 380 \r
 381                 // IE6 BUG: Text fields and text areas are only half-rendered the first time the dialog appears in IE6 (#2661).\r
 382                 // This is still needed after [2708] and [2709] because text fields in hidden TR tags are still broken.\r
 383                 if ( CKEDITOR.env.ie6Compat )\r
 384                 {\r
 385                         this.on( 'load', function( evt )\r
 386                                         {\r
 387                                                 var outer = this.getElement(),\r
 388                                                         inner = outer.getFirst();\r
 389                                                 inner.remove();\r
 390                                                 inner.appendTo( outer );\r
 391                                         }, this );\r
 392                 }\r
 393 \r
 394                 initDragAndDrop( this );\r
 395                 initResizeHandles( this );\r
 396 \r
 397                 // Insert the title.\r
 398                 ( new CKEDITOR.dom.text( definition.title, CKEDITOR.document ) ).appendTo( this.parts.title );\r
 399 \r
 400                 // Insert the tabs and contents.\r
 401                 for ( var i = 0 ; i < definition.contents.length ; i++ )\r
 402                         this.addPage( definition.contents[i] );\r
 403 \r
 404                 var tabRegex = /cke_dialog_tab(\s|$|_)/,\r
 405                         tabOuterRegex = /cke_dialog_tab(\s|$)/;\r
 406                 this.parts['tabs'].on( 'click', function( evt )\r
 407                                 {\r
 408                                         var target = evt.data.getTarget(), firstNode = target, id, page;\r
 409 \r
 410                                         // If we aren't inside a tab, bail out.\r
 411                                         if ( !( tabRegex.test( target.$.className ) || target.getName() == 'a' ) )\r
 412                                                 return;\r
 413 \r
 414                                         // Find the outer <td> container of the tab.\r
 415                                         id = target.$.id.substr( 0, target.$.id.lastIndexOf( '_' ) );\r
 416                                         this.selectPage( id );\r
 417 \r
 418                                         if ( this._.tabBarMode )\r
 419                                         {\r
 420                                                 this._.tabBarMode = false;\r
 421                                                 this._.currentFocusIndex = -1;\r
 422                                                 changeFocus( true );\r
 423                                         }\r
 424 \r
 425                                         evt.data.preventDefault();\r
 426                                 }, this );\r
 427 \r
 428                 // Insert buttons.\r
 429                 var buttonsHtml = [],\r
 430                         buttons = CKEDITOR.dialog._.uiElementBuilders.hbox.build( this,\r
 431                                 {\r
 432                                         type : 'hbox',\r
 433                                         className : 'cke_dialog_footer_buttons',\r
 434                                         widths : [],\r
 435                                         children : definition.buttons\r
 436                                 }, buttonsHtml ).getChild();\r
 437                 this.parts.footer.setHtml( buttonsHtml.join( '' ) );\r
 438 \r
 439                 for ( i = 0 ; i < buttons.length ; i++ )\r
 440                         this._.buttons[ buttons[i].id ] = buttons[i];\r
 441 \r
 442                 CKEDITOR.skins.load( editor, 'dialog' );\r
 443         };\r
 444 \r
 445         // Focusable interface. Use it via dialog.addFocusable.\r
 446         function Focusable( dialog, element, index ) {\r
 447                 this.element = element;\r
 448                 this.focusIndex = index;\r
 449                 this.isFocusable = function()\r
 450                 {\r
 451                         return true;\r
 452                 };\r
 453                 this.focus = function()\r
 454                 {\r
 455                         dialog._.currentFocusIndex = this.focusIndex;\r
 456                         this.element.focus();\r
 457                 };\r
 458                 // Bind events\r
 459                 element.on( 'keydown', function( e )\r
 460                         {\r
 461                                 if ( e.data.getKeystroke() in { 32:1, 13:1 }  )\r
 462                                         this.fire( 'click' );\r
 463                         } );\r
 464                 element.on( 'focus', function()\r
 465                         {\r
 466                                 this.fire( 'mouseover' );\r
 467                         } );\r
 468                 element.on( 'blur', function()\r
 469                         {\r
 470                                 this.fire( 'mouseout' );\r
 471                         } );\r
 472         }\r
 473 \r
 474         CKEDITOR.dialog.prototype =\r
 475         {\r
 476                 /**\r
 477                  * Resizes the dialog.\r
 478                  * @param {Number} width The width of the dialog in pixels.\r
 479                  * @param {Number} height The height of the dialog in pixels.\r
 480                  * @function\r
 481                  * @example\r
 482                  * dialogObj.resize( 800, 640 );\r
 483                  */\r
 484                 resize : (function()\r
 485                 {\r
 486                         return function( width, height )\r
 487                         {\r
 488                                 if ( this._.contentSize && this._.contentSize.width == width && this._.contentSize.height == height )\r
 489                                         return;\r
 490 \r
 491                                 CKEDITOR.dialog.fire( 'resize',\r
 492                                         {\r
 493                                                 dialog : this,\r
 494                                                 skin : this._.editor.skinName,\r
 495                                                 width : width,\r
 496                                                 height : height\r
 497                                         }, this._.editor );\r
 498 \r
 499                                 this._.contentSize = { width : width, height : height };\r
 500                                 this._.updateSize = true;\r
 501                         };\r
 502                 })(),\r
 503 \r
 504                 /**\r
 505                  * Gets the current size of the dialog in pixels.\r
 506                  * @returns {Object} An object with "width" and "height" properties.\r
 507                  * @example\r
 508                  * var width = dialogObj.getSize().width;\r
 509                  */\r
 510                 getSize : function()\r
 511                 {\r
 512                         if ( !this._.updateSize )\r
 513                                 return this._.size;\r
 514                         var element = this._.element.getFirst();\r
 515                         var size = this._.size = { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0};\r
 516 \r
 517                         // If either the offsetWidth or offsetHeight is 0, the element isn't visible.\r
 518                         this._.updateSize = !size.width || !size.height;\r
 519 \r
 520                         return size;\r
 521                 },\r
 522 \r
 523                 /**\r
 524                  * Moves the dialog to an (x, y) coordinate relative to the window.\r
 525                  * @function\r
 526                  * @param {Number} x The target x-coordinate.\r
 527                  * @param {Number} y The target y-coordinate.\r
 528                  * @example\r
 529                  * dialogObj.move( 10, 40 );\r
 530                  */\r
 531                 move : (function()\r
 532                 {\r
 533                         var isFixed;\r
 534                         return function( x, y )\r
 535                         {\r
 536                                 // The dialog may be fixed positioned or absolute positioned. Ask the\r
 537                                 // browser what is the current situation first.\r
 538                                 var element = this._.element.getFirst();\r
 539                                 if ( isFixed === undefined )\r
 540                                         isFixed = element.getComputedStyle( 'position' ) == 'fixed';\r
 541 \r
 542                                 if ( isFixed && this._.position && this._.position.x == x && this._.position.y == y )\r
 543                                         return;\r
 544 \r
 545                                 // Save the current position.\r
 546                                 this._.position = { x : x, y : y };\r
 547 \r
 548                                 // If not fixed positioned, add scroll position to the coordinates.\r
 549                                 if ( !isFixed )\r
 550                                 {\r
 551                                         var scrollPosition = CKEDITOR.document.getWindow().getScrollPosition();\r
 552                                         x += scrollPosition.x;\r
 553                                         y += scrollPosition.y;\r
 554                                 }\r
 555 \r
 556                                 element.setStyles(\r
 557                                                 {\r
 558                                                         'left'  : ( x > 0 ? x : 0 ) + 'px',\r
 559                                                         'top'   : ( y > 0 ? y : 0 ) + 'px'\r
 560                                                 });\r
 561                         };\r
 562                 })(),\r
 563 \r
 564                 /**\r
 565                  * Gets the dialog's position in the window.\r
 566                  * @returns {Object} An object with "x" and "y" properties.\r
 567                  * @example\r
 568                  * var dialogX = dialogObj.getPosition().x;\r
 569                  */\r
 570                 getPosition : function(){ return CKEDITOR.tools.extend( {}, this._.position ); },\r
 571 \r
 572                 /**\r
 573                  * Shows the dialog box.\r
 574                  * @example\r
 575                  * dialogObj.show();\r
 576                  */\r
 577                 show : function()\r
 578                 {\r
 579                         if ( this._.editor.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
 580                                 this._.editor.getSelection().lock();\r
 581 \r
 582                         // Insert the dialog's element to the root document.\r
 583                         var element = this._.element;\r
 584                         var definition = this.definition;\r
 585                         if ( !( element.getParent() && element.getParent().equals( CKEDITOR.document.getBody() ) ) )\r
 586                                 element.appendTo( CKEDITOR.document.getBody() );\r
 587                         else\r
 588                                 return;\r
 589 \r
 590                         // FIREFOX BUG: Fix vanishing caret for Firefox 2 or Gecko 1.8.\r
 591                         if ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 )\r
 592                         {\r
 593                                 var dialogElement = this.parts.dialog;\r
 594                                 dialogElement.setStyle( 'position', 'absolute' );\r
 595                                 setTimeout( function()\r
 596                                         {\r
 597                                                 dialogElement.setStyle( 'position', 'fixed' );\r
 598                                         }, 0 );\r
 599                         }\r
 600 \r
 601 \r
 602                         // First, set the dialog to an appropriate size.\r
 603                         this.resize( definition.minWidth, definition.minHeight );\r
 604 \r
 605                         // Select the first tab by default.\r
 606                         this.selectPage( this.definition.contents[0].id );\r
 607 \r
 608                         // Reset all inputs back to their default value.\r
 609                         this.reset();\r
 610 \r
 611                         // Set z-index.\r
 612                         if ( CKEDITOR.dialog._.currentZIndex === null )\r
 613                                 CKEDITOR.dialog._.currentZIndex = this._.editor.config.baseFloatZIndex;\r
 614                         this._.element.getFirst().setStyle( 'z-index', CKEDITOR.dialog._.currentZIndex += 10 );\r
 615 \r
 616                         // Maintain the dialog ordering and dialog cover.\r
 617                         // Also register key handlers if first dialog.\r
 618                         if ( CKEDITOR.dialog._.currentTop === null )\r
 619                         {\r
 620                                 CKEDITOR.dialog._.currentTop = this;\r
 621                                 this._.parentDialog = null;\r
 622                                 addCover( this._.editor );\r
 623 \r
 624                                 CKEDITOR.document.on( 'keydown', accessKeyDownHandler );\r
 625                                 CKEDITOR.document.on( 'keyup', accessKeyUpHandler );\r
 626                         }\r
 627                         else\r
 628                         {\r
 629                                 this._.parentDialog = CKEDITOR.dialog._.currentTop;\r
 630                                 var parentElement = this._.parentDialog.getElement().getFirst();\r
 631                                 parentElement.$.style.zIndex  -= Math.floor( this._.editor.config.baseFloatZIndex / 2 );\r
 632                                 CKEDITOR.dialog._.currentTop = this;\r
 633                         }\r
 634 \r
 635                         // Register the Esc hotkeys.\r
 636                         registerAccessKey( this, this, '\x1b', null, function()\r
 637                                         {\r
 638                                                 this.getButton( 'cancel' ) && this.getButton( 'cancel' ).click();\r
 639                                         } );\r
 640 \r
 641                         // Reset the hasFocus state.\r
 642                         this._.hasFocus = false;\r
 643 \r
 644                         // Rearrange the dialog to the middle of the window.\r
 645                         CKEDITOR.tools.setTimeout( function()\r
 646                                 {\r
 647                                         var viewSize = CKEDITOR.document.getWindow().getViewPaneSize();\r
 648                                         var dialogSize = this.getSize();\r
 649 \r
 650                                         // We're using definition size for initial position because of\r
 651                                         // offten corrupted data in offsetWidth at this point. (#4084)\r
 652                                         this.move( ( viewSize.width - definition.minWidth ) / 2, ( viewSize.height - dialogSize.height ) / 2 );\r
 653 \r
 654                                         this.parts.dialog.setStyle( 'visibility', '' );\r
 655 \r
 656                                         // Execute onLoad for the first show.\r
 657                                         this.fireOnce( 'load', {} );\r
 658                                         this.fire( 'show', {} );\r
 659 \r
 660                                         // Save the initial values of the dialog.\r
 661                                         this.foreach( function( contentObj ) { contentObj.setInitValue && contentObj.setInitValue(); } );\r
 662 \r
 663                                 },\r
 664                                 100, this );\r
 665                 },\r
 666 \r
 667                 /**\r
 668                  * Executes a function for each UI element.\r
 669                  * @param {Function} fn Function to execute for each UI element.\r
 670                  * @returns {CKEDITOR.dialog} The current dialog object.\r
 671                  */\r
 672                 foreach : function( fn )\r
 673                 {\r
 674                         for ( var i in this._.contents )\r
 675                         {\r
 676                                 for ( var j in this._.contents[i] )\r
 677                                         fn( this._.contents[i][j]);\r
 678                         }\r
 679                         return this;\r
 680                 },\r
 681 \r
 682                 /**\r
 683                  * Resets all input values in the dialog.\r
 684                  * @example\r
 685                  * dialogObj.reset();\r
 686                  * @returns {CKEDITOR.dialog} The current dialog object.\r
 687                  */\r
 688                 reset : (function()\r
 689                 {\r
 690                         var fn = function( widget ){ if ( widget.reset ) widget.reset(); };\r
 691                         return function(){ this.foreach( fn ); return this; };\r
 692                 })(),\r
 693 \r
 694                 setupContent : function()\r
 695                 {\r
 696                         var args = arguments;\r
 697                         this.foreach( function( widget )\r
 698                                 {\r
 699                                         if ( widget.setup )\r
 700                                                 widget.setup.apply( widget, args );\r
 701                                 });\r
 702                 },\r
 703 \r
 704                 commitContent : function()\r
 705                 {\r
 706                         var args = arguments;\r
 707                         this.foreach( function( widget )\r
 708                                 {\r
 709                                         if ( widget.commit )\r
 710                                                 widget.commit.apply( widget, args );\r
 711                                 });\r
 712                 },\r
 713 \r
 714                 /**\r
 715                  * Hides the dialog box.\r
 716                  * @example\r
 717                  * dialogObj.hide();\r
 718                  */\r
 719                 hide : function()\r
 720                 {\r
 721                         this.fire( 'hide', {} );\r
 722 \r
 723                         // Remove the dialog's element from the root document.\r
 724                         var element = this._.element;\r
 725                         if ( !element.getParent() )\r
 726                                 return;\r
 727 \r
 728                         element.remove();\r
 729                         this.parts.dialog.setStyle( 'visibility', 'hidden' );\r
 730 \r
 731                         // Unregister all access keys associated with this dialog.\r
 732                         unregisterAccessKey( this );\r
 733 \r
 734                         // Maintain dialog ordering and remove cover if needed.\r
 735                         if ( !this._.parentDialog )\r
 736                                 removeCover();\r
 737                         else\r
 738                         {\r
 739                                 var parentElement = this._.parentDialog.getElement().getFirst();\r
 740                                 parentElement.setStyle( 'z-index', parseInt( parentElement.$.style.zIndex, 10 ) + Math.floor( this._.editor.config.baseFloatZIndex / 2 ) );\r
 741                         }\r
 742                         CKEDITOR.dialog._.currentTop = this._.parentDialog;\r
 743 \r
 744                         // Deduct or clear the z-index.\r
 745                         if ( !this._.parentDialog )\r
 746                         {\r
 747                                 CKEDITOR.dialog._.currentZIndex = null;\r
 748 \r
 749                                 // Remove access key handlers.\r
 750                                 CKEDITOR.document.removeListener( 'keydown', accessKeyDownHandler );\r
 751                                 CKEDITOR.document.removeListener( 'keyup', accessKeyUpHandler );\r
 752 \r
 753                                 var editor = this._.editor;\r
 754                                 editor.focus();\r
 755 \r
 756                                 if ( editor.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
 757                                         editor.getSelection().unlock( true );\r
 758                         }\r
 759                         else\r
 760                                 CKEDITOR.dialog._.currentZIndex -= 10;\r
 761 \r
 762 \r
 763                         // Reset the initial values of the dialog.\r
 764                         this.foreach( function( contentObj ) { contentObj.resetInitValue && contentObj.resetInitValue(); } );\r
 765                 },\r
 766 \r
 767                 /**\r
 768                  * Adds a tabbed page into the dialog.\r
 769                  * @param {Object} contents Content definition.\r
 770                  * @example\r
 771                  */\r
 772                 addPage : function( contents )\r
 773                 {\r
 774                         var pageHtml = [],\r
 775                                 titleHtml = contents.label ? ' title="' + CKEDITOR.tools.htmlEncode( contents.label ) + '"' : '',\r
 776                                 elements = contents.elements,\r
 777                                 vbox = CKEDITOR.dialog._.uiElementBuilders.vbox.build( this,\r
 778                                                 {\r
 779                                                         type : 'vbox',\r
 780                                                         className : 'cke_dialog_page_contents',\r
 781                                                         children : contents.elements,\r
 782                                                         expand : !!contents.expand,\r
 783                                                         padding : contents.padding,\r
 784                                                         style : contents.style || 'width: 100%; height: 100%;'\r
 785                                                 }, pageHtml );\r
 786 \r
 787                         // Create the HTML for the tab and the content block.\r
 788                         var page = CKEDITOR.dom.element.createFromHtml( pageHtml.join( '' ) );\r
 789                         var tab = CKEDITOR.dom.element.createFromHtml( [\r
 790                                         '<a class="cke_dialog_tab"',\r
 791                                                 ( this._.pageCount > 0 ? ' cke_last' : 'cke_first' ),\r
 792                                                 titleHtml,\r
 793                                                 ( !!contents.hidden ? ' style="display:none"' : '' ),\r
 794                                                 ' id="', contents.id + '_', CKEDITOR.tools.getNextNumber(), '"' +\r
 795                                                 ' href="javascript:void(0)"',\r
 796                                                 ' hidefocus="true">',\r
 797                                                         contents.label,\r
 798                                         '</a>'\r
 799                                 ].join( '' ) );\r
 800 \r
 801                         // If only a single page exist, a different style is used in the central pane.\r
 802                         if ( this._.pageCount === 0 )\r
 803                                 this.parts.dialog.addClass( 'cke_single_page' );\r
 804                         else\r
 805                                 this.parts.dialog.removeClass( 'cke_single_page' );\r
 806 \r
 807                         // Take records for the tabs and elements created.\r
 808                         this._.tabs[ contents.id ] = [ tab, page ];\r
 809                         this._.tabIdList.push( contents.id );\r
 810                         this._.pageCount++;\r
 811                         this._.lastTab = tab;\r
 812 \r
 813                         var contentMap = this._.contents[ contents.id ] = {},\r
 814                                 cursor,\r
 815                                 children = vbox.getChild();\r
 816 \r
 817                         while ( ( cursor = children.shift() ) )\r
 818                         {\r
 819                                 contentMap[ cursor.id ] = cursor;\r
 820                                 if ( typeof( cursor.getChild ) == 'function' )\r
 821                                         children.push.apply( children, cursor.getChild() );\r
 822                         }\r
 823 \r
 824                         // Attach the DOM nodes.\r
 825 \r
 826                         page.setAttribute( 'name', contents.id );\r
 827                         page.appendTo( this.parts.contents );\r
 828 \r
 829                         tab.unselectable();\r
 830                         this.parts.tabs.append( tab );\r
 831 \r
 832                         // Add access key handlers if access key is defined.\r
 833                         if ( contents.accessKey )\r
 834                         {\r
 835                                 registerAccessKey( this, this, 'CTRL+' + contents.accessKey,\r
 836                                         tabAccessKeyDown, tabAccessKeyUp );\r
 837                                 this._.accessKeyMap[ 'CTRL+' + contents.accessKey ] = contents.id;\r
 838                         }\r
 839                 },\r
 840 \r
 841                 /**\r
 842                  * Activates a tab page in the dialog by its id.\r
 843                  * @param {String} id The id of the dialog tab to be activated.\r
 844                  * @example\r
 845                  * dialogObj.selectPage( 'tab_1' );\r
 846                  */\r
 847                 selectPage : function( id )\r
 848                 {\r
 849                         // Hide the non-selected tabs and pages.\r
 850                         for ( var i in this._.tabs )\r
 851                         {\r
 852                                 var tab = this._.tabs[i][0],\r
 853                                         page = this._.tabs[i][1];\r
 854                                 if ( i != id )\r
 855                                 {\r
 856                                         tab.removeClass( 'cke_dialog_tab_selected' );\r
 857                                         page.hide();\r
 858                                 }\r
 859                         }\r
 860 \r
 861                         var selected = this._.tabs[id];\r
 862                         selected[0].addClass( 'cke_dialog_tab_selected' );\r
 863                         selected[1].show();\r
 864                         this._.currentTabId = id;\r
 865                         this._.currentTabIndex = CKEDITOR.tools.indexOf( this._.tabIdList, id );\r
 866                 },\r
 867 \r
 868                 /**\r
 869                  * Hides a page's tab away from the dialog.\r
 870                  * @param {String} id The page's Id.\r
 871                  * @example\r
 872                  * dialog.hidePage( 'tab_3' );\r
 873                  */\r
 874                 hidePage : function( id )\r
 875                 {\r
 876                         var tab = this._.tabs[id] && this._.tabs[id][0];\r
 877                         if ( !tab )\r
 878                                 return;\r
 879                         tab.hide();\r
 880                 },\r
 881 \r
 882                 /**\r
 883                  * Unhides a page's tab.\r
 884                  * @param {String} id The page's Id.\r
 885                  * @example\r
 886                  * dialog.showPage( 'tab_2' );\r
 887                  */\r
 888                 showPage : function( id )\r
 889                 {\r
 890                         var tab = this._.tabs[id] && this._.tabs[id][0];\r
 891                         if ( !tab )\r
 892                                 return;\r
 893                         tab.show();\r
 894                 },\r
 895 \r
 896                 /**\r
 897                  * Gets the root DOM element of the dialog.\r
 898                  * @returns {CKEDITOR.dom.element} The &lt;span&gt; element containing this dialog.\r
 899                  * @example\r
 900                  * var dialogElement = dialogObj.getElement().getFirst();\r
 901                  * dialogElement.setStyle( 'padding', '5px' );\r
 902                  */\r
 903                 getElement : function()\r
 904                 {\r
 905                         return this._.element;\r
 906                 },\r
 907 \r
 908                 /**\r
 909                  * Gets the name of the dialog.\r
 910                  * @returns {String} The name of this dialog.\r
 911                  * @example\r
 912                  * var dialogName = dialogObj.getName();\r
 913                  */\r
 914                 getName : function()\r
 915                 {\r
 916                         return this._.name;\r
 917                 },\r
 918 \r
 919                 /**\r
 920                  * Gets a dialog UI element object from a dialog page.\r
 921                  * @param {String} pageId id of dialog page.\r
 922                  * @param {String} elementId id of UI element.\r
 923                  * @example\r
 924                  * @returns {CKEDITOR.ui.dialog.uiElement} The dialog UI element.\r
 925                  */\r
 926                 getContentElement : function( pageId, elementId )\r
 927                 {\r
 928                         return this._.contents[pageId][elementId];\r
 929                 },\r
 930 \r
 931                 /**\r
 932                  * Gets the value of a dialog UI element.\r
 933                  * @param {String} pageId id of dialog page.\r
 934                  * @param {String} elementId id of UI element.\r
 935                  * @example\r
 936                  * @returns {Object} The value of the UI element.\r
 937                  */\r
 938                 getValueOf : function( pageId, elementId )\r
 939                 {\r
 940                         return this.getContentElement( pageId, elementId ).getValue();\r
 941                 },\r
 942 \r
 943                 /**\r
 944                  * Sets the value of a dialog UI element.\r
 945                  * @param {String} pageId id of the dialog page.\r
 946                  * @param {String} elementId id of the UI element.\r
 947                  * @param {Object} value The new value of the UI element.\r
 948                  * @example\r
 949                  */\r
 950                 setValueOf : function( pageId, elementId, value )\r
 951                 {\r
 952                         return this.getContentElement( pageId, elementId ).setValue( value );\r
 953                 },\r
 954 \r
 955                 /**\r
 956                  * Gets the UI element of a button in the dialog's button row.\r
 957                  * @param {String} id The id of the button.\r
 958                  * @example\r
 959                  * @returns {CKEDITOR.ui.dialog.button} The button object.\r
 960                  */\r
 961                 getButton : function( id )\r
 962                 {\r
 963                         return this._.buttons[ id ];\r
 964                 },\r
 965 \r
 966                 /**\r
 967                  * Simulates a click to a dialog button in the dialog's button row.\r
 968                  * @param {String} id The id of the button.\r
 969                  * @example\r
 970                  * @returns The return value of the dialog's "click" event.\r
 971                  */\r
 972                 click : function( id )\r
 973                 {\r
 974                         return this._.buttons[ id ].click();\r
 975                 },\r
 976 \r
 977                 /**\r
 978                  * Disables a dialog button.\r
 979                  * @param {String} id The id of the button.\r
 980                  * @example\r
 981                  */\r
 982                 disableButton : function( id )\r
 983                 {\r
 984                         return this._.buttons[ id ].disable();\r
 985                 },\r
 986 \r
 987                 /**\r
 988                  * Enables a dialog button.\r
 989                  * @param {String} id The id of the button.\r
 990                  * @example\r
 991                  */\r
 992                 enableButton : function( id )\r
 993                 {\r
 994                         return this._.buttons[ id ].enable();\r
 995                 },\r
 996 \r
 997                 /**\r
 998                  * Gets the number of pages in the dialog.\r
 999                  * @returns {Number} Page count.\r
1000                  */\r
1001                 getPageCount : function()\r
1002                 {\r
1003                         return this._.pageCount;\r
1004                 },\r
1005 \r
1006                 /**\r
1007                  * Gets the editor instance which opened this dialog.\r
1008                  * @returns {CKEDITOR.editor} Parent editor instances.\r
1009                  */\r
1010                 getParentEditor : function()\r
1011                 {\r
1012                         return this._.editor;\r
1013                 },\r
1014 \r
1015                 /**\r
1016                  * Gets the element that was selected when opening the dialog, if any.\r
1017                  * @returns {CKEDITOR.dom.element} The element that was selected, or null.\r
1018                  */\r
1019                 getSelectedElement : function()\r
1020                 {\r
1021                         return this.getParentEditor().getSelection().getSelectedElement();\r
1022                 },\r
1023 \r
1024                 /**\r
1025                  * Adds element to dialog's focusable list.\r
1026                  *\r
1027                  * @param {CKEDITOR.dom.element} element\r
1028                  * @param {Number} [index]\r
1029                  */\r
1030                 addFocusable: function( element, index ) {\r
1031                         if ( typeof index == 'undefined' )\r
1032                         {\r
1033                                 index = this._.focusList.length;\r
1034                                 this._.focusList.push( new Focusable( this, element, index ) );\r
1035                         }\r
1036                         else\r
1037                         {\r
1038                                 this._.focusList.splice( index, 0, new Focusable( this, element, index ) );\r
1039                                 for ( var i = index + 1 ; i < this._.focusList.length ; i++ )\r
1040                                         this._.focusList[ i ].focusIndex++;\r
1041                         }\r
1042                 }\r
1043         };\r
1044 \r
1045         CKEDITOR.tools.extend( CKEDITOR.dialog,\r
1046                 /**\r
1047                  * @lends CKEDITOR.dialog\r
1048                  */\r
1049                 {\r
1050                         /**\r
1051                          * Registers a dialog.\r
1052                          * @param {String} name The dialog's name.\r
1053                          * @param {Function|String} dialogDefinition\r
1054                          * A function returning the dialog's definition, or the URL to the .js file holding the function.\r
1055                          * The function should accept an argument "editor" which is the current editor instance, and\r
1056                          * return an object conforming to {@link CKEDITOR.dialog.dialogDefinition}.\r
1057                          * @example\r
1058                          * @see CKEDITOR.dialog.dialogDefinition\r
1059                          */\r
1060                         add : function( name, dialogDefinition )\r
1061                         {\r
1062                                 // Avoid path registration from multiple instances override definition.\r
1063                                 if ( !this._.dialogDefinitions[name]\r
1064                                         || typeof  dialogDefinition == 'function' )\r
1065                                         this._.dialogDefinitions[name] = dialogDefinition;\r
1066                         },\r
1067 \r
1068                         exists : function( name )\r
1069                         {\r
1070                                 return !!this._.dialogDefinitions[ name ];\r
1071                         },\r
1072 \r
1073                         getCurrent : function()\r
1074                         {\r
1075                                 return CKEDITOR.dialog._.currentTop;\r
1076                         },\r
1077 \r
1078                         /**\r
1079                          * The default OK button for dialogs. Fires the "ok" event and closes the dialog if the event succeeds.\r
1080                          * @static\r
1081                          * @field\r
1082                          * @example\r
1083                          * @type Function\r
1084                          */\r
1085                         okButton : (function()\r
1086                         {\r
1087                                 var retval = function( editor, override )\r
1088                                 {\r
1089                                         override = override || {};\r
1090                                         return CKEDITOR.tools.extend( {\r
1091                                                 id : 'ok',\r
1092                                                 type : 'button',\r
1093                                                 label : editor.lang.common.ok,\r
1094                                                 'class' : 'cke_dialog_ui_button_ok',\r
1095                                                 onClick : function( evt )\r
1096                                                 {\r
1097                                                         var dialog = evt.data.dialog;\r
1098                                                         if ( dialog.fire( 'ok', { hide : true } ).hide !== false )\r
1099                                                                 dialog.hide();\r
1100                                                 }\r
1101                                         }, override, true );\r
1102                                 };\r
1103                                 retval.type = 'button';\r
1104                                 retval.override = function( override )\r
1105                                 {\r
1106                                         return CKEDITOR.tools.extend( function( editor ){ return retval( editor, override ); },\r
1107                                                         { type : 'button' }, true );\r
1108                                 };\r
1109                                 return retval;\r
1110                         })(),\r
1111 \r
1112                         /**\r
1113                          * The default cancel button for dialogs. Fires the "cancel" event and closes the dialog if no UI element value changed.\r
1114                          * @static\r
1115                          * @field\r
1116                          * @example\r
1117                          * @type Function\r
1118                          */\r
1119                         cancelButton : (function()\r
1120                         {\r
1121                                 var retval = function( editor, override )\r
1122                                 {\r
1123                                         override = override || {};\r
1124                                         return CKEDITOR.tools.extend( {\r
1125                                                 id : 'cancel',\r
1126                                                 type : 'button',\r
1127                                                 label : editor.lang.common.cancel,\r
1128                                                 'class' : 'cke_dialog_ui_button_cancel',\r
1129                                                 onClick : function( evt )\r
1130                                                 {\r
1131                                                         var dialog = evt.data.dialog;\r
1132                                                         if ( dialog.fire( 'cancel', { hide : true } ).hide !== false )\r
1133                                                                 dialog.hide();\r
1134                                                 }\r
1135                                         }, override, true );\r
1136                                 };\r
1137                                 retval.type = 'button';\r
1138                                 retval.override = function( override )\r
1139                                 {\r
1140                                         return CKEDITOR.tools.extend( function( editor ){ return retval( editor, override ); },\r
1141                                                         { type : 'button' }, true );\r
1142                                 };\r
1143                                 return retval;\r
1144                         })(),\r
1145 \r
1146                         /**\r
1147                          * Registers a dialog UI element.\r
1148                          * @param {String} typeName The name of the UI element.\r
1149                          * @param {Function} builder The function to build the UI element.\r
1150                          * @example\r
1151                          */\r
1152                         addUIElement : function( typeName, builder )\r
1153                         {\r
1154                                 this._.uiElementBuilders[ typeName ] = builder;\r
1155                         }\r
1156                 });\r
1157 \r
1158         CKEDITOR.dialog._ =\r
1159         {\r
1160                 uiElementBuilders : {},\r
1161 \r
1162                 dialogDefinitions : {},\r
1163 \r
1164                 currentTop : null,\r
1165 \r
1166                 currentZIndex : null\r
1167         };\r
1168 \r
1169         // "Inherit" (copy actually) from CKEDITOR.event.\r
1170         CKEDITOR.event.implementOn( CKEDITOR.dialog );\r
1171         CKEDITOR.event.implementOn( CKEDITOR.dialog.prototype, true );\r
1172 \r
1173         var defaultDialogDefinition =\r
1174         {\r
1175                 resizable : CKEDITOR.DIALOG_RESIZE_NONE,\r
1176                 minWidth : 600,\r
1177                 minHeight : 400,\r
1178                 buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]\r
1179         };\r
1180 \r
1181         // Tool function used to return an item from an array based on its id\r
1182         // property.\r
1183         var getById = function( array, id, recurse )\r
1184         {\r
1185                 for ( var i = 0, item ; ( item = array[ i ] ) ; i++ )\r
1186                 {\r
1187                         if ( item.id == id )\r
1188                                 return item;\r
1189                         if ( recurse && item[ recurse ] )\r
1190                         {\r
1191                                 var retval = getById( item[ recurse ], id, recurse ) ;\r
1192                                 if ( retval )\r
1193                                         return retval;\r
1194                         }\r
1195                 }\r
1196                 return null;\r
1197         };\r
1198 \r
1199         // Tool function used to add an item into an array.\r
1200         var addById = function( array, newItem, nextSiblingId, recurse, nullIfNotFound )\r
1201         {\r
1202                 if ( nextSiblingId )\r
1203                 {\r
1204                         for ( var i = 0, item ; ( item = array[ i ] ) ; i++ )\r
1205                         {\r
1206                                 if ( item.id == nextSiblingId )\r
1207                                 {\r
1208                                         array.splice( i, 0, newItem );\r
1209                                         return newItem;\r
1210                                 }\r
1211 \r
1212                                 if ( recurse && item[ recurse ] )\r
1213                                 {\r
1214                                         var retval = addById( item[ recurse ], newItem, nextSiblingId, recurse, true );\r
1215                                         if ( retval )\r
1216                                                 return retval;\r
1217                                 }\r
1218                         }\r
1219 \r
1220                         if ( nullIfNotFound )\r
1221                                 return null;\r
1222                 }\r
1223 \r
1224                 array.push( newItem );\r
1225                 return newItem;\r
1226         };\r
1227 \r
1228         // Tool function used to remove an item from an array based on its id.\r
1229         var removeById = function( array, id, recurse )\r
1230         {\r
1231                 for ( var i = 0, item ; ( item = array[ i ] ) ; i++ )\r
1232                 {\r
1233                         if ( item.id == id )\r
1234                                 return array.splice( i, 1 );\r
1235                         if ( recurse && item[ recurse ] )\r
1236                         {\r
1237                                 var retval = removeById( item[ recurse ], id, recurse );\r
1238                                 if ( retval )\r
1239                                         return retval;\r
1240                         }\r
1241                 }\r
1242                 return null;\r
1243         };\r
1244 \r
1245         /**\r
1246          * This class is not really part of the API. It is the "definition" property value\r
1247          * passed to "dialogDefinition" event handlers.\r
1248          * @constructor\r
1249          * @name CKEDITOR.dialog.dialogDefinitionObject\r
1250          * @extends CKEDITOR.dialog.dialogDefinition\r
1251          * @example\r
1252          * CKEDITOR.on( 'dialogDefinition', function( evt )\r
1253          *      {\r
1254          *              var definition = evt.data.definition;\r
1255          *              var content = definition.getContents( 'page1' );\r
1256          *              ...\r
1257          *      } );\r
1258          */\r
1259         var definitionObject = function( dialog, dialogDefinition )\r
1260         {\r
1261                 // TODO : Check if needed.\r
1262                 this.dialog = dialog;\r
1263 \r
1264                 // Transform the contents entries in contentObjects.\r
1265                 var contents = dialogDefinition.contents;\r
1266                 for ( var i = 0, content ; ( content = contents[i] ) ; i++ )\r
1267                         contents[ i ] = new contentObject( dialog, content );\r
1268 \r
1269                 CKEDITOR.tools.extend( this, dialogDefinition );\r
1270         };\r
1271 \r
1272         definitionObject.prototype =\r
1273         /** @lends CKEDITOR.dialog.dialogDefinitionObject.prototype */\r
1274         {\r
1275                 /**\r
1276                  * Gets a content definition.\r
1277                  * @param {String} id The id of the content definition.\r
1278                  * @returns {CKEDITOR.dialog.contentDefinition} The content definition\r
1279                  *              matching id.\r
1280                  */\r
1281                 getContents : function( id )\r
1282                 {\r
1283                         return getById( this.contents, id );\r
1284                 },\r
1285 \r
1286                 /**\r
1287                  * Gets a button definition.\r
1288                  * @param {String} id The id of the button definition.\r
1289                  * @returns {CKEDITOR.dialog.buttonDefinition} The button definition\r
1290                  *              matching id.\r
1291                  */\r
1292                 getButton : function( id )\r
1293                 {\r
1294                         return getById( this.buttons, id );\r
1295                 },\r
1296 \r
1297                 /**\r
1298                  * Adds a content definition object under this dialog definition.\r
1299                  * @param {CKEDITOR.dialog.contentDefinition} contentDefinition The\r
1300                  *              content definition.\r
1301                  * @param {String} [nextSiblingId] The id of an existing content\r
1302                  *              definition which the new content definition will be inserted\r
1303                  *              before. Omit if the new content definition is to be inserted as\r
1304                  *              the last item.\r
1305                  * @returns {CKEDITOR.dialog.contentDefinition} The inserted content\r
1306                  *              definition.\r
1307                  */\r
1308                 addContents : function( contentDefinition, nextSiblingId )\r
1309                 {\r
1310                         return addById( this.contents, contentDefinition, nextSiblingId );\r
1311                 },\r
1312 \r
1313                 /**\r
1314                  * Adds a button definition object under this dialog definition.\r
1315                  * @param {CKEDITOR.dialog.buttonDefinition} buttonDefinition The\r
1316                  *              button definition.\r
1317                  * @param {String} [nextSiblingId] The id of an existing button\r
1318                  *              definition which the new button definition will be inserted\r
1319                  *              before. Omit if the new button definition is to be inserted as\r
1320                  *              the last item.\r
1321                  * @returns {CKEDITOR.dialog.buttonDefinition} The inserted button\r
1322                  *              definition.\r
1323                  */\r
1324                 addButton : function( buttonDefinition, nextSiblingId )\r
1325                 {\r
1326                         return addById( this.buttons, buttonDefinition, nextSiblingId );\r
1327                 },\r
1328 \r
1329                 /**\r
1330                  * Removes a content definition from this dialog definition.\r
1331                  * @param {String} id The id of the content definition to be removed.\r
1332                  * @returns {CKEDITOR.dialog.contentDefinition} The removed content\r
1333                  *              definition.\r
1334                  */\r
1335                 removeContents : function( id )\r
1336                 {\r
1337                         removeById( this.contents, id );\r
1338                 },\r
1339 \r
1340                 /**\r
1341                  * Removes a button definition from the dialog definition.\r
1342                  * @param {String} id The id of the button definition to be removed.\r
1343                  * @returns {CKEDITOR.dialog.buttonDefinition} The removed button\r
1344                  *              definition.\r
1345                  */\r
1346                 removeButton : function( id )\r
1347                 {\r
1348                         removeById( this.buttons, id );\r
1349                 }\r
1350         };\r
1351 \r
1352         /**\r
1353          * This class is not really part of the API. It is the template of the\r
1354          * objects representing content pages inside the\r
1355          * CKEDITOR.dialog.dialogDefinitionObject.\r
1356          * @constructor\r
1357          * @name CKEDITOR.dialog.contentDefinitionObject\r
1358          * @example\r
1359          * CKEDITOR.on( 'dialogDefinition', function( evt )\r
1360          *      {\r
1361          *              var definition = evt.data.definition;\r
1362          *              var content = definition.getContents( 'page1' );\r
1363          *              content.remove( 'textInput1' );\r
1364          *              ...\r
1365          *      } );\r
1366          */\r
1367         function contentObject( dialog, contentDefinition )\r
1368         {\r
1369                 this._ =\r
1370                 {\r
1371                         dialog : dialog\r
1372                 };\r
1373 \r
1374                 CKEDITOR.tools.extend( this, contentDefinition );\r
1375         }\r
1376 \r
1377         contentObject.prototype =\r
1378         /** @lends CKEDITOR.dialog.contentDefinitionObject.prototype */\r
1379         {\r
1380                 /**\r
1381                  * Gets a UI element definition under the content definition.\r
1382                  * @param {String} id The id of the UI element definition.\r
1383                  * @returns {CKEDITOR.dialog.uiElementDefinition}\r
1384                  */\r
1385                 get : function( id )\r
1386                 {\r
1387                         return getById( this.elements, id, 'children' );\r
1388                 },\r
1389 \r
1390                 /**\r
1391                  * Adds a UI element definition to the content definition.\r
1392                  * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition The\r
1393                  *              UI elemnet definition to be added.\r
1394                  * @param {String} nextSiblingId The id of an existing UI element\r
1395                  *              definition which the new UI element definition will be inserted\r
1396                  *              before. Omit if the new button definition is to be inserted as\r
1397                  *              the last item.\r
1398                  * @returns {CKEDITOR.dialog.uiElementDefinition} The element\r
1399                  *              definition inserted.\r
1400                  */\r
1401                 add : function( elementDefinition, nextSiblingId )\r
1402                 {\r
1403                         return addById( this.elements, elementDefinition, nextSiblingId, 'children' );\r
1404                 },\r
1405 \r
1406                 /**\r
1407                  * Removes a UI element definition from the content definition.\r
1408                  * @param {String} id The id of the UI element definition to be\r
1409                  *              removed.\r
1410                  * @returns {CKEDITOR.dialog.uiElementDefinition} The element\r
1411                  *              definition removed.\r
1412                  * @example\r
1413                  */\r
1414                 remove : function( id )\r
1415                 {\r
1416                         removeById( this.elements, id, 'children' );\r
1417                 }\r
1418         };\r
1419 \r
1420         function initDragAndDrop( dialog )\r
1421         {\r
1422                 var lastCoords = null,\r
1423                         abstractDialogCoords = null,\r
1424                         element = dialog.getElement().getFirst(),\r
1425                         editor = dialog.getParentEditor(),\r
1426                         magnetDistance = editor.config.dialog_magnetDistance,\r
1427                         margins = skinData[ editor.skinName ].margins || [ 0, 0, 0, 0 ];\r
1428 \r
1429                 function mouseMoveHandler( evt )\r
1430                 {\r
1431                         var dialogSize = dialog.getSize(),\r
1432                                 viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),\r
1433                                 x = evt.data.$.screenX,\r
1434                                 y = evt.data.$.screenY,\r
1435                                 dx = x - lastCoords.x,\r
1436                                 dy = y - lastCoords.y,\r
1437                                 realX, realY;\r
1438 \r
1439                         lastCoords = { x : x, y : y };\r
1440                         abstractDialogCoords.x += dx;\r
1441                         abstractDialogCoords.y += dy;\r
1442 \r
1443                         if ( abstractDialogCoords.x + margins[3] < magnetDistance )\r
1444                                 realX = - margins[3];\r
1445                         else if ( abstractDialogCoords.x - margins[1] > viewPaneSize.width - dialogSize.width - magnetDistance )\r
1446                                 realX = viewPaneSize.width - dialogSize.width + margins[1];\r
1447                         else\r
1448                                 realX = abstractDialogCoords.x;\r
1449 \r
1450                         if ( abstractDialogCoords.y + margins[0] < magnetDistance )\r
1451                                 realY = - margins[0];\r
1452                         else if ( abstractDialogCoords.y - margins[2] > viewPaneSize.height - dialogSize.height - magnetDistance )\r
1453                                 realY = viewPaneSize.height - dialogSize.height + margins[2];\r
1454                         else\r
1455                                 realY = abstractDialogCoords.y;\r
1456 \r
1457                         dialog.move( realX, realY );\r
1458 \r
1459                         evt.data.preventDefault();\r
1460                 }\r
1461 \r
1462                 function mouseUpHandler( evt )\r
1463                 {\r
1464                         CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );\r
1465                         CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );\r
1466 \r
1467                         if ( CKEDITOR.env.ie6Compat )\r
1468                         {\r
1469                                 var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
1470                                 coverDoc.removeListener( 'mousemove', mouseMoveHandler );\r
1471                                 coverDoc.removeListener( 'mouseup', mouseUpHandler );\r
1472                         }\r
1473                 }\r
1474 \r
1475                 dialog.parts.title.on( 'mousedown', function( evt )\r
1476                         {\r
1477                                 dialog._.updateSize = true;\r
1478 \r
1479                                 lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };\r
1480 \r
1481                                 CKEDITOR.document.on( 'mousemove', mouseMoveHandler );\r
1482                                 CKEDITOR.document.on( 'mouseup', mouseUpHandler );\r
1483                                 abstractDialogCoords = dialog.getPosition();\r
1484 \r
1485                                 if ( CKEDITOR.env.ie6Compat )\r
1486                                 {\r
1487                                         var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
1488                                         coverDoc.on( 'mousemove', mouseMoveHandler );\r
1489                                         coverDoc.on( 'mouseup', mouseUpHandler );\r
1490                                 }\r
1491 \r
1492                                 evt.data.preventDefault();\r
1493                         }, dialog );\r
1494         }\r
1495 \r
1496         function initResizeHandles( dialog )\r
1497         {\r
1498                 var definition = dialog.definition,\r
1499                         minWidth = definition.minWidth || 0,\r
1500                         minHeight = definition.minHeight || 0,\r
1501                         resizable = definition.resizable,\r
1502                         margins = skinData[ dialog.getParentEditor().skinName ].margins || [ 0, 0, 0, 0 ];\r
1503 \r
1504                 function topSizer( coords, dy )\r
1505                 {\r
1506                         coords.y += dy;\r
1507                 }\r
1508 \r
1509                 function rightSizer( coords, dx )\r
1510                 {\r
1511                         coords.x2 += dx;\r
1512                 }\r
1513 \r
1514                 function bottomSizer( coords, dy )\r
1515                 {\r
1516                         coords.y2 += dy;\r
1517                 }\r
1518 \r
1519                 function leftSizer( coords, dx )\r
1520                 {\r
1521                         coords.x += dx;\r
1522                 }\r
1523 \r
1524                 var lastCoords = null,\r
1525                         abstractDialogCoords = null,\r
1526                         magnetDistance = dialog._.editor.config.magnetDistance,\r
1527                         parts = [ 'tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br' ];\r
1528 \r
1529                 function mouseDownHandler( evt )\r
1530                 {\r
1531                         var partName = evt.listenerData.part, size = dialog.getSize();\r
1532                         abstractDialogCoords = dialog.getPosition();\r
1533                         CKEDITOR.tools.extend( abstractDialogCoords,\r
1534                                 {\r
1535                                         x2 : abstractDialogCoords.x + size.width,\r
1536                                         y2 : abstractDialogCoords.y + size.height\r
1537                                 } );\r
1538                         lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };\r
1539 \r
1540                         CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );\r
1541                         CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );\r
1542 \r
1543                         if ( CKEDITOR.env.ie6Compat )\r
1544                         {\r
1545                                 var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
1546                                 coverDoc.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );\r
1547                                 coverDoc.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );\r
1548                         }\r
1549 \r
1550                         evt.data.preventDefault();\r
1551                 }\r
1552 \r
1553                 function mouseMoveHandler( evt )\r
1554                 {\r
1555                         var x = evt.data.$.screenX,\r
1556                                 y = evt.data.$.screenY,\r
1557                                 dx = x - lastCoords.x,\r
1558                                 dy = y - lastCoords.y,\r
1559                                 viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),\r
1560                                 partName = evt.listenerData.part;\r
1561 \r
1562                         if ( partName.search( 't' ) != -1 )\r
1563                                 topSizer( abstractDialogCoords, dy );\r
1564                         if ( partName.search( 'l' ) != -1 )\r
1565                                 leftSizer( abstractDialogCoords, dx );\r
1566                         if ( partName.search( 'b' ) != -1 )\r
1567                                 bottomSizer( abstractDialogCoords, dy );\r
1568                         if ( partName.search( 'r' ) != -1 )\r
1569                                 rightSizer( abstractDialogCoords, dx );\r
1570 \r
1571                         lastCoords = { x : x, y : y };\r
1572 \r
1573                         var realX, realY, realX2, realY2;\r
1574 \r
1575                         if ( abstractDialogCoords.x + margins[3] < magnetDistance )\r
1576                                 realX = - margins[3];\r
1577                         else if ( partName.search( 'l' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )\r
1578                                 realX = abstractDialogCoords.x2 - minWidth;\r
1579                         else\r
1580                                 realX = abstractDialogCoords.x;\r
1581 \r
1582                         if ( abstractDialogCoords.y + margins[0] < magnetDistance )\r
1583                                 realY = - margins[0];\r
1584                         else if ( partName.search( 't' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )\r
1585                                 realY = abstractDialogCoords.y2 - minHeight;\r
1586                         else\r
1587                                 realY = abstractDialogCoords.y;\r
1588 \r
1589                         if ( abstractDialogCoords.x2 - margins[1] > viewPaneSize.width - magnetDistance )\r
1590                                 realX2 = viewPaneSize.width + margins[1] ;\r
1591                         else if ( partName.search( 'r' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )\r
1592                                 realX2 = abstractDialogCoords.x + minWidth;\r
1593                         else\r
1594                                 realX2 = abstractDialogCoords.x2;\r
1595 \r
1596                         if ( abstractDialogCoords.y2 - margins[2] > viewPaneSize.height - magnetDistance )\r
1597                                 realY2= viewPaneSize.height + margins[2] ;\r
1598                         else if ( partName.search( 'b' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )\r
1599                                 realY2 = abstractDialogCoords.y + minHeight;\r
1600                         else\r
1601                                 realY2 = abstractDialogCoords.y2 ;\r
1602 \r
1603                         dialog.move( realX, realY );\r
1604                         dialog.resize( realX2 - realX, realY2 - realY );\r
1605 \r
1606                         evt.data.preventDefault();\r
1607                 }\r
1608 \r
1609                 function mouseUpHandler( evt )\r
1610                 {\r
1611                         CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );\r
1612                         CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );\r
1613 \r
1614                         if ( CKEDITOR.env.ie6Compat )\r
1615                         {\r
1616                                 var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
1617                                 coverDoc.removeListener( 'mouseup', mouseUpHandler );\r
1618                                 coverDoc.removeListener( 'mousemove', mouseMoveHandler );\r
1619                         }\r
1620                 }\r
1621 \r
1622 // TODO : Simplify the resize logic, having just a single resize grip <div>.\r
1623 //              var widthTest = /[lr]/,\r
1624 //                      heightTest = /[tb]/;\r
1625 //              for ( var i = 0 ; i < parts.length ; i++ )\r
1626 //              {\r
1627 //                      var element = dialog.parts[ parts[i] + '_resize' ];\r
1628 //                      if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE ||\r
1629 //                                      resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT && widthTest.test( parts[i] ) ||\r
1630 //                                      resizable == CKEDITOR.DIALOG_RESIZE_WIDTH && heightTest.test( parts[i] ) )\r
1631 //                      {\r
1632 //                              element.hide();\r
1633 //                              continue;\r
1634 //                      }\r
1635 //                      element.on( 'mousedown', mouseDownHandler, dialog, { part : parts[i] } );\r
1636 //              }\r
1637         }\r
1638 \r
1639         var resizeCover;\r
1640         var coverElement;\r
1641 \r
1642         var addCover = function( editor )\r
1643         {\r
1644                 var win = CKEDITOR.document.getWindow();\r
1645 \r
1646                 if ( !coverElement )\r
1647                 {\r
1648                         var html = [\r
1649                                         '<div style="position: ', ( CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed' ),\r
1650                                         '; z-index: ', editor.config.baseFloatZIndex,\r
1651                                         '; top: 0px; left: 0px; ',\r
1652                                         'background-color: ', editor.config.dialog_backgroundCoverColor,\r
1653                                         '" id="cke_dialog_background_cover">'\r
1654                                 ];\r
1655 \r
1656 \r
1657                         if ( CKEDITOR.env.ie6Compat )\r
1658                         {\r
1659                                 // Support for custom document.domain in IE.\r
1660                                 var isCustomDomain = CKEDITOR.env.isCustomDomain();\r
1661 \r
1662                                 html.push(\r
1663                                         '<iframe' +\r
1664                                                 ' hidefocus="true"' +\r
1665                                                 ' frameborder="0"' +\r
1666                                                 ' id="cke_dialog_background_iframe"' +\r
1667                                                 ' src="javascript:' );\r
1668 \r
1669                                 html.push(\r
1670                                                 isCustomDomain ?\r
1671                                                         'void((function(){' +\r
1672                                                                 'document.open();' +\r
1673                                                                 'document.domain=\'' + document.domain + '\';' +\r
1674                                                                 'document.close();' +\r
1675                                                         '})())'\r
1676                                                 :\r
1677                                                         '\'\'' );\r
1678 \r
1679                                 html.push(\r
1680                                                 '"' +\r
1681                                                 ' style="' +\r
1682                                                         'position:absolute;' +\r
1683                                                         'left:0;' +\r
1684                                                         'top:0;' +\r
1685                                                         'width:100%;' +\r
1686                                                         'height: 100%;' +\r
1687                                                         'progid:DXImageTransform.Microsoft.Alpha(opacity=0)">' +\r
1688                                         '</iframe>' );\r
1689                         }\r
1690 \r
1691                         html.push( '</div>' );\r
1692 \r
1693                         coverElement = CKEDITOR.dom.element.createFromHtml( html.join( '' ) );\r
1694                 }\r
1695 \r
1696                 var element = coverElement;\r
1697 \r
1698                 var resizeFunc = function()\r
1699                 {\r
1700                         var size = win.getViewPaneSize();\r
1701                         element.setStyles(\r
1702                                 {\r
1703                                         width : size.width + 'px',\r
1704                                         height : size.height + 'px'\r
1705                                 } );\r
1706                 };\r
1707 \r
1708                 var scrollFunc = function()\r
1709                 {\r
1710                         var pos = win.getScrollPosition(),\r
1711                                 cursor = CKEDITOR.dialog._.currentTop;\r
1712                         element.setStyles(\r
1713                                         {\r
1714                                                 left : pos.x + 'px',\r
1715                                                 top : pos.y + 'px'\r
1716                                         });\r
1717 \r
1718                         do\r
1719                         {\r
1720                                 var dialogPos = cursor.getPosition();\r
1721                                 cursor.move( dialogPos.x, dialogPos.y );\r
1722                         } while( ( cursor = cursor._.parentDialog ) );\r
1723                 };\r
1724 \r
1725                 resizeCover = resizeFunc;\r
1726                 win.on( 'resize', resizeFunc );\r
1727                 resizeFunc();\r
1728                 if ( CKEDITOR.env.ie6Compat )\r
1729                 {\r
1730                         // IE BUG: win.$.onscroll assignment doesn't work.. it must be window.onscroll.\r
1731                         // So we need to invent a really funny way to make it work.\r
1732                         var myScrollHandler = function()\r
1733                                 {\r
1734                                         scrollFunc();\r
1735                                         arguments.callee.prevScrollHandler.apply( this, arguments );\r
1736                                 };\r
1737                         win.$.setTimeout( function()\r
1738                                 {\r
1739                                         myScrollHandler.prevScrollHandler = window.onscroll || function(){};\r
1740                                         window.onscroll = myScrollHandler;\r
1741                                 }, 0 );\r
1742                         scrollFunc();\r
1743                 }\r
1744                 element.setOpacity( editor.config.dialog_backgroundCoverOpacity );\r
1745                 element.appendTo( CKEDITOR.document.getBody() );\r
1746         };\r
1747 \r
1748         var removeCover = function()\r
1749         {\r
1750                 if ( !coverElement )\r
1751                         return;\r
1752 \r
1753                 var win = CKEDITOR.document.getWindow();\r
1754                 coverElement.remove();\r
1755                 win.removeListener( 'resize', resizeCover );\r
1756 \r
1757                 if ( CKEDITOR.env.ie6Compat )\r
1758                 {\r
1759                         win.$.setTimeout( function()\r
1760                                 {\r
1761                                         var prevScrollHandler = window.onscroll && window.onscroll.prevScrollHandler;\r
1762                                         window.onscroll = prevScrollHandler || null;\r
1763                                 }, 0 );\r
1764                 }\r
1765                 resizeCover = null;\r
1766         };\r
1767 \r
1768         var accessKeyProcessors = {};\r
1769 \r
1770         var accessKeyDownHandler = function( evt )\r
1771         {\r
1772                 var ctrl = evt.data.$.ctrlKey || evt.data.$.metaKey,\r
1773                         alt = evt.data.$.altKey,\r
1774                         shift = evt.data.$.shiftKey,\r
1775                         key = String.fromCharCode( evt.data.$.keyCode ),\r
1776                         keyProcessor = accessKeyProcessors[( ctrl ? 'CTRL+' : '' ) + ( alt ? 'ALT+' : '') + ( shift ? 'SHIFT+' : '' ) + key];\r
1777 \r
1778                 if ( !keyProcessor || !keyProcessor.length )\r
1779                         return;\r
1780 \r
1781                 keyProcessor = keyProcessor[keyProcessor.length - 1];\r
1782                 keyProcessor.keydown && keyProcessor.keydown.call( keyProcessor.uiElement, keyProcessor.dialog, keyProcessor.key );\r
1783                 evt.data.preventDefault();\r
1784         };\r
1785 \r
1786         var accessKeyUpHandler = function( evt )\r
1787         {\r
1788                 var ctrl = evt.data.$.ctrlKey || evt.data.$.metaKey,\r
1789                         alt = evt.data.$.altKey,\r
1790                         shift = evt.data.$.shiftKey,\r
1791                         key = String.fromCharCode( evt.data.$.keyCode ),\r
1792                         keyProcessor = accessKeyProcessors[( ctrl ? 'CTRL+' : '' ) + ( alt ? 'ALT+' : '') + ( shift ? 'SHIFT+' : '' ) + key];\r
1793 \r
1794                 if ( !keyProcessor || !keyProcessor.length )\r
1795                         return;\r
1796 \r
1797                 keyProcessor = keyProcessor[keyProcessor.length - 1];\r
1798                 keyProcessor.keyup && keyProcessor.keyup.call( keyProcessor.uiElement, keyProcessor.dialog, keyProcessor.key );\r
1799                 evt.data.preventDefault();\r
1800         };\r
1801 \r
1802         var registerAccessKey = function( uiElement, dialog, key, downFunc, upFunc )\r
1803         {\r
1804                 var procList = accessKeyProcessors[key] || ( accessKeyProcessors[key] = [] );\r
1805                 procList.push( {\r
1806                                 uiElement : uiElement,\r
1807                                 dialog : dialog,\r
1808                                 key : key,\r
1809                                 keyup : upFunc || uiElement.accessKeyUp,\r
1810                                 keydown : downFunc || uiElement.accessKeyDown\r
1811                         } );\r
1812         };\r
1813 \r
1814         var unregisterAccessKey = function( obj )\r
1815         {\r
1816                 for ( var i in accessKeyProcessors )\r
1817                 {\r
1818                         var list = accessKeyProcessors[i];\r
1819                         for ( var j = list.length - 1 ; j >= 0 ; j-- )\r
1820                         {\r
1821                                 if ( list[j].dialog == obj || list[j].uiElement == obj )\r
1822                                         list.splice( j, 1 );\r
1823                         }\r
1824                         if ( list.length === 0 )\r
1825                                 delete accessKeyProcessors[i];\r
1826                 }\r
1827         };\r
1828 \r
1829         var tabAccessKeyUp = function( dialog, key )\r
1830         {\r
1831                 if ( dialog._.accessKeyMap[key] )\r
1832                         dialog.selectPage( dialog._.accessKeyMap[key] );\r
1833         };\r
1834 \r
1835         var tabAccessKeyDown = function( dialog, key )\r
1836         {\r
1837         };\r
1838 \r
1839         (function()\r
1840         {\r
1841                 CKEDITOR.ui.dialog =\r
1842                 {\r
1843                         /**\r
1844                          * The base class of all dialog UI elements.\r
1845                          * @constructor\r
1846                          * @param {CKEDITOR.dialog} dialog Parent dialog object.\r
1847                          * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition Element\r
1848                          * definition. Accepted fields:\r
1849                          * <ul>\r
1850                          *      <li><strong>id</strong> (Required) The id of the UI element. See {@link\r
1851                          *      CKEDITOR.dialog#getContentElement}</li>\r
1852                          *      <li><strong>type</strong> (Required) The type of the UI element. The\r
1853                          *      value to this field specifies which UI element class will be used to\r
1854                          *      generate the final widget.</li>\r
1855                          *      <li><strong>title</strong> (Optional) The popup tooltip for the UI\r
1856                          *      element.</li>\r
1857                          *      <li><strong>hidden</strong> (Optional) A flag that tells if the element\r
1858                          *      should be initially visible.</li>\r
1859                          *      <li><strong>className</strong> (Optional) Additional CSS class names\r
1860                          *      to add to the UI element. Separated by space.</li>\r
1861                          *      <li><strong>style</strong> (Optional) Additional CSS inline styles\r
1862                          *      to add to the UI element. A semicolon (;) is required after the last\r
1863                          *      style declaration.</li>\r
1864                          *      <li><strong>accessKey</strong> (Optional) The alphanumeric access key\r
1865                          *      for this element. Access keys are automatically prefixed by CTRL.</li>\r
1866                          *      <li><strong>on*</strong> (Optional) Any UI element definition field that\r
1867                          *      starts with <em>on</em> followed immediately by a capital letter and\r
1868                          *      probably more letters is an event handler. Event handlers may be further\r
1869                          *      divided into registered event handlers and DOM event handlers. Please\r
1870                          *      refer to {@link CKEDITOR.ui.dialog.uiElement#registerEvents} and\r
1871                          *      {@link CKEDITOR.ui.dialog.uiElement#eventProcessors} for more\r
1872                          *      information.</li>\r
1873                          * </ul>\r
1874                          * @param {Array} htmlList\r
1875                          * List of HTML code to be added to the dialog's content area.\r
1876                          * @param {Function|String} nodeNameArg\r
1877                          * A function returning a string, or a simple string for the node name for\r
1878                          * the root DOM node. Default is 'div'.\r
1879                          * @param {Function|Object} stylesArg\r
1880                          * A function returning an object, or a simple object for CSS styles applied\r
1881                          * to the DOM node. Default is empty object.\r
1882                          * @param {Function|Object} attributesArg\r
1883                          * A fucntion returning an object, or a simple object for attributes applied\r
1884                          * to the DOM node. Default is empty object.\r
1885                          * @param {Function|String} contentsArg\r
1886                          * A function returning a string, or a simple string for the HTML code inside\r
1887                          * the root DOM node. Default is empty string.\r
1888                          * @example\r
1889                          */\r
1890                         uiElement : function( dialog, elementDefinition, htmlList, nodeNameArg, stylesArg, attributesArg, contentsArg )\r
1891                         {\r
1892                                 if ( arguments.length < 4 )\r
1893                                         return;\r
1894 \r
1895                                 var nodeName = ( nodeNameArg.call ? nodeNameArg( elementDefinition ) : nodeNameArg ) || 'div',\r
1896                                         html = [ '<', nodeName, ' ' ],\r
1897                                         styles = ( stylesArg && stylesArg.call ? stylesArg( elementDefinition ) : stylesArg ) || {},\r
1898                                         attributes = ( attributesArg && attributesArg.call ? attributesArg( elementDefinition ) : attributesArg ) || {},\r
1899                                         innerHTML = ( contentsArg && contentsArg.call ? contentsArg( dialog, elementDefinition ) : contentsArg ) || '',\r
1900                                         domId = this.domId = attributes.id || CKEDITOR.tools.getNextNumber() + '_uiElement',\r
1901                                         id = this.id = elementDefinition.id,\r
1902                                         i;\r
1903 \r
1904                                 // Set the id, a unique id is required for getElement() to work.\r
1905                                 attributes.id = domId;\r
1906 \r
1907                                 // Set the type and definition CSS class names.\r
1908                                 var classes = {};\r
1909                                 if ( elementDefinition.type )\r
1910                                         classes[ 'cke_dialog_ui_' + elementDefinition.type ] = 1;\r
1911                                 if ( elementDefinition.className )\r
1912                                         classes[ elementDefinition.className ] = 1;\r
1913                                 var attributeClasses = ( attributes['class'] && attributes['class'].split ) ? attributes['class'].split( ' ' ) : [];\r
1914                                 for ( i = 0 ; i < attributeClasses.length ; i++ )\r
1915                                 {\r
1916                                         if ( attributeClasses[i] )\r
1917                                                 classes[ attributeClasses[i] ] = 1;\r
1918                                 }\r
1919                                 var finalClasses = [];\r
1920                                 for ( i in classes )\r
1921                                         finalClasses.push( i );\r
1922                                 attributes['class'] = finalClasses.join( ' ' );\r
1923 \r
1924                                 // Set the popup tooltop.\r
1925                                 if ( elementDefinition.title )\r
1926                                         attributes.title = elementDefinition.title;\r
1927 \r
1928                                 // Write the inline CSS styles.\r
1929                                 var styleStr = ( elementDefinition.style || '' ).split( ';' );\r
1930                                 for ( i in styles )\r
1931                                         styleStr.push( i + ':' + styles[i] );\r
1932                                 if ( elementDefinition.hidden )\r
1933                                         styleStr.push( 'display:none' );\r
1934                                 for ( i = styleStr.length - 1 ; i >= 0 ; i-- )\r
1935                                 {\r
1936                                         if ( styleStr[i] === '' )\r
1937                                                 styleStr.splice( i, 1 );\r
1938                                 }\r
1939                                 if ( styleStr.length > 0 )\r
1940                                         attributes.style = ( attributes.style ? ( attributes.style + '; ' ) : '' ) + styleStr.join( '; ' );\r
1941 \r
1942                                 // Write the attributes.\r
1943                                 for ( i in attributes )\r
1944                                         html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[i] ) + '" ');\r
1945 \r
1946                                 // Write the content HTML.\r
1947                                 html.push( '>', innerHTML, '</', nodeName, '>' );\r
1948 \r
1949                                 // Add contents to the parent HTML array.\r
1950                                 htmlList.push( html.join( '' ) );\r
1951 \r
1952                                 ( this._ || ( this._ = {} ) ).dialog = dialog;\r
1953 \r
1954                                 // Override isChanged if it is defined in element definition.\r
1955                                 if ( typeof( elementDefinition.isChanged ) == 'boolean' )\r
1956                                         this.isChanged = function(){ return elementDefinition.isChanged; };\r
1957                                 if ( typeof( elementDefinition.isChanged ) == 'function' )\r
1958                                         this.isChanged = elementDefinition.isChanged;\r
1959 \r
1960                                 // Add events.\r
1961                                 CKEDITOR.event.implementOn( this );\r
1962 \r
1963                                 this.registerEvents( elementDefinition );\r
1964                                 if ( this.accessKeyUp && this.accessKeyDown && elementDefinition.accessKey )\r
1965                                         registerAccessKey( this, dialog, 'CTRL+' + elementDefinition.accessKey );\r
1966 \r
1967                                 var me = this;\r
1968                                 dialog.on( 'load', function()\r
1969                                         {\r
1970                                                 if ( me.getInputElement() )\r
1971                                                 {\r
1972                                                         me.getInputElement().on( 'focus', function()\r
1973                                                                 {\r
1974                                                                         dialog._.tabBarMode = false;\r
1975                                                                         dialog._.hasFocus = true;\r
1976                                                                         me.fire( 'focus' );\r
1977                                                                 }, me );\r
1978                                                 }\r
1979                                         } );\r
1980 \r
1981                                 // Register the object as a tab focus if it can be included.\r
1982                                 if ( this.keyboardFocusable )\r
1983                                 {\r
1984                                         this.focusIndex = dialog._.focusList.push( this ) - 1;\r
1985                                         this.on( 'focus', function()\r
1986                                                 {\r
1987                                                         dialog._.currentFocusIndex = me.focusIndex;\r
1988                                                 } );\r
1989                                 }\r
1990 \r
1991                                 // Completes this object with everything we have in the\r
1992                                 // definition.\r
1993                                 CKEDITOR.tools.extend( this, elementDefinition );\r
1994                         },\r
1995 \r
1996                         /**\r
1997                          * Horizontal layout box for dialog UI elements, auto-expends to available width of container.\r
1998                          * @constructor\r
1999                          * @extends CKEDITOR.ui.dialog.uiElement\r
2000                          * @param {CKEDITOR.dialog} dialog\r
2001                          * Parent dialog object.\r
2002                          * @param {Array} childObjList\r
2003                          * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this\r
2004                          * container.\r
2005                          * @param {Array} childHtmlList\r
2006                          * Array of HTML code that correspond to the HTML output of all the\r
2007                          * objects in childObjList.\r
2008                          * @param {Array} htmlList\r
2009                          * Array of HTML code that this element will output to.\r
2010                          * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition\r
2011                          * The element definition. Accepted fields:\r
2012                          * <ul>\r
2013                          *      <li><strong>widths</strong> (Optional) The widths of child cells.</li>\r
2014                          *      <li><strong>height</strong> (Optional) The height of the layout.</li>\r
2015                          *      <li><strong>padding</strong> (Optional) The padding width inside child\r
2016                          *       cells.</li>\r
2017                          *      <li><strong>align</strong> (Optional) The alignment of the whole layout\r
2018                          *      </li>\r
2019                          * </ul>\r
2020                          * @example\r
2021                          */\r
2022                         hbox : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )\r
2023                         {\r
2024                                 if ( arguments.length < 4 )\r
2025                                         return;\r
2026 \r
2027                                 this._ || ( this._ = {} );\r
2028 \r
2029                                 var children = this._.children = childObjList,\r
2030                                         widths = elementDefinition && elementDefinition.widths || null,\r
2031                                         height = elementDefinition && elementDefinition.height || null,\r
2032                                         styles = {},\r
2033                                         i;\r
2034                                 /** @ignore */\r
2035                                 var innerHTML = function()\r
2036                                 {\r
2037                                         var html = [ '<tbody><tr class="cke_dialog_ui_hbox">' ];\r
2038                                         for ( i = 0 ; i < childHtmlList.length ; i++ )\r
2039                                         {\r
2040                                                 var className = 'cke_dialog_ui_hbox_child',\r
2041                                                         styles = [];\r
2042                                                 if ( i === 0 )\r
2043                                                         className = 'cke_dialog_ui_hbox_first';\r
2044                                                 if ( i == childHtmlList.length - 1 )\r
2045                                                         className = 'cke_dialog_ui_hbox_last';\r
2046                                                 html.push( '<td class="', className, '" ' );\r
2047                                                 if ( widths )\r
2048                                                 {\r
2049                                                         if ( widths[i] )\r
2050                                                                 styles.push( 'width:' + CKEDITOR.tools.cssLength( widths[i] ) );\r
2051                                                 }\r
2052                                                 else\r
2053                                                         styles.push( 'width:' + Math.floor( 100 / childHtmlList.length ) + '%' );\r
2054                                                 if ( height )\r
2055                                                         styles.push( 'height:' + CKEDITOR.tools.cssLength( height ) );\r
2056                                                 if ( elementDefinition && elementDefinition.padding != undefined )\r
2057                                                         styles.push( 'padding:' + CKEDITOR.tools.cssLength( elementDefinition.padding ) );\r
2058                                                 if ( styles.length > 0 )\r
2059                                                         html.push( 'style="' + styles.join('; ') + '" ' );\r
2060                                                 html.push( '>', childHtmlList[i], '</td>' );\r
2061                                         }\r
2062                                         html.push( '</tr></tbody>' );\r
2063                                         return html.join( '' );\r
2064                                 };\r
2065 \r
2066                                 CKEDITOR.ui.dialog.uiElement.call(\r
2067                                         this,\r
2068                                         dialog,\r
2069                                         elementDefinition || { type : 'hbox' },\r
2070                                         htmlList,\r
2071                                         'table',\r
2072                                         styles,\r
2073                                         elementDefinition && elementDefinition.align && { align : elementDefinition.align } || null,\r
2074                                         innerHTML );\r
2075                         },\r
2076 \r
2077                         /**\r
2078                          * Vertical layout box for dialog UI elements.\r
2079                          * @constructor\r
2080                          * @extends CKEDITOR.ui.dialog.hbox\r
2081                          * @param {CKEDITOR.dialog} dialog\r
2082                          * Parent dialog object.\r
2083                          * @param {Array} childObjList\r
2084                          * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this\r
2085                          * container.\r
2086                          * @param {Array} childHtmlList\r
2087                          * Array of HTML code that correspond to the HTML output of all the\r
2088                          * objects in childObjList.\r
2089                          * @param {Array} htmlList\r
2090                          * Array of HTML code that this element will output to.\r
2091                          * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition\r
2092                          * The element definition. Accepted fields:\r
2093                          * <ul>\r
2094                          *      <li><strong>width</strong> (Optional) The width of the layout.</li>\r
2095                          *      <li><strong>heights</strong> (Optional) The heights of individual cells.\r
2096                          *      </li>\r
2097                          *      <li><strong>align</strong> (Optional) The alignment of the layout.</li>\r
2098                          *      <li><strong>padding</strong> (Optional) The padding width inside child\r
2099                          *      cells.</li>\r
2100                          *      <li><strong>expand</strong> (Optional) Whether the layout should expand\r
2101                          *      vertically to fill its container.</li>\r
2102                          * </ul>\r
2103                          * @example\r
2104                          */\r
2105                         vbox : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )\r
2106                         {\r
2107                                 if (arguments.length < 3 )\r
2108                                         return;\r
2109 \r
2110                                 this._ || ( this._ = {} );\r
2111 \r
2112                                 var children = this._.children = childObjList,\r
2113                                         width = elementDefinition && elementDefinition.width || null,\r
2114                                         heights = elementDefinition && elementDefinition.heights || null;\r
2115                                 /** @ignore */\r
2116                                 var innerHTML = function()\r
2117                                 {\r
2118                                         var html = [ '<table cellspacing="0" border="0" ' ];\r
2119                                         html.push( 'style="' );\r
2120                                         if ( elementDefinition && elementDefinition.expand )\r
2121                                                 html.push( 'height:100%;' );\r
2122                                         html.push( 'width:' + CKEDITOR.tools.cssLength( width || '100%' ), ';' );\r
2123                                         html.push( '"' );\r
2124                                         html.push( 'align="', CKEDITOR.tools.htmlEncode(\r
2125                                                 ( elementDefinition && elementDefinition.align ) || ( dialog.getParentEditor().lang.dir == 'ltr' ? 'left' : 'right' ) ), '" ' );\r
2126 \r
2127                                         html.push( '><tbody>' );\r
2128                                         for ( var i = 0 ; i < childHtmlList.length ; i++ )\r
2129                                         {\r
2130                                                 var styles = [];\r
2131                                                 html.push( '<tr><td ' );\r
2132                                                 if ( width )\r
2133                                                         styles.push( 'width:' + CKEDITOR.tools.cssLength( width || '100%' ) );\r
2134                                                 if ( heights )\r
2135                                                         styles.push( 'height:' + CKEDITOR.tools.cssLength( heights[i] ) );\r
2136                                                 else if ( elementDefinition && elementDefinition.expand )\r
2137                                                         styles.push( 'height:' + Math.floor( 100 / childHtmlList.length ) + '%' );\r
2138                                                 if ( elementDefinition && elementDefinition.padding != undefined )\r
2139                                                         styles.push( 'padding:' + CKEDITOR.tools.cssLength( elementDefinition.padding ) );\r
2140                                                 if ( styles.length > 0 )\r
2141                                                         html.push( 'style="', styles.join( '; ' ), '" ' );\r
2142                                                 html.push( ' class="cke_dialog_ui_vbox_child">', childHtmlList[i], '</td></tr>' );\r
2143                                         }\r
2144                                         html.push( '</tbody></table>' );\r
2145                                         return html.join( '' );\r
2146                                 };\r
2147                                 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition || { type : 'vbox' }, htmlList, 'div', null, null, innerHTML );\r
2148                         }\r
2149                 };\r
2150         })();\r
2151 \r
2152         CKEDITOR.ui.dialog.uiElement.prototype =\r
2153         {\r
2154                 /**\r
2155                  * Gets the root DOM element of this dialog UI object.\r
2156                  * @returns {CKEDITOR.dom.element} Root DOM element of UI object.\r
2157                  * @example\r
2158                  * uiElement.getElement().hide();\r
2159                  */\r
2160                 getElement : function()\r
2161                 {\r
2162                         return CKEDITOR.document.getById( this.domId );\r
2163                 },\r
2164 \r
2165                 /**\r
2166                  * Gets the DOM element that the user inputs values.\r
2167                  * This function is used by setValue(), getValue() and focus(). It should\r
2168                  * be overrided in child classes where the input element isn't the root\r
2169                  * element.\r
2170                  * @returns {CKEDITOR.dom.element} The element where the user input values.\r
2171                  * @example\r
2172                  * var rawValue = textInput.getInputElement().$.value;\r
2173                  */\r
2174                 getInputElement : function()\r
2175                 {\r
2176                         return this.getElement();\r
2177                 },\r
2178 \r
2179                 /**\r
2180                  * Gets the parent dialog object containing this UI element.\r
2181                  * @returns {CKEDITOR.dialog} Parent dialog object.\r
2182                  * @example\r
2183                  * var dialog = uiElement.getDialog();\r
2184                  */\r
2185                 getDialog : function()\r
2186                 {\r
2187                         return this._.dialog;\r
2188                 },\r
2189 \r
2190                 /**\r
2191                  * Sets the value of this dialog UI object.\r
2192                  * @param {Object} value The new value.\r
2193                  * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
2194                  * @example\r
2195                  * uiElement.setValue( 'Dingo' );\r
2196                  */\r
2197                 setValue : function( value )\r
2198                 {\r
2199                         this.getInputElement().setValue( value );\r
2200                         this.fire( 'change', { value : value } );\r
2201                         return this;\r
2202                 },\r
2203 \r
2204                 /**\r
2205                  * Gets the current value of this dialog UI object.\r
2206                  * @returns {Object} The current value.\r
2207                  * @example\r
2208                  * var myValue = uiElement.getValue();\r
2209                  */\r
2210                 getValue : function()\r
2211                 {\r
2212                         return this.getInputElement().getValue();\r
2213                 },\r
2214 \r
2215                 /**\r
2216                  * Tells whether the UI object's value has changed.\r
2217                  * @returns {Boolean} true if changed, false if not changed.\r
2218                  * @example\r
2219                  * if ( uiElement.isChanged() )\r
2220                  * &nbsp;&nbsp;confirm( 'Value changed! Continue?' );\r
2221                  */\r
2222                 isChanged : function()\r
2223                 {\r
2224                         // Override in input classes.\r
2225                         return false;\r
2226                 },\r
2227 \r
2228                 /**\r
2229                  * Selects the parent tab of this element. Usually called by focus() or overridden focus() methods.\r
2230                  * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
2231                  * @example\r
2232                  * focus : function()\r
2233                  * {\r
2234                  *              this.selectParentTab();\r
2235                  *              // do something else.\r
2236                  * }\r
2237                  */\r
2238                 selectParentTab : function()\r
2239                 {\r
2240                         var element = this.getInputElement(),\r
2241                                 cursor = element,\r
2242                                 tabId;\r
2243                         while ( ( cursor = cursor.getParent() ) && cursor.$.className.search( 'cke_dialog_page_contents' ) == -1 )\r
2244                         { /*jsl:pass*/ }\r
2245 \r
2246                         // Some widgets don't have parent tabs (e.g. OK and Cancel buttons).\r
2247                         if ( !cursor )\r
2248                                 return this;\r
2249 \r
2250                         tabId = cursor.getAttribute( 'name' );\r
2251                         // Avoid duplicate select.\r
2252                         if ( this._.dialog._.currentTabId != tabId )\r
2253                                 this._.dialog.selectPage( tabId );\r
2254                         return this;\r
2255                 },\r
2256 \r
2257                 /**\r
2258                  * Puts the focus to the UI object. Switches tabs if the UI object isn't in the active tab page.\r
2259                  * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
2260                  * @example\r
2261                  * uiElement.focus();\r
2262                  */\r
2263                 focus : function()\r
2264                 {\r
2265                         this.selectParentTab().getInputElement().focus();\r
2266                         return this;\r
2267                 },\r
2268 \r
2269                 /**\r
2270                  * Registers the on* event handlers defined in the element definition.\r
2271                  * The default behavior of this function is:\r
2272                  * <ol>\r
2273                  *  <li>\r
2274                  *      If the on* event is defined in the class's eventProcesors list,\r
2275                  *      then the registration is delegated to the corresponding function\r
2276                  *      in the eventProcessors list.\r
2277                  *  </li>\r
2278                  *  <li>\r
2279                  *      If the on* event is not defined in the eventProcessors list, then\r
2280                  *      register the event handler under the corresponding DOM event of\r
2281                  *      the UI element's input DOM element (as defined by the return value\r
2282                  *      of {@link CKEDITOR.ui.dialog.uiElement#getInputElement}).\r
2283                  *  </li>\r
2284                  * </ol>\r
2285                  * This function is only called at UI element instantiation, but can\r
2286                  * be overridded in child classes if they require more flexibility.\r
2287                  * @param {CKEDITOR.dialog.uiElementDefinition} definition The UI element\r
2288                  * definition.\r
2289                  * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
2290                  * @example\r
2291                  */\r
2292                 registerEvents : function( definition )\r
2293                 {\r
2294                         var regex = /^on([A-Z]\w+)/,\r
2295                                 match;\r
2296 \r
2297                         var registerDomEvent = function( uiElement, dialog, eventName, func )\r
2298                         {\r
2299                                 dialog.on( 'load', function()\r
2300                                 {\r
2301                                         uiElement.getInputElement().on( eventName, func, uiElement );\r
2302                                 });\r
2303                         };\r
2304 \r
2305                         for ( var i in definition )\r
2306                         {\r
2307                                 if ( !( match = i.match( regex ) ) )\r
2308                                         continue;\r
2309                                 if ( this.eventProcessors[i] )\r
2310                                         this.eventProcessors[i].call( this, this._.dialog, definition[i] );\r
2311                                 else\r
2312                                         registerDomEvent( this, this._.dialog, match[1].toLowerCase(), definition[i] );\r
2313                         }\r
2314 \r
2315                         return this;\r
2316                 },\r
2317 \r
2318                 /**\r
2319                  * The event processor list used by\r
2320                  * {@link CKEDITOR.ui.dialog.uiElement#getInputElement} at UI element\r
2321                  * instantiation. The default list defines three on* events:\r
2322                  * <ol>\r
2323                  *  <li>onLoad - Called when the element's parent dialog opens for the\r
2324                  *  first time</li>\r
2325                  *  <li>onShow - Called whenever the element's parent dialog opens.</li>\r
2326                  *  <li>onHide - Called whenever the element's parent dialog closes.</li>\r
2327                  * </ol>\r
2328                  * @field\r
2329                  * @type Object\r
2330                  * @example\r
2331                  * // This connects the 'click' event in CKEDITOR.ui.dialog.button to onClick\r
2332                  * // handlers in the UI element's definitions.\r
2333                  * CKEDITOR.ui.dialog.button.eventProcessors = CKEDITOR.tools.extend( {},\r
2334                  * &nbsp;&nbsp;CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors,\r
2335                  * &nbsp;&nbsp;{ onClick : function( dialog, func ) { this.on( 'click', func ); } },\r
2336                  * &nbsp;&nbsp;true );\r
2337                  */\r
2338                 eventProcessors :\r
2339                 {\r
2340                         onLoad : function( dialog, func )\r
2341                         {\r
2342                                 dialog.on( 'load', func, this );\r
2343                         },\r
2344 \r
2345                         onShow : function( dialog, func )\r
2346                         {\r
2347                                 dialog.on( 'show', func, this );\r
2348                         },\r
2349 \r
2350                         onHide : function( dialog, func )\r
2351                         {\r
2352                                 dialog.on( 'hide', func, this );\r
2353                         }\r
2354                 },\r
2355 \r
2356                 /**\r
2357                  * The default handler for a UI element's access key down event, which\r
2358                  * tries to put focus to the UI element.<br />\r
2359                  * Can be overridded in child classes for more sophisticaed behavior.\r
2360                  * @param {CKEDITOR.dialog} dialog The parent dialog object.\r
2361                  * @param {String} key The key combination pressed. Since access keys\r
2362                  * are defined to always include the CTRL key, its value should always\r
2363                  * include a 'CTRL+' prefix.\r
2364                  * @example\r
2365                  */\r
2366                 accessKeyDown : function( dialog, key )\r
2367                 {\r
2368                         this.focus();\r
2369                 },\r
2370 \r
2371                 /**\r
2372                  * The default handler for a UI element's access key up event, which\r
2373                  * does nothing.<br />\r
2374                  * Can be overridded in child classes for more sophisticated behavior.\r
2375                  * @param {CKEDITOR.dialog} dialog The parent dialog object.\r
2376                  * @param {String} key The key combination pressed. Since access keys\r
2377                  * are defined to always include the CTRL key, its value should always\r
2378                  * include a 'CTRL+' prefix.\r
2379                  * @example\r
2380                  */\r
2381                 accessKeyUp : function( dialog, key )\r
2382                 {\r
2383                 },\r
2384 \r
2385                 /**\r
2386                  * Disables a UI element.\r
2387                  * @example\r
2388                  */\r
2389                 disable : function()\r
2390                 {\r
2391                         var element = this.getInputElement();\r
2392                         element.setAttribute( 'disabled', 'true' );\r
2393                         element.addClass( 'cke_disabled' );\r
2394                 },\r
2395 \r
2396                 /**\r
2397                  * Enables a UI element.\r
2398                  * @example\r
2399                  */\r
2400                 enable : function()\r
2401                 {\r
2402                         var element = this.getInputElement();\r
2403                         element.removeAttribute( 'disabled' );\r
2404                         element.removeClass( 'cke_disabled' );\r
2405                 },\r
2406 \r
2407                 /**\r
2408                  * Determines whether an UI element is enabled or not.\r
2409                  * @returns {Boolean} Whether the UI element is enabled.\r
2410                  * @example\r
2411                  */\r
2412                 isEnabled : function()\r
2413                 {\r
2414                         return !this.getInputElement().getAttribute( 'disabled' );\r
2415                 },\r
2416 \r
2417                 /**\r
2418                  * Determines whether an UI element is visible or not.\r
2419                  * @returns {Boolean} Whether the UI element is visible.\r
2420                  * @example\r
2421                  */\r
2422                 isVisible : function()\r
2423                 {\r
2424                         return !!this.getInputElement().$.offsetHeight;\r
2425                 },\r
2426 \r
2427                 /**\r
2428                  * Determines whether an UI element is focus-able or not.\r
2429                  * Focus-able is defined as being both visible and enabled.\r
2430                  * @returns {Boolean} Whether the UI element can be focused.\r
2431                  * @example\r
2432                  */\r
2433                 isFocusable : function()\r
2434                 {\r
2435                         if ( !this.isEnabled() || !this.isVisible() )\r
2436                                 return false;\r
2437                         return true;\r
2438                 }\r
2439         };\r
2440 \r
2441         CKEDITOR.ui.dialog.hbox.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,\r
2442                 /**\r
2443                  * @lends CKEDITOR.ui.dialog.hbox.prototype\r
2444                  */\r
2445                 {\r
2446                         /**\r
2447                          * Gets a child UI element inside this container.\r
2448                          * @param {Array|Number} indices An array or a single number to indicate the child's\r
2449                          * position in the container's descendant tree. Omit to get all the children in an array.\r
2450                          * @returns {Array|CKEDITOR.ui.dialog.uiElement} Array of all UI elements in the container\r
2451                          * if no argument given, or the specified UI element if indices is given.\r
2452                          * @example\r
2453                          * var checkbox = hbox.getChild( [0,1] );\r
2454                          * checkbox.setValue( true );\r
2455                          */\r
2456                         getChild : function( indices )\r
2457                         {\r
2458                                 // If no arguments, return a clone of the children array.\r
2459                                 if ( arguments.length < 1 )\r
2460                                         return this._.children.concat();\r
2461 \r
2462                                 // If indices isn't array, make it one.\r
2463                                 if ( !indices.splice )\r
2464                                         indices = [ indices ];\r
2465 \r
2466                                 // Retrieve the child element according to tree position.\r
2467                                 if ( indices.length < 2 )\r
2468                                         return this._.children[ indices[0] ];\r
2469                                 else\r
2470                                         return ( this._.children[ indices[0] ] && this._.children[ indices[0] ].getChild ) ?\r
2471                                                 this._.children[ indices[0] ].getChild( indices.slice( 1, indices.length ) ) :\r
2472                                                 null;\r
2473                         }\r
2474                 }, true );\r
2475 \r
2476         CKEDITOR.ui.dialog.vbox.prototype = new CKEDITOR.ui.dialog.hbox();\r
2477 \r
2478 \r
2479 \r
2480         (function()\r
2481         {\r
2482                 var commonBuilder = {\r
2483                         build : function( dialog, elementDefinition, output )\r
2484                         {\r
2485                                 var children = elementDefinition.children,\r
2486                                         child,\r
2487                                         childHtmlList = [],\r
2488                                         childObjList = [];\r
2489                                 for ( var i = 0 ; ( i < children.length && ( child = children[i] ) ) ; i++ )\r
2490                                 {\r
2491                                         var childHtml = [];\r
2492                                         childHtmlList.push( childHtml );\r
2493                                         childObjList.push( CKEDITOR.dialog._.uiElementBuilders[ child.type ].build( dialog, child, childHtml ) );\r
2494                                 }\r
2495                                 return new CKEDITOR.ui.dialog[elementDefinition.type]( dialog, childObjList, childHtmlList, output, elementDefinition );\r
2496                         }\r
2497                 };\r
2498 \r
2499                 CKEDITOR.dialog.addUIElement( 'hbox', commonBuilder );\r
2500                 CKEDITOR.dialog.addUIElement( 'vbox', commonBuilder );\r
2501         })();\r
2502 \r
2503         /**\r
2504          * Generic dialog command. It opens a specific dialog when executed.\r
2505          * @constructor\r
2506          * @augments CKEDITOR.commandDefinition\r
2507          * @param {string} dialogName The name of the dialog to open when executing\r
2508          *              this command.\r
2509          * @example\r
2510          * // Register the "link" command, which opens the "link" dialog.\r
2511          * editor.addCommand( 'link', <b>new CKEDITOR.dialogCommand( 'link' )</b> );\r
2512          */\r
2513         CKEDITOR.dialogCommand = function( dialogName )\r
2514         {\r
2515                 this.dialogName = dialogName;\r
2516         };\r
2517 \r
2518         CKEDITOR.dialogCommand.prototype =\r
2519         {\r
2520                 /** @ignore */\r
2521                 exec : function( editor )\r
2522                 {\r
2523                         editor.openDialog( this.dialogName );\r
2524                 },\r
2525                 // Dialog commands just open a dialog ui, thus require no undo logic,\r
2526                 // undo support should dedicate to specific dialog implementation.\r
2527                 canUndo: false\r
2528         };\r
2529 \r
2530         (function()\r
2531         {\r
2532                 var notEmptyRegex = /^([a]|[^a])+$/,\r
2533                         integerRegex = /^\d*$/,\r
2534                         numberRegex = /^\d*(?:\.\d+)?$/;\r
2535 \r
2536                 CKEDITOR.VALIDATE_OR = 1;\r
2537                 CKEDITOR.VALIDATE_AND = 2;\r
2538 \r
2539                 CKEDITOR.dialog.validate =\r
2540                 {\r
2541                         functions : function()\r
2542                         {\r
2543                                 return function()\r
2544                                 {\r
2545                                         /**\r
2546                                          * It's important for validate functions to be able to accept the value\r
2547                                          * as argument in addition to this.getValue(), so that it is possible to\r
2548                                          * combine validate functions together to make more sophisticated\r
2549                                          * validators.\r
2550                                          */\r
2551                                         var value = this && this.getValue ? this.getValue() : arguments[0];\r
2552 \r
2553                                         var msg = undefined,\r
2554                                                 relation = CKEDITOR.VALIDATE_AND,\r
2555                                                 functions = [], i;\r
2556 \r
2557                                         for ( i = 0 ; i < arguments.length ; i++ )\r
2558                                         {\r
2559                                                 if ( typeof( arguments[i] ) == 'function' )\r
2560                                                         functions.push( arguments[i] );\r
2561                                                 else\r
2562                                                         break;\r
2563                                         }\r
2564 \r
2565                                         if ( i < arguments.length && typeof( arguments[i] ) == 'string' )\r
2566                                         {\r
2567                                                 msg = arguments[i];\r
2568                                                 i++;\r
2569                                         }\r
2570 \r
2571                                         if ( i < arguments.length && typeof( arguments[i]) == 'number' )\r
2572                                                 relation = arguments[i];\r
2573 \r
2574                                         var passed = ( relation == CKEDITOR.VALIDATE_AND ? true : false );\r
2575                                         for ( i = 0 ; i < functions.length ; i++ )\r
2576                                         {\r
2577                                                 if ( relation == CKEDITOR.VALIDATE_AND )\r
2578                                                         passed = passed && functions[i]( value );\r
2579                                                 else\r
2580                                                         passed = passed || functions[i]( value );\r
2581                                         }\r
2582 \r
2583                                         if ( !passed )\r
2584                                         {\r
2585                                                 if ( msg !== undefined )\r
2586                                                         alert( msg );\r
2587                                                 if ( this && ( this.select || this.focus ) )\r
2588                                                         ( this.select || this.focus )();\r
2589                                                 return false;\r
2590                                         }\r
2591 \r
2592                                         return true;\r
2593                                 };\r
2594                         },\r
2595 \r
2596                         regex : function( regex, msg )\r
2597                         {\r
2598                                 /*\r
2599                                  * Can be greatly shortened by deriving from functions validator if code size\r
2600                                  * turns out to be more important than performance.\r
2601                                  */\r
2602                                 return function()\r
2603                                 {\r
2604                                         var value = this && this.getValue ? this.getValue() : arguments[0];\r
2605                                         if ( !regex.test( value ) )\r
2606                                         {\r
2607                                                 if ( msg !== undefined )\r
2608                                                         alert( msg );\r
2609                                                 if ( this && ( this.select || this.focus ) )\r
2610                                                 {\r
2611                                                         if ( this.select )\r
2612                                                                 this.select();\r
2613                                                         else\r
2614                                                                 this.focus();\r
2615                                                 }\r
2616                                                 return false;\r
2617                                         }\r
2618                                         return true;\r
2619                                 };\r
2620                         },\r
2621 \r
2622                         notEmpty : function( msg )\r
2623                         {\r
2624                                 return this.regex( notEmptyRegex, msg );\r
2625                         },\r
2626 \r
2627                         integer : function( msg )\r
2628                         {\r
2629                                 return this.regex( integerRegex, msg );\r
2630                         },\r
2631 \r
2632                         'number' : function( msg )\r
2633                         {\r
2634                                 return this.regex( numberRegex, msg );\r
2635                         },\r
2636 \r
2637                         equals : function( value, msg )\r
2638                         {\r
2639                                 return this.functions( function( val ){ return val == value; }, msg );\r
2640                         },\r
2641 \r
2642                         notEqual : function( value, msg )\r
2643                         {\r
2644                                 return this.functions( function( val ){ return val != value; }, msg );\r
2645                         }\r
2646                 };\r
2647         })();\r
2648 \r
2649         // Grab the margin data from skin definition and store it away.\r
2650         CKEDITOR.skins.add = ( function()\r
2651         {\r
2652                 var original = CKEDITOR.skins.add;\r
2653                 return function( skinName, skinDefinition )\r
2654                 {\r
2655                         skinData[ skinName ] = { margins : skinDefinition.margins };\r
2656                         return original.apply( this, arguments );\r
2657                 };\r
2658         } )();\r
2659 })();\r
2660 \r
2661 // Extend the CKEDITOR.editor class with dialog specific functions.\r
2662 CKEDITOR.tools.extend( CKEDITOR.editor.prototype,\r
2663         /** @lends CKEDITOR.editor.prototype */\r
2664         {\r
2665                 /**\r
2666                  * Loads and opens a registered dialog.\r
2667                  * @param {String} dialogName The registered name of the dialog.\r
2668                  * @see CKEDITOR.dialog.add\r
2669                  * @example\r
2670                  * CKEDITOR.instances.editor1.openDialog( 'smiley' );\r
2671                  * @returns {CKEDITOR.dialog} The dialog object corresponding to the dialog displayed. null if the dialog name is not registered.\r
2672                  */\r
2673                 openDialog : function( dialogName )\r
2674                 {\r
2675                         var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ];\r
2676 \r
2677                         // If the dialogDefinition is already loaded, open it immediately.\r
2678                         if ( typeof dialogDefinitions == 'function' )\r
2679                         {\r
2680                                 var storedDialogs = this._.storedDialogs ||\r
2681                                         ( this._.storedDialogs = {} );\r
2682 \r
2683                                 var dialog = storedDialogs[ dialogName ] ||\r
2684                                         ( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );\r
2685 \r
2686                                 dialog.show();\r
2687 \r
2688                                 return dialog;\r
2689                         }\r
2690                         else if ( dialogDefinitions == 'failed' )\r
2691                                 throw new Error( '[CKEDITOR.dialog.openDialog] Dialog "' + dialogName + '" failed when loading definition.' );\r
2692 \r
2693                         // Not loaded? Load the .js file first.\r
2694                         var body = CKEDITOR.document.getBody(),\r
2695                                 cursor = body.$.style.cursor,\r
2696                                 me = this;\r
2697 \r
2698                         body.setStyle( 'cursor', 'wait' );\r
2699                         CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( dialogDefinitions ), function()\r
2700                                 {\r
2701                                         // In case of plugin error, mark it as loading failed.\r
2702                                         if ( typeof CKEDITOR.dialog._.dialogDefinitions[ dialogName ] != 'function' )\r
2703                                                         CKEDITOR.dialog._.dialogDefinitions[ dialogName ] =  'failed';\r
2704                                         me.openDialog( dialogName );\r
2705                                         body.setStyle( 'cursor', cursor );\r
2706                                 } );\r
2707 \r
2708                         return null;\r
2709                 }\r
2710         });\r
2711 \r
2712 // Dialog related configurations.\r
2713 \r
2714 /**\r
2715  * The color of the dialog background cover. It should be a valid CSS color\r
2716  * string.\r
2717  * @type String\r
2718  * @default white\r
2719  * @example\r
2720  * config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)';\r
2721  */\r
2722 CKEDITOR.config.dialog_backgroundCoverColor = 'white';\r
2723 \r
2724 /**\r
2725  * The opacity of the dialog background cover. It should be a number within the\r
2726  * range [0.0, 1.0].\r
2727  * @type Number\r
2728  * @default 0.5\r
2729  * @example\r
2730  * config.dialog_backgroundCoverOpacity = 0.7;\r
2731  */\r
2732 CKEDITOR.config.dialog_backgroundCoverOpacity = 0.5;\r
2733 \r
2734 /**\r
2735  * The distance of magnetic borders used in moving and resizing dialogs,\r
2736  * measured in pixels.\r
2737  * @type Number\r
2738  * @default 20\r
2739  * @example\r
2740  * config.dialog_magnetDistance = 30;\r
2741  */\r
2742 CKEDITOR.config.dialog_magnetDistance = 20;\r