/*\r
-Copyright (c) 2003-2011, 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;\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
{\r
if ( item.validate )\r
{\r
- var isValid = item.validate( this );\r
+ var retval = item.validate( this ),\r
+ invalid = typeof ( retval ) == 'string' || retval === false;\r
\r
- if ( typeof isValid == 'string' )\r
+ if ( invalid )\r
{\r
- alert( isValid );\r
- isValid = false;\r
- }\r
-\r
- if ( isValid === false )\r
- {\r
- if ( item.select )\r
- item.select();\r
- else\r
- item.focus();\r
-\r
evt.data.hide = false;\r
evt.stop();\r
- return true;\r
}\r
+\r
+ 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
{\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
dialogElement.removeListener( 'keydown', focusKeydownHandler );\r
if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\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
}\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
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
+ 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
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
* @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
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
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
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
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
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
*/\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
Got questions, comments, patches, etc.? Contact Jason Woofenden