/*\r
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.html or http://ckeditor.com/license\r
*/\r
\r
\r
(function()\r
{\r
+ var cssLength = CKEDITOR.tools.cssLength;\r
function isTabVisible( tabId )\r
{\r
return !!this._.tabs[ tabId ][ 0 ].$.offsetHeight;\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
+ // Handle dialog element validation state UI changes.\r
+ function handleFieldValidated( isValid, msg )\r
+ {\r
+ var input = this.getInputElement();\r
+ if ( input )\r
+ {\r
+ isValid ? input.removeAttribute( 'aria-invalid' )\r
+ : input.setAttribute( 'aria-invalid', true );\r
+ }\r
+\r
+ if ( !isValid )\r
+ {\r
+ if ( this.select )\r
+ this.select();\r
+ else\r
+ this.focus();\r
+ }\r
+\r
+ msg && alert( msg );\r
+\r
+ this.fire( 'validated', { valid : isValid, msg : msg } );\r
+ }\r
+\r
+ function resetField()\r
+ {\r
+ var input = this.getInputElement();\r
+ input && input.removeAttribute( 'aria-invalid' );\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
CKEDITOR.dialog = function( editor, dialogName )\r
{\r
// Load the dialog definition.\r
- var definition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ];\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
+ tabsToRemove = {},\r
+ i,\r
+ processed;\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 ), defaultDialogDefinition );\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
// functions.\r
definition = new definitionObject( this, definition );\r
\r
-\r
var doc = CKEDITOR.document;\r
\r
var themeBuilt = editor.theme.buildDialog( editor );\r
name : dialogName,\r
contentSize : { width : 0, height : 0 },\r
size : { width : 0, height : 0 },\r
- updateSize : false,\r
contents : {},\r
buttons : {},\r
accessKeyMap : {},\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
- this.parts.dialog.setStyles(\r
- {\r
+ var startStyles = {\r
position : CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed',\r
top : 0,\r
- left: 0,\r
visibility : 'hidden'\r
- });\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
definition : definition\r
}\r
, editor ).definition;\r
+\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
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
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
+ var retval = item.validate( this ),\r
+ invalid = typeof ( retval ) == 'string' || retval === false;\r
\r
- if ( isValid === false )\r
+ if ( invalid )\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
+ handleFieldValidated.call( item, !invalid, typeof retval == 'string' ? retval : undefined );\r
+ return invalid;\r
}\r
});\r
}, this, null, 0 );\r
{\r
if ( this.fire( 'cancel', { hide : true } ).hide !== false )\r
this.hide();\r
+ evt.data.preventDefault();\r
}, this );\r
\r
- function changeFocus( forward )\r
+ // Sort focus list according to tab order definitions.\r
+ function setupFocus()\r
{\r
- var focusList = me._.focusList,\r
- offset = forward ? 1 : -1;\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( offset )\r
+ {\r
+ var focusList = me._.focusList;\r
+ offset = offset || 0;\r
+\r
if ( focusList.length < 1 )\r
return;\r
\r
- var startIndex = ( me._.currentFocusIndex + offset + focusList.length ) % focusList.length,\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
+ while ( offset && !focusList[ currentIndex ].isFocusable() )\r
{\r
currentIndex = ( currentIndex + offset + focusList.length ) % focusList.length;\r
if ( currentIndex == startIndex )\r
break;\r
}\r
+\r
focusList[ currentIndex ].focus();\r
\r
// Select whole field content.\r
focusList[ currentIndex ].select();\r
}\r
\r
- var processed;\r
+ this.changeFocus = changeFocus;\r
+\r
\r
function focusKeydownHandler( evt )\r
{\r
if ( me != CKEDITOR.dialog._.currentTop )\r
return;\r
\r
- var keystroke = evt.data.getKeystroke();\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
else\r
{\r
// Change the focus of inputs.\r
- changeFocus( !shiftPressed );\r
+ changeFocus( shiftPressed ? -1 : 1 );\r
}\r
\r
processed = 1;\r
}\r
- else if ( keystroke == CKEDITOR.ALT + 121 && !me._.tabBarMode )\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
else if ( ( keystroke == 37 || keystroke == 39 ) && me._.tabBarMode )\r
{\r
// Arrow keys - used for changing tabs.\r
- nextId = ( keystroke == 37 ? getPreviousVisibleTab.call( me ) : getNextVisibleTab.call( me ) );\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( 1 );\r
+ processed = 1;\r
+ }\r
\r
if ( processed )\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
- CKEDITOR.document.on( 'keydown', focusKeydownHandler, this, null, 0 );\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
- CKEDITOR.document.on( 'keypress', focusKeyPressHandler, this );\r
+ dialogElement.on( 'keypress', focusKeyPressHandler, this );\r
\r
- if ( CKEDITOR.env.ie6Compat )\r
- {\r
- var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
- coverDoc.on( 'keydown', focusKeydownHandler, this, null, 0 );\r
- }\r
} );\r
this.on( 'hide', function()\r
{\r
- CKEDITOR.document.removeListener( 'keydown', focusKeydownHandler );\r
+ dialogElement.removeListener( 'keydown', focusKeydownHandler );\r
if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\r
- CKEDITOR.document.removeListener( 'keypress', focusKeyPressHandler );\r
+ dialogElement.removeListener( 'keypress', focusKeyPressHandler );\r
+\r
+ // Reset fields state when closing dialog.\r
+ iterContents( function( item ) { resetField.apply( item ); } );\r
} );\r
this.on( 'iframeAdded', function( evt )\r
{\r
// Auto-focus logic in dialog.\r
this.on( 'show', function()\r
{\r
- if ( !this._.hasFocus )\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
- changeFocus( true );\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( 1 );\r
\r
/*\r
* IE BUG: If the initial focus went into a non-text element (e.g. button),\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
- this.addPage( definition.contents[i] );\r
+ for ( i = 0 ; i < definition.contents.length ; i++ )\r
+ {\r
+ var page = definition.contents[i];\r
+ page && this.addPage( page );\r
+ }\r
\r
- var tabRegex = /cke_dialog_tab(\s|$|_)/,\r
- tabOuterRegex = /cke_dialog_tab(\s|$)/;\r
- this.parts['tabs'].on( 'click', function( evt )\r
+ this.parts[ 'tabs' ].on( 'click', function( evt )\r
{\r
- var target = evt.data.getTarget(), firstNode = target, id, page;\r
-\r
+ var target = evt.data.getTarget();\r
// If we aren't inside a tab, bail out.\r
- if ( !( tabRegex.test( target.$.className ) || target.getName() == 'a' ) )\r
- return;\r
-\r
- // Find the outer <td> container of the tab.\r
- id = target.$.id.substr( 0, target.$.id.lastIndexOf( '_' ) );\r
- this.selectPage( id );\r
-\r
- if ( this._.tabBarMode )\r
+ if ( target.hasClass( 'cke_dialog_tab' ) )\r
{\r
- this._.tabBarMode = false;\r
- this._.currentFocusIndex = -1;\r
- changeFocus( true );\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
- evt.data.preventDefault();\r
+ if ( this._.tabBarMode )\r
+ {\r
+ this._.tabBarMode = false;\r
+ this._.currentFocusIndex = -1;\r
+ changeFocus( 1 );\r
+ }\r
+ evt.data.preventDefault();\r
+ }\r
}, this );\r
\r
// Insert buttons.\r
\r
for ( i = 0 ; i < buttons.length ; i++ )\r
this._.buttons[ buttons[i].id ] = buttons[i];\r
-\r
- CKEDITOR.skins.load( editor, 'dialog' );\r
};\r
\r
// Focusable interface. Use it via dialog.addFocusable.\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
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
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
- this._.updateSize = true;\r
};\r
})(),\r
\r
*/\r
getSize : function()\r
{\r
- if ( !this._.updateSize )\r
- return this._.size;\r
var element = this._.element.getFirst();\r
- var size = this._.size = { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0};\r
-\r
- // If either the offsetWidth or offsetHeight is 0, the element isn't visible.\r
- this._.updateSize = !size.width || !size.height;\r
-\r
- return size;\r
+ return { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0};\r
},\r
\r
/**\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 )\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
+ 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
y += scrollPosition.y;\r
}\r
\r
- element.setStyles(\r
- {\r
- 'left' : ( x > 0 ? x : 0 ) + 'px',\r
- 'top' : ( y > 0 ? y : 0 ) + 'px'\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
show : function()\r
{\r
- var editor = this._.editor;\r
- if ( editor.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
- {\r
- var selection = editor.getSelection();\r
- selection && selection.lock();\r
- }\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
- return;\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
\r
// First, set the dialog to an appropriate size.\r
- this.resize( definition.minWidth, definition.minHeight );\r
-\r
- // Select the first tab by default.\r
- this.selectPage( this.definition.contents[0].id );\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
- addCover( this._.editor );\r
-\r
- element.on( 'keydown', accessKeyDownHandler );\r
- element.on( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );\r
+ showCover( this._.editor );\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
CKEDITOR.dialog._.currentTop = this;\r
}\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
// Register the Esc hotkeys.\r
registerAccessKey( this, this, '\x1b', null, function()\r
{\r
- this.getButton( 'cancel' ) && this.getButton( 'cancel' ).click();\r
+ var button = this.getButton( 'cancel' );\r
+ // If there's a Cancel button, click it, else just fire the cancel event and hide the dialog\r
+ if ( button )\r
+ button.click();\r
+ else\r
+ {\r
+ if ( this.fire( 'cancel', { hide : true } ).hide !== false )\r
+ this.hide();\r
+ }\r
} );\r
\r
// Reset the hasFocus state.\r
this._.hasFocus = false;\r
\r
- // Rearrange the dialog to the middle of the window.\r
CKEDITOR.tools.setTimeout( function()\r
{\r
- var viewSize = CKEDITOR.document.getWindow().getViewPaneSize();\r
- var dialogSize = this.getSize();\r
-\r
- // We're using definition size for initial position because of\r
- // offten corrupted data in offsetWidth at this point. (#4084)\r
- this.move( ( viewSize.width - definition.minWidth ) / 2, ( viewSize.height - dialogSize.height ) / 2 );\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
},\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
for ( var i in this._.contents )\r
{\r
for ( var j in this._.contents[i] )\r
- fn( this._.contents[i][j]);\r
+ fn.call( this, this._.contents[i][j] );\r
}\r
return this;\r
},\r
*/\r
reset : (function()\r
{\r
- var fn = function( widget ){ if ( widget.reset ) widget.reset(); };\r
+ var fn = function( widget ){ if ( widget.reset ) widget.reset( 1 ); };\r
return function(){ this.foreach( fn ); return this; };\r
})(),\r
\r
+\r
+ /**\r
+ * Calls the {@link CKEDITOR.dialog.definition.uiElement#setup} method of each of the UI elements, with the arguments passed through it.\r
+ * It is usually being called when the dialog is opened, to put the initial value inside the field.\r
+ * @example\r
+ * dialogObj.setupContent();\r
+ * @example\r
+ * var timestamp = ( new Date() ).valueOf();\r
+ * dialogObj.setupContent( timestamp );\r
+ */\r
setupContent : function()\r
{\r
var args = arguments;\r
});\r
},\r
\r
+ /**\r
+ * Calls the {@link CKEDITOR.dialog.definition.uiElement#commit} method of each of the UI elements, with the arguments passed through it.\r
+ * It is usually being called when the user confirms the dialog, to process the values.\r
+ * @example\r
+ * dialogObj.commitContent();\r
+ * @example\r
+ * var timestamp = ( new Date() ).valueOf();\r
+ * dialogObj.commitContent( timestamp );\r
+ */\r
commitContent : function()\r
{\r
var args = arguments;\r
this.foreach( function( widget )\r
{\r
+ // Make sure IE triggers "change" event on last focused input before closing the dialog. (#7915)\r
+ if ( CKEDITOR.env.ie && this._.currentFocusIndex == widget.focusIndex )\r
+ widget.getInputElement().$.blur();\r
+\r
if ( widget.commit )\r
widget.commit.apply( widget, args );\r
});\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
-\r
- // Remove the dialog's element from the root document.\r
var element = this._.element;\r
- if ( !element.getParent() )\r
- return;\r
-\r
- element.remove();\r
+ element.setStyle( 'display', 'none' );\r
this.parts.dialog.setStyle( 'visibility', 'hidden' );\r
-\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
- removeCover();\r
+ hideCover();\r
else\r
{\r
var parentElement = this._.parentDialog.getElement().getFirst();\r
else\r
CKEDITOR.dialog._.currentZIndex -= 10;\r
\r
-\r
+ delete this._.parentDialog;\r
// Reset the initial values of the dialog.\r
this.foreach( function( contentObj ) { contentObj.resetInitValue && contentObj.resetInitValue(); } );\r
},\r
children : contents.elements,\r
expand : !!contents.expand,\r
padding : contents.padding,\r
- style : contents.style || 'width: 100%;' + ( CKEDITOR.env.ie6Compat ? '' : 'height: 100%;' )\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
- var tab = CKEDITOR.dom.element.createFromHtml( [\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="', contents.id + '_', CKEDITOR.tools.getNextNumber(), '"' +\r
- ' href="javascript:void(0)"',\r
- ' hidefocus="true">',\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
- // If only a single page exist, a different style is used in the central pane.\r
- if ( this._.pageCount === 0 )\r
- this.parts.dialog.addClass( 'cke_single_page' );\r
- else\r
- this.parts.dialog.removeClass( 'cke_single_page' );\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
- this._.pageCount++;\r
+ !contents.hidden && this._.pageCount++;\r
this._.lastTab = tab;\r
+ this.updateStyle();\r
\r
var contentMap = this._.contents[ contents.id ] = {},\r
cursor,\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
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
- var selected = this._.tabs[id];\r
- selected[0].addClass( 'cke_dialog_tab_selected' );\r
- selected[1].show();\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
hidePage : function( id )\r
{\r
var tab = this._.tabs[id] && this._.tabs[id][0];\r
- if ( !tab )\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
if ( !tab )\r
return;\r
tab.show();\r
+ this._.pageCount++;\r
+ this.updateStyle();\r
},\r
\r
/**\r
* @param {String} pageId id of dialog page.\r
* @param {String} elementId id of UI element.\r
* @example\r
+ * dialogObj.getContentElement( 'tabId', 'elementId' ).setValue( 'Example' );\r
* @returns {CKEDITOR.ui.dialog.uiElement} The dialog UI element.\r
*/\r
getContentElement : function( pageId, elementId )\r
* @param {String} pageId id of dialog page.\r
* @param {String} elementId id of UI element.\r
* @example\r
+ * alert( dialogObj.getValueOf( 'tabId', 'elementId' ) );\r
* @returns {Object} The value of the UI element.\r
*/\r
getValueOf : function( pageId, elementId )\r
* @param {String} elementId id of the UI element.\r
* @param {Object} value The new value of the UI element.\r
* @example\r
+ * dialogObj.setValueOf( 'tabId', 'elementId', 'Example' );\r
*/\r
setValueOf : function( pageId, elementId, value )\r
{\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.dialogDefinition}.\r
+ * return an object conforming to {@link CKEDITOR.dialog.definition}.\r
+ * @see CKEDITOR.dialog.definition\r
* @example\r
- * @see CKEDITOR.dialog.dialogDefinition\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
\r
var defaultDialogDefinition =\r
{\r
- resizable : CKEDITOR.DIALOG_RESIZE_NONE,\r
+ resizable : CKEDITOR.DIALOG_RESIZE_BOTH,\r
minWidth : 600,\r
minHeight : 400,\r
buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]\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.dialogDefinitionObject\r
- * @extends CKEDITOR.dialog.dialogDefinition\r
+ * @name CKEDITOR.dialog.definitionObject\r
+ * @extends CKEDITOR.dialog.definition\r
* @example\r
* CKEDITOR.on( 'dialogDefinition', function( evt )\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 ] = new contentObject( dialog, content );\r
+ contents[ i ] = content && new contentObject( dialog, content );\r
\r
CKEDITOR.tools.extend( this, dialogDefinition );\r
};\r
\r
definitionObject.prototype =\r
- /** @lends CKEDITOR.dialog.dialogDefinitionObject.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.contentDefinition} The content definition\r
+ * @returns {CKEDITOR.dialog.definition.content} The content definition\r
* matching id.\r
*/\r
getContents : function( id )\r
/**\r
* Gets a button definition.\r
* @param {String} id The id of the button definition.\r
- * @returns {CKEDITOR.dialog.buttonDefinition} The button definition\r
+ * @returns {CKEDITOR.dialog.definition.button} The button definition\r
* matching id.\r
*/\r
getButton : function( id )\r
\r
/**\r
* Adds a content definition object under this dialog definition.\r
- * @param {CKEDITOR.dialog.contentDefinition} contentDefinition The\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.contentDefinition} The inserted content\r
+ * @returns {CKEDITOR.dialog.definition.content} The inserted content\r
* definition.\r
*/\r
addContents : function( contentDefinition, nextSiblingId )\r
\r
/**\r
* Adds a button definition object under this dialog definition.\r
- * @param {CKEDITOR.dialog.buttonDefinition} buttonDefinition The\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.buttonDefinition} The inserted button\r
+ * @returns {CKEDITOR.dialog.definition.button} The inserted button\r
* definition.\r
*/\r
addButton : function( buttonDefinition, nextSiblingId )\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.contentDefinition} The removed content\r
+ * @returns {CKEDITOR.dialog.definition.content} The removed content\r
* definition.\r
*/\r
removeContents : function( id )\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.buttonDefinition} The removed button\r
+ * @returns {CKEDITOR.dialog.definition.button} The removed button\r
* definition.\r
*/\r
removeButton : function( id )\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.dialogDefinitionObject.\r
+ * CKEDITOR.dialog.definitionObject.\r
* @constructor\r
- * @name CKEDITOR.dialog.contentDefinitionObject\r
+ * @name CKEDITOR.dialog.definition.contentObject\r
* @example\r
* CKEDITOR.on( 'dialogDefinition', function( evt )\r
* {\r
}\r
\r
contentObject.prototype =\r
- /** @lends CKEDITOR.dialog.contentDefinitionObject.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.uiElementDefinition}\r
+ * @returns {CKEDITOR.dialog.definition.uiElement}\r
*/\r
get : function( id )\r
{\r
\r
/**\r
* Adds a UI element definition to the content definition.\r
- * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition The\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.uiElementDefinition} The element\r
+ * @returns {CKEDITOR.dialog.definition.uiElement} The element\r
* definition inserted.\r
*/\r
add : function( elementDefinition, nextSiblingId )\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.uiElementDefinition} The element\r
+ * @returns {CKEDITOR.dialog.definition.uiElement} The element\r
* definition removed.\r
* @example\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 + margins[1];\r
+ realX = viewPaneSize.width - dialogSize.width + ( editor.lang.dir == 'rtl' ? 0 : margins[1] );\r
else\r
realX = abstractDialogCoords.x;\r
\r
else\r
realY = abstractDialogCoords.y;\r
\r
- dialog.move( realX, realY );\r
+ dialog.move( realX, realY, 1 );\r
\r
evt.data.preventDefault();\r
}\r
\r
if ( CKEDITOR.env.ie6Compat )\r
{\r
- var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();\r
coverDoc.removeListener( 'mousemove', mouseMoveHandler );\r
coverDoc.removeListener( 'mouseup', mouseUpHandler );\r
}\r
\r
dialog.parts.title.on( 'mousedown', function( evt )\r
{\r
- dialog._.updateSize = true;\r
-\r
lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };\r
\r
CKEDITOR.document.on( 'mousemove', mouseMoveHandler );\r
\r
if ( CKEDITOR.env.ie6Compat )\r
{\r
- var coverDoc = coverElement.getChild( 0 ).getFrameDocument();\r
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();\r
coverDoc.on( 'mousemove', mouseMoveHandler );\r
coverDoc.on( 'mouseup', mouseUpHandler );\r
}\r
\r
function initResizeHandles( dialog )\r
{\r
- var definition = dialog.definition,\r
- minWidth = definition.minWidth || 0,\r
- minHeight = definition.minHeight || 0,\r
- resizable = definition.resizable,\r
- margins = dialog.getParentEditor().skin.margins || [ 0, 0, 0, 0 ];\r
+ var def = dialog.definition,\r
+ resizable = def.resizable;\r
\r
- function topSizer( coords, dy )\r
- {\r
- coords.y += dy;\r
- }\r
+ if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE )\r
+ return;\r
\r
- function rightSizer( coords, dx )\r
- {\r
- coords.x2 += dx;\r
- }\r
+ var editor = dialog.getParentEditor();\r
+ var wrapperWidth, wrapperHeight,\r
+ viewSize, origin, startSize,\r
+ dialogCover;\r
\r
- function bottomSizer( coords, dy )\r
+ var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )\r
{\r
- coords.y2 += dy;\r
- }\r
+ startSize = dialog.getSize();\r
\r
- function leftSizer( coords, dx )\r
- {\r
- coords.x += dx;\r
- }\r
+ var content = dialog.parts.contents,\r
+ iframeDialog = content.$.getElementsByTagName( 'iframe' ).length;\r
\r
- var lastCoords = null,\r
- abstractDialogCoords = null,\r
- magnetDistance = dialog._.editor.config.magnetDistance,\r
- parts = [ 'tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br' ];\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
- function mouseDownHandler( evt )\r
- {\r
- var partName = evt.listenerData.part, size = dialog.getSize();\r
- abstractDialogCoords = dialog.getPosition();\r
- CKEDITOR.tools.extend( abstractDialogCoords,\r
- {\r
- x2 : abstractDialogCoords.x + size.width,\r
- y2 : abstractDialogCoords.y + size.height\r
- } );\r
- lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };\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
- CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );\r
- CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );\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 = coverElement.getChild( 0 ).getFrameDocument();\r
- coverDoc.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );\r
- coverDoc.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );\r
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();\r
+ coverDoc.on( 'mousemove', mouseMoveHandler );\r
+ coverDoc.on( 'mouseup', mouseUpHandler );\r
}\r
\r
- evt.data.preventDefault();\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 x = evt.data.$.screenX,\r
- y = evt.data.$.screenY,\r
- dx = x - lastCoords.x,\r
- dy = y - lastCoords.y,\r
- viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),\r
- partName = evt.listenerData.part;\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 ( partName.search( 't' ) != -1 )\r
- topSizer( abstractDialogCoords, dy );\r
- if ( partName.search( 'l' ) != -1 )\r
- leftSizer( abstractDialogCoords, dx );\r
- if ( partName.search( 'b' ) != -1 )\r
- bottomSizer( abstractDialogCoords, dy );\r
- if ( partName.search( 'r' ) != -1 )\r
- rightSizer( abstractDialogCoords, dx );\r
+ if ( position.y + internalHeight > viewSize.height )\r
+ internalHeight = viewSize.height - position.y;\r
\r
- lastCoords = { x : x, y : y };\r
+ if ( ( rtl ? right : position.x ) + internalWidth > viewSize.width )\r
+ internalWidth = viewSize.width - ( rtl ? right : position.x );\r
\r
- var realX, realY, realX2, realY2;\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 ( abstractDialogCoords.x + margins[3] < magnetDistance )\r
- realX = - margins[3];\r
- else if ( partName.search( 'l' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )\r
- realX = abstractDialogCoords.x2 - minWidth;\r
- else\r
- realX = abstractDialogCoords.x;\r
-\r
- if ( abstractDialogCoords.y + margins[0] < magnetDistance )\r
- realY = - margins[0];\r
- else if ( partName.search( 't' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )\r
- realY = abstractDialogCoords.y2 - minHeight;\r
- else\r
- realY = abstractDialogCoords.y;\r
+ if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )\r
+ height = Math.max( def.minHeight || 0, internalHeight - wrapperHeight );\r
\r
- if ( abstractDialogCoords.x2 - margins[1] > viewPaneSize.width - magnetDistance )\r
- realX2 = viewPaneSize.width + margins[1] ;\r
- else if ( partName.search( 'r' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )\r
- realX2 = abstractDialogCoords.x + minWidth;\r
- else\r
- realX2 = abstractDialogCoords.x2;\r
-\r
- if ( abstractDialogCoords.y2 - margins[2] > viewPaneSize.height - magnetDistance )\r
- realY2= viewPaneSize.height + margins[2] ;\r
- else if ( partName.search( 'b' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )\r
- realY2 = abstractDialogCoords.y + minHeight;\r
- else\r
- realY2 = abstractDialogCoords.y2 ;\r
+ dialog.resize( width, height );\r
\r
- dialog.move( realX, realY );\r
- dialog.resize( realX2 - realX, realY2 - realY );\r
+ if ( !dialog._.moved )\r
+ dialog.layout();\r
\r
evt.data.preventDefault();\r
}\r
\r
- function mouseUpHandler( evt )\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 = coverElement.getChild( 0 ).getFrameDocument();\r
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();\r
coverDoc.removeListener( 'mouseup', mouseUpHandler );\r
coverDoc.removeListener( 'mousemove', mouseMoveHandler );\r
}\r
}\r
-\r
-// TODO : Simplify the resize logic, having just a single resize grip <div>.\r
-// var widthTest = /[lr]/,\r
-// heightTest = /[tb]/;\r
-// for ( var i = 0 ; i < parts.length ; i++ )\r
-// {\r
-// var element = dialog.parts[ parts[i] + '_resize' ];\r
-// if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE ||\r
-// resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT && widthTest.test( parts[i] ) ||\r
-// resizable == CKEDITOR.DIALOG_RESIZE_WIDTH && heightTest.test( parts[i] ) )\r
-// {\r
-// element.hide();\r
-// continue;\r
-// }\r
-// element.on( 'mousedown', mouseDownHandler, dialog, { part : parts[i] } );\r
-// }\r
}\r
\r
var resizeCover;\r
- var coverElement;\r
+ // Caching resuable covers and allowing only one cover\r
+ // on screen.\r
+ var covers = {},\r
+ currentCover;\r
+\r
+ function cancelEvent( ev )\r
+ {\r
+ ev.data.preventDefault(1);\r
+ }\r
\r
- var addCover = function( editor )\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 backgroundColorStyle = editor.config.dialog_backgroundCoverColor || 'white';\r
-\r
var html = [\r
- '<div style="position: ', ( CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed' ),\r
- '; z-index: ', editor.config.baseFloatZIndex,\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
- '" id="cke_dialog_background_cover">'\r
+ '" class="cke_dialog_background_cover">'\r
];\r
\r
-\r
if ( CKEDITOR.env.ie6Compat )\r
{\r
// Support for custom document.domain in IE.\r
html.push( '</div>' );\r
\r
coverElement = CKEDITOR.dom.element.createFromHtml( html.join( '' ) );\r
- }\r
+ coverElement.setOpacity( backgroundCoverOpacity != undefined ? backgroundCoverOpacity : 0.5 );\r
\r
- var element = coverElement;\r
+ coverElement.on( 'keydown', cancelEvent );\r
+ coverElement.on( 'keypress', cancelEvent );\r
+ coverElement.on( 'keyup', cancelEvent );\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
- element.setStyles(\r
+ coverElement.setStyles(\r
{\r
width : size.width + 'px',\r
height : size.height + 'px'\r
{\r
var pos = win.getScrollPosition(),\r
cursor = CKEDITOR.dialog._.currentTop;\r
- element.setStyles(\r
+ coverElement.setStyles(\r
{\r
left : pos.x + 'px',\r
top : pos.y + 'px'\r
});\r
\r
- do\r
+ if ( cursor )\r
{\r
- var dialogPos = cursor.getPosition();\r
- cursor.move( dialogPos.x, dialogPos.y );\r
- } while ( ( cursor = cursor._.parentDialog ) );\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
}, 0 );\r
scrollFunc();\r
}\r
+ }\r
\r
- var opacity = editor.config.dialog_backgroundCoverOpacity;\r
- element.setOpacity( typeof opacity != 'undefined' ? opacity : 0.5 );\r
-\r
- element.appendTo( CKEDITOR.document.getBody() );\r
- };\r
-\r
- var removeCover = function()\r
+ function hideCover()\r
{\r
- if ( !coverElement )\r
+ if ( !currentCover )\r
return;\r
\r
var win = CKEDITOR.document.getWindow();\r
- coverElement.remove();\r
+ currentCover.hide();\r
win.removeListener( 'resize', resizeCover );\r
\r
if ( CKEDITOR.env.ie6Compat )\r
}, 0 );\r
}\r
resizeCover = null;\r
- };\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
* The base class of all dialog UI elements.\r
* @constructor\r
* @param {CKEDITOR.dialog} dialog Parent dialog object.\r
- * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition Element\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
html = [ '<', nodeName, ' ' ],\r
styles = ( stylesArg && stylesArg.call ? stylesArg( elementDefinition ) : stylesArg ) || {},\r
attributes = ( attributesArg && attributesArg.call ? attributesArg( elementDefinition ) : attributesArg ) || {},\r
- innerHTML = ( contentsArg && contentsArg.call ? contentsArg( dialog, elementDefinition ) : contentsArg ) || '',\r
- domId = this.domId = attributes.id || CKEDITOR.tools.getNextNumber() + '_uiElement',\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
classes[ 'cke_dialog_ui_' + elementDefinition.type ] = 1;\r
if ( elementDefinition.className )\r
classes[ elementDefinition.className ] = 1;\r
+ if ( elementDefinition.disabled )\r
+ classes[ 'cke_disabled' ] = 1;\r
+\r
var attributeClasses = ( attributes['class'] && attributes['class'].split ) ? attributes['class'].split( ' ' ) : [];\r
for ( i = 0 ; i < attributeClasses.length ; i++ )\r
{\r
\r
// Write the inline CSS styles.\r
var styleStr = ( elementDefinition.style || '' ).split( ';' );\r
+\r
+ // Element alignment support.\r
+ if ( elementDefinition.align )\r
+ {\r
+ var align = elementDefinition.align;\r
+ styles[ 'margin-left' ] = align == 'left' ? 0 : 'auto';\r
+ styles[ 'margin-right' ] = align == 'right' ? 0 : 'auto';\r
+ }\r
+\r
for ( i in styles )\r
styleStr.push( i + ':' + styles[i] );\r
if ( elementDefinition.hidden )\r
if ( typeof( elementDefinition.isChanged ) == 'function' )\r
this.isChanged = elementDefinition.isChanged;\r
\r
+ // Overload 'get(set)Value' on definition.\r
+ if ( typeof( elementDefinition.setValue ) == 'function' )\r
+ {\r
+ this.setValue = CKEDITOR.tools.override( this.setValue, function( org )\r
+ {\r
+ return function( val ){ org.call( this, elementDefinition.setValue.call( this, val ) ); };\r
+ } );\r
+ }\r
+\r
+ if ( typeof( elementDefinition.getValue ) == 'function' )\r
+ {\r
+ this.getValue = CKEDITOR.tools.override( this.getValue, function( org )\r
+ {\r
+ return function(){ return elementDefinition.getValue.call( this, org.call( this ) ); };\r
+ } );\r
+ }\r
+\r
// Add events.\r
CKEDITOR.event.implementOn( this );\r
\r
var me = this;\r
dialog.on( 'load', function()\r
{\r
- if ( me.getInputElement() )\r
+ var input = me.getInputElement();\r
+ if ( input )\r
{\r
- me.getInputElement().on( 'focus', function()\r
+ var focusClass = me.type in { 'checkbox' : 1, 'ratio' : 1 } && CKEDITOR.env.ie && CKEDITOR.env.version < 8 ? 'cke_dialog_ui_focused' : '';\r
+ input.on( 'focus', function()\r
{\r
dialog._.tabBarMode = false;\r
dialog._.hasFocus = true;\r
me.fire( 'focus' );\r
- }, me );\r
+ focusClass && this.addClass( focusClass );\r
+\r
+ });\r
+\r
+ input.on( 'blur', function()\r
+ {\r
+ me.fire( 'blur' );\r
+ focusClass && this.removeClass( focusClass );\r
+ });\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
* objects in childObjList.\r
* @param {Array} htmlList\r
* Array of HTML code that this element will output to.\r
- * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition\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
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, '" ' );\r
+ html.push( '<td class="', className, '" role="presentation" ' );\r
if ( widths )\r
{\r
if ( widths[i] )\r
- styles.push( 'width:' + CKEDITOR.tools.cssLength( 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:' + CKEDITOR.tools.cssLength( height ) );\r
+ styles.push( 'height:' + cssLength( height ) );\r
if ( elementDefinition && elementDefinition.padding != undefined )\r
- styles.push( 'padding:' + CKEDITOR.tools.cssLength( elementDefinition.padding ) );\r
+ styles.push( 'padding:' + cssLength( elementDefinition.padding ) );\r
+ // In IE Quirks alignment has to be done on table cells. (#7324)\r
+ if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && children[ i ].align )\r
+ styles.push( 'text-align:' + children[ i ].align );\r
if ( styles.length > 0 )\r
html.push( 'style="' + styles.join('; ') + '" ' );\r
html.push( '>', childHtmlList[i], '</td>' );\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
htmlList,\r
'table',\r
styles,\r
- elementDefinition && elementDefinition.align && { align : elementDefinition.align } || null,\r
+ attribs,\r
innerHTML );\r
},\r
\r
* objects in childObjList.\r
* @param {Array} htmlList\r
* Array of HTML code that this element will output to.\r
- * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition\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
*/\r
vbox : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )\r
{\r
- if (arguments.length < 3 )\r
+ if ( arguments.length < 3 )\r
return;\r
\r
this._ || ( this._ = {} );\r
/** @ignore */\r
var innerHTML = function()\r
{\r
- var html = [ '<table cellspacing="0" border="0" ' ];\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:' + CKEDITOR.tools.cssLength( width || '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
for ( var i = 0 ; i < childHtmlList.length ; i++ )\r
{\r
var styles = [];\r
- html.push( '<tr><td ' );\r
+ html.push( '<tr><td role="presentation" ' );\r
if ( width )\r
- styles.push( 'width:' + CKEDITOR.tools.cssLength( width || '100%' ) );\r
+ styles.push( 'width:' + cssLength( width || '100%' ) );\r
if ( heights )\r
- styles.push( 'height:' + CKEDITOR.tools.cssLength( heights[i] ) );\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:' + CKEDITOR.tools.cssLength( elementDefinition.padding ) );\r
+ styles.push( 'padding:' + cssLength( elementDefinition.padding ) );\r
+ // In IE Quirks alignment has to be done on table cells. (#7324)\r
+ if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && children[ i ].align )\r
+ styles.push( 'text-align:' + children[ i ].align );\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
html.push( '</tbody></table>' );\r
return html.join( '' );\r
};\r
- CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition || { type : 'vbox' }, htmlList, 'div', null, null, innerHTML );\r
+ CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition || { type : 'vbox' }, htmlList, 'div', null, { role : 'presentation' }, innerHTML );\r
}\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 )\r
+ setValue : function( value, noChangeEvent )\r
{\r
this.getInputElement().setValue( value );\r
- this.fire( 'change', { value : value } );\r
+ !noChangeEvent && this.fire( 'change', { value : value } );\r
return this;\r
},\r
\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.uiElementDefinition} definition The UI element\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
disable : function()\r
{\r
- var element = this.getInputElement();\r
- element.setAttribute( 'disabled', 'true' );\r
+ var element = this.getElement(),\r
+ input = this.getInputElement();\r
+ input.setAttribute( 'disabled', 'true' );\r
element.addClass( 'cke_disabled' );\r
},\r
\r
*/\r
enable : function()\r
{\r
- var element = this.getInputElement();\r
- element.removeAttribute( 'disabled' );\r
+ var element = this.getElement(),\r
+ input = this.getInputElement();\r
+ input.removeAttribute( 'disabled' );\r
element.removeClass( 'cke_disabled' );\r
},\r
\r
*/\r
isEnabled : function()\r
{\r
- return !this.getInputElement().getAttribute( 'disabled' );\r
+ return !this.getElement().hasClass( 'cke_disabled' );\r
},\r
\r
/**\r
/** @ignore */\r
exec : function( editor )\r
{\r
- editor.openDialog( this.dialogName );\r
+ // Special treatment for Opera. (#8031)\r
+ CKEDITOR.env.opera ?\r
+ CKEDITOR.tools.setTimeout( function() { editor.openDialog( this.dialogName ); }, 0, this )\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
+ 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
+ numberRegex = /^\d*(?:\.\d+)?$/,\r
+ htmlLengthRegex = /^(((\d*(\.\d+))|(\d*))(px|\%)?)?$/,\r
+ cssLengthRegex = /^(((\d*(\.\d+))|(\d*))(px|em|ex|in|cm|mm|pt|pc|\%)?)?$/i,\r
+ inlineStyleRegex = /^(\s*[\w-]+\s*:\s*[^:;]+(?:;|$))*$/;\r
\r
CKEDITOR.VALIDATE_OR = 1;\r
CKEDITOR.VALIDATE_AND = 2;\r
{\r
functions : function()\r
{\r
+ var args = arguments;\r
return function()\r
{\r
/**\r
* combine validate functions together to make more sophisticated\r
* validators.\r
*/\r
- var value = this && this.getValue ? this.getValue() : arguments[0];\r
+ var value = this && this.getValue ? this.getValue() : args[ 0 ];\r
\r
var msg = undefined,\r
relation = CKEDITOR.VALIDATE_AND,\r
functions = [], i;\r
\r
- for ( i = 0 ; i < arguments.length ; i++ )\r
+ for ( i = 0 ; i < args.length ; i++ )\r
{\r
- if ( typeof( arguments[i] ) == 'function' )\r
- functions.push( arguments[i] );\r
+ if ( typeof( args[i] ) == 'function' )\r
+ functions.push( args[i] );\r
else\r
break;\r
}\r
\r
- if ( i < arguments.length && typeof( arguments[i] ) == 'string' )\r
+ if ( i < args.length && typeof( args[i] ) == 'string' )\r
{\r
- msg = arguments[i];\r
+ msg = args[i];\r
i++;\r
}\r
\r
- if ( i < arguments.length && typeof( arguments[i]) == 'number' )\r
- relation = arguments[i];\r
+ if ( i < args.length && typeof( args[i]) == 'number' )\r
+ relation = args[i];\r
\r
var passed = ( relation == CKEDITOR.VALIDATE_AND ? true : false );\r
for ( i = 0 ; i < functions.length ; i++ )\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
+ return !passed ? msg : true;\r
};\r
},\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
+ return !regex.test( value ) ? msg : true;\r
};\r
},\r
\r
return this.regex( numberRegex, msg );\r
},\r
\r
+ 'cssLength' : function( msg )\r
+ {\r
+ return this.functions( function( val ){ return cssLengthRegex.test( CKEDITOR.tools.trim( val ) ); }, msg );\r
+ },\r
+\r
+ 'htmlLength' : function( msg )\r
+ {\r
+ return this.functions( function( val ){ return htmlLengthRegex.test( CKEDITOR.tools.trim( val ) ); }, msg );\r
+ },\r
+\r
+ 'inlineStyle' : function( msg )\r
+ {\r
+ return this.functions( function( val ){ return inlineStyleRegex.test( CKEDITOR.tools.trim( val ) ); }, msg );\r
+ },\r
+\r
equals : function( value, msg )\r
{\r
return this.functions( function( val ){ return val == value; }, msg );\r
return this.functions( function( val ){ return val != value; }, msg );\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
+ CKEDITOR.on( 'instanceDestroyed', function( evt )\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
+ // Remove dialog cover on last instance destroy.\r
+ if ( CKEDITOR.tools.isEmpty( CKEDITOR.instances ) )\r
{\r
- var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ];\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
- // If the dialogDefinition is already loaded, open it immediately.\r
- if ( typeof dialogDefinitions == 'function' )\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
- var storedDialogs = this._.storedDialogs ||\r
- ( this._.storedDialogs = {} );\r
+ if ( this.mode == 'wysiwyg' && CKEDITOR.env.ie )\r
+ {\r
+ var selection = this.getSelection();\r
+ selection && selection.lock();\r
+ }\r
\r
- var dialog = storedDialogs[ dialogName ] ||\r
- ( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );\r
+ var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
+ dialogSkin = this.skin.dialog;\r
\r
- callback && callback.call( dialog, dialog );\r
- dialog.show();\r
+ if ( CKEDITOR.dialog._.currentTop === null )\r
+ showCover( this );\r
\r
- return dialog;\r
- }\r
- else if ( dialogDefinitions == 'failed' )\r
- throw new Error( '[CKEDITOR.dialog.openDialog] Dialog "' + dialogName + '" failed when loading definition.' );\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
- // Not loaded? Load the .js file first.\r
- var body = CKEDITOR.document.getBody(),\r
- cursor = body.$.style.cursor,\r
- me = this;\r
+ var dialog = storedDialogs[ dialogName ] ||\r
+ ( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );\r
\r
- body.setStyle( 'cursor', 'wait' );\r
- CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( dialogDefinitions ), function()\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 CKEDITOR.dialog._.dialogDefinitions[ dialogName ] != 'function' )\r
- CKEDITOR.dialog._.dialogDefinitions[ dialogName ] = 'failed';\r
+ if ( typeof dialogDefinition != 'function' )\r
+ CKEDITOR.dialog._.dialogDefinitions[ dialogName ] = 'failed';\r
+\r
me.openDialog( dialogName, callback );\r
- body.setStyle( 'cursor', cursor );\r
- } );\r
+ }\r
\r
- return null;\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
*/\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
*/\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
* not get fired.</p>\r
* @name CKEDITOR#dialogDefinition\r
* @event\r
- * @param {CKEDITOR.dialog.dialogDefinition} data The dialog defination that\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
Got questions, comments, patches, etc.? Contact Jason Woofenden