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