_source/plugins/dialog/plugin.js

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