/*\r
-Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.html or http://ckeditor.com/license\r
*/\r
\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
, editor ).definition;\r
\r
- var tabsToRemove = {};\r
// Cache tabs that should be removed.\r
if ( !( 'removeDialogTabs' in editor._ ) && editor.config.removeDialogTabs )\r
{\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
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
* @example\r
* dialogObj.move( 10, 40 );\r
*/\r
- move : (function()\r
- {\r
- var isFixed;\r
- return function( x, y, save )\r
- {\r
- // The dialog may be fixed positioned or absolute positioned. Ask the\r
- // browser what is the current situation first.\r
- var element = this._.element.getFirst(),\r
- rtl = this._.editor.lang.dir == 'rtl';\r
-\r
- if ( isFixed === undefined )\r
- isFixed = element.getComputedStyle( 'position' ) == 'fixed';\r
-\r
- if ( isFixed && this._.position && this._.position.x == x && this._.position.y == y )\r
- return;\r
+ move : function( x, y, save )\r
+ {\r
+ // The dialog may be fixed positioned or absolute positioned. Ask the\r
+ // browser what is the current situation first.\r
+ var element = this._.element.getFirst(),\r
+ rtl = this._.editor.lang.dir == 'rtl';\r
+\r
+ var isFixed = element.getComputedStyle( 'position' ) == 'fixed';\r
+\r
+ // (#8888) In some cases of a very small viewport, dialog is incorrectly\r
+ // positioned in IE7. It also happens that it remains sticky and user cannot\r
+ // scroll down/up to reveal dialog's content below/above the viewport; this is\r
+ // cumbersome.\r
+ // The only way to fix this is to move mouse out of the browser and\r
+ // go back to see that dialog position is automagically fixed. No events,\r
+ // no style change - pure magic. This is a IE7 rendering issue, which can be\r
+ // fixed with dummy style redraw on each move.\r
+ element.setStyle( 'zoom', '100%' );\r
+\r
+ if ( isFixed && this._.position && this._.position.x == x && this._.position.y == y )\r
+ return;\r
\r
- // Save the current position.\r
- this._.position = { x : x, y : y };\r
+ // Save the current position.\r
+ this._.position = { x : x, y : y };\r
\r
- // If not fixed positioned, add scroll position to the coordinates.\r
- if ( !isFixed )\r
- {\r
- var scrollPosition = CKEDITOR.document.getWindow().getScrollPosition();\r
- x += scrollPosition.x;\r
- y += scrollPosition.y;\r
- }\r
+ // If not fixed positioned, add scroll position to the coordinates.\r
+ if ( !isFixed )\r
+ {\r
+ var scrollPosition = CKEDITOR.document.getWindow().getScrollPosition();\r
+ x += scrollPosition.x;\r
+ y += scrollPosition.y;\r
+ }\r
\r
- // Translate coordinate for RTL.\r
- if ( rtl )\r
- {\r
- var dialogSize = this.getSize(),\r
- viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();\r
- x = viewPaneSize.width - dialogSize.width - x;\r
- }\r
+ // 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
+ var styles = { 'top' : ( y > 0 ? y : 0 ) + 'px' };\r
+ styles[ rtl ? 'right' : 'left' ] = ( x > 0 ? x : 0 ) + 'px';\r
\r
- element.setStyles( styles );\r
+ element.setStyles( styles );\r
\r
- save && ( this._.moved = 1 );\r
- };\r
- })(),\r
+ save && ( this._.moved = 1 );\r
+ },\r
\r
/**\r
* Gets the dialog's position in the window.\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
- this.move( this._.moved ? this._.position.x : ( viewSize.width - dialogSize.width ) / 2,\r
- this._.moved ? this._.position.y : ( viewSize.height - dialogSize.height ) / 2 );\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 : posX,\r
+ this._.moved ? this._.position.y : posY );\r
},\r
\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
{\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
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
/** @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
integerRegex = /^\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
+ 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
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