_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 \r
  96                 var doc = CKEDITOR.document;\r
  97 \r
  98                 var themeBuilt = editor.theme.buildDialog( editor );\r
  99 \r
 100                 // Initialize some basic parameters.\r
 101                 this._ =\r
 102                 {\r
 103                         editor : editor,\r
 104                         element : themeBuilt.element,\r
 105                         name : dialogName,\r
 106                         contentSize : { width : 0, height : 0 },\r
 107                         size : { width : 0, height : 0 },\r
 108                         updateSize : false,\r
 109                         contents : {},\r
 110                         buttons : {},\r
 111                         accessKeyMap : {},\r
 112 \r
 113                         // Initialize the tab and page map.\r
 114                         tabs : {},\r
 115                         tabIdList : [],\r
 116                         currentTabId : null,\r
 117                         currentTabIndex : null,\r
 118                         pageCount : 0,\r
 119                         lastTab : null,\r
 120                         tabBarMode : false,\r
 121 \r
 122                         // Initialize the tab order array for input widgets.\r
 123                         focusList : [],\r
 124                         currentFocusIndex : 0,\r
 125                         hasFocus : false\r
 126                 };\r
 127 \r
 128                 this.parts = themeBuilt.parts;\r
 129 \r
 130                 // Set the startup styles for the dialog, avoiding it enlarging the\r
 131                 // page size on the dialog creation.\r
 132                 this.parts.dialog.setStyles(\r
 133                         {\r
 134                                 position : CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed',\r
 135                                 top : 0,\r
 136                                 left: 0,\r
 137                                 visibility : 'hidden'\r
 138                         });\r
 139 \r
 140                 // Call the CKEDITOR.event constructor to initialize this instance.\r
 141                 CKEDITOR.event.call( this );\r
 142 \r
 143                 // Fire the "dialogDefinition" event, making it possible to customize\r
 144                 // the dialog definition.\r
 145                 this.definition = definition = CKEDITOR.fire( 'dialogDefinition',\r
 146                         {\r
 147                                 name : dialogName,\r
 148                                 definition : definition\r
 149                         }\r
 150                         , editor ).definition;\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%;' + ( CKEDITOR.env.ie6Compat ? '' : 'height: 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                         var page = this._.contents[ pageId ];\r
 953                         return page && page[ elementId ];\r
 954                 },\r
 955 \r
 956                 /**\r
 957                  * Gets the value of a dialog UI element.\r
 958                  * @param {String} pageId id of dialog page.\r
 959                  * @param {String} elementId id of UI element.\r
 960                  * @example\r
 961                  * @returns {Object} The value of the UI element.\r
 962                  */\r
 963                 getValueOf : function( pageId, elementId )\r
 964                 {\r
 965                         return this.getContentElement( pageId, elementId ).getValue();\r
 966                 },\r
 967 \r
 968                 /**\r
 969                  * Sets the value of a dialog UI element.\r
 970                  * @param {String} pageId id of the dialog page.\r
 971                  * @param {String} elementId id of the UI element.\r
 972                  * @param {Object} value The new value of the UI element.\r
 973                  * @example\r
 974                  */\r
 975                 setValueOf : function( pageId, elementId, value )\r
 976                 {\r
 977                         return this.getContentElement( pageId, elementId ).setValue( value );\r
 978                 },\r
 979 \r
 980                 /**\r
 981                  * Gets the UI element of a button in the dialog's button row.\r
 982                  * @param {String} id The id of the button.\r
 983                  * @example\r
 984                  * @returns {CKEDITOR.ui.dialog.button} The button object.\r
 985                  */\r
 986                 getButton : function( id )\r
 987                 {\r
 988                         return this._.buttons[ id ];\r
 989                 },\r
 990 \r
 991                 /**\r
 992                  * Simulates a click to a dialog button in the dialog's button row.\r
 993                  * @param {String} id The id of the button.\r
 994                  * @example\r
 995                  * @returns The return value of the dialog's "click" event.\r
 996                  */\r
 997                 click : function( id )\r
 998                 {\r
 999                         return this._.buttons[ id ].click();\r
1000                 },\r
1001 \r
1002                 /**\r
1003                  * Disables a dialog button.\r
1004                  * @param {String} id The id of the button.\r
1005                  * @example\r
1006                  */\r
1007                 disableButton : function( id )\r
1008                 {\r
1009                         return this._.buttons[ id ].disable();\r
1010                 },\r
1011 \r
1012                 /**\r
1013                  * Enables a dialog button.\r
1014                  * @param {String} id The id of the button.\r
1015                  * @example\r
1016                  */\r
1017                 enableButton : function( id )\r
1018                 {\r
1019                         return this._.buttons[ id ].enable();\r
1020                 },\r
1021 \r
1022                 /**\r
1023                  * Gets the number of pages in the dialog.\r
1024                  * @returns {Number} Page count.\r
1025                  */\r
1026                 getPageCount : function()\r
1027                 {\r
1028                         return this._.pageCount;\r
1029                 },\r
1030 \r
1031                 /**\r
1032                  * Gets the editor instance which opened this dialog.\r
1033                  * @returns {CKEDITOR.editor} Parent editor instances.\r
1034                  */\r
1035                 getParentEditor : function()\r
1036                 {\r
1037                         return this._.editor;\r
1038                 },\r
1039 \r
1040                 /**\r
1041                  * Gets the element that was selected when opening the dialog, if any.\r
1042                  * @returns {CKEDITOR.dom.element} The element that was selected, or null.\r
1043                  */\r
1044                 getSelectedElement : function()\r
1045                 {\r
1046                         return this.getParentEditor().getSelection().getSelectedElement();\r
1047                 },\r
1048 \r
1049                 /**\r
1050                  * Adds element to dialog's focusable list.\r
1051                  *\r
1052                  * @param {CKEDITOR.dom.element} element\r
1053                  * @param {Number} [index]\r
1054                  */\r
1055                 addFocusable: function( element, index ) {\r
1056                         if ( typeof index == 'undefined' )\r
1057                         {\r
1058                                 index = this._.focusList.length;\r
1059                                 this._.focusList.push( new Focusable( this, element, index ) );\r
1060                         }\r
1061                         else\r
1062                         {\r
1063                                 this._.focusList.splice( index, 0, new Focusable( this, element, index ) );\r
1064                                 for ( var i = index + 1 ; i < this._.focusList.length ; i++ )\r
1065                                         this._.focusList[ i ].focusIndex++;\r
1066                         }\r
1067                 }\r
1068         };\r
1069 \r
1070         CKEDITOR.tools.extend( CKEDITOR.dialog,\r
1071                 /**\r
1072                  * @lends CKEDITOR.dialog\r
1073                  */\r
1074                 {\r
1075                         /**\r
1076                          * Registers a dialog.\r
1077                          * @param {String} name The dialog's name.\r
1078                          * @param {Function|String} dialogDefinition\r
1079                          * A function returning the dialog's definition, or the URL to the .js file holding the function.\r
1080                          * The function should accept an argument "editor" which is the current editor instance, and\r
1081                          * return an object conforming to {@link CKEDITOR.dialog.dialogDefinition}.\r
1082                          * @example\r
1083                          * @see CKEDITOR.dialog.dialogDefinition\r
1084                          */\r
1085                         add : function( name, dialogDefinition )\r
1086                         {\r
1087                                 // Avoid path registration from multiple instances override definition.\r
1088                                 if ( !this._.dialogDefinitions[name]\r
1089                                         || typeof  dialogDefinition == 'function' )\r
1090                                         this._.dialogDefinitions[name] = dialogDefinition;\r
1091                         },\r
1092 \r
1093                         exists : function( name )\r
1094                         {\r
1095                                 return !!this._.dialogDefinitions[ name ];\r
1096                         },\r
1097 \r
1098                         getCurrent : function()\r
1099                         {\r
1100                                 return CKEDITOR.dialog._.currentTop;\r
1101                         },\r
1102 \r
1103                         /**\r
1104                          * The default OK button for dialogs. Fires the "ok" event and closes the dialog if the event succeeds.\r
1105                          * @static\r
1106                          * @field\r
1107                          * @example\r
1108                          * @type Function\r
1109                          */\r
1110                         okButton : (function()\r
1111                         {\r
1112                                 var retval = function( editor, override )\r
1113                                 {\r
1114                                         override = override || {};\r
1115                                         return CKEDITOR.tools.extend( {\r
1116                                                 id : 'ok',\r
1117                                                 type : 'button',\r
1118                                                 label : editor.lang.common.ok,\r
1119                                                 'class' : 'cke_dialog_ui_button_ok',\r
1120                                                 onClick : function( evt )\r
1121                                                 {\r
1122                                                         var dialog = evt.data.dialog;\r
1123                                                         if ( dialog.fire( 'ok', { hide : true } ).hide !== false )\r
1124                                                                 dialog.hide();\r
1125                                                 }\r
1126                                         }, override, true );\r
1127                                 };\r
1128                                 retval.type = 'button';\r
1129                                 retval.override = function( override )\r
1130                                 {\r
1131                                         return CKEDITOR.tools.extend( function( editor ){ return retval( editor, override ); },\r
1132                                                         { type : 'button' }, true );\r
1133                                 };\r
1134                                 return retval;\r
1135                         })(),\r
1136 \r
1137                         /**\r
1138                          * The default cancel button for dialogs. Fires the "cancel" event and closes the dialog if no UI element value changed.\r
1139                          * @static\r
1140                          * @field\r
1141                          * @example\r
1142                          * @type Function\r
1143                          */\r
1144                         cancelButton : (function()\r
1145                         {\r
1146                                 var retval = function( editor, override )\r
1147                                 {\r
1148                                         override = override || {};\r
1149                                         return CKEDITOR.tools.extend( {\r
1150                                                 id : 'cancel',\r
1151                                                 type : 'button',\r
1152                                                 label : editor.lang.common.cancel,\r
1153                                                 'class' : 'cke_dialog_ui_button_cancel',\r
1154                                                 onClick : function( evt )\r
1155                                                 {\r
1156                                                         var dialog = evt.data.dialog;\r
1157                                                         if ( dialog.fire( 'cancel', { hide : true } ).hide !== false )\r
1158                                                                 dialog.hide();\r
1159                                                 }\r
1160                                         }, override, true );\r
1161                                 };\r
1162                                 retval.type = 'button';\r
1163                                 retval.override = function( override )\r
1164                                 {\r
1165                                         return CKEDITOR.tools.extend( function( editor ){ return retval( editor, override ); },\r
1166                                                         { type : 'button' }, true );\r
1167                                 };\r
1168                                 return retval;\r
1169                         })(),\r
1170 \r
1171                         /**\r
1172                          * Registers a dialog UI element.\r
1173                          * @param {String} typeName The name of the UI element.\r
1174                          * @param {Function} builder The function to build the UI element.\r
1175                          * @example\r
1176                          */\r
1177                         addUIElement : function( typeName, builder )\r
1178                         {\r
1179                                 this._.uiElementBuilders[ typeName ] = builder;\r
1180                         }\r
1181                 });\r
1182 \r
1183         CKEDITOR.dialog._ =\r
1184         {\r
1185                 uiElementBuilders : {},\r
1186 \r
1187                 dialogDefinitions : {},\r
1188 \r
1189                 currentTop : null,\r
1190 \r
1191                 currentZIndex : null\r
1192         };\r
1193 \r
1194         // "Inherit" (copy actually) from CKEDITOR.event.\r
1195         CKEDITOR.event.implementOn( CKEDITOR.dialog );\r
1196         CKEDITOR.event.implementOn( CKEDITOR.dialog.prototype, true );\r
1197 \r
1198         var defaultDialogDefinition =\r
1199         {\r
1200                 resizable : CKEDITOR.DIALOG_RESIZE_NONE,\r
1201                 minWidth : 600,\r
1202                 minHeight : 400,\r
1203                 buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]\r
1204         };\r
1205 \r
1206         // Tool function used to return an item from an array based on its id\r
1207         // property.\r
1208         var getById = function( array, id, recurse )\r
1209         {\r
1210                 for ( var i = 0, item ; ( item = array[ i ] ) ; i++ )\r
1211                 {\r
1212                         if ( item.id == id )\r
1213                                 return item;\r
1214                         if ( recurse && item[ recurse ] )\r
1215                         {\r
1216                                 var retval = getById( item[ recurse ], id, recurse ) ;\r
1217                                 if ( retval )\r
1218                                         return retval;\r
1219                         }\r
1220                 }\r
1221                 return null;\r
1222         };\r
1223 \r
1224         // Tool function used to add an item into an array.\r
1225         var addById = function( array, newItem, nextSiblingId, recurse, nullIfNotFound )\r
1226         {\r
1227                 if ( nextSiblingId )\r
1228                 {\r
1229                         for ( var i = 0, item ; ( item = array[ i ] ) ; i++ )\r
1230                         {\r
1231                                 if ( item.id == nextSiblingId )\r
1232                                 {\r
1233                                         array.splice( i, 0, newItem );\r
1234                                         return newItem;\r
1235                                 }\r
1236 \r
1237                                 if ( recurse && item[ recurse ] )\r
1238                                 {\r
1239                                         var retval = addById( item[ recurse ], newItem, nextSiblingId, recurse, true );\r
1240                                         if ( retval )\r
1241                                                 return retval;\r
1242                                 }\r
1243                         }\r
1244 \r
1245                         if ( nullIfNotFound )\r
1246                                 return null;\r
1247                 }\r
1248 \r
1249                 array.push( newItem );\r
1250                 return newItem;\r
1251         };\r
1252 \r
1253         // Tool function used to remove an item from an array based on its id.\r
1254         var removeById = function( array, id, recurse )\r
1255         {\r
1256                 for ( var i = 0, item ; ( item = array[ i ] ) ; i++ )\r
1257                 {\r
1258                         if ( item.id == id )\r
1259                                 return array.splice( i, 1 );\r
1260                         if ( recurse && item[ recurse ] )\r
1261                         {\r
1262                                 var retval = removeById( item[ recurse ], id, recurse );\r
1263                                 if ( retval )\r
1264                                         return retval;\r
1265                         }\r
1266                 }\r
1267                 return null;\r
1268         };\r
1269 \r
1270         /**\r
1271          * This class is not really part of the API. It is the "definition" property value\r
1272          * passed to "dialogDefinition" event handlers.\r
1273          * @constructor\r
1274          * @name CKEDITOR.dialog.dialogDefinitionObject\r
1275          * @extends CKEDITOR.dialog.dialogDefinition\r
1276          * @example\r
1277          * CKEDITOR.on( 'dialogDefinition', function( evt )\r
1278          *      {\r
1279          *              var definition = evt.data.definition;\r
1280          *              var content = definition.getContents( 'page1' );\r
1281          *              ...\r
1282          *      } );\r
1283          */\r
1284         var definitionObject = function( dialog, dialogDefinition )\r
1285         {\r
1286                 // TODO : Check if needed.\r
1287                 this.dialog = dialog;\r
1288 \r
1289                 // Transform the contents entries in contentObjects.\r
1290                 var contents = dialogDefinition.contents;\r
1291                 for ( var i = 0, content ; ( content = contents[i] ) ; i++ )\r
1292                         contents[ i ] = new contentObject( dialog, content );\r
1293 \r
1294                 CKEDITOR.tools.extend( this, dialogDefinition );\r
1295         };\r
1296 \r
1297         definitionObject.prototype =\r
1298         /** @lends CKEDITOR.dialog.dialogDefinitionObject.prototype */\r
1299         {\r
1300                 /**\r
1301                  * Gets a content definition.\r
1302                  * @param {String} id The id of the content definition.\r
1303                  * @returns {CKEDITOR.dialog.contentDefinition} The content definition\r
1304                  *              matching id.\r
1305                  */\r
1306                 getContents : function( id )\r
1307                 {\r
1308                         return getById( this.contents, id );\r
1309                 },\r
1310 \r
1311                 /**\r
1312                  * Gets a button definition.\r
1313                  * @param {String} id The id of the button definition.\r
1314                  * @returns {CKEDITOR.dialog.buttonDefinition} The button definition\r
1315                  *              matching id.\r
1316                  */\r
1317                 getButton : function( id )\r
1318                 {\r
1319                         return getById( this.buttons, id );\r
1320                 },\r
1321 \r
1322                 /**\r
1323                  * Adds a content definition object under this dialog definition.\r
1324                  * @param {CKEDITOR.dialog.contentDefinition} contentDefinition The\r
1325                  *              content definition.\r
1326                  * @param {String} [nextSiblingId] The id of an existing content\r
1327                  *              definition which the new content definition will be inserted\r
1328                  *              before. Omit if the new content definition is to be inserted as\r
1329                  *              the last item.\r
1330                  * @returns {CKEDITOR.dialog.contentDefinition} The inserted content\r
1331                  *              definition.\r
1332                  */\r
1333                 addContents : function( contentDefinition, nextSiblingId )\r
1334                 {\r
1335                         return addById( this.contents, contentDefinition, nextSiblingId );\r
1336                 },\r
1337 \r
1338                 /**\r
1339                  * Adds a button definition object under this dialog definition.\r
1340                  * @param {CKEDITOR.dialog.buttonDefinition} buttonDefinition The\r
1341                  *              button definition.\r
1342                  * @param {String} [nextSiblingId] The id of an existing button\r
1343                  *              definition which the new button definition will be inserted\r
1344                  *              before. Omit if the new button definition is to be inserted as\r
1345                  *              the last item.\r
1346                  * @returns {CKEDITOR.dialog.buttonDefinition} The inserted button\r
1347                  *              definition.\r
1348                  */\r
1349                 addButton : function( buttonDefinition, nextSiblingId )\r
1350                 {\r
1351                         return addById( this.buttons, buttonDefinition, nextSiblingId );\r
1352                 },\r
1353 \r
1354                 /**\r
1355                  * Removes a content definition from this dialog definition.\r
1356                  * @param {String} id The id of the content definition to be removed.\r
1357                  * @returns {CKEDITOR.dialog.contentDefinition} The removed content\r
1358                  *              definition.\r
1359                  */\r
1360                 removeContents : function( id )\r
1361                 {\r
1362                         removeById( this.contents, id );\r
1363                 },\r
1364 \r
1365                 /**\r
1366                  * Removes a button definition from the dialog definition.\r
1367                  * @param {String} id The id of the button definition to be removed.\r
1368                  * @returns {CKEDITOR.dialog.buttonDefinition} The removed button\r
1369                  *              definition.\r
1370                  */\r
1371                 removeButton : function( id )\r
1372                 {\r
1373                         removeById( this.buttons, id );\r
1374                 }\r
1375         };\r
1376 \r
1377         /**\r
1378          * This class is not really part of the API. It is the template of the\r
1379          * objects representing content pages inside the\r
1380          * CKEDITOR.dialog.dialogDefinitionObject.\r
1381          * @constructor\r
1382          * @name CKEDITOR.dialog.contentDefinitionObject\r
1383          * @example\r
1384          * CKEDITOR.on( 'dialogDefinition', function( evt )\r
1385          *      {\r
1386          *              var definition = evt.data.definition;\r
1387          *              var content = definition.getContents( 'page1' );\r
1388          *              content.remove( 'textInput1' );\r
1389          *              ...\r
1390          *      } );\r
1391          */\r
1392         function contentObject( dialog, contentDefinition )\r
1393         {\r
1394                 this._ =\r
1395                 {\r
1396                         dialog : dialog\r
1397                 };\r
1398 \r
1399                 CKEDITOR.tools.extend( this, contentDefinition );\r
1400         }\r
1401 \r
1402         contentObject.prototype =\r
1403         /** @lends CKEDITOR.dialog.contentDefinitionObject.prototype */\r
1404         {\r
1405                 /**\r
1406                  * Gets a UI element definition under the content definition.\r
1407                  * @param {String} id The id of the UI element definition.\r
1408                  * @returns {CKEDITOR.dialog.uiElementDefinition}\r
1409                  */\r
1410                 get : function( id )\r
1411                 {\r
1412                         return getById( this.elements, id, 'children' );\r
1413                 },\r
1414 \r
1415                 /**\r
1416                  * Adds a UI element definition to the content definition.\r
1417                  * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition The\r
1418                  *              UI elemnet definition to be added.\r
1419                  * @param {String} nextSiblingId The id of an existing UI element\r
1420                  *              definition which the new UI element definition will be inserted\r
1421                  *              before. Omit if the new button definition is to be inserted as\r
1422                  *              the last item.\r
1423                  * @returns {CKEDITOR.dialog.uiElementDefinition} The element\r
1424                  *              definition inserted.\r
1425                  */\r
1426                 add : function( elementDefinition, nextSiblingId )\r
1427                 {\r
1428                         return addById( this.elements, elementDefinition, nextSiblingId, 'children' );\r
1429                 },\r
1430 \r
1431                 /**\r
1432                  * Removes a UI element definition from the content definition.\r
1433                  * @param {String} id The id of the UI element definition to be\r
1434                  *              removed.\r
1435                  * @returns {CKEDITOR.dialog.uiElementDefinition} The element\r
1436                  *              definition removed.\r
1437                  * @example\r
1438                  */\r
1439                 remove : function( id )\r
1440                 {\r
1441                         removeById( this.elements, id, 'children' );\r
1442                 }\r
1443         };\r
1444 \r
1445         function initDragAndDrop( dialog )\r
1446         {\r
1447                 var lastCoords = null,\r
1448                         abstractDialogCoords = null,\r
1449                         element = dialog.getElement().getFirst(),\r
1450                         editor = dialog.getParentEditor(),\r
1451                         magnetDistance = editor.config.dialog_magnetDistance,\r
1452                         margins = editor.skin.margins || [ 0, 0, 0, 0 ];\r
1453 \r
1454                 if ( typeof magnetDistance == 'undefined' )\r
1455                         magnetDistance = 20;\r
1456 \r
1457                 function mouseMoveHandler( evt )\r
1458                 {\r
1459                         var dialogSize = dialog.getSize(),\r
1460                                 viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),\r
1461                                 x = evt.data.$.screenX,\r
1462                                 y = evt.data.$.screenY,\r
1463                                 dx = x - lastCoords.x,\r
1464                                 dy = y - lastCoords.y,\r
1465                                 realX, realY;\r
1466 \r
1467                         lastCoords = { x : x, y : y };\r
1468                         abstractDialogCoords.x += dx;\r
1469                         abstractDialogCoords.y += dy;\r
1470 \r
1471                         if ( abstractDialogCoords.x + margins[3] < magnetDistance )\r
1472                                 realX = - margins[3];\r
1473                         else if ( abstractDialogCoords.x - margins[1] > viewPaneSize.width - dialogSize.width - magnetDistance )\r
1474                                 realX = viewPaneSize.width - dialogSize.width + margins[1];\r
1475                         else\r
1476                                 realX = abstractDialogCoords.x;\r
1477 \r
1478                         if ( abstractDialogCoords.y + margins[0] < magnetDistance )\r
1479                                 realY = - margins[0];\r
1480                         else if ( abstractDialogCoords.y - margins[2] > viewPaneSize.height - dialogSize.height - magnetDistance )\r
1481                                 realY = viewPaneSize.height - dialogSize.height + margins[2];\r
1482                         else\r
1483                                 realY = abstractDialogCoords.y;\r
1484 \r
1485                         dialog.move( realX, realY );\r
1486 \r
1487                         evt.data.preventDefault();\r
1488                 }\r
1489 \r
1490                 function mouseUpHandler( evt )\r
1491                 {\r
1492                         CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );\r
1493                         CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );\r
1494 \r
1495                         if ( CKEDITOR.env.ie6Compat )\r
1496                         {\r
1497                                 var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
1498                                 coverDoc.removeListener( 'mousemove', mouseMoveHandler );\r
1499                                 coverDoc.removeListener( 'mouseup', mouseUpHandler );\r
1500                         }\r
1501                 }\r
1502 \r
1503                 dialog.parts.title.on( 'mousedown', function( evt )\r
1504                         {\r
1505                                 dialog._.updateSize = true;\r
1506 \r
1507                                 lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };\r
1508 \r
1509                                 CKEDITOR.document.on( 'mousemove', mouseMoveHandler );\r
1510                                 CKEDITOR.document.on( 'mouseup', mouseUpHandler );\r
1511                                 abstractDialogCoords = dialog.getPosition();\r
1512 \r
1513                                 if ( CKEDITOR.env.ie6Compat )\r
1514                                 {\r
1515                                         var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
1516                                         coverDoc.on( 'mousemove', mouseMoveHandler );\r
1517                                         coverDoc.on( 'mouseup', mouseUpHandler );\r
1518                                 }\r
1519 \r
1520                                 evt.data.preventDefault();\r
1521                         }, dialog );\r
1522         }\r
1523 \r
1524         function initResizeHandles( dialog )\r
1525         {\r
1526                 var definition = dialog.definition,\r
1527                         minWidth = definition.minWidth || 0,\r
1528                         minHeight = definition.minHeight || 0,\r
1529                         resizable = definition.resizable,\r
1530                         margins = dialog.getParentEditor().skin.margins || [ 0, 0, 0, 0 ];\r
1531 \r
1532                 function topSizer( coords, dy )\r
1533                 {\r
1534                         coords.y += dy;\r
1535                 }\r
1536 \r
1537                 function rightSizer( coords, dx )\r
1538                 {\r
1539                         coords.x2 += dx;\r
1540                 }\r
1541 \r
1542                 function bottomSizer( coords, dy )\r
1543                 {\r
1544                         coords.y2 += dy;\r
1545                 }\r
1546 \r
1547                 function leftSizer( coords, dx )\r
1548                 {\r
1549                         coords.x += dx;\r
1550                 }\r
1551 \r
1552                 var lastCoords = null,\r
1553                         abstractDialogCoords = null,\r
1554                         magnetDistance = dialog._.editor.config.magnetDistance,\r
1555                         parts = [ 'tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br' ];\r
1556 \r
1557                 function mouseDownHandler( evt )\r
1558                 {\r
1559                         var partName = evt.listenerData.part, size = dialog.getSize();\r
1560                         abstractDialogCoords = dialog.getPosition();\r
1561                         CKEDITOR.tools.extend( abstractDialogCoords,\r
1562                                 {\r
1563                                         x2 : abstractDialogCoords.x + size.width,\r
1564                                         y2 : abstractDialogCoords.y + size.height\r
1565                                 } );\r
1566                         lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };\r
1567 \r
1568                         CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );\r
1569                         CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );\r
1570 \r
1571                         if ( CKEDITOR.env.ie6Compat )\r
1572                         {\r
1573                                 var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
1574                                 coverDoc.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );\r
1575                                 coverDoc.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );\r
1576                         }\r
1577 \r
1578                         evt.data.preventDefault();\r
1579                 }\r
1580 \r
1581                 function mouseMoveHandler( evt )\r
1582                 {\r
1583                         var x = evt.data.$.screenX,\r
1584                                 y = evt.data.$.screenY,\r
1585                                 dx = x - lastCoords.x,\r
1586                                 dy = y - lastCoords.y,\r
1587                                 viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),\r
1588                                 partName = evt.listenerData.part;\r
1589 \r
1590                         if ( partName.search( 't' ) != -1 )\r
1591                                 topSizer( abstractDialogCoords, dy );\r
1592                         if ( partName.search( 'l' ) != -1 )\r
1593                                 leftSizer( abstractDialogCoords, dx );\r
1594                         if ( partName.search( 'b' ) != -1 )\r
1595                                 bottomSizer( abstractDialogCoords, dy );\r
1596                         if ( partName.search( 'r' ) != -1 )\r
1597                                 rightSizer( abstractDialogCoords, dx );\r
1598 \r
1599                         lastCoords = { x : x, y : y };\r
1600 \r
1601                         var realX, realY, realX2, realY2;\r
1602 \r
1603                         if ( abstractDialogCoords.x + margins[3] < magnetDistance )\r
1604                                 realX = - margins[3];\r
1605                         else if ( partName.search( 'l' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )\r
1606                                 realX = abstractDialogCoords.x2 - minWidth;\r
1607                         else\r
1608                                 realX = abstractDialogCoords.x;\r
1609 \r
1610                         if ( abstractDialogCoords.y + margins[0] < magnetDistance )\r
1611                                 realY = - margins[0];\r
1612                         else if ( partName.search( 't' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )\r
1613                                 realY = abstractDialogCoords.y2 - minHeight;\r
1614                         else\r
1615                                 realY = abstractDialogCoords.y;\r
1616 \r
1617                         if ( abstractDialogCoords.x2 - margins[1] > viewPaneSize.width - magnetDistance )\r
1618                                 realX2 = viewPaneSize.width + margins[1] ;\r
1619                         else if ( partName.search( 'r' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )\r
1620                                 realX2 = abstractDialogCoords.x + minWidth;\r
1621                         else\r
1622                                 realX2 = abstractDialogCoords.x2;\r
1623 \r
1624                         if ( abstractDialogCoords.y2 - margins[2] > viewPaneSize.height - magnetDistance )\r
1625                                 realY2= viewPaneSize.height + margins[2] ;\r
1626                         else if ( partName.search( 'b' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )\r
1627                                 realY2 = abstractDialogCoords.y + minHeight;\r
1628                         else\r
1629                                 realY2 = abstractDialogCoords.y2 ;\r
1630 \r
1631                         dialog.move( realX, realY );\r
1632                         dialog.resize( realX2 - realX, realY2 - realY );\r
1633 \r
1634                         evt.data.preventDefault();\r
1635                 }\r
1636 \r
1637                 function mouseUpHandler( evt )\r
1638                 {\r
1639                         CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );\r
1640                         CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );\r
1641 \r
1642                         if ( CKEDITOR.env.ie6Compat )\r
1643                         {\r
1644                                 var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
1645                                 coverDoc.removeListener( 'mouseup', mouseUpHandler );\r
1646                                 coverDoc.removeListener( 'mousemove', mouseMoveHandler );\r
1647                         }\r
1648                 }\r
1649 \r
1650 // TODO : Simplify the resize logic, having just a single resize grip <div>.\r
1651 //              var widthTest = /[lr]/,\r
1652 //                      heightTest = /[tb]/;\r
1653 //              for ( var i = 0 ; i < parts.length ; i++ )\r
1654 //              {\r
1655 //                      var element = dialog.parts[ parts[i] + '_resize' ];\r
1656 //                      if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE ||\r
1657 //                                      resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT && widthTest.test( parts[i] ) ||\r
1658 //                                      resizable == CKEDITOR.DIALOG_RESIZE_WIDTH && heightTest.test( parts[i] ) )\r
1659 //                      {\r
1660 //                              element.hide();\r
1661 //                              continue;\r
1662 //                      }\r
1663 //                      element.on( 'mousedown', mouseDownHandler, dialog, { part : parts[i] } );\r
1664 //              }\r
1665         }\r
1666 \r
1667         var resizeCover;\r
1668         var coverElement;\r
1669 \r
1670         var addCover = function( editor )\r
1671         {\r
1672                 var win = CKEDITOR.document.getWindow();\r
1673 \r
1674                 if ( !coverElement )\r
1675                 {\r
1676                         var backgroundColorStyle = editor.config.dialog_backgroundCoverColor || 'white';\r
1677 \r
1678                         var html = [\r
1679                                         '<div style="position: ', ( CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed' ),\r
1680                                         '; z-index: ', editor.config.baseFloatZIndex,\r
1681                                         '; top: 0px; left: 0px; ',\r
1682                                         ( !CKEDITOR.env.ie6Compat ? 'background-color: ' + backgroundColorStyle : '' ),\r
1683                                         '" id="cke_dialog_background_cover">'\r
1684                                 ];\r
1685 \r
1686 \r
1687                         if ( CKEDITOR.env.ie6Compat )\r
1688                         {\r
1689                                 // Support for custom document.domain in IE.\r
1690                                 var isCustomDomain = CKEDITOR.env.isCustomDomain(),\r
1691                                         iframeHtml = '<html><body style=\\\'background-color:' + backgroundColorStyle + ';\\\'></body></html>';\r
1692 \r
1693                                 html.push(\r
1694                                         '<iframe' +\r
1695                                                 ' hidefocus="true"' +\r
1696                                                 ' frameborder="0"' +\r
1697                                                 ' id="cke_dialog_background_iframe"' +\r
1698                                                 ' src="javascript:' );\r
1699 \r
1700                                 html.push( 'void((function(){' +\r
1701                                                                 'document.open();' +\r
1702                                                                 ( isCustomDomain ? 'document.domain=\'' + document.domain + '\';' : '' ) +\r
1703                                                                 'document.write( \'' + iframeHtml + '\' );' +\r
1704                                                                 'document.close();' +\r
1705                                                         '})())' );\r
1706 \r
1707                                 html.push(\r
1708                                                 '"' +\r
1709                                                 ' style="' +\r
1710                                                         'position:absolute;' +\r
1711                                                         'left:0;' +\r
1712                                                         'top:0;' +\r
1713                                                         'width:100%;' +\r
1714                                                         'height: 100%;' +\r
1715                                                         'progid:DXImageTransform.Microsoft.Alpha(opacity=0)">' +\r
1716                                         '</iframe>' );\r
1717                         }\r
1718 \r
1719                         html.push( '</div>' );\r
1720 \r
1721                         coverElement = CKEDITOR.dom.element.createFromHtml( html.join( '' ) );\r
1722                 }\r
1723 \r
1724                 var element = coverElement;\r
1725 \r
1726                 var resizeFunc = function()\r
1727                 {\r
1728                         var size = win.getViewPaneSize();\r
1729                         element.setStyles(\r
1730                                 {\r
1731                                         width : size.width + 'px',\r
1732                                         height : size.height + 'px'\r
1733                                 } );\r
1734                 };\r
1735 \r
1736                 var scrollFunc = function()\r
1737                 {\r
1738                         var pos = win.getScrollPosition(),\r
1739                                 cursor = CKEDITOR.dialog._.currentTop;\r
1740                         element.setStyles(\r
1741                                         {\r
1742                                                 left : pos.x + 'px',\r
1743                                                 top : pos.y + 'px'\r
1744                                         });\r
1745 \r
1746                         do\r
1747                         {\r
1748                                 var dialogPos = cursor.getPosition();\r
1749                                 cursor.move( dialogPos.x, dialogPos.y );\r
1750                         } while ( ( cursor = cursor._.parentDialog ) );\r
1751                 };\r
1752 \r
1753                 resizeCover = resizeFunc;\r
1754                 win.on( 'resize', resizeFunc );\r
1755                 resizeFunc();\r
1756                 if ( CKEDITOR.env.ie6Compat )\r
1757                 {\r
1758                         // IE BUG: win.$.onscroll assignment doesn't work.. it must be window.onscroll.\r
1759                         // So we need to invent a really funny way to make it work.\r
1760                         var myScrollHandler = function()\r
1761                                 {\r
1762                                         scrollFunc();\r
1763                                         arguments.callee.prevScrollHandler.apply( this, arguments );\r
1764                                 };\r
1765                         win.$.setTimeout( function()\r
1766                                 {\r
1767                                         myScrollHandler.prevScrollHandler = window.onscroll || function(){};\r
1768                                         window.onscroll = myScrollHandler;\r
1769                                 }, 0 );\r
1770                         scrollFunc();\r
1771                 }\r
1772 \r
1773                 var opacity = editor.config.dialog_backgroundCoverOpacity;\r
1774                 element.setOpacity( typeof opacity != 'undefined' ? opacity : 0.5 );\r
1775 \r
1776                 element.appendTo( CKEDITOR.document.getBody() );\r
1777         };\r
1778 \r
1779         var removeCover = function()\r
1780         {\r
1781                 if ( !coverElement )\r
1782                         return;\r
1783 \r
1784                 var win = CKEDITOR.document.getWindow();\r
1785                 coverElement.remove();\r
1786                 win.removeListener( 'resize', resizeCover );\r
1787 \r
1788                 if ( CKEDITOR.env.ie6Compat )\r
1789                 {\r
1790                         win.$.setTimeout( function()\r
1791                                 {\r
1792                                         var prevScrollHandler = window.onscroll && window.onscroll.prevScrollHandler;\r
1793                                         window.onscroll = prevScrollHandler || null;\r
1794                                 }, 0 );\r
1795                 }\r
1796                 resizeCover = null;\r
1797         };\r
1798 \r
1799         var accessKeyProcessors = {};\r
1800 \r
1801         var accessKeyDownHandler = function( evt )\r
1802         {\r
1803                 var ctrl = evt.data.$.ctrlKey || evt.data.$.metaKey,\r
1804                         alt = evt.data.$.altKey,\r
1805                         shift = evt.data.$.shiftKey,\r
1806                         key = String.fromCharCode( evt.data.$.keyCode ),\r
1807                         keyProcessor = accessKeyProcessors[( ctrl ? 'CTRL+' : '' ) + ( alt ? 'ALT+' : '') + ( shift ? 'SHIFT+' : '' ) + key];\r
1808 \r
1809                 if ( !keyProcessor || !keyProcessor.length )\r
1810                         return;\r
1811 \r
1812                 keyProcessor = keyProcessor[keyProcessor.length - 1];\r
1813                 keyProcessor.keydown && keyProcessor.keydown.call( keyProcessor.uiElement, keyProcessor.dialog, keyProcessor.key );\r
1814                 evt.data.preventDefault();\r
1815         };\r
1816 \r
1817         var accessKeyUpHandler = function( evt )\r
1818         {\r
1819                 var ctrl = evt.data.$.ctrlKey || evt.data.$.metaKey,\r
1820                         alt = evt.data.$.altKey,\r
1821                         shift = evt.data.$.shiftKey,\r
1822                         key = String.fromCharCode( evt.data.$.keyCode ),\r
1823                         keyProcessor = accessKeyProcessors[( ctrl ? 'CTRL+' : '' ) + ( alt ? 'ALT+' : '') + ( shift ? 'SHIFT+' : '' ) + key];\r
1824 \r
1825                 if ( !keyProcessor || !keyProcessor.length )\r
1826                         return;\r
1827 \r
1828                 keyProcessor = keyProcessor[keyProcessor.length - 1];\r
1829                 if ( keyProcessor.keyup )\r
1830                 {\r
1831                         keyProcessor.keyup.call( keyProcessor.uiElement, keyProcessor.dialog, keyProcessor.key );\r
1832                         evt.data.preventDefault();\r
1833                 }\r
1834         };\r
1835 \r
1836         var registerAccessKey = function( uiElement, dialog, key, downFunc, upFunc )\r
1837         {\r
1838                 var procList = accessKeyProcessors[key] || ( accessKeyProcessors[key] = [] );\r
1839                 procList.push( {\r
1840                                 uiElement : uiElement,\r
1841                                 dialog : dialog,\r
1842                                 key : key,\r
1843                                 keyup : upFunc || uiElement.accessKeyUp,\r
1844                                 keydown : downFunc || uiElement.accessKeyDown\r
1845                         } );\r
1846         };\r
1847 \r
1848         var unregisterAccessKey = function( obj )\r
1849         {\r
1850                 for ( var i in accessKeyProcessors )\r
1851                 {\r
1852                         var list = accessKeyProcessors[i];\r
1853                         for ( var j = list.length - 1 ; j >= 0 ; j-- )\r
1854                         {\r
1855                                 if ( list[j].dialog == obj || list[j].uiElement == obj )\r
1856                                         list.splice( j, 1 );\r
1857                         }\r
1858                         if ( list.length === 0 )\r
1859                                 delete accessKeyProcessors[i];\r
1860                 }\r
1861         };\r
1862 \r
1863         var tabAccessKeyUp = function( dialog, key )\r
1864         {\r
1865                 if ( dialog._.accessKeyMap[key] )\r
1866                         dialog.selectPage( dialog._.accessKeyMap[key] );\r
1867         };\r
1868 \r
1869         var tabAccessKeyDown = function( dialog, key )\r
1870         {\r
1871         };\r
1872 \r
1873         // ESC, ENTER\r
1874         var preventKeyBubblingKeys = { 27 :1, 13 :1 };\r
1875         var preventKeyBubbling = function( e )\r
1876         {\r
1877                 if ( e.data.getKeystroke() in preventKeyBubblingKeys )\r
1878                         e.data.stopPropagation();\r
1879         };\r
1880 \r
1881         (function()\r
1882         {\r
1883                 CKEDITOR.ui.dialog =\r
1884                 {\r
1885                         /**\r
1886                          * The base class of all dialog UI elements.\r
1887                          * @constructor\r
1888                          * @param {CKEDITOR.dialog} dialog Parent dialog object.\r
1889                          * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition Element\r
1890                          * definition. Accepted fields:\r
1891                          * <ul>\r
1892                          *      <li><strong>id</strong> (Required) The id of the UI element. See {@link\r
1893                          *      CKEDITOR.dialog#getContentElement}</li>\r
1894                          *      <li><strong>type</strong> (Required) The type of the UI element. The\r
1895                          *      value to this field specifies which UI element class will be used to\r
1896                          *      generate the final widget.</li>\r
1897                          *      <li><strong>title</strong> (Optional) The popup tooltip for the UI\r
1898                          *      element.</li>\r
1899                          *      <li><strong>hidden</strong> (Optional) A flag that tells if the element\r
1900                          *      should be initially visible.</li>\r
1901                          *      <li><strong>className</strong> (Optional) Additional CSS class names\r
1902                          *      to add to the UI element. Separated by space.</li>\r
1903                          *      <li><strong>style</strong> (Optional) Additional CSS inline styles\r
1904                          *      to add to the UI element. A semicolon (;) is required after the last\r
1905                          *      style declaration.</li>\r
1906                          *      <li><strong>accessKey</strong> (Optional) The alphanumeric access key\r
1907                          *      for this element. Access keys are automatically prefixed by CTRL.</li>\r
1908                          *      <li><strong>on*</strong> (Optional) Any UI element definition field that\r
1909                          *      starts with <em>on</em> followed immediately by a capital letter and\r
1910                          *      probably more letters is an event handler. Event handlers may be further\r
1911                          *      divided into registered event handlers and DOM event handlers. Please\r
1912                          *      refer to {@link CKEDITOR.ui.dialog.uiElement#registerEvents} and\r
1913                          *      {@link CKEDITOR.ui.dialog.uiElement#eventProcessors} for more\r
1914                          *      information.</li>\r
1915                          * </ul>\r
1916                          * @param {Array} htmlList\r
1917                          * List of HTML code to be added to the dialog's content area.\r
1918                          * @param {Function|String} nodeNameArg\r
1919                          * A function returning a string, or a simple string for the node name for\r
1920                          * the root DOM node. Default is 'div'.\r
1921                          * @param {Function|Object} stylesArg\r
1922                          * A function returning an object, or a simple object for CSS styles applied\r
1923                          * to the DOM node. Default is empty object.\r
1924                          * @param {Function|Object} attributesArg\r
1925                          * A fucntion returning an object, or a simple object for attributes applied\r
1926                          * to the DOM node. Default is empty object.\r
1927                          * @param {Function|String} contentsArg\r
1928                          * A function returning a string, or a simple string for the HTML code inside\r
1929                          * the root DOM node. Default is empty string.\r
1930                          * @example\r
1931                          */\r
1932                         uiElement : function( dialog, elementDefinition, htmlList, nodeNameArg, stylesArg, attributesArg, contentsArg )\r
1933                         {\r
1934                                 if ( arguments.length < 4 )\r
1935                                         return;\r
1936 \r
1937                                 var nodeName = ( nodeNameArg.call ? nodeNameArg( elementDefinition ) : nodeNameArg ) || 'div',\r
1938                                         html = [ '<', nodeName, ' ' ],\r
1939                                         styles = ( stylesArg && stylesArg.call ? stylesArg( elementDefinition ) : stylesArg ) || {},\r
1940                                         attributes = ( attributesArg && attributesArg.call ? attributesArg( elementDefinition ) : attributesArg ) || {},\r
1941                                         innerHTML = ( contentsArg && contentsArg.call ? contentsArg( dialog, elementDefinition ) : contentsArg ) || '',\r
1942                                         domId = this.domId = attributes.id || CKEDITOR.tools.getNextNumber() + '_uiElement',\r
1943                                         id = this.id = elementDefinition.id,\r
1944                                         i;\r
1945 \r
1946                                 // Set the id, a unique id is required for getElement() to work.\r
1947                                 attributes.id = domId;\r
1948 \r
1949                                 // Set the type and definition CSS class names.\r
1950                                 var classes = {};\r
1951                                 if ( elementDefinition.type )\r
1952                                         classes[ 'cke_dialog_ui_' + elementDefinition.type ] = 1;\r
1953                                 if ( elementDefinition.className )\r
1954                                         classes[ elementDefinition.className ] = 1;\r
1955                                 var attributeClasses = ( attributes['class'] && attributes['class'].split ) ? attributes['class'].split( ' ' ) : [];\r
1956                                 for ( i = 0 ; i < attributeClasses.length ; i++ )\r
1957                                 {\r
1958                                         if ( attributeClasses[i] )\r
1959                                                 classes[ attributeClasses[i] ] = 1;\r
1960                                 }\r
1961                                 var finalClasses = [];\r
1962                                 for ( i in classes )\r
1963                                         finalClasses.push( i );\r
1964                                 attributes['class'] = finalClasses.join( ' ' );\r
1965 \r
1966                                 // Set the popup tooltop.\r
1967                                 if ( elementDefinition.title )\r
1968                                         attributes.title = elementDefinition.title;\r
1969 \r
1970                                 // Write the inline CSS styles.\r
1971                                 var styleStr = ( elementDefinition.style || '' ).split( ';' );\r
1972                                 for ( i in styles )\r
1973                                         styleStr.push( i + ':' + styles[i] );\r
1974                                 if ( elementDefinition.hidden )\r
1975                                         styleStr.push( 'display:none' );\r
1976                                 for ( i = styleStr.length - 1 ; i >= 0 ; i-- )\r
1977                                 {\r
1978                                         if ( styleStr[i] === '' )\r
1979                                                 styleStr.splice( i, 1 );\r
1980                                 }\r
1981                                 if ( styleStr.length > 0 )\r
1982                                         attributes.style = ( attributes.style ? ( attributes.style + '; ' ) : '' ) + styleStr.join( '; ' );\r
1983 \r
1984                                 // Write the attributes.\r
1985                                 for ( i in attributes )\r
1986                                         html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[i] ) + '" ');\r
1987 \r
1988                                 // Write the content HTML.\r
1989                                 html.push( '>', innerHTML, '</', nodeName, '>' );\r
1990 \r
1991                                 // Add contents to the parent HTML array.\r
1992                                 htmlList.push( html.join( '' ) );\r
1993 \r
1994                                 ( this._ || ( this._ = {} ) ).dialog = dialog;\r
1995 \r
1996                                 // Override isChanged if it is defined in element definition.\r
1997                                 if ( typeof( elementDefinition.isChanged ) == 'boolean' )\r
1998                                         this.isChanged = function(){ return elementDefinition.isChanged; };\r
1999                                 if ( typeof( elementDefinition.isChanged ) == 'function' )\r
2000                                         this.isChanged = elementDefinition.isChanged;\r
2001 \r
2002                                 // Add events.\r
2003                                 CKEDITOR.event.implementOn( this );\r
2004 \r
2005                                 this.registerEvents( elementDefinition );\r
2006                                 if ( this.accessKeyUp && this.accessKeyDown && elementDefinition.accessKey )\r
2007                                         registerAccessKey( this, dialog, 'CTRL+' + elementDefinition.accessKey );\r
2008 \r
2009                                 var me = this;\r
2010                                 dialog.on( 'load', function()\r
2011                                         {\r
2012                                                 if ( me.getInputElement() )\r
2013                                                 {\r
2014                                                         me.getInputElement().on( 'focus', function()\r
2015                                                                 {\r
2016                                                                         dialog._.tabBarMode = false;\r
2017                                                                         dialog._.hasFocus = true;\r
2018                                                                         me.fire( 'focus' );\r
2019                                                                 }, me );\r
2020                                                 }\r
2021                                         } );\r
2022 \r
2023                                 // Register the object as a tab focus if it can be included.\r
2024                                 if ( this.keyboardFocusable )\r
2025                                 {\r
2026                                         this.focusIndex = dialog._.focusList.push( this ) - 1;\r
2027                                         this.on( 'focus', function()\r
2028                                                 {\r
2029                                                         dialog._.currentFocusIndex = me.focusIndex;\r
2030                                                 } );\r
2031                                 }\r
2032 \r
2033                                 // Completes this object with everything we have in the\r
2034                                 // definition.\r
2035                                 CKEDITOR.tools.extend( this, elementDefinition );\r
2036                         },\r
2037 \r
2038                         /**\r
2039                          * Horizontal layout box for dialog UI elements, auto-expends to available width of container.\r
2040                          * @constructor\r
2041                          * @extends CKEDITOR.ui.dialog.uiElement\r
2042                          * @param {CKEDITOR.dialog} dialog\r
2043                          * Parent dialog object.\r
2044                          * @param {Array} childObjList\r
2045                          * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this\r
2046                          * container.\r
2047                          * @param {Array} childHtmlList\r
2048                          * Array of HTML code that correspond to the HTML output of all the\r
2049                          * objects in childObjList.\r
2050                          * @param {Array} htmlList\r
2051                          * Array of HTML code that this element will output to.\r
2052                          * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition\r
2053                          * The element definition. Accepted fields:\r
2054                          * <ul>\r
2055                          *      <li><strong>widths</strong> (Optional) The widths of child cells.</li>\r
2056                          *      <li><strong>height</strong> (Optional) The height of the layout.</li>\r
2057                          *      <li><strong>padding</strong> (Optional) The padding width inside child\r
2058                          *       cells.</li>\r
2059                          *      <li><strong>align</strong> (Optional) The alignment of the whole layout\r
2060                          *      </li>\r
2061                          * </ul>\r
2062                          * @example\r
2063                          */\r
2064                         hbox : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )\r
2065                         {\r
2066                                 if ( arguments.length < 4 )\r
2067                                         return;\r
2068 \r
2069                                 this._ || ( this._ = {} );\r
2070 \r
2071                                 var children = this._.children = childObjList,\r
2072                                         widths = elementDefinition && elementDefinition.widths || null,\r
2073                                         height = elementDefinition && elementDefinition.height || null,\r
2074                                         styles = {},\r
2075                                         i;\r
2076                                 /** @ignore */\r
2077                                 var innerHTML = function()\r
2078                                 {\r
2079                                         var html = [ '<tbody><tr class="cke_dialog_ui_hbox">' ];\r
2080                                         for ( i = 0 ; i < childHtmlList.length ; i++ )\r
2081                                         {\r
2082                                                 var className = 'cke_dialog_ui_hbox_child',\r
2083                                                         styles = [];\r
2084                                                 if ( i === 0 )\r
2085                                                         className = 'cke_dialog_ui_hbox_first';\r
2086                                                 if ( i == childHtmlList.length - 1 )\r
2087                                                         className = 'cke_dialog_ui_hbox_last';\r
2088                                                 html.push( '<td class="', className, '" ' );\r
2089                                                 if ( widths )\r
2090                                                 {\r
2091                                                         if ( widths[i] )\r
2092                                                                 styles.push( 'width:' + CKEDITOR.tools.cssLength( widths[i] ) );\r
2093                                                 }\r
2094                                                 else\r
2095                                                         styles.push( 'width:' + Math.floor( 100 / childHtmlList.length ) + '%' );\r
2096                                                 if ( height )\r
2097                                                         styles.push( 'height:' + CKEDITOR.tools.cssLength( height ) );\r
2098                                                 if ( elementDefinition && elementDefinition.padding != undefined )\r
2099                                                         styles.push( 'padding:' + CKEDITOR.tools.cssLength( elementDefinition.padding ) );\r
2100                                                 if ( styles.length > 0 )\r
2101                                                         html.push( 'style="' + styles.join('; ') + '" ' );\r
2102                                                 html.push( '>', childHtmlList[i], '</td>' );\r
2103                                         }\r
2104                                         html.push( '</tr></tbody>' );\r
2105                                         return html.join( '' );\r
2106                                 };\r
2107 \r
2108                                 CKEDITOR.ui.dialog.uiElement.call(\r
2109                                         this,\r
2110                                         dialog,\r
2111                                         elementDefinition || { type : 'hbox' },\r
2112                                         htmlList,\r
2113                                         'table',\r
2114                                         styles,\r
2115                                         elementDefinition && elementDefinition.align && { align : elementDefinition.align } || null,\r
2116                                         innerHTML );\r
2117                         },\r
2118 \r
2119                         /**\r
2120                          * Vertical layout box for dialog UI elements.\r
2121                          * @constructor\r
2122                          * @extends CKEDITOR.ui.dialog.hbox\r
2123                          * @param {CKEDITOR.dialog} dialog\r
2124                          * Parent dialog object.\r
2125                          * @param {Array} childObjList\r
2126                          * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this\r
2127                          * container.\r
2128                          * @param {Array} childHtmlList\r
2129                          * Array of HTML code that correspond to the HTML output of all the\r
2130                          * objects in childObjList.\r
2131                          * @param {Array} htmlList\r
2132                          * Array of HTML code that this element will output to.\r
2133                          * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition\r
2134                          * The element definition. Accepted fields:\r
2135                          * <ul>\r
2136                          *      <li><strong>width</strong> (Optional) The width of the layout.</li>\r
2137                          *      <li><strong>heights</strong> (Optional) The heights of individual cells.\r
2138                          *      </li>\r
2139                          *      <li><strong>align</strong> (Optional) The alignment of the layout.</li>\r
2140                          *      <li><strong>padding</strong> (Optional) The padding width inside child\r
2141                          *      cells.</li>\r
2142                          *      <li><strong>expand</strong> (Optional) Whether the layout should expand\r
2143                          *      vertically to fill its container.</li>\r
2144                          * </ul>\r
2145                          * @example\r
2146                          */\r
2147                         vbox : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )\r
2148                         {\r
2149                                 if (arguments.length < 3 )\r
2150                                         return;\r
2151 \r
2152                                 this._ || ( this._ = {} );\r
2153 \r
2154                                 var children = this._.children = childObjList,\r
2155                                         width = elementDefinition && elementDefinition.width || null,\r
2156                                         heights = elementDefinition && elementDefinition.heights || null;\r
2157                                 /** @ignore */\r
2158                                 var innerHTML = function()\r
2159                                 {\r
2160                                         var html = [ '<table cellspacing="0" border="0" ' ];\r
2161                                         html.push( 'style="' );\r
2162                                         if ( elementDefinition && elementDefinition.expand )\r
2163                                                 html.push( 'height:100%;' );\r
2164                                         html.push( 'width:' + CKEDITOR.tools.cssLength( width || '100%' ), ';' );\r
2165                                         html.push( '"' );\r
2166                                         html.push( 'align="', CKEDITOR.tools.htmlEncode(\r
2167                                                 ( elementDefinition && elementDefinition.align ) || ( dialog.getParentEditor().lang.dir == 'ltr' ? 'left' : 'right' ) ), '" ' );\r
2168 \r
2169                                         html.push( '><tbody>' );\r
2170                                         for ( var i = 0 ; i < childHtmlList.length ; i++ )\r
2171                                         {\r
2172                                                 var styles = [];\r
2173                                                 html.push( '<tr><td ' );\r
2174                                                 if ( width )\r
2175                                                         styles.push( 'width:' + CKEDITOR.tools.cssLength( width || '100%' ) );\r
2176                                                 if ( heights )\r
2177                                                         styles.push( 'height:' + CKEDITOR.tools.cssLength( heights[i] ) );\r
2178                                                 else if ( elementDefinition && elementDefinition.expand )\r
2179                                                         styles.push( 'height:' + Math.floor( 100 / childHtmlList.length ) + '%' );\r
2180                                                 if ( elementDefinition && elementDefinition.padding != undefined )\r
2181                                                         styles.push( 'padding:' + CKEDITOR.tools.cssLength( elementDefinition.padding ) );\r
2182                                                 if ( styles.length > 0 )\r
2183                                                         html.push( 'style="', styles.join( '; ' ), '" ' );\r
2184                                                 html.push( ' class="cke_dialog_ui_vbox_child">', childHtmlList[i], '</td></tr>' );\r
2185                                         }\r
2186                                         html.push( '</tbody></table>' );\r
2187                                         return html.join( '' );\r
2188                                 };\r
2189                                 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition || { type : 'vbox' }, htmlList, 'div', null, null, innerHTML );\r
2190                         }\r
2191                 };\r
2192         })();\r
2193 \r
2194         CKEDITOR.ui.dialog.uiElement.prototype =\r
2195         {\r
2196                 /**\r
2197                  * Gets the root DOM element of this dialog UI object.\r
2198                  * @returns {CKEDITOR.dom.element} Root DOM element of UI object.\r
2199                  * @example\r
2200                  * uiElement.getElement().hide();\r
2201                  */\r
2202                 getElement : function()\r
2203                 {\r
2204                         return CKEDITOR.document.getById( this.domId );\r
2205                 },\r
2206 \r
2207                 /**\r
2208                  * Gets the DOM element that the user inputs values.\r
2209                  * This function is used by setValue(), getValue() and focus(). It should\r
2210                  * be overrided in child classes where the input element isn't the root\r
2211                  * element.\r
2212                  * @returns {CKEDITOR.dom.element} The element where the user input values.\r
2213                  * @example\r
2214                  * var rawValue = textInput.getInputElement().$.value;\r
2215                  */\r
2216                 getInputElement : function()\r
2217                 {\r
2218                         return this.getElement();\r
2219                 },\r
2220 \r
2221                 /**\r
2222                  * Gets the parent dialog object containing this UI element.\r
2223                  * @returns {CKEDITOR.dialog} Parent dialog object.\r
2224                  * @example\r
2225                  * var dialog = uiElement.getDialog();\r
2226                  */\r
2227                 getDialog : function()\r
2228                 {\r
2229                         return this._.dialog;\r
2230                 },\r
2231 \r
2232                 /**\r
2233                  * Sets the value of this dialog UI object.\r
2234                  * @param {Object} value The new value.\r
2235                  * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
2236                  * @example\r
2237                  * uiElement.setValue( 'Dingo' );\r
2238                  */\r
2239                 setValue : function( value )\r
2240                 {\r
2241                         this.getInputElement().setValue( value );\r
2242                         this.fire( 'change', { value : value } );\r
2243                         return this;\r
2244                 },\r
2245 \r
2246                 /**\r
2247                  * Gets the current value of this dialog UI object.\r
2248                  * @returns {Object} The current value.\r
2249                  * @example\r
2250                  * var myValue = uiElement.getValue();\r
2251                  */\r
2252                 getValue : function()\r
2253                 {\r
2254                         return this.getInputElement().getValue();\r
2255                 },\r
2256 \r
2257                 /**\r
2258                  * Tells whether the UI object's value has changed.\r
2259                  * @returns {Boolean} true if changed, false if not changed.\r
2260                  * @example\r
2261                  * if ( uiElement.isChanged() )\r
2262                  * &nbsp;&nbsp;confirm( 'Value changed! Continue?' );\r
2263                  */\r
2264                 isChanged : function()\r
2265                 {\r
2266                         // Override in input classes.\r
2267                         return false;\r
2268                 },\r
2269 \r
2270                 /**\r
2271                  * Selects the parent tab of this element. Usually called by focus() or overridden focus() methods.\r
2272                  * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
2273                  * @example\r
2274                  * focus : function()\r
2275                  * {\r
2276                  *              this.selectParentTab();\r
2277                  *              // do something else.\r
2278                  * }\r
2279                  */\r
2280                 selectParentTab : function()\r
2281                 {\r
2282                         var element = this.getInputElement(),\r
2283                                 cursor = element,\r
2284                                 tabId;\r
2285                         while ( ( cursor = cursor.getParent() ) && cursor.$.className.search( 'cke_dialog_page_contents' ) == -1 )\r
2286                         { /*jsl:pass*/ }\r
2287 \r
2288                         // Some widgets don't have parent tabs (e.g. OK and Cancel buttons).\r
2289                         if ( !cursor )\r
2290                                 return this;\r
2291 \r
2292                         tabId = cursor.getAttribute( 'name' );\r
2293                         // Avoid duplicate select.\r
2294                         if ( this._.dialog._.currentTabId != tabId )\r
2295                                 this._.dialog.selectPage( tabId );\r
2296                         return this;\r
2297                 },\r
2298 \r
2299                 /**\r
2300                  * Puts the focus to the UI object. Switches tabs if the UI object isn't in the active tab page.\r
2301                  * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
2302                  * @example\r
2303                  * uiElement.focus();\r
2304                  */\r
2305                 focus : function()\r
2306                 {\r
2307                         this.selectParentTab().getInputElement().focus();\r
2308                         return this;\r
2309                 },\r
2310 \r
2311                 /**\r
2312                  * Registers the on* event handlers defined in the element definition.\r
2313                  * The default behavior of this function is:\r
2314                  * <ol>\r
2315                  *  <li>\r
2316                  *      If the on* event is defined in the class's eventProcesors list,\r
2317                  *      then the registration is delegated to the corresponding function\r
2318                  *      in the eventProcessors list.\r
2319                  *  </li>\r
2320                  *  <li>\r
2321                  *      If the on* event is not defined in the eventProcessors list, then\r
2322                  *      register the event handler under the corresponding DOM event of\r
2323                  *      the UI element's input DOM element (as defined by the return value\r
2324                  *      of {@link CKEDITOR.ui.dialog.uiElement#getInputElement}).\r
2325                  *  </li>\r
2326                  * </ol>\r
2327                  * This function is only called at UI element instantiation, but can\r
2328                  * be overridded in child classes if they require more flexibility.\r
2329                  * @param {CKEDITOR.dialog.uiElementDefinition} definition The UI element\r
2330                  * definition.\r
2331                  * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
2332                  * @example\r
2333                  */\r
2334                 registerEvents : function( definition )\r
2335                 {\r
2336                         var regex = /^on([A-Z]\w+)/,\r
2337                                 match;\r
2338 \r
2339                         var registerDomEvent = function( uiElement, dialog, eventName, func )\r
2340                         {\r
2341                                 dialog.on( 'load', function()\r
2342                                 {\r
2343                                         uiElement.getInputElement().on( eventName, func, uiElement );\r
2344                                 });\r
2345                         };\r
2346 \r
2347                         for ( var i in definition )\r
2348                         {\r
2349                                 if ( !( match = i.match( regex ) ) )\r
2350                                         continue;\r
2351                                 if ( this.eventProcessors[i] )\r
2352                                         this.eventProcessors[i].call( this, this._.dialog, definition[i] );\r
2353                                 else\r
2354                                         registerDomEvent( this, this._.dialog, match[1].toLowerCase(), definition[i] );\r
2355                         }\r
2356 \r
2357                         return this;\r
2358                 },\r
2359 \r
2360                 /**\r
2361                  * The event processor list used by\r
2362                  * {@link CKEDITOR.ui.dialog.uiElement#getInputElement} at UI element\r
2363                  * instantiation. The default list defines three on* events:\r
2364                  * <ol>\r
2365                  *  <li>onLoad - Called when the element's parent dialog opens for the\r
2366                  *  first time</li>\r
2367                  *  <li>onShow - Called whenever the element's parent dialog opens.</li>\r
2368                  *  <li>onHide - Called whenever the element's parent dialog closes.</li>\r
2369                  * </ol>\r
2370                  * @field\r
2371                  * @type Object\r
2372                  * @example\r
2373                  * // This connects the 'click' event in CKEDITOR.ui.dialog.button to onClick\r
2374                  * // handlers in the UI element's definitions.\r
2375                  * CKEDITOR.ui.dialog.button.eventProcessors = CKEDITOR.tools.extend( {},\r
2376                  * &nbsp;&nbsp;CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors,\r
2377                  * &nbsp;&nbsp;{ onClick : function( dialog, func ) { this.on( 'click', func ); } },\r
2378                  * &nbsp;&nbsp;true );\r
2379                  */\r
2380                 eventProcessors :\r
2381                 {\r
2382                         onLoad : function( dialog, func )\r
2383                         {\r
2384                                 dialog.on( 'load', func, this );\r
2385                         },\r
2386 \r
2387                         onShow : function( dialog, func )\r
2388                         {\r
2389                                 dialog.on( 'show', func, this );\r
2390                         },\r
2391 \r
2392                         onHide : function( dialog, func )\r
2393                         {\r
2394                                 dialog.on( 'hide', func, this );\r
2395                         }\r
2396                 },\r
2397 \r
2398                 /**\r
2399                  * The default handler for a UI element's access key down event, which\r
2400                  * tries to put focus to the UI element.<br />\r
2401                  * Can be overridded in child classes for more sophisticaed behavior.\r
2402                  * @param {CKEDITOR.dialog} dialog The parent dialog object.\r
2403                  * @param {String} key The key combination pressed. Since access keys\r
2404                  * are defined to always include the CTRL key, its value should always\r
2405                  * include a 'CTRL+' prefix.\r
2406                  * @example\r
2407                  */\r
2408                 accessKeyDown : function( dialog, key )\r
2409                 {\r
2410                         this.focus();\r
2411                 },\r
2412 \r
2413                 /**\r
2414                  * The default handler for a UI element's access key up event, which\r
2415                  * does nothing.<br />\r
2416                  * Can be overridded in child classes for more sophisticated behavior.\r
2417                  * @param {CKEDITOR.dialog} dialog The parent dialog object.\r
2418                  * @param {String} key The key combination pressed. Since access keys\r
2419                  * are defined to always include the CTRL key, its value should always\r
2420                  * include a 'CTRL+' prefix.\r
2421                  * @example\r
2422                  */\r
2423                 accessKeyUp : function( dialog, key )\r
2424                 {\r
2425                 },\r
2426 \r
2427                 /**\r
2428                  * Disables a UI element.\r
2429                  * @example\r
2430                  */\r
2431                 disable : function()\r
2432                 {\r
2433                         var element = this.getInputElement();\r
2434                         element.setAttribute( 'disabled', 'true' );\r
2435                         element.addClass( 'cke_disabled' );\r
2436                 },\r
2437 \r
2438                 /**\r
2439                  * Enables a UI element.\r
2440                  * @example\r
2441                  */\r
2442                 enable : function()\r
2443                 {\r
2444                         var element = this.getInputElement();\r
2445                         element.removeAttribute( 'disabled' );\r
2446                         element.removeClass( 'cke_disabled' );\r
2447                 },\r
2448 \r
2449                 /**\r
2450                  * Determines whether an UI element is enabled or not.\r
2451                  * @returns {Boolean} Whether the UI element is enabled.\r
2452                  * @example\r
2453                  */\r
2454                 isEnabled : function()\r
2455                 {\r
2456                         return !this.getInputElement().getAttribute( 'disabled' );\r
2457                 },\r
2458 \r
2459                 /**\r
2460                  * Determines whether an UI element is visible or not.\r
2461                  * @returns {Boolean} Whether the UI element is visible.\r
2462                  * @example\r
2463                  */\r
2464                 isVisible : function()\r
2465                 {\r
2466                         return this.getInputElement().isVisible();\r
2467                 },\r
2468 \r
2469                 /**\r
2470                  * Determines whether an UI element is focus-able or not.\r
2471                  * Focus-able is defined as being both visible and enabled.\r
2472                  * @returns {Boolean} Whether the UI element can be focused.\r
2473                  * @example\r
2474                  */\r
2475                 isFocusable : function()\r
2476                 {\r
2477                         if ( !this.isEnabled() || !this.isVisible() )\r
2478                                 return false;\r
2479                         return true;\r
2480                 }\r
2481         };\r
2482 \r
2483         CKEDITOR.ui.dialog.hbox.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,\r
2484                 /**\r
2485                  * @lends CKEDITOR.ui.dialog.hbox.prototype\r
2486                  */\r
2487                 {\r
2488                         /**\r
2489                          * Gets a child UI element inside this container.\r
2490                          * @param {Array|Number} indices An array or a single number to indicate the child's\r
2491                          * position in the container's descendant tree. Omit to get all the children in an array.\r
2492                          * @returns {Array|CKEDITOR.ui.dialog.uiElement} Array of all UI elements in the container\r
2493                          * if no argument given, or the specified UI element if indices is given.\r
2494                          * @example\r
2495                          * var checkbox = hbox.getChild( [0,1] );\r
2496                          * checkbox.setValue( true );\r
2497                          */\r
2498                         getChild : function( indices )\r
2499                         {\r
2500                                 // If no arguments, return a clone of the children array.\r
2501                                 if ( arguments.length < 1 )\r
2502                                         return this._.children.concat();\r
2503 \r
2504                                 // If indices isn't array, make it one.\r
2505                                 if ( !indices.splice )\r
2506                                         indices = [ indices ];\r
2507 \r
2508                                 // Retrieve the child element according to tree position.\r
2509                                 if ( indices.length < 2 )\r
2510                                         return this._.children[ indices[0] ];\r
2511                                 else\r
2512                                         return ( this._.children[ indices[0] ] && this._.children[ indices[0] ].getChild ) ?\r
2513                                                 this._.children[ indices[0] ].getChild( indices.slice( 1, indices.length ) ) :\r
2514                                                 null;\r
2515                         }\r
2516                 }, true );\r
2517 \r
2518         CKEDITOR.ui.dialog.vbox.prototype = new CKEDITOR.ui.dialog.hbox();\r
2519 \r
2520 \r
2521 \r
2522         (function()\r
2523         {\r
2524                 var commonBuilder = {\r
2525                         build : function( dialog, elementDefinition, output )\r
2526                         {\r
2527                                 var children = elementDefinition.children,\r
2528                                         child,\r
2529                                         childHtmlList = [],\r
2530                                         childObjList = [];\r
2531                                 for ( var i = 0 ; ( i < children.length && ( child = children[i] ) ) ; i++ )\r
2532                                 {\r
2533                                         var childHtml = [];\r
2534                                         childHtmlList.push( childHtml );\r
2535                                         childObjList.push( CKEDITOR.dialog._.uiElementBuilders[ child.type ].build( dialog, child, childHtml ) );\r
2536                                 }\r
2537                                 return new CKEDITOR.ui.dialog[elementDefinition.type]( dialog, childObjList, childHtmlList, output, elementDefinition );\r
2538                         }\r
2539                 };\r
2540 \r
2541                 CKEDITOR.dialog.addUIElement( 'hbox', commonBuilder );\r
2542                 CKEDITOR.dialog.addUIElement( 'vbox', commonBuilder );\r
2543         })();\r
2544 \r
2545         /**\r
2546          * Generic dialog command. It opens a specific dialog when executed.\r
2547          * @constructor\r
2548          * @augments CKEDITOR.commandDefinition\r
2549          * @param {string} dialogName The name of the dialog to open when executing\r
2550          *              this command.\r
2551          * @example\r
2552          * // Register the "link" command, which opens the "link" dialog.\r
2553          * editor.addCommand( 'link', <b>new CKEDITOR.dialogCommand( 'link' )</b> );\r
2554          */\r
2555         CKEDITOR.dialogCommand = function( dialogName )\r
2556         {\r
2557                 this.dialogName = dialogName;\r
2558         };\r
2559 \r
2560         CKEDITOR.dialogCommand.prototype =\r
2561         {\r
2562                 /** @ignore */\r
2563                 exec : function( editor )\r
2564                 {\r
2565                         editor.openDialog( this.dialogName );\r
2566                 },\r
2567                 // Dialog commands just open a dialog ui, thus require no undo logic,\r
2568                 // undo support should dedicate to specific dialog implementation.\r
2569                 canUndo: false\r
2570         };\r
2571 \r
2572         (function()\r
2573         {\r
2574                 var notEmptyRegex = /^([a]|[^a])+$/,\r
2575                         integerRegex = /^\d*$/,\r
2576                         numberRegex = /^\d*(?:\.\d+)?$/;\r
2577 \r
2578                 CKEDITOR.VALIDATE_OR = 1;\r
2579                 CKEDITOR.VALIDATE_AND = 2;\r
2580 \r
2581                 CKEDITOR.dialog.validate =\r
2582                 {\r
2583                         functions : function()\r
2584                         {\r
2585                                 return function()\r
2586                                 {\r
2587                                         /**\r
2588                                          * It's important for validate functions to be able to accept the value\r
2589                                          * as argument in addition to this.getValue(), so that it is possible to\r
2590                                          * combine validate functions together to make more sophisticated\r
2591                                          * validators.\r
2592                                          */\r
2593                                         var value = this && this.getValue ? this.getValue() : arguments[0];\r
2594 \r
2595                                         var msg = undefined,\r
2596                                                 relation = CKEDITOR.VALIDATE_AND,\r
2597                                                 functions = [], i;\r
2598 \r
2599                                         for ( i = 0 ; i < arguments.length ; i++ )\r
2600                                         {\r
2601                                                 if ( typeof( arguments[i] ) == 'function' )\r
2602                                                         functions.push( arguments[i] );\r
2603                                                 else\r
2604                                                         break;\r
2605                                         }\r
2606 \r
2607                                         if ( i < arguments.length && typeof( arguments[i] ) == 'string' )\r
2608                                         {\r
2609                                                 msg = arguments[i];\r
2610                                                 i++;\r
2611                                         }\r
2612 \r
2613                                         if ( i < arguments.length && typeof( arguments[i]) == 'number' )\r
2614                                                 relation = arguments[i];\r
2615 \r
2616                                         var passed = ( relation == CKEDITOR.VALIDATE_AND ? true : false );\r
2617                                         for ( i = 0 ; i < functions.length ; i++ )\r
2618                                         {\r
2619                                                 if ( relation == CKEDITOR.VALIDATE_AND )\r
2620                                                         passed = passed && functions[i]( value );\r
2621                                                 else\r
2622                                                         passed = passed || functions[i]( value );\r
2623                                         }\r
2624 \r
2625                                         if ( !passed )\r
2626                                         {\r
2627                                                 if ( msg !== undefined )\r
2628                                                         alert( msg );\r
2629                                                 if ( this && ( this.select || this.focus ) )\r
2630                                                         ( this.select || this.focus )();\r
2631                                                 return false;\r
2632                                         }\r
2633 \r
2634                                         return true;\r
2635                                 };\r
2636                         },\r
2637 \r
2638                         regex : function( regex, msg )\r
2639                         {\r
2640                                 /*\r
2641                                  * Can be greatly shortened by deriving from functions validator if code size\r
2642                                  * turns out to be more important than performance.\r
2643                                  */\r
2644                                 return function()\r
2645                                 {\r
2646                                         var value = this && this.getValue ? this.getValue() : arguments[0];\r
2647                                         if ( !regex.test( value ) )\r
2648                                         {\r
2649                                                 if ( msg !== undefined )\r
2650                                                         alert( msg );\r
2651                                                 if ( this && ( this.select || this.focus ) )\r
2652                                                 {\r
2653                                                         if ( this.select )\r
2654                                                                 this.select();\r
2655                                                         else\r
2656                                                                 this.focus();\r
2657                                                 }\r
2658                                                 return false;\r
2659                                         }\r
2660                                         return true;\r
2661                                 };\r
2662                         },\r
2663 \r
2664                         notEmpty : function( msg )\r
2665                         {\r
2666                                 return this.regex( notEmptyRegex, msg );\r
2667                         },\r
2668 \r
2669                         integer : function( msg )\r
2670                         {\r
2671                                 return this.regex( integerRegex, msg );\r
2672                         },\r
2673 \r
2674                         'number' : function( msg )\r
2675                         {\r
2676                                 return this.regex( numberRegex, msg );\r
2677                         },\r
2678 \r
2679                         equals : function( value, msg )\r
2680                         {\r
2681                                 return this.functions( function( val ){ return val == value; }, msg );\r
2682                         },\r
2683 \r
2684                         notEqual : function( value, msg )\r
2685                         {\r
2686                                 return this.functions( function( val ){ return val != value; }, msg );\r
2687                         }\r
2688                 };\r
2689         })();\r
2690 })();\r
2691 \r
2692 // Extend the CKEDITOR.editor class with dialog specific functions.\r
2693 CKEDITOR.tools.extend( CKEDITOR.editor.prototype,\r
2694         /** @lends CKEDITOR.editor.prototype */\r
2695         {\r
2696                 /**\r
2697                  * Loads and opens a registered dialog.\r
2698                  * @param {String} dialogName The registered name of the dialog.\r
2699                  * @param {Function} callback The function to be invoked after dialog instance created.\r
2700                  * @see CKEDITOR.dialog.add\r
2701                  * @example\r
2702                  * CKEDITOR.instances.editor1.openDialog( 'smiley' );\r
2703                  * @returns {CKEDITOR.dialog} The dialog object corresponding to the dialog displayed. null if the dialog name is not registered.\r
2704                  */\r
2705                 openDialog : function( dialogName, callback )\r
2706                 {\r
2707                         var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ];\r
2708 \r
2709                         // If the dialogDefinition is already loaded, open it immediately.\r
2710                         if ( typeof dialogDefinitions == 'function' )\r
2711                         {\r
2712                                 var storedDialogs = this._.storedDialogs ||\r
2713                                         ( this._.storedDialogs = {} );\r
2714 \r
2715                                 var dialog = storedDialogs[ dialogName ] ||\r
2716                                         ( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );\r
2717 \r
2718                                 callback && callback.call( dialog, dialog );\r
2719                                 dialog.show();\r
2720 \r
2721                                 return dialog;\r
2722                         }\r
2723                         else if ( dialogDefinitions == 'failed' )\r
2724                                 throw new Error( '[CKEDITOR.dialog.openDialog] Dialog "' + dialogName + '" failed when loading definition.' );\r
2725 \r
2726                         // Not loaded? Load the .js file first.\r
2727                         var body = CKEDITOR.document.getBody(),\r
2728                                 cursor = body.$.style.cursor,\r
2729                                 me = this;\r
2730 \r
2731                         body.setStyle( 'cursor', 'wait' );\r
2732                         CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( dialogDefinitions ), function()\r
2733                                 {\r
2734                                         // In case of plugin error, mark it as loading failed.\r
2735                                         if ( typeof CKEDITOR.dialog._.dialogDefinitions[ dialogName ] != 'function' )\r
2736                                                         CKEDITOR.dialog._.dialogDefinitions[ dialogName ] =  'failed';\r
2737                                         me.openDialog( dialogName, callback );\r
2738                                         body.setStyle( 'cursor', cursor );\r
2739                                 } );\r
2740 \r
2741                         return null;\r
2742                 }\r
2743         });\r
2744 \r
2745 CKEDITOR.plugins.add( 'dialog',\r
2746         {\r
2747                 requires : [ 'dialogui' ]\r
2748         });\r
2749 \r
2750 // Dialog related configurations.\r
2751 \r
2752 /**\r
2753  * The color of the dialog background cover. It should be a valid CSS color\r
2754  * string.\r
2755  * @name CKEDITOR.config.dialog_backgroundCoverColor\r
2756  * @type String\r
2757  * @default 'white'\r
2758  * @example\r
2759  * config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)';\r
2760  */\r
2761 \r
2762 /**\r
2763  * The opacity of the dialog background cover. It should be a number within the\r
2764  * range [0.0, 1.0].\r
2765  * @name CKEDITOR.config.dialog_backgroundCoverOpacity\r
2766  * @type Number\r
2767  * @default 0.5\r
2768  * @example\r
2769  * config.dialog_backgroundCoverOpacity = 0.7;\r
2770  */\r
2771 \r
2772 /**\r
2773  * The distance of magnetic borders used in moving and resizing dialogs,\r
2774  * measured in pixels.\r
2775  * @name CKEDITOR.config.dialog_magnetDistance\r
2776  * @type Number\r
2777  * @default 20\r
2778  * @example\r
2779  * config.dialog_magnetDistance = 30;\r
2780  */\r
2781 \r
2782 /**\r
2783  * Fired when a dialog definition is about to be used to create a dialog into\r
2784  * an editor instance. This event makes it possible to customize the definition\r
2785  * before creating it.\r
2786  * <p>Note that this event is called only the first time a specific dialog is\r
2787  * opened. Successive openings will use the cached dialog, and this event will\r
2788  * not get fired.</p>\r
2789  * @name CKEDITOR#dialogDefinition\r
2790  * @event\r
2791  * @param {CKEDITOR.dialog.dialogDefinition} data The dialog defination that\r
2792  *              is being loaded.\r
2793  * @param {CKEDITOR.editor} editor The editor instance that will use the\r
2794  *              dialog.\r
2795  */\r