/*\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
}\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
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
+ dir = editor.lang.dir,\r
+ tabsToRemove = {},\r
+ i,\r
+ processed, stopPropagation;\r
\r
if ( ( buttonsOrder == 'OS' && CKEDITOR.env.mac ) || // The buttons in MacOS Apps are in reverse order (#4750)\r
( buttonsOrder == 'rtl' && dir == 'ltr' ) ||\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
}\r
, editor ).definition;\r
\r
- var tabsToRemove = {};\r
// Cache tabs that should be removed.\r
if ( !( 'removeDialogTabs' in editor._ ) && editor.config.removeDialogTabs )\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
focusList[ i ].focusIndex = i;\r
}\r
\r
- function changeFocus( forward )\r
+ function changeFocus( offset )\r
{\r
- var focusList = me._.focusList,\r
- offset = forward ? 1 : -1;\r
+ var focusList = me._.focusList;\r
+ offset = offset || 0;\r
+\r
if ( focusList.length < 1 )\r
return;\r
\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
\r
this.changeFocus = changeFocus;\r
\r
- var processed;\r
\r
- function focusKeydownHandler( evt )\r
+ function keydownHandler( 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
+ rtl = editor.lang.dir == 'rtl',\r
+ button;\r
+\r
+ processed = stopPropagation = 0;\r
\r
- processed = 0;\r
if ( keystroke == 9 || keystroke == CKEDITOR.SHIFT + 9 )\r
{\r
var shiftPressed = ( 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
this.selectPage( this._.currentTabId );\r
this._.tabBarMode = false;\r
this._.currentFocusIndex = -1;\r
- changeFocus( true );\r
+ changeFocus( 1 );\r
processed = 1;\r
}\r
-\r
- if ( processed )\r
+ // If user presses enter key in a text box, it implies clicking OK for the dialog.\r
+ else if ( keystroke == 13 /*ENTER*/ )\r
{\r
- evt.stop();\r
- evt.data.preventDefault();\r
+ // Don't do that for a target that handles ENTER.\r
+ var target = evt.data.getTarget();\r
+ if ( !target.is( 'a', 'button', 'select', 'textarea' ) && ( !target.is( 'input' ) || target.$.type != 'button' ) )\r
+ {\r
+ button = this.getButton( 'ok' );\r
+ button && CKEDITOR.tools.setTimeout( button.click, 0, button );\r
+ processed = 1;\r
+ }\r
+ stopPropagation = 1; // Always block the propagation (#4269)\r
+ }\r
+ else if ( keystroke == 27 /*ESC*/ )\r
+ {\r
+ button = this.getButton( 'cancel' );\r
+\r
+ // If there's a Cancel button, click it, else just fire the cancel event and hide the dialog.\r
+ if ( button )\r
+ CKEDITOR.tools.setTimeout( button.click, 0, button );\r
+ else\r
+ {\r
+ if ( this.fire( 'cancel', { hide : true } ).hide !== false )\r
+ this.hide();\r
+ }\r
+ stopPropagation = 1; // Always block the propagation (#4269)\r
}\r
+ else\r
+ return;\r
+\r
+ keypressHandler( evt );\r
}\r
\r
- function focusKeyPressHandler( evt )\r
+ function keypressHandler( evt )\r
{\r
- processed && evt.data.preventDefault();\r
+ if ( processed )\r
+ evt.data.preventDefault(1);\r
+ else if ( stopPropagation )\r
+ evt.data.stopPropagation();\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
+ dialogElement.on( 'keydown', keydownHandler, this );\r
+\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
+ // keypress. So we must do a longer trip in those cases. (#4531,#8985)\r
+ if ( CKEDITOR.env.opera || CKEDITOR.env.gecko )\r
+ dialogElement.on( 'keypress', keypressHandler, 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
+ dialogElement.removeListener( 'keydown', keydownHandler );\r
+ if ( CKEDITOR.env.opera || CKEDITOR.env.gecko )\r
+ dialogElement.removeListener( 'keypress', keypressHandler );\r
+\r
+ // Reset fields state when closing dialog.\r
+ iterContents( function( item ) { resetField.apply( item ); } );\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
+ doc.on( 'keydown', keydownHandler, this, null, 0 );\r
} );\r
\r
// Auto-focus logic in dialog.\r
}\r
// Focus the first field in layout order.\r
else\r
- changeFocus( true );\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
+ for ( i = 0 ; i < definition.contents.length ; i++ )\r
{\r
var page = definition.contents[i];\r
page && this.addPage( page );\r
{\r
this._.tabBarMode = false;\r
this._.currentFocusIndex = -1;\r
- changeFocus( true );\r
+ changeFocus( 1 );\r
}\r
evt.data.preventDefault();\r
}\r
} );\r
}\r
\r
+ // Re-layout the dialog on window resize.\r
+ function resizeWithWindow( dialog )\r
+ {\r
+ var win = CKEDITOR.document.getWindow();\r
+ function resizeHandler() { dialog.layout(); }\r
+ win.on( 'resize', resizeHandler );\r
+ dialog.on( 'hide', function() { win.removeListener( 'resize', resizeHandler ); } );\r
+ }\r
+\r
CKEDITOR.dialog.prototype =\r
{\r
destroy : function()\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
* @example\r
* dialogObj.move( 10, 40 );\r
*/\r
- move : (function()\r
+ move : function( x, y, save )\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
- if ( isFixed === undefined )\r
- isFixed = element.getComputedStyle( 'position' ) == 'fixed';\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 && this._.position && this._.position.x == x && this._.position.y == y )\r
- return;\r
+ var isFixed = element.getComputedStyle( 'position' ) == 'fixed';\r
\r
- // Save the current position.\r
- this._.position = { x : x, y : y };\r
+ if ( isFixed && this._.position && this._.position.x == x && this._.position.y == y )\r
+ return;\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
+ // Save the current position.\r
+ this._.position = { x : x, y : y };\r
\r
- element.setStyles(\r
- {\r
- 'left' : ( x > 0 ? x : 0 ) + 'px',\r
- 'top' : ( y > 0 ? y : 0 ) + 'px'\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
- save && ( this._.moved = 1 );\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
* Gets the dialog's position in the window.\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
\r
\r
// First, set the dialog to an appropriate size.\r
- this.resize( this._.contentSize && this._.contentSize.width || definition.minWidth,\r
- this._.contentSize && this._.contentSize.height || definition.minHeight );\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
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
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
+ element.on( 'keydown', accessKeyDownHandler );\r
+ element.on( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );\r
\r
// Reset the hasFocus state.\r
this._.hasFocus = false;\r
CKEDITOR.tools.setTimeout( function()\r
{\r
this.layout();\r
+ resizeWithWindow( this );\r
+\r
this.parts.dialog.setStyle( 'visibility', '' );\r
\r
// Execute onLoad for the first show.\r
*/\r
layout : function()\r
{\r
- var viewSize = CKEDITOR.document.getWindow().getViewPaneSize(),\r
- dialogSize = this.getSize();\r
+ var el = this.parts.dialog;\r
+ var dialogSize = this.getSize();\r
+ var win = CKEDITOR.document.getWindow(),\r
+ viewSize = win.getViewPaneSize();\r
+\r
+ var posX = ( viewSize.width - dialogSize.width ) / 2,\r
+ posY = ( viewSize.height - dialogSize.height ) / 2;\r
+\r
+ // Switch to absolute position when viewport is smaller than dialog size.\r
+ if ( !CKEDITOR.env.ie6Compat )\r
+ {\r
+ if ( dialogSize.height + ( posY > 0 ? posY : 0 ) > viewSize.height ||\r
+ dialogSize.width + ( posX > 0 ? posX : 0 ) > viewSize.width )\r
+ el.setStyle( 'position', 'absolute' );\r
+ else\r
+ el.setStyle( 'position', 'fixed' );\r
+ }\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
+ this.move( this._.moved ? this._.position.x : posX,\r
+ this._.moved ? this._.position.y : posY );\r
},\r
\r
/**\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
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
this.fire( 'hide', {} );\r
this._.editor.fire( 'dialogHide', this );\r
+ // Reset the tab page.\r
+ this.selectPage( this._.tabIdList[ 0 ] );\r
var element = this._.element;\r
element.setStyle( 'display', 'none' );\r
this.parts.dialog.setStyle( 'visibility', 'hidden' );\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
children : contents.elements,\r
expand : !!contents.expand,\r
padding : contents.padding,\r
- style : contents.style || 'width: 100%;'\r
+ style : contents.style || 'width: 100%;height:100%'\r
}, pageHtml );\r
\r
// Create the HTML for the tab and the content block.\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
* 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
};\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
return;\r
\r
var editor = dialog.getParentEditor();\r
- var wrapperWidth, wrapperHeight, viewSize, origin, startSize;\r
-\r
- function positionDialog( right )\r
- {\r
- // Maintain righthand sizing in RTL.\r
- if ( dialog._.moved && editor.lang.dir == 'rtl' )\r
- {\r
- var element = dialog._.element.getFirst();\r
- element.setStyle( 'right', right + "px" );\r
- element.removeStyle( 'left' );\r
- }\r
- else if ( !dialog._.moved )\r
- dialog.layout();\r
- }\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
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 class="cke_resizer' + direction + '"' +\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
right = rtl && element.getComputedStyle( 'right' ),\r
position = dialog.getPosition();\r
\r
- // IE might return "auto", we need exact position.\r
- if ( right )\r
- right = right == 'auto' ? viewSize.width - ( position.x || 0 ) - element.getSize( 'width' ) : parseInt( right, 10 );\r
-\r
if ( position.y + internalHeight > viewSize.height )\r
internalHeight = viewSize.height - position.y;\r
\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 ) && !( rtl && dx > 0 && !position.x ) )\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
- // The right property might get broken during resizing, so computing it before the resizing.\r
- positionDialog( right );\r
+\r
+ if ( !dialog._.moved )\r
+ dialog.layout();\r
\r
evt.data.preventDefault();\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
- // Switch back to use the left property, if RTL is used.\r
- if ( editor.lang.dir == 'rtl' )\r
- {\r
- var element = dialog._.element.getFirst(),\r
- left = element.getComputedStyle( 'left' );\r
-\r
- // IE might return "auto", we need exact position.\r
- if ( left == 'auto' )\r
- left = viewSize.width - parseInt( element.getStyle( 'right' ), 10 ) - dialog.getSize().width;\r
- else\r
- left = parseInt( left, 10 );\r
-\r
- element.removeStyle( 'right' );\r
- // Make sure the left property gets applied, even if it is the same as previously.\r
- dialog._.position.x += 1;\r
- dialog.move( left, dialog._.position.y );\r
- }\r
}\r
}\r
\r
var covers = {},\r
currentCover;\r
\r
+ function cancelEvent( ev )\r
+ {\r
+ ev.data.preventDefault(1);\r
+ }\r
+\r
function showCover( editor )\r
{\r
var win = CKEDITOR.document.getWindow();\r
if ( !coverElement )\r
{\r
var html = [\r
- '<div style="position: ', ( CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed' ),\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
coverElement = CKEDITOR.dom.element.createFromHtml( html.join( '' ) );\r
coverElement.setOpacity( backgroundCoverOpacity != undefined ? backgroundCoverOpacity : 0.5 );\r
\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
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
{\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
* 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
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
* 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
styles.push( 'height:' + cssLength( height ) );\r
if ( elementDefinition && elementDefinition.padding != undefined )\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
* 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
styles.push( 'height:' + Math.floor( 100 / childHtmlList.length ) + '%' );\r
if ( elementDefinition && elementDefinition.padding != undefined )\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
* </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
{\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
});\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
+ // Extend the CKEDITOR.editor class with dialog specific functions.\r
+ CKEDITOR.tools.extend( CKEDITOR.editor.prototype,\r
+ /** @lends CKEDITOR.editor.prototype */\r
{\r
- var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
- dialogSkin = this.skin.dialog;\r
-\r
- // If the dialogDefinition is already loaded, open it immediately.\r
- if ( typeof dialogDefinitions == 'function' && dialogSkin._isLoaded )\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
+ callback && callback.call( dialog, dialog );\r
+ dialog.show();\r
\r
- function onDialogFileLoaded( success )\r
- {\r
- var dialogDefinition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
- skin = me.skin.dialog;\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
- // Check if both skin part and definition is loaded.\r
- if ( !skin._isLoaded || loadDefinition && typeof success == 'undefined' )\r
- return;\r
+ var me = this;\r
\r
- // In case of plugin error, mark it as loading failed.\r
- if ( typeof dialogDefinition != 'function' )\r
- CKEDITOR.dialog._.dialogDefinitions[ dialogName ] = 'failed';\r
+ function onDialogFileLoaded( success )\r
+ {\r
+ var dialogDefinition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],\r
+ skin = me.skin.dialog;\r
\r
- me.openDialog( dialogName, callback );\r
- body.setStyle( 'cursor', cursor );\r
- }\r
+ // Check if both skin part and definition is loaded.\r
+ if ( !skin._isLoaded || loadDefinition && typeof success == 'undefined' )\r
+ return;\r
\r
- if ( typeof dialogDefinitions == 'string' )\r
- {\r
- var loadDefinition = 1;\r
- CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( dialogDefinitions ), onDialogFileLoaded );\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
- CKEDITOR.skins.load( this, 'dialog', onDialogFileLoaded );\r
+ me.openDialog( dialogName, callback );\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
- * The guildeline to follow when generating the dialog buttons. There are 3 possible options:\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
* 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
+ * <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
* 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
* Fired when a tab is going to be selected in a dialog\r
- * @name dialog#selectPage\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 String page The id of the page that it's gonna be selected.\r
- * @param String currentPage The id of the current page.\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