\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
height : height\r
}, this._.editor );\r
\r
+ this.fire( 'resize',\r
+ {\r
+ skin : this._.editor.skinName,\r
+ width : width,\r
+ height : height\r
+ }, this._.editor );\r
+\r
+ // Update dialog position when dimension get changed in RTL.\r
+ if ( this._.editor.lang.dir == 'rtl' && this._.position )\r
+ this._.position.x = CKEDITOR.document.getWindow().getViewPaneSize().width -\r
+ this._.contentSize.width - parseInt( this._.element.getFirst().getStyle( 'right' ), 10 );\r
+\r
this._.contentSize = { width : width, height : height };\r
};\r
})(),\r
{\r
// 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
// 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
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 {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
viewSize, origin, startSize,\r
dialogCover;\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
-\r
var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )\r
{\r
startSize = dialog.getSize();\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
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
* 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
* 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
* 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
* </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
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
* 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 dialog is being resized. The event is fired on\r
- * the 'CKEDITOR.dialog' object, not a dialog instance.\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.\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
Got questions, comments, patches, etc.? Contact Jason Woofenden