--- /dev/null
+/*\r
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.html or http://ckeditor.com/license\r
+*/\r
+\r
+/**\r
+ * @fileOverview The floating dialog plugin.\r
+ */\r
+\r
+/**\r
+ * No resize for this dialog.\r
+ * @constant\r
+ */\r
+CKEDITOR.DIALOG_RESIZE_NONE = 0;\r
+\r
+/**\r
+ * Only allow horizontal resizing for this dialog, disable vertical resizing.\r
+ * @constant\r
+ */\r
+CKEDITOR.DIALOG_RESIZE_WIDTH = 1;\r
+\r
+/**\r
+ * Only allow vertical resizing for this dialog, disable horizontal resizing.\r
+ * @constant\r
+ */\r
+CKEDITOR.DIALOG_RESIZE_HEIGHT = 2;\r
+\r
+/*\r
+ * Allow the dialog to be resized in both directions.\r
+ * @constant\r
+ */\r
+CKEDITOR.DIALOG_RESIZE_BOTH = 3;\r
+\r
+(function()\r
+{\r
+ var cssLength = CKEDITOR.tools.cssLength;\r
+ function isTabVisible( tabId )\r
+ {\r
+ return !!this._.tabs[ tabId ][ 0 ].$.offsetHeight;\r
+ }\r
+\r
+ function getPreviousVisibleTab()\r
+ {\r
+ var tabId = this._.currentTabId,\r
+ length = this._.tabIdList.length,\r
+ tabIndex = CKEDITOR.tools.indexOf( this._.tabIdList, tabId ) + length;\r
+\r
+ for ( var i = tabIndex - 1 ; i > tabIndex - length ; i-- )\r
+ {\r
+ if ( isTabVisible.call( this, this._.tabIdList[ i % length ] ) )\r
+ return this._.tabIdList[ i % length ];\r
+ }\r
+\r
+ return null;\r
+ }\r
+\r
+ function getNextVisibleTab()\r
+ {\r
+ var tabId = this._.currentTabId,\r
+ length = this._.tabIdList.length,\r
+ tabIndex = CKEDITOR.tools.indexOf( this._.tabIdList, tabId );\r
+\r
+ for ( var i = tabIndex + 1 ; i < tabIndex + length ; i++ )\r
+ {\r
+ if ( isTabVisible.call( this, this._.tabIdList[ i % length ] ) )\r
+ return this._.tabIdList[ i % length ];\r
+ }\r
+\r
+ return null;\r
+ }\r
+\r
+\r
+ function clearOrRecoverTextInputValue( container, isRecover )\r
+ {\r
+ var inputs = container.$.getElementsByTagName( 'input' );\r
+ for ( var i = 0, length = inputs.length; i < length ; i++ )\r
+ {\r
+ var item = new CKEDITOR.dom.element( inputs[ i ] );\r
+\r
+ if ( item.getAttribute( 'type' ).toLowerCase() == 'text' )\r
+ {\r
+ if ( isRecover )\r
+ {\r
+ item.setAttribute( 'value', item.getCustomData( 'fake_value' ) || '' );\r
+ item.removeCustomData( 'fake_value' );\r
+ }\r
+ else\r
+ {\r
+ item.setCustomData( 'fake_value', item.getAttribute( 'value' ) );\r
+ item.setAttribute( 'value', '' );\r
+ }\r
+ }\r
+ }\r
+ }\r
+\r
+ /**\r
+ * This is the base class for runtime dialog objects. An instance of this\r
+ * class represents a single named dialog for a single editor instance.\r
+ * @param {Object} editor The editor which created the dialog.\r
+ * @param {String} dialogName The dialog's registered name.\r
+ * @constructor\r
+ * @example\r
+ * var dialogObj = new CKEDITOR.dialog( editor, 'smiley' );\r
+ */\r
+ CKEDITOR.dialog = function( editor, dialogName )\r
+ {\r
+ // Load the dialog definition.\r
+ var definition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
+ defaultDefinition = CKEDITOR.tools.clone( defaultDialogDefinition ),\r
+ buttonsOrder = editor.config.dialog_buttonsOrder || 'OS',\r
+ dir = editor.lang.dir;\r
+\r
+ if ( ( buttonsOrder == 'OS' && CKEDITOR.env.mac ) || // The buttons in MacOS Apps are in reverse order (#4750)\r
+ ( buttonsOrder == 'rtl' && dir == 'ltr' ) ||\r
+ ( buttonsOrder == 'ltr' && dir == 'rtl' ) )\r
+ defaultDefinition.buttons.reverse();\r
+\r
+\r
+ // Completes the definition with the default values.\r
+ definition = CKEDITOR.tools.extend( definition( editor ), defaultDefinition );\r
+\r
+ // Clone a functionally independent copy for this dialog.\r
+ definition = CKEDITOR.tools.clone( definition );\r
+\r
+ // Create a complex definition object, extending it with the API\r
+ // functions.\r
+ definition = new definitionObject( this, definition );\r
+\r
+ var doc = CKEDITOR.document;\r
+\r
+ var themeBuilt = editor.theme.buildDialog( editor );\r
+\r
+ // Initialize some basic parameters.\r
+ this._ =\r
+ {\r
+ editor : editor,\r
+ element : themeBuilt.element,\r
+ name : dialogName,\r
+ contentSize : { width : 0, height : 0 },\r
+ size : { width : 0, height : 0 },\r
+ contents : {},\r
+ buttons : {},\r
+ accessKeyMap : {},\r
+\r
+ // Initialize the tab and page map.\r
+ tabs : {},\r
+ tabIdList : [],\r
+ currentTabId : null,\r
+ currentTabIndex : null,\r
+ pageCount : 0,\r
+ lastTab : null,\r
+ tabBarMode : false,\r
+\r
+ // Initialize the tab order array for input widgets.\r
+ focusList : [],\r
+ currentFocusIndex : 0,\r
+ hasFocus : false\r
+ };\r
+\r
+ this.parts = themeBuilt.parts;\r
+\r
+ CKEDITOR.tools.setTimeout( function()\r
+ {\r
+ editor.fire( 'ariaWidget', this.parts.contents );\r
+ },\r
+ 0, this );\r
+\r
+ // Set the startup styles for the dialog, avoiding it enlarging the\r
+ // page size on the dialog creation.\r
+ var startStyles = {\r
+ position : CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed',\r
+ top : 0,\r
+ visibility : 'hidden'\r
+ };\r
+\r
+ startStyles[ dir == 'rtl' ? 'right' : 'left' ] = 0;\r
+ this.parts.dialog.setStyles( startStyles );\r
+\r
+\r
+ // Call the CKEDITOR.event constructor to initialize this instance.\r
+ CKEDITOR.event.call( this );\r
+\r
+ // Fire the "dialogDefinition" event, making it possible to customize\r
+ // the dialog definition.\r
+ this.definition = definition = CKEDITOR.fire( 'dialogDefinition',\r
+ {\r
+ name : dialogName,\r
+ definition : definition\r
+ }\r
+ , editor ).definition;\r
+\r
+ var tabsToRemove = {};\r
+ // Cache tabs that should be removed.\r
+ if ( !( 'removeDialogTabs' in editor._ ) && editor.config.removeDialogTabs )\r
+ {\r
+ var removeContents = editor.config.removeDialogTabs.split( ';' );\r
+\r
+ for ( i = 0; i < removeContents.length; i++ )\r
+ {\r
+ var parts = removeContents[ i ].split( ':' );\r
+ if ( parts.length == 2 )\r
+ {\r
+ var removeDialogName = parts[ 0 ];\r
+ if ( !tabsToRemove[ removeDialogName ] )\r
+ tabsToRemove[ removeDialogName ] = [];\r
+ tabsToRemove[ removeDialogName ].push( parts[ 1 ] );\r
+ }\r
+ }\r
+ editor._.removeDialogTabs = tabsToRemove;\r
+ }\r
+\r
+ // Remove tabs of this dialog.\r
+ if ( editor._.removeDialogTabs && ( tabsToRemove = editor._.removeDialogTabs[ dialogName ] ) )\r
+ {\r
+ for ( i = 0; i < tabsToRemove.length; i++ )\r
+ definition.removeContents( tabsToRemove[ i ] );\r
+ }\r
+\r
+ // Initialize load, show, hide, ok and cancel events.\r
+ if ( definition.onLoad )\r
+ this.on( 'load', definition.onLoad );\r
+\r
+ if ( definition.onShow )\r
+ this.on( 'show', definition.onShow );\r
+\r
+ if ( definition.onHide )\r
+ this.on( 'hide', definition.onHide );\r
+\r
+ if ( definition.onOk )\r
+ {\r
+ this.on( 'ok', function( evt )\r
+ {\r
+ // Dialog confirm might probably introduce content changes (#5415).\r
+ editor.fire( 'saveSnapshot' );\r
+ setTimeout( function () { editor.fire( 'saveSnapshot' ); }, 0 );\r
+ if ( definition.onOk.call( this, evt ) === false )\r
+ evt.data.hide = false;\r
+ });\r
+ }\r
+\r
+ if ( definition.onCancel )\r
+ {\r
+ this.on( 'cancel', function( evt )\r
+ {\r
+ if ( definition.onCancel.call( this, evt ) === false )\r
+ evt.data.hide = false;\r
+ });\r
+ }\r
+\r
+ var me = this;\r
+\r
+ // Iterates over all items inside all content in the dialog, calling a\r
+ // function for each of them.\r
+ var iterContents = function( func )\r
+ {\r
+ var contents = me._.contents,\r
+ stop = false;\r
+\r
+ for ( var i in contents )\r
+ {\r
+ for ( var j in contents[i] )\r
+ {\r
+ stop = func.call( this, contents[i][j] );\r
+ if ( stop )\r
+ return;\r
+ }\r
+ }\r
+ };\r
+\r
+ this.on( 'ok', function( evt )\r
+ {\r
+ iterContents( function( item )\r
+ {\r
+ if ( item.validate )\r
+ {\r
+ var isValid = item.validate( this );\r
+\r
+ if ( typeof isValid == 'string' )\r
+ {\r
+ alert( isValid );\r
+ isValid = false;\r
+ }\r
+\r
+ if ( isValid === false )\r
+ {\r
+ if ( item.select )\r
+ item.select();\r
+ else\r
+ item.focus();\r
+\r
+ evt.data.hide = false;\r
+ evt.stop();\r
+ return true;\r
+ }\r
+ }\r
+ });\r
+ }, this, null, 0 );\r
+\r
+ this.on( 'cancel', function( evt )\r
+ {\r
+ iterContents( function( item )\r
+ {\r
+ if ( item.isChanged() )\r
+ {\r
+ if ( !confirm( editor.lang.common.confirmCancel ) )\r
+ evt.data.hide = false;\r
+ return true;\r
+ }\r
+ });\r
+ }, this, null, 0 );\r
+\r
+ this.parts.close.on( 'click', function( evt )\r
+ {\r
+ if ( this.fire( 'cancel', { hide : true } ).hide !== false )\r
+ this.hide();\r
+ evt.data.preventDefault();\r
+ }, this );\r
+\r
+ // Sort focus list according to tab order definitions.\r
+ function setupFocus()\r
+ {\r
+ var focusList = me._.focusList;\r
+ focusList.sort( function( a, b )\r
+ {\r
+ // Mimics browser tab order logics;\r
+ if ( a.tabIndex != b.tabIndex )\r
+ return b.tabIndex - a.tabIndex;\r
+ // Sort is not stable in some browsers,\r
+ // fall-back the comparator to 'focusIndex';\r
+ else\r
+ return a.focusIndex - b.focusIndex;\r
+ });\r
+\r
+ var size = focusList.length;\r
+ for ( var i = 0; i < size; i++ )\r
+ focusList[ i ].focusIndex = i;\r
+ }\r
+\r
+ function changeFocus( forward )\r
+ {\r
+ var focusList = me._.focusList,\r
+ offset = forward ? 1 : -1;\r
+ if ( focusList.length < 1 )\r
+ return;\r
+\r
+ var current = me._.currentFocusIndex;\r
+\r
+ // Trigger the 'blur' event of any input element before anything,\r
+ // since certain UI updates may depend on it.\r
+ try\r
+ {\r
+ focusList[ current ].getInputElement().$.blur();\r
+ }\r
+ catch( e ){}\r
+\r
+ var startIndex = ( current + offset + focusList.length ) % focusList.length,\r
+ currentIndex = startIndex;\r
+ while ( !focusList[ currentIndex ].isFocusable() )\r
+ {\r
+ currentIndex = ( currentIndex + offset + focusList.length ) % focusList.length;\r
+ if ( currentIndex == startIndex )\r
+ break;\r
+ }\r
+ focusList[ currentIndex ].focus();\r
+\r
+ // Select whole field content.\r
+ if ( focusList[ currentIndex ].type == 'text' )\r
+ focusList[ currentIndex ].select();\r
+ }\r
+\r
+ this.changeFocus = changeFocus;\r
+\r
+ var processed;\r
+\r
+ function focusKeydownHandler( evt )\r
+ {\r
+ // If I'm not the top dialog, ignore.\r
+ if ( me != CKEDITOR.dialog._.currentTop )\r
+ return;\r
+\r
+ var keystroke = evt.data.getKeystroke(),\r
+ rtl = editor.lang.dir == 'rtl';\r
+\r
+ processed = 0;\r
+ if ( keystroke == 9 || keystroke == CKEDITOR.SHIFT + 9 )\r
+ {\r
+ var shiftPressed = ( keystroke == CKEDITOR.SHIFT + 9 );\r
+\r
+ // Handling Tab and Shift-Tab.\r
+ if ( me._.tabBarMode )\r
+ {\r
+ // Change tabs.\r
+ var nextId = shiftPressed ? getPreviousVisibleTab.call( me ) : getNextVisibleTab.call( me );\r
+ me.selectPage( nextId );\r
+ me._.tabs[ nextId ][ 0 ].focus();\r
+ }\r
+ else\r
+ {\r
+ // Change the focus of inputs.\r
+ changeFocus( !shiftPressed );\r
+ }\r
+\r
+ processed = 1;\r
+ }\r
+ else if ( keystroke == CKEDITOR.ALT + 121 && !me._.tabBarMode && me.getPageCount() > 1 )\r
+ {\r
+ // Alt-F10 puts focus into the current tab item in the tab bar.\r
+ me._.tabBarMode = true;\r
+ me._.tabs[ me._.currentTabId ][ 0 ].focus();\r
+ processed = 1;\r
+ }\r
+ else if ( ( keystroke == 37 || keystroke == 39 ) && me._.tabBarMode )\r
+ {\r
+ // Arrow keys - used for changing tabs.\r
+ nextId = ( keystroke == ( rtl ? 39 : 37 ) ? getPreviousVisibleTab.call( me ) : getNextVisibleTab.call( me ) );\r
+ me.selectPage( nextId );\r
+ me._.tabs[ nextId ][ 0 ].focus();\r
+ processed = 1;\r
+ }\r
+ else if ( ( keystroke == 13 || keystroke == 32 ) && me._.tabBarMode )\r
+ {\r
+ this.selectPage( this._.currentTabId );\r
+ this._.tabBarMode = false;\r
+ this._.currentFocusIndex = -1;\r
+ changeFocus( true );\r
+ processed = 1;\r
+ }\r
+\r
+ if ( processed )\r
+ {\r
+ evt.stop();\r
+ evt.data.preventDefault();\r
+ }\r
+ }\r
+\r
+ function focusKeyPressHandler( evt )\r
+ {\r
+ processed && evt.data.preventDefault();\r
+ }\r
+\r
+ var dialogElement = this._.element;\r
+ // Add the dialog keyboard handlers.\r
+ this.on( 'show', function()\r
+ {\r
+ dialogElement.on( 'keydown', focusKeydownHandler, this, null, 0 );\r
+ // Some browsers instead, don't cancel key events in the keydown, but in the\r
+ // keypress. So we must do a longer trip in those cases. (#4531)\r
+ if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\r
+ dialogElement.on( 'keypress', focusKeyPressHandler, this );\r
+\r
+ } );\r
+ this.on( 'hide', function()\r
+ {\r
+ dialogElement.removeListener( 'keydown', focusKeydownHandler );\r
+ if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\r
+ dialogElement.removeListener( 'keypress', focusKeyPressHandler );\r
+ } );\r
+ this.on( 'iframeAdded', function( evt )\r
+ {\r
+ var doc = new CKEDITOR.dom.document( evt.data.iframe.$.contentWindow.document );\r
+ doc.on( 'keydown', focusKeydownHandler, this, null, 0 );\r
+ } );\r
+\r
+ // Auto-focus logic in dialog.\r
+ this.on( 'show', function()\r
+ {\r
+ // Setup tabIndex on showing the dialog instead of on loading\r
+ // to allow dynamic tab order happen in dialog definition.\r
+ setupFocus();\r
+\r
+ if ( editor.config.dialog_startupFocusTab\r
+ && me._.pageCount > 1 )\r
+ {\r
+ me._.tabBarMode = true;\r
+ me._.tabs[ me._.currentTabId ][ 0 ].focus();\r
+ }\r
+ else if ( !this._.hasFocus )\r
+ {\r
+ this._.currentFocusIndex = -1;\r
+\r
+ // Decide where to put the initial focus.\r
+ if ( definition.onFocus )\r
+ {\r
+ var initialFocus = definition.onFocus.call( this );\r
+ // Focus the field that the user specified.\r
+ initialFocus && initialFocus.focus();\r
+ }\r
+ // Focus the first field in layout order.\r
+ else\r
+ changeFocus( true );\r
+\r
+ /*\r
+ * IE BUG: If the initial focus went into a non-text element (e.g. button),\r
+ * then IE would still leave the caret inside the editing area.\r
+ */\r
+ if ( this._.editor.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
+ {\r
+ var $selection = editor.document.$.selection,\r
+ $range = $selection.createRange();\r
+\r
+ if ( $range )\r
+ {\r
+ if ( $range.parentElement && $range.parentElement().ownerDocument == editor.document.$\r
+ || $range.item && $range.item( 0 ).ownerDocument == editor.document.$ )\r
+ {\r
+ var $myRange = document.body.createTextRange();\r
+ $myRange.moveToElementText( this.getElement().getFirst().$ );\r
+ $myRange.collapse( true );\r
+ $myRange.select();\r
+ }\r
+ }\r
+ }\r
+ }\r
+ }, this, null, 0xffffffff );\r
+\r
+ // IE6 BUG: Text fields and text areas are only half-rendered the first time the dialog appears in IE6 (#2661).\r
+ // This is still needed after [2708] and [2709] because text fields in hidden TR tags are still broken.\r
+ if ( CKEDITOR.env.ie6Compat )\r
+ {\r
+ this.on( 'load', function( evt )\r
+ {\r
+ var outer = this.getElement(),\r
+ inner = outer.getFirst();\r
+ inner.remove();\r
+ inner.appendTo( outer );\r
+ }, this );\r
+ }\r
+\r
+ initDragAndDrop( this );\r
+ initResizeHandles( this );\r
+\r
+ // Insert the title.\r
+ ( new CKEDITOR.dom.text( definition.title, CKEDITOR.document ) ).appendTo( this.parts.title );\r
+\r
+ // Insert the tabs and contents.\r
+ for ( var i = 0 ; i < definition.contents.length ; i++ )\r
+ {\r
+ var page = definition.contents[i];\r
+ page && this.addPage( page );\r
+ }\r
+\r
+ this.parts[ 'tabs' ].on( 'click', function( evt )\r
+ {\r
+ var target = evt.data.getTarget();\r
+ // If we aren't inside a tab, bail out.\r
+ if ( target.hasClass( 'cke_dialog_tab' ) )\r
+ {\r
+ // Get the ID of the tab, without the 'cke_' prefix and the unique number suffix.\r
+ var id = target.$.id;\r
+ this.selectPage( id.substring( 4, id.lastIndexOf( '_' ) ) );\r
+\r
+ if ( this._.tabBarMode )\r
+ {\r
+ this._.tabBarMode = false;\r
+ this._.currentFocusIndex = -1;\r
+ changeFocus( true );\r
+ }\r
+ evt.data.preventDefault();\r
+ }\r
+ }, this );\r
+\r
+ // Insert buttons.\r
+ var buttonsHtml = [],\r
+ buttons = CKEDITOR.dialog._.uiElementBuilders.hbox.build( this,\r
+ {\r
+ type : 'hbox',\r
+ className : 'cke_dialog_footer_buttons',\r
+ widths : [],\r
+ children : definition.buttons\r
+ }, buttonsHtml ).getChild();\r
+ this.parts.footer.setHtml( buttonsHtml.join( '' ) );\r
+\r
+ for ( i = 0 ; i < buttons.length ; i++ )\r
+ this._.buttons[ buttons[i].id ] = buttons[i];\r
+ };\r
+\r
+ // Focusable interface. Use it via dialog.addFocusable.\r
+ function Focusable( dialog, element, index )\r
+ {\r
+ this.element = element;\r
+ this.focusIndex = index;\r
+ // TODO: support tabIndex for focusables.\r
+ this.tabIndex = 0;\r
+ this.isFocusable = function()\r
+ {\r
+ return !element.getAttribute( 'disabled' ) && element.isVisible();\r
+ };\r
+ this.focus = function()\r
+ {\r
+ dialog._.currentFocusIndex = this.focusIndex;\r
+ this.element.focus();\r
+ };\r
+ // Bind events\r
+ element.on( 'keydown', function( e )\r
+ {\r
+ if ( e.data.getKeystroke() in { 32:1, 13:1 } )\r
+ this.fire( 'click' );\r
+ } );\r
+ element.on( 'focus', function()\r
+ {\r
+ this.fire( 'mouseover' );\r
+ } );\r
+ element.on( 'blur', function()\r
+ {\r
+ this.fire( 'mouseout' );\r
+ } );\r
+ }\r
+\r
+ CKEDITOR.dialog.prototype =\r
+ {\r
+ destroy : function()\r
+ {\r
+ this.hide();\r
+ this._.element.remove();\r
+ },\r
+\r
+ /**\r
+ * Resizes the dialog.\r
+ * @param {Number} width The width of the dialog in pixels.\r
+ * @param {Number} height The height of the dialog in pixels.\r
+ * @function\r
+ * @example\r
+ * dialogObj.resize( 800, 640 );\r
+ */\r
+ resize : (function()\r
+ {\r
+ return function( width, height )\r
+ {\r
+ if ( this._.contentSize && this._.contentSize.width == width && this._.contentSize.height == height )\r
+ return;\r
+\r
+ CKEDITOR.dialog.fire( 'resize',\r
+ {\r
+ dialog : this,\r
+ skin : this._.editor.skinName,\r
+ width : width,\r
+ height : height\r
+ }, this._.editor );\r
+\r
+ this.fire( 'resize',\r
+ {\r
+ skin : this._.editor.skinName,\r
+ width : width,\r
+ height : height\r
+ }, this._.editor );\r
+\r
+ // Update dialog position when dimension get changed in RTL.\r
+ if ( this._.editor.lang.dir == 'rtl' && this._.position )\r
+ this._.position.x = CKEDITOR.document.getWindow().getViewPaneSize().width -\r
+ this._.contentSize.width - parseInt( this._.element.getFirst().getStyle( 'right' ), 10 );\r
+\r
+ this._.contentSize = { width : width, height : height };\r
+ };\r
+ })(),\r
+\r
+ /**\r
+ * Gets the current size of the dialog in pixels.\r
+ * @returns {Object} An object with "width" and "height" properties.\r
+ * @example\r
+ * var width = dialogObj.getSize().width;\r
+ */\r
+ getSize : function()\r
+ {\r
+ var element = this._.element.getFirst();\r
+ return { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0};\r
+ },\r
+\r
+ /**\r
+ * Moves the dialog to an (x, y) coordinate relative to the window.\r
+ * @function\r
+ * @param {Number} x The target x-coordinate.\r
+ * @param {Number} y The target y-coordinate.\r
+ * @param {Boolean} save Flag indicate whether the dialog position should be remembered on next open up.\r
+ * @example\r
+ * dialogObj.move( 10, 40 );\r
+ */\r
+ move : (function()\r
+ {\r
+ var isFixed;\r
+ return function( x, y, save )\r
+ {\r
+ // The dialog may be fixed positioned or absolute positioned. Ask the\r
+ // browser what is the current situation first.\r
+ var element = this._.element.getFirst(),\r
+ rtl = this._.editor.lang.dir == 'rtl';\r
+\r
+ if ( isFixed === undefined )\r
+ isFixed = element.getComputedStyle( 'position' ) == 'fixed';\r
+\r
+ if ( isFixed && this._.position && this._.position.x == x && this._.position.y == y )\r
+ return;\r
+\r
+ // Save the current position.\r
+ this._.position = { x : x, y : y };\r
+\r
+ // If not fixed positioned, add scroll position to the coordinates.\r
+ if ( !isFixed )\r
+ {\r
+ var scrollPosition = CKEDITOR.document.getWindow().getScrollPosition();\r
+ x += scrollPosition.x;\r
+ y += scrollPosition.y;\r
+ }\r
+\r
+ // Translate coordinate for RTL.\r
+ if ( rtl )\r
+ {\r
+ var dialogSize = this.getSize(),\r
+ viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();\r
+ x = viewPaneSize.width - dialogSize.width - x;\r
+ }\r
+\r
+ var styles = { 'top' : ( y > 0 ? y : 0 ) + 'px' };\r
+ styles[ rtl ? 'right' : 'left' ] = ( x > 0 ? x : 0 ) + 'px';\r
+\r
+ element.setStyles( styles );\r
+\r
+ save && ( this._.moved = 1 );\r
+ };\r
+ })(),\r
+\r
+ /**\r
+ * Gets the dialog's position in the window.\r
+ * @returns {Object} An object with "x" and "y" properties.\r
+ * @example\r
+ * var dialogX = dialogObj.getPosition().x;\r
+ */\r
+ getPosition : function(){ return CKEDITOR.tools.extend( {}, this._.position ); },\r
+\r
+ /**\r
+ * Shows the dialog box.\r
+ * @example\r
+ * dialogObj.show();\r
+ */\r
+ show : function()\r
+ {\r
+ // Insert the dialog's element to the root document.\r
+ var element = this._.element;\r
+ var definition = this.definition;\r
+ if ( !( element.getParent() && element.getParent().equals( CKEDITOR.document.getBody() ) ) )\r
+ element.appendTo( CKEDITOR.document.getBody() );\r
+ else\r
+ element.setStyle( 'display', 'block' );\r
+\r
+ // FIREFOX BUG: Fix vanishing caret for Firefox 2 or Gecko 1.8.\r
+ if ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 )\r
+ {\r
+ var dialogElement = this.parts.dialog;\r
+ dialogElement.setStyle( 'position', 'absolute' );\r
+ setTimeout( function()\r
+ {\r
+ dialogElement.setStyle( 'position', 'fixed' );\r
+ }, 0 );\r
+ }\r
+\r
+\r
+ // First, set the dialog to an appropriate size.\r
+ this.resize( this._.contentSize && this._.contentSize.width || definition.width || definition.minWidth,\r
+ this._.contentSize && this._.contentSize.height || definition.height || definition.minHeight );\r
+\r
+ // Reset all inputs back to their default value.\r
+ this.reset();\r
+\r
+ // Select the first tab by default.\r
+ this.selectPage( this.definition.contents[0].id );\r
+\r
+ // Set z-index.\r
+ if ( CKEDITOR.dialog._.currentZIndex === null )\r
+ CKEDITOR.dialog._.currentZIndex = this._.editor.config.baseFloatZIndex;\r
+ this._.element.getFirst().setStyle( 'z-index', CKEDITOR.dialog._.currentZIndex += 10 );\r
+\r
+ // Maintain the dialog ordering and dialog cover.\r
+ // Also register key handlers if first dialog.\r
+ if ( CKEDITOR.dialog._.currentTop === null )\r
+ {\r
+ CKEDITOR.dialog._.currentTop = this;\r
+ this._.parentDialog = null;\r
+ showCover( this._.editor );\r
+\r
+ element.on( 'keydown', accessKeyDownHandler );\r
+ element.on( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );\r
+\r
+ // Prevent some keys from bubbling up. (#4269)\r
+ for ( var event in { keyup :1, keydown :1, keypress :1 } )\r
+ element.on( event, preventKeyBubbling );\r
+ }\r
+ else\r
+ {\r
+ this._.parentDialog = CKEDITOR.dialog._.currentTop;\r
+ var parentElement = this._.parentDialog.getElement().getFirst();\r
+ parentElement.$.style.zIndex -= Math.floor( this._.editor.config.baseFloatZIndex / 2 );\r
+ CKEDITOR.dialog._.currentTop = this;\r
+ }\r
+\r
+ // Register the Esc hotkeys.\r
+ registerAccessKey( this, this, '\x1b', null, function()\r
+ {\r
+ this.getButton( 'cancel' ) && this.getButton( 'cancel' ).click();\r
+ } );\r
+\r
+ // Reset the hasFocus state.\r
+ this._.hasFocus = false;\r
+\r
+ CKEDITOR.tools.setTimeout( function()\r
+ {\r
+ this.layout();\r
+ this.parts.dialog.setStyle( 'visibility', '' );\r
+\r
+ // Execute onLoad for the first show.\r
+ this.fireOnce( 'load', {} );\r
+ CKEDITOR.ui.fire( 'ready', this );\r
+\r
+ this.fire( 'show', {} );\r
+ this._.editor.fire( 'dialogShow', this );\r
+\r
+ // Save the initial values of the dialog.\r
+ this.foreach( function( contentObj ) { contentObj.setInitValue && contentObj.setInitValue(); } );\r
+\r
+ },\r
+ 100, this );\r
+ },\r
+\r
+ /**\r
+ * Rearrange the dialog to its previous position or the middle of the window.\r
+ * @since 3.5\r
+ */\r
+ layout : function()\r
+ {\r
+ var viewSize = CKEDITOR.document.getWindow().getViewPaneSize(),\r
+ dialogSize = this.getSize();\r
+\r
+ this.move( this._.moved ? this._.position.x : ( viewSize.width - dialogSize.width ) / 2,\r
+ this._.moved ? this._.position.y : ( viewSize.height - dialogSize.height ) / 2 );\r
+ },\r
+\r
+ /**\r
+ * Executes a function for each UI element.\r
+ * @param {Function} fn Function to execute for each UI element.\r
+ * @returns {CKEDITOR.dialog} The current dialog object.\r
+ */\r
+ foreach : function( fn )\r
+ {\r
+ for ( var i in this._.contents )\r
+ {\r
+ for ( var j in this._.contents[i] )\r
+ fn( this._.contents[i][j] );\r
+ }\r
+ return this;\r
+ },\r
+\r
+ /**\r
+ * Resets all input values in the dialog.\r
+ * @example\r
+ * dialogObj.reset();\r
+ * @returns {CKEDITOR.dialog} The current dialog object.\r
+ */\r
+ reset : (function()\r
+ {\r
+ var fn = function( widget ){ if ( widget.reset ) widget.reset( 1 ); };\r
+ return function(){ this.foreach( fn ); return this; };\r
+ })(),\r
+\r
+ setupContent : function()\r
+ {\r
+ var args = arguments;\r
+ this.foreach( function( widget )\r
+ {\r
+ if ( widget.setup )\r
+ widget.setup.apply( widget, args );\r
+ });\r
+ },\r
+\r
+ commitContent : function()\r
+ {\r
+ var args = arguments;\r
+ this.foreach( function( widget )\r
+ {\r
+ if ( widget.commit )\r
+ widget.commit.apply( widget, args );\r
+ });\r
+ },\r
+\r
+ /**\r
+ * Hides the dialog box.\r
+ * @example\r
+ * dialogObj.hide();\r
+ */\r
+ hide : function()\r
+ {\r
+ if ( !this.parts.dialog.isVisible() )\r
+ return;\r
+\r
+ this.fire( 'hide', {} );\r
+ this._.editor.fire( 'dialogHide', this );\r
+ var element = this._.element;\r
+ element.setStyle( 'display', 'none' );\r
+ this.parts.dialog.setStyle( 'visibility', 'hidden' );\r
+ // Unregister all access keys associated with this dialog.\r
+ unregisterAccessKey( this );\r
+\r
+ // Close any child(top) dialogs first.\r
+ while( CKEDITOR.dialog._.currentTop != this )\r
+ CKEDITOR.dialog._.currentTop.hide();\r
+\r
+ // Maintain dialog ordering and remove cover if needed.\r
+ if ( !this._.parentDialog )\r
+ hideCover();\r
+ else\r
+ {\r
+ var parentElement = this._.parentDialog.getElement().getFirst();\r
+ parentElement.setStyle( 'z-index', parseInt( parentElement.$.style.zIndex, 10 ) + Math.floor( this._.editor.config.baseFloatZIndex / 2 ) );\r
+ }\r
+ CKEDITOR.dialog._.currentTop = this._.parentDialog;\r
+\r
+ // Deduct or clear the z-index.\r
+ if ( !this._.parentDialog )\r
+ {\r
+ CKEDITOR.dialog._.currentZIndex = null;\r
+\r
+ // Remove access key handlers.\r
+ element.removeListener( 'keydown', accessKeyDownHandler );\r
+ element.removeListener( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );\r
+\r
+ // Remove bubbling-prevention handler. (#4269)\r
+ for ( var event in { keyup :1, keydown :1, keypress :1 } )\r
+ element.removeListener( event, preventKeyBubbling );\r
+\r
+ var editor = this._.editor;\r
+ editor.focus();\r
+\r
+ if ( editor.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
+ {\r
+ var selection = editor.getSelection();\r
+ selection && selection.unlock( true );\r
+ }\r
+ }\r
+ else\r
+ CKEDITOR.dialog._.currentZIndex -= 10;\r
+\r
+ delete this._.parentDialog;\r
+ // Reset the initial values of the dialog.\r
+ this.foreach( function( contentObj ) { contentObj.resetInitValue && contentObj.resetInitValue(); } );\r
+ },\r
+\r
+ /**\r
+ * Adds a tabbed page into the dialog.\r
+ * @param {Object} contents Content definition.\r
+ * @example\r
+ */\r
+ addPage : function( contents )\r
+ {\r
+ var pageHtml = [],\r
+ titleHtml = contents.label ? ' title="' + CKEDITOR.tools.htmlEncode( contents.label ) + '"' : '',\r
+ elements = contents.elements,\r
+ vbox = CKEDITOR.dialog._.uiElementBuilders.vbox.build( this,\r
+ {\r
+ type : 'vbox',\r
+ className : 'cke_dialog_page_contents',\r
+ children : contents.elements,\r
+ expand : !!contents.expand,\r
+ padding : contents.padding,\r
+ style : contents.style || 'width: 100%;height:100%'\r
+ }, pageHtml );\r
+\r
+ // Create the HTML for the tab and the content block.\r
+ var page = CKEDITOR.dom.element.createFromHtml( pageHtml.join( '' ) );\r
+ page.setAttribute( 'role', 'tabpanel' );\r
+\r
+ var env = CKEDITOR.env;\r
+ var tabId = 'cke_' + contents.id + '_' + CKEDITOR.tools.getNextNumber(),\r
+ tab = CKEDITOR.dom.element.createFromHtml( [\r
+ '<a class="cke_dialog_tab"',\r
+ ( this._.pageCount > 0 ? ' cke_last' : 'cke_first' ),\r
+ titleHtml,\r
+ ( !!contents.hidden ? ' style="display:none"' : '' ),\r
+ ' id="', tabId, '"',\r
+ env.gecko && env.version >= 10900 && !env.hc ? '' : ' href="javascript:void(0)"',\r
+ ' tabIndex="-1"',\r
+ ' hidefocus="true"',\r
+ ' role="tab">',\r
+ contents.label,\r
+ '</a>'\r
+ ].join( '' ) );\r
+\r
+ page.setAttribute( 'aria-labelledby', tabId );\r
+\r
+ // Take records for the tabs and elements created.\r
+ this._.tabs[ contents.id ] = [ tab, page ];\r
+ this._.tabIdList.push( contents.id );\r
+ !contents.hidden && this._.pageCount++;\r
+ this._.lastTab = tab;\r
+ this.updateStyle();\r
+\r
+ var contentMap = this._.contents[ contents.id ] = {},\r
+ cursor,\r
+ children = vbox.getChild();\r
+\r
+ while ( ( cursor = children.shift() ) )\r
+ {\r
+ contentMap[ cursor.id ] = cursor;\r
+ if ( typeof( cursor.getChild ) == 'function' )\r
+ children.push.apply( children, cursor.getChild() );\r
+ }\r
+\r
+ // Attach the DOM nodes.\r
+\r
+ page.setAttribute( 'name', contents.id );\r
+ page.appendTo( this.parts.contents );\r
+\r
+ tab.unselectable();\r
+ this.parts.tabs.append( tab );\r
+\r
+ // Add access key handlers if access key is defined.\r
+ if ( contents.accessKey )\r
+ {\r
+ registerAccessKey( this, this, 'CTRL+' + contents.accessKey,\r
+ tabAccessKeyDown, tabAccessKeyUp );\r
+ this._.accessKeyMap[ 'CTRL+' + contents.accessKey ] = contents.id;\r
+ }\r
+ },\r
+\r
+ /**\r
+ * Activates a tab page in the dialog by its id.\r
+ * @param {String} id The id of the dialog tab to be activated.\r
+ * @example\r
+ * dialogObj.selectPage( 'tab_1' );\r
+ */\r
+ selectPage : function( id )\r
+ {\r
+ if ( this._.currentTabId == id )\r
+ return;\r
+\r
+ // Returning true means that the event has been canceled\r
+ if ( this.fire( 'selectPage', { page : id, currentPage : this._.currentTabId } ) === true )\r
+ return;\r
+\r
+ // Hide the non-selected tabs and pages.\r
+ for ( var i in this._.tabs )\r
+ {\r
+ var tab = this._.tabs[i][0],\r
+ page = this._.tabs[i][1];\r
+ if ( i != id )\r
+ {\r
+ tab.removeClass( 'cke_dialog_tab_selected' );\r
+ page.hide();\r
+ }\r
+ page.setAttribute( 'aria-hidden', i != id );\r
+ }\r
+\r
+ var selected = this._.tabs[ id ];\r
+ selected[ 0 ].addClass( 'cke_dialog_tab_selected' );\r
+\r
+ // [IE] an invisible input[type='text'] will enlarge it's width\r
+ // if it's value is long when it shows, so we clear it's value\r
+ // before it shows and then recover it (#5649)\r
+ if ( CKEDITOR.env.ie6Compat || CKEDITOR.env.ie7Compat )\r
+ {\r
+ clearOrRecoverTextInputValue( selected[ 1 ] );\r
+ selected[ 1 ].show();\r
+ setTimeout( function()\r
+ {\r
+ clearOrRecoverTextInputValue( selected[ 1 ], 1 );\r
+ }, 0 );\r
+ }\r
+ else\r
+ selected[ 1 ].show();\r
+\r
+ this._.currentTabId = id;\r
+ this._.currentTabIndex = CKEDITOR.tools.indexOf( this._.tabIdList, id );\r
+ },\r
+\r
+ // Dialog state-specific style updates.\r
+ updateStyle : function()\r
+ {\r
+ // If only a single page shown, a different style is used in the central pane.\r
+ this.parts.dialog[ ( this._.pageCount === 1 ? 'add' : 'remove' ) + 'Class' ]( 'cke_single_page' );\r
+ },\r
+\r
+ /**\r
+ * Hides a page's tab away from the dialog.\r
+ * @param {String} id The page's Id.\r
+ * @example\r
+ * dialog.hidePage( 'tab_3' );\r
+ */\r
+ hidePage : function( id )\r
+ {\r
+ var tab = this._.tabs[id] && this._.tabs[id][0];\r
+ if ( !tab || this._.pageCount == 1 || !tab.isVisible() )\r
+ return;\r
+ // Switch to other tab first when we're hiding the active tab.\r
+ else if ( id == this._.currentTabId )\r
+ this.selectPage( getPreviousVisibleTab.call( this ) );\r
+\r
+ tab.hide();\r
+ this._.pageCount--;\r
+ this.updateStyle();\r
+ },\r
+\r
+ /**\r
+ * Unhides a page's tab.\r
+ * @param {String} id The page's Id.\r
+ * @example\r
+ * dialog.showPage( 'tab_2' );\r
+ */\r
+ showPage : function( id )\r
+ {\r
+ var tab = this._.tabs[id] && this._.tabs[id][0];\r
+ if ( !tab )\r
+ return;\r
+ tab.show();\r
+ this._.pageCount++;\r
+ this.updateStyle();\r
+ },\r
+\r
+ /**\r
+ * Gets the root DOM element of the dialog.\r
+ * @returns {CKEDITOR.dom.element} The <span> element containing this dialog.\r
+ * @example\r
+ * var dialogElement = dialogObj.getElement().getFirst();\r
+ * dialogElement.setStyle( 'padding', '5px' );\r
+ */\r
+ getElement : function()\r
+ {\r
+ return this._.element;\r
+ },\r
+\r
+ /**\r
+ * Gets the name of the dialog.\r
+ * @returns {String} The name of this dialog.\r
+ * @example\r
+ * var dialogName = dialogObj.getName();\r
+ */\r
+ getName : function()\r
+ {\r
+ return this._.name;\r
+ },\r
+\r
+ /**\r
+ * Gets a dialog UI element object from a dialog page.\r
+ * @param {String} pageId id of dialog page.\r
+ * @param {String} elementId id of UI element.\r
+ * @example\r
+ * @returns {CKEDITOR.ui.dialog.uiElement} The dialog UI element.\r
+ */\r
+ getContentElement : function( pageId, elementId )\r
+ {\r
+ var page = this._.contents[ pageId ];\r
+ return page && page[ elementId ];\r
+ },\r
+\r
+ /**\r
+ * Gets the value of a dialog UI element.\r
+ * @param {String} pageId id of dialog page.\r
+ * @param {String} elementId id of UI element.\r
+ * @example\r
+ * @returns {Object} The value of the UI element.\r
+ */\r
+ getValueOf : function( pageId, elementId )\r
+ {\r
+ return this.getContentElement( pageId, elementId ).getValue();\r
+ },\r
+\r
+ /**\r
+ * Sets the value of a dialog UI element.\r
+ * @param {String} pageId id of the dialog page.\r
+ * @param {String} elementId id of the UI element.\r
+ * @param {Object} value The new value of the UI element.\r
+ * @example\r
+ */\r
+ setValueOf : function( pageId, elementId, value )\r
+ {\r
+ return this.getContentElement( pageId, elementId ).setValue( value );\r
+ },\r
+\r
+ /**\r
+ * Gets the UI element of a button in the dialog's button row.\r
+ * @param {String} id The id of the button.\r
+ * @example\r
+ * @returns {CKEDITOR.ui.dialog.button} The button object.\r
+ */\r
+ getButton : function( id )\r
+ {\r
+ return this._.buttons[ id ];\r
+ },\r
+\r
+ /**\r
+ * Simulates a click to a dialog button in the dialog's button row.\r
+ * @param {String} id The id of the button.\r
+ * @example\r
+ * @returns The return value of the dialog's "click" event.\r
+ */\r
+ click : function( id )\r
+ {\r
+ return this._.buttons[ id ].click();\r
+ },\r
+\r
+ /**\r
+ * Disables a dialog button.\r
+ * @param {String} id The id of the button.\r
+ * @example\r
+ */\r
+ disableButton : function( id )\r
+ {\r
+ return this._.buttons[ id ].disable();\r
+ },\r
+\r
+ /**\r
+ * Enables a dialog button.\r
+ * @param {String} id The id of the button.\r
+ * @example\r
+ */\r
+ enableButton : function( id )\r
+ {\r
+ return this._.buttons[ id ].enable();\r
+ },\r
+\r
+ /**\r
+ * Gets the number of pages in the dialog.\r
+ * @returns {Number} Page count.\r
+ */\r
+ getPageCount : function()\r
+ {\r
+ return this._.pageCount;\r
+ },\r
+\r
+ /**\r
+ * Gets the editor instance which opened this dialog.\r
+ * @returns {CKEDITOR.editor} Parent editor instances.\r
+ */\r
+ getParentEditor : function()\r
+ {\r
+ return this._.editor;\r
+ },\r
+\r
+ /**\r
+ * Gets the element that was selected when opening the dialog, if any.\r
+ * @returns {CKEDITOR.dom.element} The element that was selected, or null.\r
+ */\r
+ getSelectedElement : function()\r
+ {\r
+ return this.getParentEditor().getSelection().getSelectedElement();\r
+ },\r
+\r
+ /**\r
+ * Adds element to dialog's focusable list.\r
+ *\r
+ * @param {CKEDITOR.dom.element} element\r
+ * @param {Number} [index]\r
+ */\r
+ addFocusable: function( element, index ) {\r
+ if ( typeof index == 'undefined' )\r
+ {\r
+ index = this._.focusList.length;\r
+ this._.focusList.push( new Focusable( this, element, index ) );\r
+ }\r
+ else\r
+ {\r
+ this._.focusList.splice( index, 0, new Focusable( this, element, index ) );\r
+ for ( var i = index + 1 ; i < this._.focusList.length ; i++ )\r
+ this._.focusList[ i ].focusIndex++;\r
+ }\r
+ }\r
+ };\r
+\r
+ CKEDITOR.tools.extend( CKEDITOR.dialog,\r
+ /**\r
+ * @lends CKEDITOR.dialog\r
+ */\r
+ {\r
+ /**\r
+ * Registers a dialog.\r
+ * @param {String} name The dialog's name.\r
+ * @param {Function|String} dialogDefinition\r
+ * A function returning the dialog's definition, or the URL to the .js file holding the function.\r
+ * The function should accept an argument "editor" which is the current editor instance, and\r
+ * return an object conforming to {@link CKEDITOR.dialog.definition}.\r
+ * @see CKEDITOR.dialog.definition\r
+ * @example\r
+ * // Full sample plugin, which does not only register a dialog window but also adds an item to the context menu.\r
+ * // To open the dialog window, choose "Open dialog" in the context menu.\r
+ * CKEDITOR.plugins.add( 'myplugin',\r
+ * {\r
+ * init: function( editor )\r
+ * {\r
+ * editor.addCommand( 'mydialog',new CKEDITOR.dialogCommand( 'mydialog' ) );\r
+ *\r
+ * if ( editor.contextMenu )\r
+ * {\r
+ * editor.addMenuGroup( 'mygroup', 10 );\r
+ * editor.addMenuItem( 'My Dialog',\r
+ * {\r
+ * label : 'Open dialog',\r
+ * command : 'mydialog',\r
+ * group : 'mygroup'\r
+ * });\r
+ * editor.contextMenu.addListener( function( element )\r
+ * {\r
+ * return { 'My Dialog' : CKEDITOR.TRISTATE_OFF };\r
+ * });\r
+ * }\r
+ *\r
+ * <strong>CKEDITOR.dialog.add</strong>( 'mydialog', function( api )\r
+ * {\r
+ * // CKEDITOR.dialog.definition\r
+ * var <strong>dialogDefinition</strong> =\r
+ * {\r
+ * title : 'Sample dialog',\r
+ * minWidth : 390,\r
+ * minHeight : 130,\r
+ * contents : [\r
+ * {\r
+ * id : 'tab1',\r
+ * label : 'Label',\r
+ * title : 'Title',\r
+ * expand : true,\r
+ * padding : 0,\r
+ * elements :\r
+ * [\r
+ * {\r
+ * type : 'html',\r
+ * html : '<p>This is some sample HTML content.</p>'\r
+ * },\r
+ * {\r
+ * type : 'textarea',\r
+ * id : 'textareaId',\r
+ * rows : 4,\r
+ * cols : 40\r
+ * }\r
+ * ]\r
+ * }\r
+ * ],\r
+ * buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ],\r
+ * onOk : function() {\r
+ * // "this" is now a CKEDITOR.dialog object.\r
+ * // Accessing dialog elements:\r
+ * var textareaObj = this.<strong>getContentElement</strong>( 'tab1', 'textareaId' );\r
+ * alert( "You have entered: " + textareaObj.getValue() );\r
+ * }\r
+ * };\r
+ *\r
+ * return dialogDefinition;\r
+ * } );\r
+ * }\r
+ * } );\r
+ *\r
+ * CKEDITOR.replace( 'editor1', { extraPlugins : 'myplugin' } );\r
+ */\r
+ add : function( name, dialogDefinition )\r
+ {\r
+ // Avoid path registration from multiple instances override definition.\r
+ if ( !this._.dialogDefinitions[name]\r
+ || typeof dialogDefinition == 'function' )\r
+ this._.dialogDefinitions[name] = dialogDefinition;\r
+ },\r
+\r
+ exists : function( name )\r
+ {\r
+ return !!this._.dialogDefinitions[ name ];\r
+ },\r
+\r
+ getCurrent : function()\r
+ {\r
+ return CKEDITOR.dialog._.currentTop;\r
+ },\r
+\r
+ /**\r
+ * The default OK button for dialogs. Fires the "ok" event and closes the dialog if the event succeeds.\r
+ * @static\r
+ * @field\r
+ * @example\r
+ * @type Function\r
+ */\r
+ okButton : (function()\r
+ {\r
+ var retval = function( editor, override )\r
+ {\r
+ override = override || {};\r
+ return CKEDITOR.tools.extend( {\r
+ id : 'ok',\r
+ type : 'button',\r
+ label : editor.lang.common.ok,\r
+ 'class' : 'cke_dialog_ui_button_ok',\r
+ onClick : function( evt )\r
+ {\r
+ var dialog = evt.data.dialog;\r
+ if ( dialog.fire( 'ok', { hide : true } ).hide !== false )\r
+ dialog.hide();\r
+ }\r
+ }, override, true );\r
+ };\r
+ retval.type = 'button';\r
+ retval.override = function( override )\r
+ {\r
+ return CKEDITOR.tools.extend( function( editor ){ return retval( editor, override ); },\r
+ { type : 'button' }, true );\r
+ };\r
+ return retval;\r
+ })(),\r
+\r
+ /**\r
+ * The default cancel button for dialogs. Fires the "cancel" event and closes the dialog if no UI element value changed.\r
+ * @static\r
+ * @field\r
+ * @example\r
+ * @type Function\r
+ */\r
+ cancelButton : (function()\r
+ {\r
+ var retval = function( editor, override )\r
+ {\r
+ override = override || {};\r
+ return CKEDITOR.tools.extend( {\r
+ id : 'cancel',\r
+ type : 'button',\r
+ label : editor.lang.common.cancel,\r
+ 'class' : 'cke_dialog_ui_button_cancel',\r
+ onClick : function( evt )\r
+ {\r
+ var dialog = evt.data.dialog;\r
+ if ( dialog.fire( 'cancel', { hide : true } ).hide !== false )\r
+ dialog.hide();\r
+ }\r
+ }, override, true );\r
+ };\r
+ retval.type = 'button';\r
+ retval.override = function( override )\r
+ {\r
+ return CKEDITOR.tools.extend( function( editor ){ return retval( editor, override ); },\r
+ { type : 'button' }, true );\r
+ };\r
+ return retval;\r
+ })(),\r
+\r
+ /**\r
+ * Registers a dialog UI element.\r
+ * @param {String} typeName The name of the UI element.\r
+ * @param {Function} builder The function to build the UI element.\r
+ * @example\r
+ */\r
+ addUIElement : function( typeName, builder )\r
+ {\r
+ this._.uiElementBuilders[ typeName ] = builder;\r
+ }\r
+ });\r
+\r
+ CKEDITOR.dialog._ =\r
+ {\r
+ uiElementBuilders : {},\r
+\r
+ dialogDefinitions : {},\r
+\r
+ currentTop : null,\r
+\r
+ currentZIndex : null\r
+ };\r
+\r
+ // "Inherit" (copy actually) from CKEDITOR.event.\r
+ CKEDITOR.event.implementOn( CKEDITOR.dialog );\r
+ CKEDITOR.event.implementOn( CKEDITOR.dialog.prototype, true );\r
+\r
+ var defaultDialogDefinition =\r
+ {\r
+ resizable : CKEDITOR.DIALOG_RESIZE_BOTH,\r
+ minWidth : 600,\r
+ minHeight : 400,\r
+ buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]\r
+ };\r
+\r
+ // Tool function used to return an item from an array based on its id\r
+ // property.\r
+ var getById = function( array, id, recurse )\r
+ {\r
+ for ( var i = 0, item ; ( item = array[ i ] ) ; i++ )\r
+ {\r
+ if ( item.id == id )\r
+ return item;\r
+ if ( recurse && item[ recurse ] )\r
+ {\r
+ var retval = getById( item[ recurse ], id, recurse ) ;\r
+ if ( retval )\r
+ return retval;\r
+ }\r
+ }\r
+ return null;\r
+ };\r
+\r
+ // Tool function used to add an item into an array.\r
+ var addById = function( array, newItem, nextSiblingId, recurse, nullIfNotFound )\r
+ {\r
+ if ( nextSiblingId )\r
+ {\r
+ for ( var i = 0, item ; ( item = array[ i ] ) ; i++ )\r
+ {\r
+ if ( item.id == nextSiblingId )\r
+ {\r
+ array.splice( i, 0, newItem );\r
+ return newItem;\r
+ }\r
+\r
+ if ( recurse && item[ recurse ] )\r
+ {\r
+ var retval = addById( item[ recurse ], newItem, nextSiblingId, recurse, true );\r
+ if ( retval )\r
+ return retval;\r
+ }\r
+ }\r
+\r
+ if ( nullIfNotFound )\r
+ return null;\r
+ }\r
+\r
+ array.push( newItem );\r
+ return newItem;\r
+ };\r
+\r
+ // Tool function used to remove an item from an array based on its id.\r
+ var removeById = function( array, id, recurse )\r
+ {\r
+ for ( var i = 0, item ; ( item = array[ i ] ) ; i++ )\r
+ {\r
+ if ( item.id == id )\r
+ return array.splice( i, 1 );\r
+ if ( recurse && item[ recurse ] )\r
+ {\r
+ var retval = removeById( item[ recurse ], id, recurse );\r
+ if ( retval )\r
+ return retval;\r
+ }\r
+ }\r
+ return null;\r
+ };\r
+\r
+ /**\r
+ * This class is not really part of the API. It is the "definition" property value\r
+ * passed to "dialogDefinition" event handlers.\r
+ * @constructor\r
+ * @name CKEDITOR.dialog.definitionObject\r
+ * @extends CKEDITOR.dialog.definition\r
+ * @example\r
+ * CKEDITOR.on( 'dialogDefinition', function( evt )\r
+ * {\r
+ * var definition = evt.data.definition;\r
+ * var content = definition.getContents( 'page1' );\r
+ * ...\r
+ * } );\r
+ */\r
+ var definitionObject = function( dialog, dialogDefinition )\r
+ {\r
+ // TODO : Check if needed.\r
+ this.dialog = dialog;\r
+\r
+ // Transform the contents entries in contentObjects.\r
+ var contents = dialogDefinition.contents;\r
+ for ( var i = 0, content ; ( content = contents[i] ) ; i++ )\r
+ contents[ i ] = content && new contentObject( dialog, content );\r
+\r
+ CKEDITOR.tools.extend( this, dialogDefinition );\r
+ };\r
+\r
+ definitionObject.prototype =\r
+ /** @lends CKEDITOR.dialog.definitionObject.prototype */\r
+ {\r
+ /**\r
+ * Gets a content definition.\r
+ * @param {String} id The id of the content definition.\r
+ * @returns {CKEDITOR.dialog.definition.content} The content definition\r
+ * matching id.\r
+ */\r
+ getContents : function( id )\r
+ {\r
+ return getById( this.contents, id );\r
+ },\r
+\r
+ /**\r
+ * Gets a button definition.\r
+ * @param {String} id The id of the button definition.\r
+ * @returns {CKEDITOR.dialog.definition.button} The button definition\r
+ * matching id.\r
+ */\r
+ getButton : function( id )\r
+ {\r
+ return getById( this.buttons, id );\r
+ },\r
+\r
+ /**\r
+ * Adds a content definition object under this dialog definition.\r
+ * @param {CKEDITOR.dialog.definition.content} contentDefinition The\r
+ * content definition.\r
+ * @param {String} [nextSiblingId] The id of an existing content\r
+ * definition which the new content definition will be inserted\r
+ * before. Omit if the new content definition is to be inserted as\r
+ * the last item.\r
+ * @returns {CKEDITOR.dialog.definition.content} The inserted content\r
+ * definition.\r
+ */\r
+ addContents : function( contentDefinition, nextSiblingId )\r
+ {\r
+ return addById( this.contents, contentDefinition, nextSiblingId );\r
+ },\r
+\r
+ /**\r
+ * Adds a button definition object under this dialog definition.\r
+ * @param {CKEDITOR.dialog.definition.button} buttonDefinition The\r
+ * button definition.\r
+ * @param {String} [nextSiblingId] The id of an existing button\r
+ * definition which the new button definition will be inserted\r
+ * before. Omit if the new button definition is to be inserted as\r
+ * the last item.\r
+ * @returns {CKEDITOR.dialog.definition.button} The inserted button\r
+ * definition.\r
+ */\r
+ addButton : function( buttonDefinition, nextSiblingId )\r
+ {\r
+ return addById( this.buttons, buttonDefinition, nextSiblingId );\r
+ },\r
+\r
+ /**\r
+ * Removes a content definition from this dialog definition.\r
+ * @param {String} id The id of the content definition to be removed.\r
+ * @returns {CKEDITOR.dialog.definition.content} The removed content\r
+ * definition.\r
+ */\r
+ removeContents : function( id )\r
+ {\r
+ removeById( this.contents, id );\r
+ },\r
+\r
+ /**\r
+ * Removes a button definition from the dialog definition.\r
+ * @param {String} id The id of the button definition to be removed.\r
+ * @returns {CKEDITOR.dialog.definition.button} The removed button\r
+ * definition.\r
+ */\r
+ removeButton : function( id )\r
+ {\r
+ removeById( this.buttons, id );\r
+ }\r
+ };\r
+\r
+ /**\r
+ * This class is not really part of the API. It is the template of the\r
+ * objects representing content pages inside the\r
+ * CKEDITOR.dialog.definitionObject.\r
+ * @constructor\r
+ * @name CKEDITOR.dialog.definition.contentObject\r
+ * @example\r
+ * CKEDITOR.on( 'dialogDefinition', function( evt )\r
+ * {\r
+ * var definition = evt.data.definition;\r
+ * var content = definition.getContents( 'page1' );\r
+ * content.remove( 'textInput1' );\r
+ * ...\r
+ * } );\r
+ */\r
+ function contentObject( dialog, contentDefinition )\r
+ {\r
+ this._ =\r
+ {\r
+ dialog : dialog\r
+ };\r
+\r
+ CKEDITOR.tools.extend( this, contentDefinition );\r
+ }\r
+\r
+ contentObject.prototype =\r
+ /** @lends CKEDITOR.dialog.definition.contentObject.prototype */\r
+ {\r
+ /**\r
+ * Gets a UI element definition under the content definition.\r
+ * @param {String} id The id of the UI element definition.\r
+ * @returns {CKEDITOR.dialog.definition.uiElement}\r
+ */\r
+ get : function( id )\r
+ {\r
+ return getById( this.elements, id, 'children' );\r
+ },\r
+\r
+ /**\r
+ * Adds a UI element definition to the content definition.\r
+ * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition The\r
+ * UI elemnet definition to be added.\r
+ * @param {String} nextSiblingId The id of an existing UI element\r
+ * definition which the new UI element definition will be inserted\r
+ * before. Omit if the new button definition is to be inserted as\r
+ * the last item.\r
+ * @returns {CKEDITOR.dialog.definition.uiElement} The element\r
+ * definition inserted.\r
+ */\r
+ add : function( elementDefinition, nextSiblingId )\r
+ {\r
+ return addById( this.elements, elementDefinition, nextSiblingId, 'children' );\r
+ },\r
+\r
+ /**\r
+ * Removes a UI element definition from the content definition.\r
+ * @param {String} id The id of the UI element definition to be\r
+ * removed.\r
+ * @returns {CKEDITOR.dialog.definition.uiElement} The element\r
+ * definition removed.\r
+ * @example\r
+ */\r
+ remove : function( id )\r
+ {\r
+ removeById( this.elements, id, 'children' );\r
+ }\r
+ };\r
+\r
+ function initDragAndDrop( dialog )\r
+ {\r
+ var lastCoords = null,\r
+ abstractDialogCoords = null,\r
+ element = dialog.getElement().getFirst(),\r
+ editor = dialog.getParentEditor(),\r
+ magnetDistance = editor.config.dialog_magnetDistance,\r
+ margins = editor.skin.margins || [ 0, 0, 0, 0 ];\r
+\r
+ if ( typeof magnetDistance == 'undefined' )\r
+ magnetDistance = 20;\r
+\r
+ function mouseMoveHandler( evt )\r
+ {\r
+ var dialogSize = dialog.getSize(),\r
+ viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),\r
+ x = evt.data.$.screenX,\r
+ y = evt.data.$.screenY,\r
+ dx = x - lastCoords.x,\r
+ dy = y - lastCoords.y,\r
+ realX, realY;\r
+\r
+ lastCoords = { x : x, y : y };\r
+ abstractDialogCoords.x += dx;\r
+ abstractDialogCoords.y += dy;\r
+\r
+ if ( abstractDialogCoords.x + margins[3] < magnetDistance )\r
+ realX = - margins[3];\r
+ else if ( abstractDialogCoords.x - margins[1] > viewPaneSize.width - dialogSize.width - magnetDistance )\r
+ realX = viewPaneSize.width - dialogSize.width + ( editor.lang.dir == 'rtl' ? 0 : margins[1] );\r
+ else\r
+ realX = abstractDialogCoords.x;\r
+\r
+ if ( abstractDialogCoords.y + margins[0] < magnetDistance )\r
+ realY = - margins[0];\r
+ else if ( abstractDialogCoords.y - margins[2] > viewPaneSize.height - dialogSize.height - magnetDistance )\r
+ realY = viewPaneSize.height - dialogSize.height + margins[2];\r
+ else\r
+ realY = abstractDialogCoords.y;\r
+\r
+ dialog.move( realX, realY, 1 );\r
+\r
+ evt.data.preventDefault();\r
+ }\r
+\r
+ function mouseUpHandler( evt )\r
+ {\r
+ CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );\r
+ CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );\r
+\r
+ if ( CKEDITOR.env.ie6Compat )\r
+ {\r
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();\r
+ coverDoc.removeListener( 'mousemove', mouseMoveHandler );\r
+ coverDoc.removeListener( 'mouseup', mouseUpHandler );\r
+ }\r
+ }\r
+\r
+ dialog.parts.title.on( 'mousedown', function( evt )\r
+ {\r
+ lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };\r
+\r
+ CKEDITOR.document.on( 'mousemove', mouseMoveHandler );\r
+ CKEDITOR.document.on( 'mouseup', mouseUpHandler );\r
+ abstractDialogCoords = dialog.getPosition();\r
+\r
+ if ( CKEDITOR.env.ie6Compat )\r
+ {\r
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();\r
+ coverDoc.on( 'mousemove', mouseMoveHandler );\r
+ coverDoc.on( 'mouseup', mouseUpHandler );\r
+ }\r
+\r
+ evt.data.preventDefault();\r
+ }, dialog );\r
+ }\r
+\r
+ function initResizeHandles( dialog )\r
+ {\r
+ var def = dialog.definition,\r
+ resizable = def.resizable;\r
+\r
+ if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE )\r
+ return;\r
+\r
+ var editor = dialog.getParentEditor();\r
+ var wrapperWidth, wrapperHeight,\r
+ viewSize, origin, startSize,\r
+ dialogCover;\r
+\r
+ var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )\r
+ {\r
+ startSize = dialog.getSize();\r
+\r
+ var content = dialog.parts.contents,\r
+ iframeDialog = content.$.getElementsByTagName( 'iframe' ).length;\r
+\r
+ // Shim to help capturing "mousemove" over iframe.\r
+ if ( iframeDialog )\r
+ {\r
+ dialogCover = CKEDITOR.dom.element.createFromHtml( '<div class="cke_dialog_resize_cover" style="height: 100%; position: absolute; width: 100%;"></div>' );\r
+ content.append( dialogCover );\r
+ }\r
+\r
+ // Calculate the offset between content and chrome size.\r
+ wrapperHeight = startSize.height - dialog.parts.contents.getSize( 'height', ! ( CKEDITOR.env.gecko || CKEDITOR.env.opera || CKEDITOR.env.ie && CKEDITOR.env.quirks ) );\r
+ wrapperWidth = startSize.width - dialog.parts.contents.getSize( 'width', 1 );\r
+\r
+ origin = { x : $event.screenX, y : $event.screenY };\r
+\r
+ viewSize = CKEDITOR.document.getWindow().getViewPaneSize();\r
+\r
+ CKEDITOR.document.on( 'mousemove', mouseMoveHandler );\r
+ CKEDITOR.document.on( 'mouseup', mouseUpHandler );\r
+\r
+ if ( CKEDITOR.env.ie6Compat )\r
+ {\r
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();\r
+ coverDoc.on( 'mousemove', mouseMoveHandler );\r
+ coverDoc.on( 'mouseup', mouseUpHandler );\r
+ }\r
+\r
+ $event.preventDefault && $event.preventDefault();\r
+ });\r
+\r
+ // Prepend the grip to the dialog.\r
+ dialog.on( 'load', function()\r
+ {\r
+ var direction = '';\r
+ if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH )\r
+ direction = ' cke_resizer_horizontal';\r
+ else if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT )\r
+ direction = ' cke_resizer_vertical';\r
+ var resizer = CKEDITOR.dom.element.createFromHtml( '<div' +\r
+ ' class="cke_resizer' + direction + ' cke_resizer_' + editor.lang.dir + '"' +\r
+ ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.resize ) + '"' +\r
+ ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event )"></div>' );\r
+ dialog.parts.footer.append( resizer, 1 );\r
+ });\r
+ editor.on( 'destroy', function() { CKEDITOR.tools.removeFunction( mouseDownFn ); } );\r
+\r
+ function mouseMoveHandler( evt )\r
+ {\r
+ var rtl = editor.lang.dir == 'rtl',\r
+ dx = ( evt.data.$.screenX - origin.x ) * ( rtl ? -1 : 1 ),\r
+ dy = evt.data.$.screenY - origin.y,\r
+ width = startSize.width,\r
+ height = startSize.height,\r
+ internalWidth = width + dx * ( dialog._.moved ? 1 : 2 ),\r
+ internalHeight = height + dy * ( dialog._.moved ? 1 : 2 ),\r
+ element = dialog._.element.getFirst(),\r
+ right = rtl && element.getComputedStyle( 'right' ),\r
+ position = dialog.getPosition();\r
+\r
+ if ( position.y + internalHeight > viewSize.height )\r
+ internalHeight = viewSize.height - position.y;\r
+\r
+ if ( ( rtl ? right : position.x ) + internalWidth > viewSize.width )\r
+ internalWidth = viewSize.width - ( rtl ? right : position.x );\r
+\r
+ // Make sure the dialog will not be resized to the wrong side when it's in the leftmost position for RTL.\r
+ if ( ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH ) )\r
+ width = Math.max( def.minWidth || 0, internalWidth - wrapperWidth );\r
+\r
+ if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )\r
+ height = Math.max( def.minHeight || 0, internalHeight - wrapperHeight );\r
+\r
+ dialog.resize( width, height );\r
+\r
+ if ( !dialog._.moved )\r
+ dialog.layout();\r
+\r
+ evt.data.preventDefault();\r
+ }\r
+\r
+ function mouseUpHandler()\r
+ {\r
+ CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );\r
+ CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );\r
+\r
+ if ( dialogCover )\r
+ {\r
+ dialogCover.remove();\r
+ dialogCover = null;\r
+ }\r
+\r
+ if ( CKEDITOR.env.ie6Compat )\r
+ {\r
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();\r
+ coverDoc.removeListener( 'mouseup', mouseUpHandler );\r
+ coverDoc.removeListener( 'mousemove', mouseMoveHandler );\r
+ }\r
+ }\r
+ }\r
+\r
+ var resizeCover;\r
+ // Caching resuable covers and allowing only one cover\r
+ // on screen.\r
+ var covers = {},\r
+ currentCover;\r
+\r
+ function showCover( editor )\r
+ {\r
+ var win = CKEDITOR.document.getWindow();\r
+ var config = editor.config,\r
+ backgroundColorStyle = config.dialog_backgroundCoverColor || 'white',\r
+ backgroundCoverOpacity = config.dialog_backgroundCoverOpacity,\r
+ baseFloatZIndex = config.baseFloatZIndex,\r
+ coverKey = CKEDITOR.tools.genKey(\r
+ backgroundColorStyle,\r
+ backgroundCoverOpacity,\r
+ baseFloatZIndex ),\r
+ coverElement = covers[ coverKey ];\r
+\r
+ if ( !coverElement )\r
+ {\r
+ var html = [\r
+ '<div tabIndex="-1" style="position: ', ( CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed' ),\r
+ '; z-index: ', baseFloatZIndex,\r
+ '; top: 0px; left: 0px; ',\r
+ ( !CKEDITOR.env.ie6Compat ? 'background-color: ' + backgroundColorStyle : '' ),\r
+ '" class="cke_dialog_background_cover">'\r
+ ];\r
+\r
+ if ( CKEDITOR.env.ie6Compat )\r
+ {\r
+ // Support for custom document.domain in IE.\r
+ var isCustomDomain = CKEDITOR.env.isCustomDomain(),\r
+ iframeHtml = '<html><body style=\\\'background-color:' + backgroundColorStyle + ';\\\'></body></html>';\r
+\r
+ html.push(\r
+ '<iframe' +\r
+ ' hidefocus="true"' +\r
+ ' frameborder="0"' +\r
+ ' id="cke_dialog_background_iframe"' +\r
+ ' src="javascript:' );\r
+\r
+ html.push( 'void((function(){' +\r
+ 'document.open();' +\r
+ ( isCustomDomain ? 'document.domain=\'' + document.domain + '\';' : '' ) +\r
+ 'document.write( \'' + iframeHtml + '\' );' +\r
+ 'document.close();' +\r
+ '})())' );\r
+\r
+ html.push(\r
+ '"' +\r
+ ' style="' +\r
+ 'position:absolute;' +\r
+ 'left:0;' +\r
+ 'top:0;' +\r
+ 'width:100%;' +\r
+ 'height: 100%;' +\r
+ 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)">' +\r
+ '</iframe>' );\r
+ }\r
+\r
+ html.push( '</div>' );\r
+\r
+ coverElement = CKEDITOR.dom.element.createFromHtml( html.join( '' ) );\r
+ coverElement.setOpacity( backgroundCoverOpacity != undefined ? backgroundCoverOpacity : 0.5 );\r
+\r
+ coverElement.appendTo( CKEDITOR.document.getBody() );\r
+ covers[ coverKey ] = coverElement;\r
+ }\r
+ else\r
+ coverElement. show();\r
+\r
+ currentCover = coverElement;\r
+ var resizeFunc = function()\r
+ {\r
+ var size = win.getViewPaneSize();\r
+ coverElement.setStyles(\r
+ {\r
+ width : size.width + 'px',\r
+ height : size.height + 'px'\r
+ } );\r
+ };\r
+\r
+ var scrollFunc = function()\r
+ {\r
+ var pos = win.getScrollPosition(),\r
+ cursor = CKEDITOR.dialog._.currentTop;\r
+ coverElement.setStyles(\r
+ {\r
+ left : pos.x + 'px',\r
+ top : pos.y + 'px'\r
+ });\r
+\r
+ if ( cursor )\r
+ {\r
+ do\r
+ {\r
+ var dialogPos = cursor.getPosition();\r
+ cursor.move( dialogPos.x, dialogPos.y );\r
+ } while ( ( cursor = cursor._.parentDialog ) );\r
+ }\r
+ };\r
+\r
+ resizeCover = resizeFunc;\r
+ win.on( 'resize', resizeFunc );\r
+ resizeFunc();\r
+ // Using Safari/Mac, focus must be kept where it is (#7027)\r
+ if ( !( CKEDITOR.env.mac && CKEDITOR.env.webkit ) )\r
+ coverElement.focus();\r
+\r
+ if ( CKEDITOR.env.ie6Compat )\r
+ {\r
+ // IE BUG: win.$.onscroll assignment doesn't work.. it must be window.onscroll.\r
+ // So we need to invent a really funny way to make it work.\r
+ var myScrollHandler = function()\r
+ {\r
+ scrollFunc();\r
+ arguments.callee.prevScrollHandler.apply( this, arguments );\r
+ };\r
+ win.$.setTimeout( function()\r
+ {\r
+ myScrollHandler.prevScrollHandler = window.onscroll || function(){};\r
+ window.onscroll = myScrollHandler;\r
+ }, 0 );\r
+ scrollFunc();\r
+ }\r
+ }\r
+\r
+ function hideCover()\r
+ {\r
+ if ( !currentCover )\r
+ return;\r
+\r
+ var win = CKEDITOR.document.getWindow();\r
+ currentCover.hide();\r
+ win.removeListener( 'resize', resizeCover );\r
+\r
+ if ( CKEDITOR.env.ie6Compat )\r
+ {\r
+ win.$.setTimeout( function()\r
+ {\r
+ var prevScrollHandler = window.onscroll && window.onscroll.prevScrollHandler;\r
+ window.onscroll = prevScrollHandler || null;\r
+ }, 0 );\r
+ }\r
+ resizeCover = null;\r
+ }\r
+\r
+ function removeCovers()\r
+ {\r
+ for ( var coverId in covers )\r
+ covers[ coverId ].remove();\r
+ covers = {};\r
+ }\r
+\r
+ var accessKeyProcessors = {};\r
+\r
+ var accessKeyDownHandler = function( evt )\r
+ {\r
+ var ctrl = evt.data.$.ctrlKey || evt.data.$.metaKey,\r
+ alt = evt.data.$.altKey,\r
+ shift = evt.data.$.shiftKey,\r
+ key = String.fromCharCode( evt.data.$.keyCode ),\r
+ keyProcessor = accessKeyProcessors[( ctrl ? 'CTRL+' : '' ) + ( alt ? 'ALT+' : '') + ( shift ? 'SHIFT+' : '' ) + key];\r
+\r
+ if ( !keyProcessor || !keyProcessor.length )\r
+ return;\r
+\r
+ keyProcessor = keyProcessor[keyProcessor.length - 1];\r
+ keyProcessor.keydown && keyProcessor.keydown.call( keyProcessor.uiElement, keyProcessor.dialog, keyProcessor.key );\r
+ evt.data.preventDefault();\r
+ };\r
+\r
+ var accessKeyUpHandler = function( evt )\r
+ {\r
+ var ctrl = evt.data.$.ctrlKey || evt.data.$.metaKey,\r
+ alt = evt.data.$.altKey,\r
+ shift = evt.data.$.shiftKey,\r
+ key = String.fromCharCode( evt.data.$.keyCode ),\r
+ keyProcessor = accessKeyProcessors[( ctrl ? 'CTRL+' : '' ) + ( alt ? 'ALT+' : '') + ( shift ? 'SHIFT+' : '' ) + key];\r
+\r
+ if ( !keyProcessor || !keyProcessor.length )\r
+ return;\r
+\r
+ keyProcessor = keyProcessor[keyProcessor.length - 1];\r
+ if ( keyProcessor.keyup )\r
+ {\r
+ keyProcessor.keyup.call( keyProcessor.uiElement, keyProcessor.dialog, keyProcessor.key );\r
+ evt.data.preventDefault();\r
+ }\r
+ };\r
+\r
+ var registerAccessKey = function( uiElement, dialog, key, downFunc, upFunc )\r
+ {\r
+ var procList = accessKeyProcessors[key] || ( accessKeyProcessors[key] = [] );\r
+ procList.push( {\r
+ uiElement : uiElement,\r
+ dialog : dialog,\r
+ key : key,\r
+ keyup : upFunc || uiElement.accessKeyUp,\r
+ keydown : downFunc || uiElement.accessKeyDown\r
+ } );\r
+ };\r
+\r
+ var unregisterAccessKey = function( obj )\r
+ {\r
+ for ( var i in accessKeyProcessors )\r
+ {\r
+ var list = accessKeyProcessors[i];\r
+ for ( var j = list.length - 1 ; j >= 0 ; j-- )\r
+ {\r
+ if ( list[j].dialog == obj || list[j].uiElement == obj )\r
+ list.splice( j, 1 );\r
+ }\r
+ if ( list.length === 0 )\r
+ delete accessKeyProcessors[i];\r
+ }\r
+ };\r
+\r
+ var tabAccessKeyUp = function( dialog, key )\r
+ {\r
+ if ( dialog._.accessKeyMap[key] )\r
+ dialog.selectPage( dialog._.accessKeyMap[key] );\r
+ };\r
+\r
+ var tabAccessKeyDown = function( dialog, key )\r
+ {\r
+ };\r
+\r
+ // ESC, ENTER\r
+ var preventKeyBubblingKeys = { 27 :1, 13 :1 };\r
+ var preventKeyBubbling = function( e )\r
+ {\r
+ if ( e.data.getKeystroke() in preventKeyBubblingKeys )\r
+ e.data.stopPropagation();\r
+ };\r
+\r
+ (function()\r
+ {\r
+ CKEDITOR.ui.dialog =\r
+ {\r
+ /**\r
+ * The base class of all dialog UI elements.\r
+ * @constructor\r
+ * @param {CKEDITOR.dialog} dialog Parent dialog object.\r
+ * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition Element\r
+ * definition. Accepted fields:\r
+ * <ul>\r
+ * <li><strong>id</strong> (Required) The id of the UI element. See {@link\r
+ * CKEDITOR.dialog#getContentElement}</li>\r
+ * <li><strong>type</strong> (Required) The type of the UI element. The\r
+ * value to this field specifies which UI element class will be used to\r
+ * generate the final widget.</li>\r
+ * <li><strong>title</strong> (Optional) The popup tooltip for the UI\r
+ * element.</li>\r
+ * <li><strong>hidden</strong> (Optional) A flag that tells if the element\r
+ * should be initially visible.</li>\r
+ * <li><strong>className</strong> (Optional) Additional CSS class names\r
+ * to add to the UI element. Separated by space.</li>\r
+ * <li><strong>style</strong> (Optional) Additional CSS inline styles\r
+ * to add to the UI element. A semicolon (;) is required after the last\r
+ * style declaration.</li>\r
+ * <li><strong>accessKey</strong> (Optional) The alphanumeric access key\r
+ * for this element. Access keys are automatically prefixed by CTRL.</li>\r
+ * <li><strong>on*</strong> (Optional) Any UI element definition field that\r
+ * starts with <em>on</em> followed immediately by a capital letter and\r
+ * probably more letters is an event handler. Event handlers may be further\r
+ * divided into registered event handlers and DOM event handlers. Please\r
+ * refer to {@link CKEDITOR.ui.dialog.uiElement#registerEvents} and\r
+ * {@link CKEDITOR.ui.dialog.uiElement#eventProcessors} for more\r
+ * information.</li>\r
+ * </ul>\r
+ * @param {Array} htmlList\r
+ * List of HTML code to be added to the dialog's content area.\r
+ * @param {Function|String} nodeNameArg\r
+ * A function returning a string, or a simple string for the node name for\r
+ * the root DOM node. Default is 'div'.\r
+ * @param {Function|Object} stylesArg\r
+ * A function returning an object, or a simple object for CSS styles applied\r
+ * to the DOM node. Default is empty object.\r
+ * @param {Function|Object} attributesArg\r
+ * A fucntion returning an object, or a simple object for attributes applied\r
+ * to the DOM node. Default is empty object.\r
+ * @param {Function|String} contentsArg\r
+ * A function returning a string, or a simple string for the HTML code inside\r
+ * the root DOM node. Default is empty string.\r
+ * @example\r
+ */\r
+ uiElement : function( dialog, elementDefinition, htmlList, nodeNameArg, stylesArg, attributesArg, contentsArg )\r
+ {\r
+ if ( arguments.length < 4 )\r
+ return;\r
+\r
+ var nodeName = ( nodeNameArg.call ? nodeNameArg( elementDefinition ) : nodeNameArg ) || 'div',\r
+ html = [ '<', nodeName, ' ' ],\r
+ styles = ( stylesArg && stylesArg.call ? stylesArg( elementDefinition ) : stylesArg ) || {},\r
+ attributes = ( attributesArg && attributesArg.call ? attributesArg( elementDefinition ) : attributesArg ) || {},\r
+ innerHTML = ( contentsArg && contentsArg.call ? contentsArg.call( this, dialog, elementDefinition ) : contentsArg ) || '',\r
+ domId = this.domId = attributes.id || CKEDITOR.tools.getNextId() + '_uiElement',\r
+ id = this.id = elementDefinition.id,\r
+ i;\r
+\r
+ // Set the id, a unique id is required for getElement() to work.\r
+ attributes.id = domId;\r
+\r
+ // Set the type and definition CSS class names.\r
+ var classes = {};\r
+ if ( elementDefinition.type )\r
+ classes[ 'cke_dialog_ui_' + elementDefinition.type ] = 1;\r
+ if ( elementDefinition.className )\r
+ classes[ elementDefinition.className ] = 1;\r
+ var attributeClasses = ( attributes['class'] && attributes['class'].split ) ? attributes['class'].split( ' ' ) : [];\r
+ for ( i = 0 ; i < attributeClasses.length ; i++ )\r
+ {\r
+ if ( attributeClasses[i] )\r
+ classes[ attributeClasses[i] ] = 1;\r
+ }\r
+ var finalClasses = [];\r
+ for ( i in classes )\r
+ finalClasses.push( i );\r
+ attributes['class'] = finalClasses.join( ' ' );\r
+\r
+ // Set the popup tooltop.\r
+ if ( elementDefinition.title )\r
+ attributes.title = elementDefinition.title;\r
+\r
+ // Write the inline CSS styles.\r
+ var styleStr = ( elementDefinition.style || '' ).split( ';' );\r
+ for ( i in styles )\r
+ styleStr.push( i + ':' + styles[i] );\r
+ if ( elementDefinition.hidden )\r
+ styleStr.push( 'display:none' );\r
+ for ( i = styleStr.length - 1 ; i >= 0 ; i-- )\r
+ {\r
+ if ( styleStr[i] === '' )\r
+ styleStr.splice( i, 1 );\r
+ }\r
+ if ( styleStr.length > 0 )\r
+ attributes.style = ( attributes.style ? ( attributes.style + '; ' ) : '' ) + styleStr.join( '; ' );\r
+\r
+ // Write the attributes.\r
+ for ( i in attributes )\r
+ html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[i] ) + '" ');\r
+\r
+ // Write the content HTML.\r
+ html.push( '>', innerHTML, '</', nodeName, '>' );\r
+\r
+ // Add contents to the parent HTML array.\r
+ htmlList.push( html.join( '' ) );\r
+\r
+ ( this._ || ( this._ = {} ) ).dialog = dialog;\r
+\r
+ // Override isChanged if it is defined in element definition.\r
+ if ( typeof( elementDefinition.isChanged ) == 'boolean' )\r
+ this.isChanged = function(){ return elementDefinition.isChanged; };\r
+ if ( typeof( elementDefinition.isChanged ) == 'function' )\r
+ this.isChanged = elementDefinition.isChanged;\r
+\r
+ // Add events.\r
+ CKEDITOR.event.implementOn( this );\r
+\r
+ this.registerEvents( elementDefinition );\r
+ if ( this.accessKeyUp && this.accessKeyDown && elementDefinition.accessKey )\r
+ registerAccessKey( this, dialog, 'CTRL+' + elementDefinition.accessKey );\r
+\r
+ var me = this;\r
+ dialog.on( 'load', function()\r
+ {\r
+ if ( me.getInputElement() )\r
+ {\r
+ me.getInputElement().on( 'focus', function()\r
+ {\r
+ dialog._.tabBarMode = false;\r
+ dialog._.hasFocus = true;\r
+ me.fire( 'focus' );\r
+ }, me );\r
+ }\r
+ } );\r
+\r
+ // Register the object as a tab focus if it can be included.\r
+ if ( this.keyboardFocusable )\r
+ {\r
+ this.tabIndex = elementDefinition.tabIndex || 0;\r
+\r
+ this.focusIndex = dialog._.focusList.push( this ) - 1;\r
+ this.on( 'focus', function()\r
+ {\r
+ dialog._.currentFocusIndex = me.focusIndex;\r
+ } );\r
+ }\r
+\r
+ // Completes this object with everything we have in the\r
+ // definition.\r
+ CKEDITOR.tools.extend( this, elementDefinition );\r
+ },\r
+\r
+ /**\r
+ * Horizontal layout box for dialog UI elements, auto-expends to available width of container.\r
+ * @constructor\r
+ * @extends CKEDITOR.ui.dialog.uiElement\r
+ * @param {CKEDITOR.dialog} dialog\r
+ * Parent dialog object.\r
+ * @param {Array} childObjList\r
+ * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this\r
+ * container.\r
+ * @param {Array} childHtmlList\r
+ * Array of HTML code that correspond to the HTML output of all the\r
+ * objects in childObjList.\r
+ * @param {Array} htmlList\r
+ * Array of HTML code that this element will output to.\r
+ * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
+ * The element definition. Accepted fields:\r
+ * <ul>\r
+ * <li><strong>widths</strong> (Optional) The widths of child cells.</li>\r
+ * <li><strong>height</strong> (Optional) The height of the layout.</li>\r
+ * <li><strong>padding</strong> (Optional) The padding width inside child\r
+ * cells.</li>\r
+ * <li><strong>align</strong> (Optional) The alignment of the whole layout\r
+ * </li>\r
+ * </ul>\r
+ * @example\r
+ */\r
+ hbox : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )\r
+ {\r
+ if ( arguments.length < 4 )\r
+ return;\r
+\r
+ this._ || ( this._ = {} );\r
+\r
+ var children = this._.children = childObjList,\r
+ widths = elementDefinition && elementDefinition.widths || null,\r
+ height = elementDefinition && elementDefinition.height || null,\r
+ styles = {},\r
+ i;\r
+ /** @ignore */\r
+ var innerHTML = function()\r
+ {\r
+ var html = [ '<tbody><tr class="cke_dialog_ui_hbox">' ];\r
+ for ( i = 0 ; i < childHtmlList.length ; i++ )\r
+ {\r
+ var className = 'cke_dialog_ui_hbox_child',\r
+ styles = [];\r
+ if ( i === 0 )\r
+ className = 'cke_dialog_ui_hbox_first';\r
+ if ( i == childHtmlList.length - 1 )\r
+ className = 'cke_dialog_ui_hbox_last';\r
+ html.push( '<td class="', className, '" role="presentation" ' );\r
+ if ( widths )\r
+ {\r
+ if ( widths[i] )\r
+ styles.push( 'width:' + cssLength( widths[i] ) );\r
+ }\r
+ else\r
+ styles.push( 'width:' + Math.floor( 100 / childHtmlList.length ) + '%' );\r
+ if ( height )\r
+ styles.push( 'height:' + cssLength( height ) );\r
+ if ( elementDefinition && elementDefinition.padding != undefined )\r
+ styles.push( 'padding:' + cssLength( elementDefinition.padding ) );\r
+ if ( styles.length > 0 )\r
+ html.push( 'style="' + styles.join('; ') + '" ' );\r
+ html.push( '>', childHtmlList[i], '</td>' );\r
+ }\r
+ html.push( '</tr></tbody>' );\r
+ return html.join( '' );\r
+ };\r
+\r
+ var attribs = { role : 'presentation' };\r
+ elementDefinition && elementDefinition.align && ( attribs.align = elementDefinition.align );\r
+\r
+ CKEDITOR.ui.dialog.uiElement.call(\r
+ this,\r
+ dialog,\r
+ elementDefinition || { type : 'hbox' },\r
+ htmlList,\r
+ 'table',\r
+ styles,\r
+ attribs,\r
+ innerHTML );\r
+ },\r
+\r
+ /**\r
+ * Vertical layout box for dialog UI elements.\r
+ * @constructor\r
+ * @extends CKEDITOR.ui.dialog.hbox\r
+ * @param {CKEDITOR.dialog} dialog\r
+ * Parent dialog object.\r
+ * @param {Array} childObjList\r
+ * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this\r
+ * container.\r
+ * @param {Array} childHtmlList\r
+ * Array of HTML code that correspond to the HTML output of all the\r
+ * objects in childObjList.\r
+ * @param {Array} htmlList\r
+ * Array of HTML code that this element will output to.\r
+ * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition\r
+ * The element definition. Accepted fields:\r
+ * <ul>\r
+ * <li><strong>width</strong> (Optional) The width of the layout.</li>\r
+ * <li><strong>heights</strong> (Optional) The heights of individual cells.\r
+ * </li>\r
+ * <li><strong>align</strong> (Optional) The alignment of the layout.</li>\r
+ * <li><strong>padding</strong> (Optional) The padding width inside child\r
+ * cells.</li>\r
+ * <li><strong>expand</strong> (Optional) Whether the layout should expand\r
+ * vertically to fill its container.</li>\r
+ * </ul>\r
+ * @example\r
+ */\r
+ vbox : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )\r
+ {\r
+ if ( arguments.length < 3 )\r
+ return;\r
+\r
+ this._ || ( this._ = {} );\r
+\r
+ var children = this._.children = childObjList,\r
+ width = elementDefinition && elementDefinition.width || null,\r
+ heights = elementDefinition && elementDefinition.heights || null;\r
+ /** @ignore */\r
+ var innerHTML = function()\r
+ {\r
+ var html = [ '<table role="presentation" cellspacing="0" border="0" ' ];\r
+ html.push( 'style="' );\r
+ if ( elementDefinition && elementDefinition.expand )\r
+ html.push( 'height:100%;' );\r
+ html.push( 'width:' + cssLength( width || '100%' ), ';' );\r
+ html.push( '"' );\r
+ html.push( 'align="', CKEDITOR.tools.htmlEncode(\r
+ ( elementDefinition && elementDefinition.align ) || ( dialog.getParentEditor().lang.dir == 'ltr' ? 'left' : 'right' ) ), '" ' );\r
+\r
+ html.push( '><tbody>' );\r
+ for ( var i = 0 ; i < childHtmlList.length ; i++ )\r
+ {\r
+ var styles = [];\r
+ html.push( '<tr><td role="presentation" ' );\r
+ if ( width )\r
+ styles.push( 'width:' + cssLength( width || '100%' ) );\r
+ if ( heights )\r
+ styles.push( 'height:' + cssLength( heights[i] ) );\r
+ else if ( elementDefinition && elementDefinition.expand )\r
+ styles.push( 'height:' + Math.floor( 100 / childHtmlList.length ) + '%' );\r
+ if ( elementDefinition && elementDefinition.padding != undefined )\r
+ styles.push( 'padding:' + cssLength( elementDefinition.padding ) );\r
+ if ( styles.length > 0 )\r
+ html.push( 'style="', styles.join( '; ' ), '" ' );\r
+ html.push( ' class="cke_dialog_ui_vbox_child">', childHtmlList[i], '</td></tr>' );\r
+ }\r
+ html.push( '</tbody></table>' );\r
+ return html.join( '' );\r
+ };\r
+ CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition || { type : 'vbox' }, htmlList, 'div', null, { role : 'presentation' }, innerHTML );\r
+ }\r
+ };\r
+ })();\r
+\r
+ CKEDITOR.ui.dialog.uiElement.prototype =\r
+ {\r
+ /**\r
+ * Gets the root DOM element of this dialog UI object.\r
+ * @returns {CKEDITOR.dom.element} Root DOM element of UI object.\r
+ * @example\r
+ * uiElement.getElement().hide();\r
+ */\r
+ getElement : function()\r
+ {\r
+ return CKEDITOR.document.getById( this.domId );\r
+ },\r
+\r
+ /**\r
+ * Gets the DOM element that the user inputs values.\r
+ * This function is used by setValue(), getValue() and focus(). It should\r
+ * be overrided in child classes where the input element isn't the root\r
+ * element.\r
+ * @returns {CKEDITOR.dom.element} The element where the user input values.\r
+ * @example\r
+ * var rawValue = textInput.getInputElement().$.value;\r
+ */\r
+ getInputElement : function()\r
+ {\r
+ return this.getElement();\r
+ },\r
+\r
+ /**\r
+ * Gets the parent dialog object containing this UI element.\r
+ * @returns {CKEDITOR.dialog} Parent dialog object.\r
+ * @example\r
+ * var dialog = uiElement.getDialog();\r
+ */\r
+ getDialog : function()\r
+ {\r
+ return this._.dialog;\r
+ },\r
+\r
+ /**\r
+ * Sets the value of this dialog UI object.\r
+ * @param {Object} value The new value.\r
+ * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.\r
+ * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
+ * @example\r
+ * uiElement.setValue( 'Dingo' );\r
+ */\r
+ setValue : function( value, noChangeEvent )\r
+ {\r
+ this.getInputElement().setValue( value );\r
+ !noChangeEvent && this.fire( 'change', { value : value } );\r
+ return this;\r
+ },\r
+\r
+ /**\r
+ * Gets the current value of this dialog UI object.\r
+ * @returns {Object} The current value.\r
+ * @example\r
+ * var myValue = uiElement.getValue();\r
+ */\r
+ getValue : function()\r
+ {\r
+ return this.getInputElement().getValue();\r
+ },\r
+\r
+ /**\r
+ * Tells whether the UI object's value has changed.\r
+ * @returns {Boolean} true if changed, false if not changed.\r
+ * @example\r
+ * if ( uiElement.isChanged() )\r
+ * confirm( 'Value changed! Continue?' );\r
+ */\r
+ isChanged : function()\r
+ {\r
+ // Override in input classes.\r
+ return false;\r
+ },\r
+\r
+ /**\r
+ * Selects the parent tab of this element. Usually called by focus() or overridden focus() methods.\r
+ * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
+ * @example\r
+ * focus : function()\r
+ * {\r
+ * this.selectParentTab();\r
+ * // do something else.\r
+ * }\r
+ */\r
+ selectParentTab : function()\r
+ {\r
+ var element = this.getInputElement(),\r
+ cursor = element,\r
+ tabId;\r
+ while ( ( cursor = cursor.getParent() ) && cursor.$.className.search( 'cke_dialog_page_contents' ) == -1 )\r
+ { /*jsl:pass*/ }\r
+\r
+ // Some widgets don't have parent tabs (e.g. OK and Cancel buttons).\r
+ if ( !cursor )\r
+ return this;\r
+\r
+ tabId = cursor.getAttribute( 'name' );\r
+ // Avoid duplicate select.\r
+ if ( this._.dialog._.currentTabId != tabId )\r
+ this._.dialog.selectPage( tabId );\r
+ return this;\r
+ },\r
+\r
+ /**\r
+ * Puts the focus to the UI object. Switches tabs if the UI object isn't in the active tab page.\r
+ * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
+ * @example\r
+ * uiElement.focus();\r
+ */\r
+ focus : function()\r
+ {\r
+ this.selectParentTab().getInputElement().focus();\r
+ return this;\r
+ },\r
+\r
+ /**\r
+ * Registers the on* event handlers defined in the element definition.\r
+ * The default behavior of this function is:\r
+ * <ol>\r
+ * <li>\r
+ * If the on* event is defined in the class's eventProcesors list,\r
+ * then the registration is delegated to the corresponding function\r
+ * in the eventProcessors list.\r
+ * </li>\r
+ * <li>\r
+ * If the on* event is not defined in the eventProcessors list, then\r
+ * register the event handler under the corresponding DOM event of\r
+ * the UI element's input DOM element (as defined by the return value\r
+ * of {@link CKEDITOR.ui.dialog.uiElement#getInputElement}).\r
+ * </li>\r
+ * </ol>\r
+ * This function is only called at UI element instantiation, but can\r
+ * be overridded in child classes if they require more flexibility.\r
+ * @param {CKEDITOR.dialog.definition.uiElement} definition The UI element\r
+ * definition.\r
+ * @returns {CKEDITOR.dialog.uiElement} The current UI element.\r
+ * @example\r
+ */\r
+ registerEvents : function( definition )\r
+ {\r
+ var regex = /^on([A-Z]\w+)/,\r
+ match;\r
+\r
+ var registerDomEvent = function( uiElement, dialog, eventName, func )\r
+ {\r
+ dialog.on( 'load', function()\r
+ {\r
+ uiElement.getInputElement().on( eventName, func, uiElement );\r
+ });\r
+ };\r
+\r
+ for ( var i in definition )\r
+ {\r
+ if ( !( match = i.match( regex ) ) )\r
+ continue;\r
+ if ( this.eventProcessors[i] )\r
+ this.eventProcessors[i].call( this, this._.dialog, definition[i] );\r
+ else\r
+ registerDomEvent( this, this._.dialog, match[1].toLowerCase(), definition[i] );\r
+ }\r
+\r
+ return this;\r
+ },\r
+\r
+ /**\r
+ * The event processor list used by\r
+ * {@link CKEDITOR.ui.dialog.uiElement#getInputElement} at UI element\r
+ * instantiation. The default list defines three on* events:\r
+ * <ol>\r
+ * <li>onLoad - Called when the element's parent dialog opens for the\r
+ * first time</li>\r
+ * <li>onShow - Called whenever the element's parent dialog opens.</li>\r
+ * <li>onHide - Called whenever the element's parent dialog closes.</li>\r
+ * </ol>\r
+ * @field\r
+ * @type Object\r
+ * @example\r
+ * // This connects the 'click' event in CKEDITOR.ui.dialog.button to onClick\r
+ * // handlers in the UI element's definitions.\r
+ * CKEDITOR.ui.dialog.button.eventProcessors = CKEDITOR.tools.extend( {},\r
+ * CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors,\r
+ * { onClick : function( dialog, func ) { this.on( 'click', func ); } },\r
+ * true );\r
+ */\r
+ eventProcessors :\r
+ {\r
+ onLoad : function( dialog, func )\r
+ {\r
+ dialog.on( 'load', func, this );\r
+ },\r
+\r
+ onShow : function( dialog, func )\r
+ {\r
+ dialog.on( 'show', func, this );\r
+ },\r
+\r
+ onHide : function( dialog, func )\r
+ {\r
+ dialog.on( 'hide', func, this );\r
+ }\r
+ },\r
+\r
+ /**\r
+ * The default handler for a UI element's access key down event, which\r
+ * tries to put focus to the UI element.<br />\r
+ * Can be overridded in child classes for more sophisticaed behavior.\r
+ * @param {CKEDITOR.dialog} dialog The parent dialog object.\r
+ * @param {String} key The key combination pressed. Since access keys\r
+ * are defined to always include the CTRL key, its value should always\r
+ * include a 'CTRL+' prefix.\r
+ * @example\r
+ */\r
+ accessKeyDown : function( dialog, key )\r
+ {\r
+ this.focus();\r
+ },\r
+\r
+ /**\r
+ * The default handler for a UI element's access key up event, which\r
+ * does nothing.<br />\r
+ * Can be overridded in child classes for more sophisticated behavior.\r
+ * @param {CKEDITOR.dialog} dialog The parent dialog object.\r
+ * @param {String} key The key combination pressed. Since access keys\r
+ * are defined to always include the CTRL key, its value should always\r
+ * include a 'CTRL+' prefix.\r
+ * @example\r
+ */\r
+ accessKeyUp : function( dialog, key )\r
+ {\r
+ },\r
+\r
+ /**\r
+ * Disables a UI element.\r
+ * @example\r
+ */\r
+ disable : function()\r
+ {\r
+ var element = this.getInputElement();\r
+ element.setAttribute( 'disabled', 'true' );\r
+ element.addClass( 'cke_disabled' );\r
+ },\r
+\r
+ /**\r
+ * Enables a UI element.\r
+ * @example\r
+ */\r
+ enable : function()\r
+ {\r
+ var element = this.getInputElement();\r
+ element.removeAttribute( 'disabled' );\r
+ element.removeClass( 'cke_disabled' );\r
+ },\r
+\r
+ /**\r
+ * Determines whether an UI element is enabled or not.\r
+ * @returns {Boolean} Whether the UI element is enabled.\r
+ * @example\r
+ */\r
+ isEnabled : function()\r
+ {\r
+ return !this.getInputElement().getAttribute( 'disabled' );\r
+ },\r
+\r
+ /**\r
+ * Determines whether an UI element is visible or not.\r
+ * @returns {Boolean} Whether the UI element is visible.\r
+ * @example\r
+ */\r
+ isVisible : function()\r
+ {\r
+ return this.getInputElement().isVisible();\r
+ },\r
+\r
+ /**\r
+ * Determines whether an UI element is focus-able or not.\r
+ * Focus-able is defined as being both visible and enabled.\r
+ * @returns {Boolean} Whether the UI element can be focused.\r
+ * @example\r
+ */\r
+ isFocusable : function()\r
+ {\r
+ if ( !this.isEnabled() || !this.isVisible() )\r
+ return false;\r
+ return true;\r
+ }\r
+ };\r
+\r
+ CKEDITOR.ui.dialog.hbox.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,\r
+ /**\r
+ * @lends CKEDITOR.ui.dialog.hbox.prototype\r
+ */\r
+ {\r
+ /**\r
+ * Gets a child UI element inside this container.\r
+ * @param {Array|Number} indices An array or a single number to indicate the child's\r
+ * position in the container's descendant tree. Omit to get all the children in an array.\r
+ * @returns {Array|CKEDITOR.ui.dialog.uiElement} Array of all UI elements in the container\r
+ * if no argument given, or the specified UI element if indices is given.\r
+ * @example\r
+ * var checkbox = hbox.getChild( [0,1] );\r
+ * checkbox.setValue( true );\r
+ */\r
+ getChild : function( indices )\r
+ {\r
+ // If no arguments, return a clone of the children array.\r
+ if ( arguments.length < 1 )\r
+ return this._.children.concat();\r
+\r
+ // If indices isn't array, make it one.\r
+ if ( !indices.splice )\r
+ indices = [ indices ];\r
+\r
+ // Retrieve the child element according to tree position.\r
+ if ( indices.length < 2 )\r
+ return this._.children[ indices[0] ];\r
+ else\r
+ return ( this._.children[ indices[0] ] && this._.children[ indices[0] ].getChild ) ?\r
+ this._.children[ indices[0] ].getChild( indices.slice( 1, indices.length ) ) :\r
+ null;\r
+ }\r
+ }, true );\r
+\r
+ CKEDITOR.ui.dialog.vbox.prototype = new CKEDITOR.ui.dialog.hbox();\r
+\r
+\r
+\r
+ (function()\r
+ {\r
+ var commonBuilder = {\r
+ build : function( dialog, elementDefinition, output )\r
+ {\r
+ var children = elementDefinition.children,\r
+ child,\r
+ childHtmlList = [],\r
+ childObjList = [];\r
+ for ( var i = 0 ; ( i < children.length && ( child = children[i] ) ) ; i++ )\r
+ {\r
+ var childHtml = [];\r
+ childHtmlList.push( childHtml );\r
+ childObjList.push( CKEDITOR.dialog._.uiElementBuilders[ child.type ].build( dialog, child, childHtml ) );\r
+ }\r
+ return new CKEDITOR.ui.dialog[elementDefinition.type]( dialog, childObjList, childHtmlList, output, elementDefinition );\r
+ }\r
+ };\r
+\r
+ CKEDITOR.dialog.addUIElement( 'hbox', commonBuilder );\r
+ CKEDITOR.dialog.addUIElement( 'vbox', commonBuilder );\r
+ })();\r
+\r
+ /**\r
+ * Generic dialog command. It opens a specific dialog when executed.\r
+ * @constructor\r
+ * @augments CKEDITOR.commandDefinition\r
+ * @param {string} dialogName The name of the dialog to open when executing\r
+ * this command.\r
+ * @example\r
+ * // Register the "link" command, which opens the "link" dialog.\r
+ * editor.addCommand( 'link', <b>new CKEDITOR.dialogCommand( 'link' )</b> );\r
+ */\r
+ CKEDITOR.dialogCommand = function( dialogName )\r
+ {\r
+ this.dialogName = dialogName;\r
+ };\r
+\r
+ CKEDITOR.dialogCommand.prototype =\r
+ {\r
+ /** @ignore */\r
+ exec : function( editor )\r
+ {\r
+ editor.openDialog( this.dialogName );\r
+ },\r
+\r
+ // Dialog commands just open a dialog ui, thus require no undo logic,\r
+ // undo support should dedicate to specific dialog implementation.\r
+ canUndo: false,\r
+\r
+ editorFocus : CKEDITOR.env.ie || CKEDITOR.env.webkit\r
+ };\r
+\r
+ (function()\r
+ {\r
+ var notEmptyRegex = /^([a]|[^a])+$/,\r
+ integerRegex = /^\d*$/,\r
+ numberRegex = /^\d*(?:\.\d+)?$/;\r
+\r
+ CKEDITOR.VALIDATE_OR = 1;\r
+ CKEDITOR.VALIDATE_AND = 2;\r
+\r
+ CKEDITOR.dialog.validate =\r
+ {\r
+ functions : function()\r
+ {\r
+ return function()\r
+ {\r
+ /**\r
+ * It's important for validate functions to be able to accept the value\r
+ * as argument in addition to this.getValue(), so that it is possible to\r
+ * combine validate functions together to make more sophisticated\r
+ * validators.\r
+ */\r
+ var value = this && this.getValue ? this.getValue() : arguments[0];\r
+\r
+ var msg = undefined,\r
+ relation = CKEDITOR.VALIDATE_AND,\r
+ functions = [], i;\r
+\r
+ for ( i = 0 ; i < arguments.length ; i++ )\r
+ {\r
+ if ( typeof( arguments[i] ) == 'function' )\r
+ functions.push( arguments[i] );\r
+ else\r
+ break;\r
+ }\r
+\r
+ if ( i < arguments.length && typeof( arguments[i] ) == 'string' )\r
+ {\r
+ msg = arguments[i];\r
+ i++;\r
+ }\r
+\r
+ if ( i < arguments.length && typeof( arguments[i]) == 'number' )\r
+ relation = arguments[i];\r
+\r
+ var passed = ( relation == CKEDITOR.VALIDATE_AND ? true : false );\r
+ for ( i = 0 ; i < functions.length ; i++ )\r
+ {\r
+ if ( relation == CKEDITOR.VALIDATE_AND )\r
+ passed = passed && functions[i]( value );\r
+ else\r
+ passed = passed || functions[i]( value );\r
+ }\r
+\r
+ if ( !passed )\r
+ {\r
+ if ( msg !== undefined )\r
+ alert( msg );\r
+ if ( this && ( this.select || this.focus ) )\r
+ ( this.select || this.focus )();\r
+ return false;\r
+ }\r
+\r
+ return true;\r
+ };\r
+ },\r
+\r
+ regex : function( regex, msg )\r
+ {\r
+ /*\r
+ * Can be greatly shortened by deriving from functions validator if code size\r
+ * turns out to be more important than performance.\r
+ */\r
+ return function()\r
+ {\r
+ var value = this && this.getValue ? this.getValue() : arguments[0];\r
+ if ( !regex.test( value ) )\r
+ {\r
+ if ( msg !== undefined )\r
+ alert( msg );\r
+ if ( this && ( this.select || this.focus ) )\r
+ {\r
+ if ( this.select )\r
+ this.select();\r
+ else\r
+ this.focus();\r
+ }\r
+ return false;\r
+ }\r
+ return true;\r
+ };\r
+ },\r
+\r
+ notEmpty : function( msg )\r
+ {\r
+ return this.regex( notEmptyRegex, msg );\r
+ },\r
+\r
+ integer : function( msg )\r
+ {\r
+ return this.regex( integerRegex, msg );\r
+ },\r
+\r
+ 'number' : function( msg )\r
+ {\r
+ return this.regex( numberRegex, msg );\r
+ },\r
+\r
+ equals : function( value, msg )\r
+ {\r
+ return this.functions( function( val ){ return val == value; }, msg );\r
+ },\r
+\r
+ notEqual : function( value, msg )\r
+ {\r
+ return this.functions( function( val ){ return val != value; }, msg );\r
+ }\r
+ };\r
+\r
+ CKEDITOR.on( 'instanceDestroyed', function( evt )\r
+ {\r
+ // Remove dialog cover on last instance destroy.\r
+ if ( CKEDITOR.tools.isEmpty( CKEDITOR.instances ) )\r
+ {\r
+ var currentTopDialog;\r
+ while ( ( currentTopDialog = CKEDITOR.dialog._.currentTop ) )\r
+ currentTopDialog.hide();\r
+ removeCovers();\r
+ }\r
+\r
+ var dialogs = evt.editor._.storedDialogs;\r
+ for ( var name in dialogs )\r
+ dialogs[ name ].destroy();\r
+\r
+ });\r
+\r
+ })();\r
+\r
+ // Extend the CKEDITOR.editor class with dialog specific functions.\r
+ CKEDITOR.tools.extend( CKEDITOR.editor.prototype,\r
+ /** @lends CKEDITOR.editor.prototype */\r
+ {\r
+ /**\r
+ * Loads and opens a registered dialog.\r
+ * @param {String} dialogName The registered name of the dialog.\r
+ * @param {Function} callback The function to be invoked after dialog instance created.\r
+ * @see CKEDITOR.dialog.add\r
+ * @example\r
+ * CKEDITOR.instances.editor1.openDialog( 'smiley' );\r
+ * @returns {CKEDITOR.dialog} The dialog object corresponding to the dialog displayed. null if the dialog name is not registered.\r
+ */\r
+ openDialog : function( dialogName, callback )\r
+ {\r
+ if ( this.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
+ {\r
+ var selection = this.getSelection();\r
+ selection && selection.lock();\r
+ }\r
+\r
+ var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
+ dialogSkin = this.skin.dialog;\r
+\r
+ if ( CKEDITOR.dialog._.currentTop === null )\r
+ showCover( this );\r
+\r
+ // If the dialogDefinition is already loaded, open it immediately.\r
+ if ( typeof dialogDefinitions == 'function' && dialogSkin._isLoaded )\r
+ {\r
+ var storedDialogs = this._.storedDialogs ||\r
+ ( this._.storedDialogs = {} );\r
+\r
+ var dialog = storedDialogs[ dialogName ] ||\r
+ ( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );\r
+\r
+ callback && callback.call( dialog, dialog );\r
+ dialog.show();\r
+\r
+ return dialog;\r
+ }\r
+ else if ( dialogDefinitions == 'failed' )\r
+ {\r
+ hideCover();\r
+ throw new Error( '[CKEDITOR.dialog.openDialog] Dialog "' + dialogName + '" failed when loading definition.' );\r
+ }\r
+\r
+ var me = this;\r
+\r
+ function onDialogFileLoaded( success )\r
+ {\r
+ var dialogDefinition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
+ skin = me.skin.dialog;\r
+\r
+ // Check if both skin part and definition is loaded.\r
+ if ( !skin._isLoaded || loadDefinition && typeof success == 'undefined' )\r
+ return;\r
+\r
+ // In case of plugin error, mark it as loading failed.\r
+ if ( typeof dialogDefinition != 'function' )\r
+ CKEDITOR.dialog._.dialogDefinitions[ dialogName ] = 'failed';\r
+\r
+ me.openDialog( dialogName, callback );\r
+ }\r
+\r
+ if ( typeof dialogDefinitions == 'string' )\r
+ {\r
+ var loadDefinition = 1;\r
+ CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( dialogDefinitions ), onDialogFileLoaded, null, 0, 1 );\r
+ }\r
+\r
+ CKEDITOR.skins.load( this, 'dialog', onDialogFileLoaded );\r
+\r
+ return null;\r
+ }\r
+ });\r
+})();\r
+\r
+CKEDITOR.plugins.add( 'dialog',\r
+ {\r
+ requires : [ 'dialogui' ]\r
+ });\r
+\r
+// Dialog related configurations.\r
+\r
+/**\r
+ * The color of the dialog background cover. It should be a valid CSS color\r
+ * string.\r
+ * @name CKEDITOR.config.dialog_backgroundCoverColor\r
+ * @type String\r
+ * @default 'white'\r
+ * @example\r
+ * config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)';\r
+ */\r
+\r
+/**\r
+ * The opacity of the dialog background cover. It should be a number within the\r
+ * range [0.0, 1.0].\r
+ * @name CKEDITOR.config.dialog_backgroundCoverOpacity\r
+ * @type Number\r
+ * @default 0.5\r
+ * @example\r
+ * config.dialog_backgroundCoverOpacity = 0.7;\r
+ */\r
+\r
+/**\r
+ * If the dialog has more than one tab, put focus into the first tab as soon as dialog is opened.\r
+ * @name CKEDITOR.config.dialog_startupFocusTab\r
+ * @type Boolean\r
+ * @default false\r
+ * @example\r
+ * config.dialog_startupFocusTab = true;\r
+ */\r
+\r
+/**\r
+ * The distance of magnetic borders used in moving and resizing dialogs,\r
+ * measured in pixels.\r
+ * @name CKEDITOR.config.dialog_magnetDistance\r
+ * @type Number\r
+ * @default 20\r
+ * @example\r
+ * config.dialog_magnetDistance = 30;\r
+ */\r
+\r
+/**\r
+ * The guideline to follow when generating the dialog buttons. There are 3 possible options:\r
+ * <ul>\r
+ * <li>'OS' - the buttons will be displayed in the default order of the user's OS;</li>\r
+ * <li>'ltr' - for Left-To-Right order;</li>\r
+ * <li>'rtl' - for Right-To-Left order.</li>\r
+ * </ul>\r
+ * @name CKEDITOR.config.dialog_buttonsOrder\r
+ * @type String\r
+ * @default 'OS'\r
+ * @since 3.5\r
+ * @example\r
+ * config.dialog_buttonsOrder = 'rtl';\r
+ */\r
+\r
+/**\r
+ * The dialog contents to removed. It's a string composed by dialog name and tab name with a colon between them.\r
+ * Separate each pair with semicolon (see example).\r
+ * <b>Note: All names are case-sensitive.</b>\r
+ * <b>Note: Be cautious when specifying dialog tabs that are mandatory, like "info", dialog functionality might be broken because of this!</b>\r
+ * @name CKEDITOR.config.removeDialogTabs\r
+ * @type String\r
+ * @since 3.5\r
+ * @default ''\r
+ * @example\r
+ * config.removeDialogTabs = 'flash:advanced;image:Link';\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog definition is about to be used to create a dialog into\r
+ * an editor instance. This event makes it possible to customize the definition\r
+ * before creating it.\r
+ * <p>Note that this event is called only the first time a specific dialog is\r
+ * opened. Successive openings will use the cached dialog, and this event will\r
+ * not get fired.</p>\r
+ * @name CKEDITOR#dialogDefinition\r
+ * @event\r
+ * @param {CKEDITOR.dialog.definition} data The dialog defination that\r
+ * is being loaded.\r
+ * @param {CKEDITOR.editor} editor The editor instance that will use the\r
+ * dialog.\r
+ */\r
+\r
+/**\r
+ * Fired when a tab is going to be selected in a dialog\r
+ * @name CKEDITOR.dialog#selectPage\r
+ * @event\r
+ * @param {String} page The id of the page that it's gonna be selected.\r
+ * @param {String} currentPage The id of the current page.\r
+ */\r
+\r
+/**\r
+ * Fired when the user tries to dismiss a dialog\r
+ * @name CKEDITOR.dialog#cancel\r
+ * @event\r
+ * @param {Boolean} hide Whether the event should proceed or not.\r
+ */\r
+\r
+/**\r
+ * Fired when the user tries to confirm a dialog\r
+ * @name CKEDITOR.dialog#ok\r
+ * @event\r
+ * @param {Boolean} hide Whether the event should proceed or not.\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is shown\r
+ * @name CKEDITOR.dialog#show\r
+ * @event\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is shown\r
+ * @name CKEDITOR.editor#dialogShow\r
+ * @event\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is hidden\r
+ * @name CKEDITOR.dialog#hide\r
+ * @event\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is hidden\r
+ * @name CKEDITOR.editor#dialogHide\r
+ * @event\r
+ */\r
+\r
+/**\r
+ * Fired when a dialog is being resized. The event is fired on\r
+ * both the 'CKEDITOR.dialog' object and the dialog instance\r
+ * since 3.5.3, previously it's available only in the global object.\r
+ * @name CKEDITOR.dialog#resize\r
+ * @since 3.5\r
+ * @event\r
+ * @param {CKEDITOR.dialog} dialog The dialog being resized (if\r
+ * it's fired on the dialog itself, this parameter isn't sent).\r
+ * @param {String} skin The skin name.\r
+ * @param {Number} width The new width.\r
+ * @param {Number} height The new height.\r
+ */\r