X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fdialog%2Fplugin.js;h=e21f5d1afd5ae5e3b628d4eea959853d7b335717;hb=fb481ba0a7d298e3e7b9034fcb9f2afdc6e8e796;hp=706c92b61f017e806f7888dfdaaab8fe362ef14e;hpb=941b0a9ba4e673e292510d80a5a86806994b8ea6;p=ckeditor.git
diff --git a/_source/plugins/dialog/plugin.js b/_source/plugins/dialog/plugin.js
index 706c92b..e21f5d1 100644
--- a/_source/plugins/dialog/plugin.js
+++ b/_source/plugins/dialog/plugin.js
@@ -1,5 +1,5 @@
/*
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
@@ -33,6 +33,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
(function()
{
+ var cssLength = CKEDITOR.tools.cssLength;
function isTabVisible( tabId )
{
return !!this._.tabs[ tabId ][ 0 ].$.offsetHeight;
@@ -68,6 +69,60 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
return null;
}
+
+ function clearOrRecoverTextInputValue( container, isRecover )
+ {
+ var inputs = container.$.getElementsByTagName( 'input' );
+ for ( var i = 0, length = inputs.length; i < length ; i++ )
+ {
+ var item = new CKEDITOR.dom.element( inputs[ i ] );
+
+ if ( item.getAttribute( 'type' ).toLowerCase() == 'text' )
+ {
+ if ( isRecover )
+ {
+ item.setAttribute( 'value', item.getCustomData( 'fake_value' ) || '' );
+ item.removeCustomData( 'fake_value' );
+ }
+ else
+ {
+ item.setCustomData( 'fake_value', item.getAttribute( 'value' ) );
+ item.setAttribute( 'value', '' );
+ }
+ }
+ }
+ }
+
+ // Handle dialog element validation state UI changes.
+ function handleFieldValidated( isValid, msg )
+ {
+ var input = this.getInputElement();
+ if ( input )
+ {
+ isValid ? input.removeAttribute( 'aria-invalid' )
+ : input.setAttribute( 'aria-invalid', true );
+ }
+
+ if ( !isValid )
+ {
+ if ( this.select )
+ this.select();
+ else
+ this.focus();
+ }
+
+ msg && alert( msg );
+
+ this.fire( 'validated', { valid : isValid, msg : msg } );
+ }
+
+ function resetField()
+ {
+ var input = this.getInputElement();
+ input && input.removeAttribute( 'aria-invalid' );
+ }
+
+
/**
* This is the base class for runtime dialog objects. An instance of this
* class represents a single named dialog for a single editor instance.
@@ -80,10 +135,22 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
CKEDITOR.dialog = function( editor, dialogName )
{
// Load the dialog definition.
- var definition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ];
+ var definition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],
+ defaultDefinition = CKEDITOR.tools.clone( defaultDialogDefinition ),
+ buttonsOrder = editor.config.dialog_buttonsOrder || 'OS',
+ dir = editor.lang.dir,
+ tabsToRemove = {},
+ i,
+ processed, stopPropagation;
+
+ if ( ( buttonsOrder == 'OS' && CKEDITOR.env.mac ) || // The buttons in MacOS Apps are in reverse order (#4750)
+ ( buttonsOrder == 'rtl' && dir == 'ltr' ) ||
+ ( buttonsOrder == 'ltr' && dir == 'rtl' ) )
+ defaultDefinition.buttons.reverse();
+
// Completes the definition with the default values.
- definition = CKEDITOR.tools.extend( definition( editor ), defaultDialogDefinition );
+ definition = CKEDITOR.tools.extend( definition( editor ), defaultDefinition );
// Clone a functionally independent copy for this dialog.
definition = CKEDITOR.tools.clone( definition );
@@ -92,15 +159,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
// functions.
definition = new definitionObject( this, definition );
- // Fire the "dialogDefinition" event, making it possible to customize
- // the dialog definition.
- this.definition = definition = CKEDITOR.fire( 'dialogDefinition',
- {
- name : dialogName,
- definition : definition
- }
- , editor ).definition;
-
var doc = CKEDITOR.document;
var themeBuilt = editor.theme.buildDialog( editor );
@@ -113,7 +171,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
name : dialogName,
contentSize : { width : 0, height : 0 },
size : { width : 0, height : 0 },
- updateSize : false,
contents : {},
buttons : {},
accessKeyMap : {},
@@ -135,19 +192,62 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
this.parts = themeBuilt.parts;
+ CKEDITOR.tools.setTimeout( function()
+ {
+ editor.fire( 'ariaWidget', this.parts.contents );
+ },
+ 0, this );
+
// Set the startup styles for the dialog, avoiding it enlarging the
// page size on the dialog creation.
- this.parts.dialog.setStyles(
- {
+ var startStyles = {
position : CKEDITOR.env.ie6Compat ? 'absolute' : 'fixed',
top : 0,
- left: 0,
visibility : 'hidden'
- });
+ };
+
+ startStyles[ dir == 'rtl' ? 'right' : 'left' ] = 0;
+ this.parts.dialog.setStyles( startStyles );
+
// Call the CKEDITOR.event constructor to initialize this instance.
CKEDITOR.event.call( this );
+ // Fire the "dialogDefinition" event, making it possible to customize
+ // the dialog definition.
+ this.definition = definition = CKEDITOR.fire( 'dialogDefinition',
+ {
+ name : dialogName,
+ definition : definition
+ }
+ , editor ).definition;
+
+ // Cache tabs that should be removed.
+ if ( !( 'removeDialogTabs' in editor._ ) && editor.config.removeDialogTabs )
+ {
+ var removeContents = editor.config.removeDialogTabs.split( ';' );
+
+ for ( i = 0; i < removeContents.length; i++ )
+ {
+ var parts = removeContents[ i ].split( ':' );
+ if ( parts.length == 2 )
+ {
+ var removeDialogName = parts[ 0 ];
+ if ( !tabsToRemove[ removeDialogName ] )
+ tabsToRemove[ removeDialogName ] = [];
+ tabsToRemove[ removeDialogName ].push( parts[ 1 ] );
+ }
+ }
+ editor._.removeDialogTabs = tabsToRemove;
+ }
+
+ // Remove tabs of this dialog.
+ if ( editor._.removeDialogTabs && ( tabsToRemove = editor._.removeDialogTabs[ dialogName ] ) )
+ {
+ for ( i = 0; i < tabsToRemove.length; i++ )
+ definition.removeContents( tabsToRemove[ i ] );
+ }
+
// Initialize load, show, hide, ok and cancel events.
if ( definition.onLoad )
this.on( 'load', definition.onLoad );
@@ -162,6 +262,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
this.on( 'ok', function( evt )
{
+ // Dialog confirm might probably introduce content changes (#5415).
+ editor.fire( 'saveSnapshot' );
+ setTimeout( function () { editor.fire( 'saveSnapshot' ); }, 0 );
if ( definition.onOk.call( this, evt ) === false )
evt.data.hide = false;
});
@@ -202,25 +305,17 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
if ( item.validate )
{
- var isValid = item.validate( this );
-
- if ( typeof isValid == 'string' )
- {
- alert( isValid );
- isValid = false;
- }
+ var retval = item.validate( this ),
+ invalid = typeof ( retval ) == 'string' || retval === false;
- if ( isValid === false )
+ if ( invalid )
{
- if ( item.select )
- item.select();
- else
- item.focus();
-
evt.data.hide = false;
evt.stop();
- return true;
}
+
+ handleFieldValidated.call( item, !invalid, typeof retval == 'string' ? retval : undefined );
+ return invalid;
}
});
}, this, null, 0 );
@@ -242,23 +337,56 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
if ( this.fire( 'cancel', { hide : true } ).hide !== false )
this.hide();
+ evt.data.preventDefault();
}, this );
- function changeFocus( forward )
+ // Sort focus list according to tab order definitions.
+ function setupFocus()
+ {
+ var focusList = me._.focusList;
+ focusList.sort( function( a, b )
+ {
+ // Mimics browser tab order logics;
+ if ( a.tabIndex != b.tabIndex )
+ return b.tabIndex - a.tabIndex;
+ // Sort is not stable in some browsers,
+ // fall-back the comparator to 'focusIndex';
+ else
+ return a.focusIndex - b.focusIndex;
+ });
+
+ var size = focusList.length;
+ for ( var i = 0; i < size; i++ )
+ focusList[ i ].focusIndex = i;
+ }
+
+ function changeFocus( offset )
{
- var focusList = me._.focusList,
- offset = forward ? 1 : -1;
+ var focusList = me._.focusList;
+ offset = offset || 0;
+
if ( focusList.length < 1 )
return;
- var startIndex = ( me._.currentFocusIndex + offset + focusList.length ) % focusList.length,
+ var current = me._.currentFocusIndex;
+
+ // Trigger the 'blur' event of any input element before anything,
+ // since certain UI updates may depend on it.
+ try
+ {
+ focusList[ current ].getInputElement().$.blur();
+ }
+ catch( e ){}
+
+ var startIndex = ( current + offset + focusList.length ) % focusList.length,
currentIndex = startIndex;
- while ( !focusList[ currentIndex ].isFocusable() )
+ while ( offset && !focusList[ currentIndex ].isFocusable() )
{
currentIndex = ( currentIndex + offset + focusList.length ) % focusList.length;
if ( currentIndex == startIndex )
break;
}
+
focusList[ currentIndex ].focus();
// Select whole field content.
@@ -266,17 +394,21 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
focusList[ currentIndex ].select();
}
- var processed;
+ this.changeFocus = changeFocus;
+
- function focusKeydownHandler( evt )
+ function keydownHandler( evt )
{
// If I'm not the top dialog, ignore.
if ( me != CKEDITOR.dialog._.currentTop )
return;
- var keystroke = evt.data.getKeystroke();
+ var keystroke = evt.data.getKeystroke(),
+ rtl = editor.lang.dir == 'rtl',
+ button;
+
+ processed = stopPropagation = 0;
- processed = 0;
if ( keystroke == 9 || keystroke == CKEDITOR.SHIFT + 9 )
{
var shiftPressed = ( keystroke == CKEDITOR.SHIFT + 9 );
@@ -292,12 +424,12 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
else
{
// Change the focus of inputs.
- changeFocus( !shiftPressed );
+ changeFocus( shiftPressed ? -1 : 1 );
}
processed = 1;
}
- else if ( keystroke == CKEDITOR.ALT + 121 && !me._.tabBarMode )
+ else if ( keystroke == CKEDITOR.ALT + 121 && !me._.tabBarMode && me.getPageCount() > 1 )
{
// Alt-F10 puts focus into the current tab item in the tab bar.
me._.tabBarMode = true;
@@ -307,58 +439,114 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
else if ( ( keystroke == 37 || keystroke == 39 ) && me._.tabBarMode )
{
// Arrow keys - used for changing tabs.
- nextId = ( keystroke == 37 ? getPreviousVisibleTab.call( me ) : getNextVisibleTab.call( me ) );
+ nextId = ( keystroke == ( rtl ? 39 : 37 ) ? getPreviousVisibleTab.call( me ) : getNextVisibleTab.call( me ) );
me.selectPage( nextId );
me._.tabs[ nextId ][ 0 ].focus();
processed = 1;
}
-
- if ( processed )
+ else if ( ( keystroke == 13 || keystroke == 32 ) && me._.tabBarMode )
{
- evt.stop();
- evt.data.preventDefault();
+ this.selectPage( this._.currentTabId );
+ this._.tabBarMode = false;
+ this._.currentFocusIndex = -1;
+ changeFocus( 1 );
+ processed = 1;
+ }
+ // If user presses enter key in a text box, it implies clicking OK for the dialog.
+ else if ( keystroke == 13 /*ENTER*/ )
+ {
+ // Don't do that for a target that handles ENTER.
+ var target = evt.data.getTarget();
+ if ( !target.is( 'a', 'button', 'select', 'textarea' ) && ( !target.is( 'input' ) || target.$.type != 'button' ) )
+ {
+ button = this.getButton( 'ok' );
+ button && CKEDITOR.tools.setTimeout( button.click, 0, button );
+ processed = 1;
+ }
+ stopPropagation = 1; // Always block the propagation (#4269)
}
+ else if ( keystroke == 27 /*ESC*/ )
+ {
+ button = this.getButton( 'cancel' );
+
+ // If there's a Cancel button, click it, else just fire the cancel event and hide the dialog.
+ if ( button )
+ CKEDITOR.tools.setTimeout( button.click, 0, button );
+ else
+ {
+ if ( this.fire( 'cancel', { hide : true } ).hide !== false )
+ this.hide();
+ }
+ stopPropagation = 1; // Always block the propagation (#4269)
+ }
+ else
+ return;
+
+ keypressHandler( evt );
}
- function focusKeyPressHandler( evt )
+ function keypressHandler( evt )
{
- processed && evt.data.preventDefault();
+ if ( processed )
+ evt.data.preventDefault(1);
+ else if ( stopPropagation )
+ evt.data.stopPropagation();
}
+ var dialogElement = this._.element;
// Add the dialog keyboard handlers.
this.on( 'show', function()
{
- CKEDITOR.document.on( 'keydown', focusKeydownHandler, this, null, 0 );
+ dialogElement.on( 'keydown', keydownHandler, this );
+
// Some browsers instead, don't cancel key events in the keydown, but in the
- // keypress. So we must do a longer trip in those cases. (#4531)
- if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )
- CKEDITOR.document.on( 'keypress', focusKeyPressHandler, this );
+ // keypress. So we must do a longer trip in those cases. (#4531,#8985)
+ if ( CKEDITOR.env.opera || CKEDITOR.env.gecko )
+ dialogElement.on( 'keypress', keypressHandler, this );
- if ( CKEDITOR.env.ie6Compat )
- {
- var coverDoc = coverElement.getChild( 0 ).getFrameDocument();
- coverDoc.on( 'keydown', focusKeydownHandler, this, null, 0 );
- }
} );
this.on( 'hide', function()
{
- CKEDITOR.document.removeListener( 'keydown', focusKeydownHandler );
- if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )
- CKEDITOR.document.removeListener( 'keypress', focusKeyPressHandler );
+ dialogElement.removeListener( 'keydown', keydownHandler );
+ if ( CKEDITOR.env.opera || CKEDITOR.env.gecko )
+ dialogElement.removeListener( 'keypress', keypressHandler );
+
+ // Reset fields state when closing dialog.
+ iterContents( function( item ) { resetField.apply( item ); } );
} );
this.on( 'iframeAdded', function( evt )
{
var doc = new CKEDITOR.dom.document( evt.data.iframe.$.contentWindow.document );
- doc.on( 'keydown', focusKeydownHandler, this, null, 0 );
+ doc.on( 'keydown', keydownHandler, this, null, 0 );
} );
// Auto-focus logic in dialog.
this.on( 'show', function()
{
- if ( !this._.hasFocus )
+ // Setup tabIndex on showing the dialog instead of on loading
+ // to allow dynamic tab order happen in dialog definition.
+ setupFocus();
+
+ if ( editor.config.dialog_startupFocusTab
+ && me._.pageCount > 1 )
+ {
+ me._.tabBarMode = true;
+ me._.tabs[ me._.currentTabId ][ 0 ].focus();
+ }
+ else if ( !this._.hasFocus )
{
this._.currentFocusIndex = -1;
- changeFocus( true );
+
+ // Decide where to put the initial focus.
+ if ( definition.onFocus )
+ {
+ var initialFocus = definition.onFocus.call( this );
+ // Focus the field that the user specified.
+ initialFocus && initialFocus.focus();
+ }
+ // Focus the first field in layout order.
+ else
+ changeFocus( 1 );
/*
* IE BUG: If the initial focus went into a non-text element (e.g. button),
@@ -404,31 +592,30 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
( new CKEDITOR.dom.text( definition.title, CKEDITOR.document ) ).appendTo( this.parts.title );
// Insert the tabs and contents.
- for ( var i = 0 ; i < definition.contents.length ; i++ )
- this.addPage( definition.contents[i] );
+ for ( i = 0 ; i < definition.contents.length ; i++ )
+ {
+ var page = definition.contents[i];
+ page && this.addPage( page );
+ }
- var tabRegex = /cke_dialog_tab(\s|$|_)/,
- tabOuterRegex = /cke_dialog_tab(\s|$)/;
- this.parts['tabs'].on( 'click', function( evt )
+ this.parts[ 'tabs' ].on( 'click', function( evt )
{
- var target = evt.data.getTarget(), firstNode = target, id, page;
-
+ var target = evt.data.getTarget();
// If we aren't inside a tab, bail out.
- if ( !( tabRegex.test( target.$.className ) || target.getName() == 'a' ) )
- return;
-
- // Find the outer
container of the tab.
- id = target.$.id.substr( 0, target.$.id.lastIndexOf( '_' ) );
- this.selectPage( id );
-
- if ( this._.tabBarMode )
+ if ( target.hasClass( 'cke_dialog_tab' ) )
{
- this._.tabBarMode = false;
- this._.currentFocusIndex = -1;
- changeFocus( true );
- }
+ // Get the ID of the tab, without the 'cke_' prefix and the unique number suffix.
+ var id = target.$.id;
+ this.selectPage( id.substring( 4, id.lastIndexOf( '_' ) ) );
- evt.data.preventDefault();
+ if ( this._.tabBarMode )
+ {
+ this._.tabBarMode = false;
+ this._.currentFocusIndex = -1;
+ changeFocus( 1 );
+ }
+ evt.data.preventDefault();
+ }
}, this );
// Insert buttons.
@@ -444,8 +631,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
for ( i = 0 ; i < buttons.length ; i++ )
this._.buttons[ buttons[i].id ] = buttons[i];
-
- CKEDITOR.skins.load( editor, 'dialog' );
};
// Focusable interface. Use it via dialog.addFocusable.
@@ -453,6 +638,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
this.element = element;
this.focusIndex = index;
+ // TODO: support tabIndex for focusables.
+ this.tabIndex = 0;
this.isFocusable = function()
{
return !element.getAttribute( 'disabled' ) && element.isVisible();
@@ -478,8 +665,23 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
} );
}
+ // Re-layout the dialog on window resize.
+ function resizeWithWindow( dialog )
+ {
+ var win = CKEDITOR.document.getWindow();
+ function resizeHandler() { dialog.layout(); }
+ win.on( 'resize', resizeHandler );
+ dialog.on( 'hide', function() { win.removeListener( 'resize', resizeHandler ); } );
+ }
+
CKEDITOR.dialog.prototype =
{
+ destroy : function()
+ {
+ this.hide();
+ this._.element.remove();
+ },
+
/**
* Resizes the dialog.
* @param {Number} width The width of the dialog in pixels.
@@ -503,8 +705,19 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
height : height
}, this._.editor );
+ this.fire( 'resize',
+ {
+ skin : this._.editor.skinName,
+ width : width,
+ height : height
+ }, this._.editor );
+
+ // Update dialog position when dimension get changed in RTL.
+ if ( this._.editor.lang.dir == 'rtl' && this._.position )
+ this._.position.x = CKEDITOR.document.getWindow().getViewPaneSize().width -
+ this._.contentSize.width - parseInt( this._.element.getFirst().getStyle( 'right' ), 10 );
+
this._.contentSize = { width : width, height : height };
- this._.updateSize = true;
};
})(),
@@ -516,15 +729,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
getSize : function()
{
- if ( !this._.updateSize )
- return this._.size;
var element = this._.element.getFirst();
- var size = this._.size = { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0};
-
- // If either the offsetWidth or offsetHeight is 0, the element isn't visible.
- this._.updateSize = !size.width || !size.height;
-
- return size;
+ return { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0};
},
/**
@@ -532,41 +738,48 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* @function
* @param {Number} x The target x-coordinate.
* @param {Number} y The target y-coordinate.
+ * @param {Boolean} save Flag indicate whether the dialog position should be remembered on next open up.
* @example
* dialogObj.move( 10, 40 );
*/
- move : (function()
+ move : function( x, y, save )
{
- var isFixed;
- return function( x, y )
+ // The dialog may be fixed positioned or absolute positioned. Ask the
+ // browser what is the current situation first.
+ var element = this._.element.getFirst(),
+ rtl = this._.editor.lang.dir == 'rtl';
+
+ var isFixed = element.getComputedStyle( 'position' ) == 'fixed';
+
+ if ( isFixed && this._.position && this._.position.x == x && this._.position.y == y )
+ return;
+
+ // Save the current position.
+ this._.position = { x : x, y : y };
+
+ // If not fixed positioned, add scroll position to the coordinates.
+ if ( !isFixed )
{
- // The dialog may be fixed positioned or absolute positioned. Ask the
- // browser what is the current situation first.
- var element = this._.element.getFirst();
- if ( isFixed === undefined )
- isFixed = element.getComputedStyle( 'position' ) == 'fixed';
+ var scrollPosition = CKEDITOR.document.getWindow().getScrollPosition();
+ x += scrollPosition.x;
+ y += scrollPosition.y;
+ }
- if ( isFixed && this._.position && this._.position.x == x && this._.position.y == y )
- return;
+ // Translate coordinate for RTL.
+ if ( rtl )
+ {
+ var dialogSize = this.getSize(),
+ viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();
+ x = viewPaneSize.width - dialogSize.width - x;
+ }
- // Save the current position.
- this._.position = { x : x, y : y };
+ var styles = { 'top' : ( y > 0 ? y : 0 ) + 'px' };
+ styles[ rtl ? 'right' : 'left' ] = ( x > 0 ? x : 0 ) + 'px';
- // If not fixed positioned, add scroll position to the coordinates.
- if ( !isFixed )
- {
- var scrollPosition = CKEDITOR.document.getWindow().getScrollPosition();
- x += scrollPosition.x;
- y += scrollPosition.y;
- }
+ element.setStyles( styles );
- element.setStyles(
- {
- 'left' : ( x > 0 ? x : 0 ) + 'px',
- 'top' : ( y > 0 ? y : 0 ) + 'px'
- });
- };
- })(),
+ save && ( this._.moved = 1 );
+ },
/**
* Gets the dialog's position in the window.
@@ -583,20 +796,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
show : function()
{
- var editor = this._.editor;
- if ( editor.mode == 'wysiwyg' && CKEDITOR.env.ie )
- {
- var selection = editor.getSelection();
- selection && selection.lock();
- }
-
// Insert the dialog's element to the root document.
var element = this._.element;
var definition = this.definition;
if ( !( element.getParent() && element.getParent().equals( CKEDITOR.document.getBody() ) ) )
element.appendTo( CKEDITOR.document.getBody() );
else
- return;
+ element.setStyle( 'display', 'block' );
// FIREFOX BUG: Fix vanishing caret for Firefox 2 or Gecko 1.8.
if ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 )
@@ -611,33 +817,27 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
// First, set the dialog to an appropriate size.
- this.resize( definition.minWidth, definition.minHeight );
-
- // Select the first tab by default.
- this.selectPage( this.definition.contents[0].id );
+ this.resize( this._.contentSize && this._.contentSize.width || definition.width || definition.minWidth,
+ this._.contentSize && this._.contentSize.height || definition.height || definition.minHeight );
// Reset all inputs back to their default value.
this.reset();
+ // Select the first tab by default.
+ this.selectPage( this.definition.contents[0].id );
+
// Set z-index.
if ( CKEDITOR.dialog._.currentZIndex === null )
CKEDITOR.dialog._.currentZIndex = this._.editor.config.baseFloatZIndex;
this._.element.getFirst().setStyle( 'z-index', CKEDITOR.dialog._.currentZIndex += 10 );
// Maintain the dialog ordering and dialog cover.
- // Also register key handlers if first dialog.
if ( CKEDITOR.dialog._.currentTop === null )
{
CKEDITOR.dialog._.currentTop = this;
this._.parentDialog = null;
- addCover( this._.editor );
-
- element.on( 'keydown', accessKeyDownHandler );
- element.on( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );
+ showCover( this._.editor );
- // Prevent some keys from bubbling up. (#4269)
- for ( var event in { keyup :1, keydown :1, keypress :1 } )
- element.on( event, preventKeyBubbling );
}
else
{
@@ -647,29 +847,23 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
CKEDITOR.dialog._.currentTop = this;
}
- // Register the Esc hotkeys.
- registerAccessKey( this, this, '\x1b', null, function()
- {
- this.getButton( 'cancel' ) && this.getButton( 'cancel' ).click();
- } );
+ element.on( 'keydown', accessKeyDownHandler );
+ element.on( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );
// Reset the hasFocus state.
this._.hasFocus = false;
- // Rearrange the dialog to the middle of the window.
CKEDITOR.tools.setTimeout( function()
{
- var viewSize = CKEDITOR.document.getWindow().getViewPaneSize();
- var dialogSize = this.getSize();
-
- // We're using definition size for initial position because of
- // offten corrupted data in offsetWidth at this point. (#4084)
- this.move( ( viewSize.width - definition.minWidth ) / 2, ( viewSize.height - dialogSize.height ) / 2 );
+ this.layout();
+ resizeWithWindow( this );
this.parts.dialog.setStyle( 'visibility', '' );
// Execute onLoad for the first show.
this.fireOnce( 'load', {} );
+ CKEDITOR.ui.fire( 'ready', this );
+
this.fire( 'show', {} );
this._.editor.fire( 'dialogShow', this );
@@ -681,6 +875,34 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
},
/**
+ * Rearrange the dialog to its previous position or the middle of the window.
+ * @since 3.5
+ */
+ layout : function()
+ {
+ var el = this.parts.dialog;
+ var dialogSize = this.getSize();
+ var win = CKEDITOR.document.getWindow(),
+ viewSize = win.getViewPaneSize();
+
+ var posX = ( viewSize.width - dialogSize.width ) / 2,
+ posY = ( viewSize.height - dialogSize.height ) / 2;
+
+ // Switch to absolute position when viewport is smaller than dialog size.
+ if ( !CKEDITOR.env.ie6Compat )
+ {
+ if ( dialogSize.height + ( posY > 0 ? posY : 0 ) > viewSize.height ||
+ dialogSize.width + ( posX > 0 ? posX : 0 ) > viewSize.width )
+ el.setStyle( 'position', 'absolute' );
+ else
+ el.setStyle( 'position', 'fixed' );
+ }
+
+ this.move( this._.moved ? this._.position.x : posX,
+ this._.moved ? this._.position.y : posY );
+ },
+
+ /**
* Executes a function for each UI element.
* @param {Function} fn Function to execute for each UI element.
* @returns {CKEDITOR.dialog} The current dialog object.
@@ -690,7 +912,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
for ( var i in this._.contents )
{
for ( var j in this._.contents[i] )
- fn( this._.contents[i][j]);
+ fn.call( this, this._.contents[i][j] );
}
return this;
},
@@ -703,10 +925,20 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
reset : (function()
{
- var fn = function( widget ){ if ( widget.reset ) widget.reset(); };
+ var fn = function( widget ){ if ( widget.reset ) widget.reset( 1 ); };
return function(){ this.foreach( fn ); return this; };
})(),
+
+ /**
+ * Calls the {@link CKEDITOR.dialog.definition.uiElement#setup} method of each of the UI elements, with the arguments passed through it.
+ * It is usually being called when the dialog is opened, to put the initial value inside the field.
+ * @example
+ * dialogObj.setupContent();
+ * @example
+ * var timestamp = ( new Date() ).valueOf();
+ * dialogObj.setupContent( timestamp );
+ */
setupContent : function()
{
var args = arguments;
@@ -717,11 +949,24 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
});
},
+ /**
+ * Calls the {@link CKEDITOR.dialog.definition.uiElement#commit} method of each of the UI elements, with the arguments passed through it.
+ * It is usually being called when the user confirms the dialog, to process the values.
+ * @example
+ * dialogObj.commitContent();
+ * @example
+ * var timestamp = ( new Date() ).valueOf();
+ * dialogObj.commitContent( timestamp );
+ */
commitContent : function()
{
var args = arguments;
this.foreach( function( widget )
{
+ // Make sure IE triggers "change" event on last focused input before closing the dialog. (#7915)
+ if ( CKEDITOR.env.ie && this._.currentFocusIndex == widget.focusIndex )
+ widget.getInputElement().$.blur();
+
if ( widget.commit )
widget.commit.apply( widget, args );
});
@@ -734,23 +979,26 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
hide : function()
{
+ if ( !this.parts.dialog.isVisible() )
+ return;
+
this.fire( 'hide', {} );
this._.editor.fire( 'dialogHide', this );
-
- // Remove the dialog's element from the root document.
+ // Reset the tab page.
+ this.selectPage( this._.tabIdList[ 0 ] );
var element = this._.element;
- if ( !element.getParent() )
- return;
-
- element.remove();
+ element.setStyle( 'display', 'none' );
this.parts.dialog.setStyle( 'visibility', 'hidden' );
-
// Unregister all access keys associated with this dialog.
unregisterAccessKey( this );
+ // Close any child(top) dialogs first.
+ while( CKEDITOR.dialog._.currentTop != this )
+ CKEDITOR.dialog._.currentTop.hide();
+
// Maintain dialog ordering and remove cover if needed.
if ( !this._.parentDialog )
- removeCover();
+ hideCover();
else
{
var parentElement = this._.parentDialog.getElement().getFirst();
@@ -767,10 +1015,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
element.removeListener( 'keydown', accessKeyDownHandler );
element.removeListener( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );
- // Remove bubbling-prevention handler. (#4269)
- for ( var event in { keyup :1, keydown :1, keypress :1 } )
- element.removeListener( event, preventKeyBubbling );
-
var editor = this._.editor;
editor.focus();
@@ -783,7 +1027,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
else
CKEDITOR.dialog._.currentZIndex -= 10;
-
+ delete this._.parentDialog;
// Reset the initial values of the dialog.
this.foreach( function( contentObj ) { contentObj.resetInitValue && contentObj.resetInitValue(); } );
},
@@ -805,34 +1049,37 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
children : contents.elements,
expand : !!contents.expand,
padding : contents.padding,
- style : contents.style || 'width: 100%;'
+ style : contents.style || 'width: 100%;height:100%'
}, pageHtml );
// Create the HTML for the tab and the content block.
var page = CKEDITOR.dom.element.createFromHtml( pageHtml.join( '' ) );
- var tab = CKEDITOR.dom.element.createFromHtml( [
+ page.setAttribute( 'role', 'tabpanel' );
+
+ var env = CKEDITOR.env;
+ var tabId = 'cke_' + contents.id + '_' + CKEDITOR.tools.getNextNumber(),
+ tab = CKEDITOR.dom.element.createFromHtml( [
' 0 ? ' cke_last' : 'cke_first' ),
titleHtml,
( !!contents.hidden ? ' style="display:none"' : '' ),
- ' id="', contents.id + '_', CKEDITOR.tools.getNextNumber(), '"' +
- ' href="javascript:void(0)"',
- ' hidefocus="true">',
+ ' id="', tabId, '"',
+ env.gecko && env.version >= 10900 && !env.hc ? '' : ' href="javascript:void(0)"',
+ ' tabIndex="-1"',
+ ' hidefocus="true"',
+ ' role="tab">',
contents.label,
''
].join( '' ) );
- // If only a single page exist, a different style is used in the central pane.
- if ( this._.pageCount === 0 )
- this.parts.dialog.addClass( 'cke_single_page' );
- else
- this.parts.dialog.removeClass( 'cke_single_page' );
+ page.setAttribute( 'aria-labelledby', tabId );
// Take records for the tabs and elements created.
this._.tabs[ contents.id ] = [ tab, page ];
this._.tabIdList.push( contents.id );
- this._.pageCount++;
+ !contents.hidden && this._.pageCount++;
this._.lastTab = tab;
+ this.updateStyle();
var contentMap = this._.contents[ contents.id ] = {},
cursor,
@@ -870,6 +1117,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
selectPage : function( id )
{
+ if ( this._.currentTabId == id )
+ return;
+
+ // Returning true means that the event has been canceled
+ if ( this.fire( 'selectPage', { page : id, currentPage : this._.currentTabId } ) === true )
+ return;
+
// Hide the non-selected tabs and pages.
for ( var i in this._.tabs )
{
@@ -880,15 +1134,38 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
tab.removeClass( 'cke_dialog_tab_selected' );
page.hide();
}
+ page.setAttribute( 'aria-hidden', i != id );
+ }
+
+ var selected = this._.tabs[ id ];
+ selected[ 0 ].addClass( 'cke_dialog_tab_selected' );
+
+ // [IE] an invisible input[type='text'] will enlarge it's width
+ // if it's value is long when it shows, so we clear it's value
+ // before it shows and then recover it (#5649)
+ if ( CKEDITOR.env.ie6Compat || CKEDITOR.env.ie7Compat )
+ {
+ clearOrRecoverTextInputValue( selected[ 1 ] );
+ selected[ 1 ].show();
+ setTimeout( function()
+ {
+ clearOrRecoverTextInputValue( selected[ 1 ], 1 );
+ }, 0 );
}
+ else
+ selected[ 1 ].show();
- var selected = this._.tabs[id];
- selected[0].addClass( 'cke_dialog_tab_selected' );
- selected[1].show();
this._.currentTabId = id;
this._.currentTabIndex = CKEDITOR.tools.indexOf( this._.tabIdList, id );
},
+ // Dialog state-specific style updates.
+ updateStyle : function()
+ {
+ // If only a single page shown, a different style is used in the central pane.
+ this.parts.dialog[ ( this._.pageCount === 1 ? 'add' : 'remove' ) + 'Class' ]( 'cke_single_page' );
+ },
+
/**
* Hides a page's tab away from the dialog.
* @param {String} id The page's Id.
@@ -898,9 +1175,15 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
hidePage : function( id )
{
var tab = this._.tabs[id] && this._.tabs[id][0];
- if ( !tab )
+ if ( !tab || this._.pageCount == 1 || !tab.isVisible() )
return;
+ // Switch to other tab first when we're hiding the active tab.
+ else if ( id == this._.currentTabId )
+ this.selectPage( getPreviousVisibleTab.call( this ) );
+
tab.hide();
+ this._.pageCount--;
+ this.updateStyle();
},
/**
@@ -915,6 +1198,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
if ( !tab )
return;
tab.show();
+ this._.pageCount++;
+ this.updateStyle();
},
/**
@@ -945,11 +1230,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* @param {String} pageId id of dialog page.
* @param {String} elementId id of UI element.
* @example
+ * dialogObj.getContentElement( 'tabId', 'elementId' ).setValue( 'Example' );
* @returns {CKEDITOR.ui.dialog.uiElement} The dialog UI element.
*/
getContentElement : function( pageId, elementId )
{
- return this._.contents[pageId][elementId];
+ var page = this._.contents[ pageId ];
+ return page && page[ elementId ];
},
/**
@@ -957,6 +1244,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* @param {String} pageId id of dialog page.
* @param {String} elementId id of UI element.
* @example
+ * alert( dialogObj.getValueOf( 'tabId', 'elementId' ) );
* @returns {Object} The value of the UI element.
*/
getValueOf : function( pageId, elementId )
@@ -970,6 +1258,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* @param {String} elementId id of the UI element.
* @param {Object} value The new value of the UI element.
* @example
+ * dialogObj.setValueOf( 'tabId', 'elementId', 'Example' );
*/
setValueOf : function( pageId, elementId, value )
{
@@ -1077,9 +1366,77 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* @param {Function|String} dialogDefinition
* A function returning the dialog's definition, or the URL to the .js file holding the function.
* The function should accept an argument "editor" which is the current editor instance, and
- * return an object conforming to {@link CKEDITOR.dialog.dialogDefinition}.
+ * return an object conforming to {@link CKEDITOR.dialog.definition}.
+ * @see CKEDITOR.dialog.definition
* @example
- * @see CKEDITOR.dialog.dialogDefinition
+ * // Full sample plugin, which does not only register a dialog window but also adds an item to the context menu.
+ * // To open the dialog window, choose "Open dialog" in the context menu.
+ * CKEDITOR.plugins.add( 'myplugin',
+ * {
+ * init: function( editor )
+ * {
+ * editor.addCommand( 'mydialog',new CKEDITOR.dialogCommand( 'mydialog' ) );
+ *
+ * if ( editor.contextMenu )
+ * {
+ * editor.addMenuGroup( 'mygroup', 10 );
+ * editor.addMenuItem( 'My Dialog',
+ * {
+ * label : 'Open dialog',
+ * command : 'mydialog',
+ * group : 'mygroup'
+ * });
+ * editor.contextMenu.addListener( function( element )
+ * {
+ * return { 'My Dialog' : CKEDITOR.TRISTATE_OFF };
+ * });
+ * }
+ *
+ * CKEDITOR.dialog.add( 'mydialog', function( api )
+ * {
+ * // CKEDITOR.dialog.definition
+ * var dialogDefinition =
+ * {
+ * title : 'Sample dialog',
+ * minWidth : 390,
+ * minHeight : 130,
+ * contents : [
+ * {
+ * id : 'tab1',
+ * label : 'Label',
+ * title : 'Title',
+ * expand : true,
+ * padding : 0,
+ * elements :
+ * [
+ * {
+ * type : 'html',
+ * html : '<p>This is some sample HTML content.</p>'
+ * },
+ * {
+ * type : 'textarea',
+ * id : 'textareaId',
+ * rows : 4,
+ * cols : 40
+ * }
+ * ]
+ * }
+ * ],
+ * buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ],
+ * onOk : function() {
+ * // "this" is now a CKEDITOR.dialog object.
+ * // Accessing dialog elements:
+ * var textareaObj = this.getContentElement( 'tab1', 'textareaId' );
+ * alert( "You have entered: " + textareaObj.getValue() );
+ * }
+ * };
+ *
+ * return dialogDefinition;
+ * } );
+ * }
+ * } );
+ *
+ * CKEDITOR.replace( 'editor1', { extraPlugins : 'myplugin' } );
*/
add : function( name, dialogDefinition )
{
@@ -1196,7 +1553,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
var defaultDialogDefinition =
{
- resizable : CKEDITOR.DIALOG_RESIZE_NONE,
+ resizable : CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth : 600,
minHeight : 400,
buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]
@@ -1270,8 +1627,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* This class is not really part of the API. It is the "definition" property value
* passed to "dialogDefinition" event handlers.
* @constructor
- * @name CKEDITOR.dialog.dialogDefinitionObject
- * @extends CKEDITOR.dialog.dialogDefinition
+ * @name CKEDITOR.dialog.definitionObject
+ * @extends CKEDITOR.dialog.definition
* @example
* CKEDITOR.on( 'dialogDefinition', function( evt )
* {
@@ -1288,18 +1645,18 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
// Transform the contents entries in contentObjects.
var contents = dialogDefinition.contents;
for ( var i = 0, content ; ( content = contents[i] ) ; i++ )
- contents[ i ] = new contentObject( dialog, content );
+ contents[ i ] = content && new contentObject( dialog, content );
CKEDITOR.tools.extend( this, dialogDefinition );
};
definitionObject.prototype =
- /** @lends CKEDITOR.dialog.dialogDefinitionObject.prototype */
+ /** @lends CKEDITOR.dialog.definitionObject.prototype */
{
/**
* Gets a content definition.
* @param {String} id The id of the content definition.
- * @returns {CKEDITOR.dialog.contentDefinition} The content definition
+ * @returns {CKEDITOR.dialog.definition.content} The content definition
* matching id.
*/
getContents : function( id )
@@ -1310,7 +1667,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/**
* Gets a button definition.
* @param {String} id The id of the button definition.
- * @returns {CKEDITOR.dialog.buttonDefinition} The button definition
+ * @returns {CKEDITOR.dialog.definition.button} The button definition
* matching id.
*/
getButton : function( id )
@@ -1320,13 +1677,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/**
* Adds a content definition object under this dialog definition.
- * @param {CKEDITOR.dialog.contentDefinition} contentDefinition The
+ * @param {CKEDITOR.dialog.definition.content} contentDefinition The
* content definition.
* @param {String} [nextSiblingId] The id of an existing content
* definition which the new content definition will be inserted
* before. Omit if the new content definition is to be inserted as
* the last item.
- * @returns {CKEDITOR.dialog.contentDefinition} The inserted content
+ * @returns {CKEDITOR.dialog.definition.content} The inserted content
* definition.
*/
addContents : function( contentDefinition, nextSiblingId )
@@ -1336,13 +1693,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/**
* Adds a button definition object under this dialog definition.
- * @param {CKEDITOR.dialog.buttonDefinition} buttonDefinition The
+ * @param {CKEDITOR.dialog.definition.button} buttonDefinition The
* button definition.
* @param {String} [nextSiblingId] The id of an existing button
* definition which the new button definition will be inserted
* before. Omit if the new button definition is to be inserted as
* the last item.
- * @returns {CKEDITOR.dialog.buttonDefinition} The inserted button
+ * @returns {CKEDITOR.dialog.definition.button} The inserted button
* definition.
*/
addButton : function( buttonDefinition, nextSiblingId )
@@ -1353,7 +1710,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/**
* Removes a content definition from this dialog definition.
* @param {String} id The id of the content definition to be removed.
- * @returns {CKEDITOR.dialog.contentDefinition} The removed content
+ * @returns {CKEDITOR.dialog.definition.content} The removed content
* definition.
*/
removeContents : function( id )
@@ -1364,7 +1721,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/**
* Removes a button definition from the dialog definition.
* @param {String} id The id of the button definition to be removed.
- * @returns {CKEDITOR.dialog.buttonDefinition} The removed button
+ * @returns {CKEDITOR.dialog.definition.button} The removed button
* definition.
*/
removeButton : function( id )
@@ -1376,9 +1733,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/**
* This class is not really part of the API. It is the template of the
* objects representing content pages inside the
- * CKEDITOR.dialog.dialogDefinitionObject.
+ * CKEDITOR.dialog.definitionObject.
* @constructor
- * @name CKEDITOR.dialog.contentDefinitionObject
+ * @name CKEDITOR.dialog.definition.contentObject
* @example
* CKEDITOR.on( 'dialogDefinition', function( evt )
* {
@@ -1399,12 +1756,12 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
}
contentObject.prototype =
- /** @lends CKEDITOR.dialog.contentDefinitionObject.prototype */
+ /** @lends CKEDITOR.dialog.definition.contentObject.prototype */
{
/**
* Gets a UI element definition under the content definition.
* @param {String} id The id of the UI element definition.
- * @returns {CKEDITOR.dialog.uiElementDefinition}
+ * @returns {CKEDITOR.dialog.definition.uiElement}
*/
get : function( id )
{
@@ -1413,13 +1770,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/**
* Adds a UI element definition to the content definition.
- * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition The
+ * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition The
* UI elemnet definition to be added.
* @param {String} nextSiblingId The id of an existing UI element
* definition which the new UI element definition will be inserted
* before. Omit if the new button definition is to be inserted as
* the last item.
- * @returns {CKEDITOR.dialog.uiElementDefinition} The element
+ * @returns {CKEDITOR.dialog.definition.uiElement} The element
* definition inserted.
*/
add : function( elementDefinition, nextSiblingId )
@@ -1431,7 +1788,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* Removes a UI element definition from the content definition.
* @param {String} id The id of the UI element definition to be
* removed.
- * @returns {CKEDITOR.dialog.uiElementDefinition} The element
+ * @returns {CKEDITOR.dialog.definition.uiElement} The element
* definition removed.
* @example
*/
@@ -1470,7 +1827,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
if ( abstractDialogCoords.x + margins[3] < magnetDistance )
realX = - margins[3];
else if ( abstractDialogCoords.x - margins[1] > viewPaneSize.width - dialogSize.width - magnetDistance )
- realX = viewPaneSize.width - dialogSize.width + margins[1];
+ realX = viewPaneSize.width - dialogSize.width + ( editor.lang.dir == 'rtl' ? 0 : margins[1] );
else
realX = abstractDialogCoords.x;
@@ -1481,7 +1838,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
else
realY = abstractDialogCoords.y;
- dialog.move( realX, realY );
+ dialog.move( realX, realY, 1 );
evt.data.preventDefault();
}
@@ -1493,7 +1850,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
if ( CKEDITOR.env.ie6Compat )
{
- var coverDoc = coverElement.getChild( 0 ).getFrameDocument();
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();
coverDoc.removeListener( 'mousemove', mouseMoveHandler );
coverDoc.removeListener( 'mouseup', mouseUpHandler );
}
@@ -1501,8 +1858,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
dialog.parts.title.on( 'mousedown', function( evt )
{
- dialog._.updateSize = true;
-
lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };
CKEDITOR.document.on( 'mousemove', mouseMoveHandler );
@@ -1511,7 +1866,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
if ( CKEDITOR.env.ie6Compat )
{
- var coverDoc = coverElement.getChild( 0 ).getFrameDocument();
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();
coverDoc.on( 'mousemove', mouseMoveHandler );
coverDoc.on( 'mouseup', mouseUpHandler );
}
@@ -1522,167 +1877,156 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
function initResizeHandles( dialog )
{
- var definition = dialog.definition,
- minWidth = definition.minWidth || 0,
- minHeight = definition.minHeight || 0,
- resizable = definition.resizable,
- margins = dialog.getParentEditor().skin.margins || [ 0, 0, 0, 0 ];
+ var def = dialog.definition,
+ resizable = def.resizable;
- function topSizer( coords, dy )
- {
- coords.y += dy;
- }
+ if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE )
+ return;
- function rightSizer( coords, dx )
- {
- coords.x2 += dx;
- }
+ var editor = dialog.getParentEditor();
+ var wrapperWidth, wrapperHeight,
+ viewSize, origin, startSize,
+ dialogCover;
- function bottomSizer( coords, dy )
+ var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )
{
- coords.y2 += dy;
- }
+ startSize = dialog.getSize();
- function leftSizer( coords, dx )
- {
- coords.x += dx;
- }
+ var content = dialog.parts.contents,
+ iframeDialog = content.$.getElementsByTagName( 'iframe' ).length;
- var lastCoords = null,
- abstractDialogCoords = null,
- magnetDistance = dialog._.editor.config.magnetDistance,
- parts = [ 'tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br' ];
+ // Shim to help capturing "mousemove" over iframe.
+ if ( iframeDialog )
+ {
+ dialogCover = CKEDITOR.dom.element.createFromHtml( '' );
+ content.append( dialogCover );
+ }
- function mouseDownHandler( evt )
- {
- var partName = evt.listenerData.part, size = dialog.getSize();
- abstractDialogCoords = dialog.getPosition();
- CKEDITOR.tools.extend( abstractDialogCoords,
- {
- x2 : abstractDialogCoords.x + size.width,
- y2 : abstractDialogCoords.y + size.height
- } );
- lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };
+ // Calculate the offset between content and chrome size.
+ wrapperHeight = startSize.height - dialog.parts.contents.getSize( 'height', ! ( CKEDITOR.env.gecko || CKEDITOR.env.opera || CKEDITOR.env.ie && CKEDITOR.env.quirks ) );
+ wrapperWidth = startSize.width - dialog.parts.contents.getSize( 'width', 1 );
- CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
- CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
+ origin = { x : $event.screenX, y : $event.screenY };
+
+ viewSize = CKEDITOR.document.getWindow().getViewPaneSize();
+
+ CKEDITOR.document.on( 'mousemove', mouseMoveHandler );
+ CKEDITOR.document.on( 'mouseup', mouseUpHandler );
if ( CKEDITOR.env.ie6Compat )
{
- var coverDoc = coverElement.getChild( 0 ).getFrameDocument();
- coverDoc.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
- coverDoc.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();
+ coverDoc.on( 'mousemove', mouseMoveHandler );
+ coverDoc.on( 'mouseup', mouseUpHandler );
}
- evt.data.preventDefault();
- }
+ $event.preventDefault && $event.preventDefault();
+ });
+
+ // Prepend the grip to the dialog.
+ dialog.on( 'load', function()
+ {
+ var direction = '';
+ if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH )
+ direction = ' cke_resizer_horizontal';
+ else if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT )
+ direction = ' cke_resizer_vertical';
+ var resizer = CKEDITOR.dom.element.createFromHtml( '' );
+ dialog.parts.footer.append( resizer, 1 );
+ });
+ editor.on( 'destroy', function() { CKEDITOR.tools.removeFunction( mouseDownFn ); } );
function mouseMoveHandler( evt )
{
- var x = evt.data.$.screenX,
- y = evt.data.$.screenY,
- dx = x - lastCoords.x,
- dy = y - lastCoords.y,
- viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),
- partName = evt.listenerData.part;
+ var rtl = editor.lang.dir == 'rtl',
+ dx = ( evt.data.$.screenX - origin.x ) * ( rtl ? -1 : 1 ),
+ dy = evt.data.$.screenY - origin.y,
+ width = startSize.width,
+ height = startSize.height,
+ internalWidth = width + dx * ( dialog._.moved ? 1 : 2 ),
+ internalHeight = height + dy * ( dialog._.moved ? 1 : 2 ),
+ element = dialog._.element.getFirst(),
+ right = rtl && element.getComputedStyle( 'right' ),
+ position = dialog.getPosition();
- if ( partName.search( 't' ) != -1 )
- topSizer( abstractDialogCoords, dy );
- if ( partName.search( 'l' ) != -1 )
- leftSizer( abstractDialogCoords, dx );
- if ( partName.search( 'b' ) != -1 )
- bottomSizer( abstractDialogCoords, dy );
- if ( partName.search( 'r' ) != -1 )
- rightSizer( abstractDialogCoords, dx );
+ if ( position.y + internalHeight > viewSize.height )
+ internalHeight = viewSize.height - position.y;
- lastCoords = { x : x, y : y };
+ if ( ( rtl ? right : position.x ) + internalWidth > viewSize.width )
+ internalWidth = viewSize.width - ( rtl ? right : position.x );
- var realX, realY, realX2, realY2;
+ // Make sure the dialog will not be resized to the wrong side when it's in the leftmost position for RTL.
+ if ( ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH ) )
+ width = Math.max( def.minWidth || 0, internalWidth - wrapperWidth );
- if ( abstractDialogCoords.x + margins[3] < magnetDistance )
- realX = - margins[3];
- else if ( partName.search( 'l' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
- realX = abstractDialogCoords.x2 - minWidth;
- else
- realX = abstractDialogCoords.x;
+ if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
+ height = Math.max( def.minHeight || 0, internalHeight - wrapperHeight );
- if ( abstractDialogCoords.y + margins[0] < magnetDistance )
- realY = - margins[0];
- else if ( partName.search( 't' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
- realY = abstractDialogCoords.y2 - minHeight;
- else
- realY = abstractDialogCoords.y;
-
- if ( abstractDialogCoords.x2 - margins[1] > viewPaneSize.width - magnetDistance )
- realX2 = viewPaneSize.width + margins[1] ;
- else if ( partName.search( 'r' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
- realX2 = abstractDialogCoords.x + minWidth;
- else
- realX2 = abstractDialogCoords.x2;
+ dialog.resize( width, height );
- if ( abstractDialogCoords.y2 - margins[2] > viewPaneSize.height - magnetDistance )
- realY2= viewPaneSize.height + margins[2] ;
- else if ( partName.search( 'b' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
- realY2 = abstractDialogCoords.y + minHeight;
- else
- realY2 = abstractDialogCoords.y2 ;
-
- dialog.move( realX, realY );
- dialog.resize( realX2 - realX, realY2 - realY );
+ if ( !dialog._.moved )
+ dialog.layout();
evt.data.preventDefault();
}
- function mouseUpHandler( evt )
+ function mouseUpHandler()
{
CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );
CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );
+ if ( dialogCover )
+ {
+ dialogCover.remove();
+ dialogCover = null;
+ }
+
if ( CKEDITOR.env.ie6Compat )
{
- var coverDoc = coverElement.getChild( 0 ).getFrameDocument();
+ var coverDoc = currentCover.getChild( 0 ).getFrameDocument();
coverDoc.removeListener( 'mouseup', mouseUpHandler );
coverDoc.removeListener( 'mousemove', mouseMoveHandler );
}
}
-
-// TODO : Simplify the resize logic, having just a single resize grip .
-// var widthTest = /[lr]/,
-// heightTest = /[tb]/;
-// for ( var i = 0 ; i < parts.length ; i++ )
-// {
-// var element = dialog.parts[ parts[i] + '_resize' ];
-// if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE ||
-// resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT && widthTest.test( parts[i] ) ||
-// resizable == CKEDITOR.DIALOG_RESIZE_WIDTH && heightTest.test( parts[i] ) )
-// {
-// element.hide();
-// continue;
-// }
-// element.on( 'mousedown', mouseDownHandler, dialog, { part : parts[i] } );
-// }
}
var resizeCover;
- var coverElement;
+ // Caching resuable covers and allowing only one cover
+ // on screen.
+ var covers = {},
+ currentCover;
+
+ function cancelEvent( ev )
+ {
+ ev.data.preventDefault(1);
+ }
- var addCover = function( editor )
+ function showCover( editor )
{
var win = CKEDITOR.document.getWindow();
+ var config = editor.config,
+ backgroundColorStyle = config.dialog_backgroundCoverColor || 'white',
+ backgroundCoverOpacity = config.dialog_backgroundCoverOpacity,
+ baseFloatZIndex = config.baseFloatZIndex,
+ coverKey = CKEDITOR.tools.genKey(
+ backgroundColorStyle,
+ backgroundCoverOpacity,
+ baseFloatZIndex ),
+ coverElement = covers[ coverKey ];
if ( !coverElement )
{
- var backgroundColorStyle = editor.config.dialog_backgroundCoverColor || 'white';
-
var html = [
- ' '
+ '" class="cke_dialog_background_cover">'
];
-
if ( CKEDITOR.env.ie6Compat )
{
// Support for custom document.domain in IE.
@@ -1718,14 +2062,23 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
html.push( ' ' );
coverElement = CKEDITOR.dom.element.createFromHtml( html.join( '' ) );
- }
+ coverElement.setOpacity( backgroundCoverOpacity != undefined ? backgroundCoverOpacity : 0.5 );
- var element = coverElement;
+ coverElement.on( 'keydown', cancelEvent );
+ coverElement.on( 'keypress', cancelEvent );
+ coverElement.on( 'keyup', cancelEvent );
+ coverElement.appendTo( CKEDITOR.document.getBody() );
+ covers[ coverKey ] = coverElement;
+ }
+ else
+ coverElement. show();
+
+ currentCover = coverElement;
var resizeFunc = function()
{
var size = win.getViewPaneSize();
- element.setStyles(
+ coverElement.setStyles(
{
width : size.width + 'px',
height : size.height + 'px'
@@ -1736,22 +2089,29 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
var pos = win.getScrollPosition(),
cursor = CKEDITOR.dialog._.currentTop;
- element.setStyles(
+ coverElement.setStyles(
{
left : pos.x + 'px',
top : pos.y + 'px'
});
- do
+ if ( cursor )
{
- var dialogPos = cursor.getPosition();
- cursor.move( dialogPos.x, dialogPos.y );
- } while( ( cursor = cursor._.parentDialog ) );
+ do
+ {
+ var dialogPos = cursor.getPosition();
+ cursor.move( dialogPos.x, dialogPos.y );
+ } while ( ( cursor = cursor._.parentDialog ) );
+ }
};
resizeCover = resizeFunc;
win.on( 'resize', resizeFunc );
resizeFunc();
+ // Using Safari/Mac, focus must be kept where it is (#7027)
+ if ( !( CKEDITOR.env.mac && CKEDITOR.env.webkit ) )
+ coverElement.focus();
+
if ( CKEDITOR.env.ie6Compat )
{
// IE BUG: win.$.onscroll assignment doesn't work.. it must be window.onscroll.
@@ -1768,20 +2128,15 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
}, 0 );
scrollFunc();
}
+ }
- var opacity = editor.config.dialog_backgroundCoverOpacity;
- element.setOpacity( typeof opacity != 'undefined' ? opacity : 0.5 );
-
- element.appendTo( CKEDITOR.document.getBody() );
- };
-
- var removeCover = function()
+ function hideCover()
{
- if ( !coverElement )
+ if ( !currentCover )
return;
var win = CKEDITOR.document.getWindow();
- coverElement.remove();
+ currentCover.hide();
win.removeListener( 'resize', resizeCover );
if ( CKEDITOR.env.ie6Compat )
@@ -1793,7 +2148,14 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
}, 0 );
}
resizeCover = null;
- };
+ }
+
+ function removeCovers()
+ {
+ for ( var coverId in covers )
+ covers[ coverId ].remove();
+ covers = {};
+ }
var accessKeyProcessors = {};
@@ -1869,14 +2231,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
};
- // ESC, ENTER
- var preventKeyBubblingKeys = { 27 :1, 13 :1 };
- var preventKeyBubbling = function( e )
- {
- if ( e.data.getKeystroke() in preventKeyBubblingKeys )
- e.data.stopPropagation();
- };
-
(function()
{
CKEDITOR.ui.dialog =
@@ -1885,7 +2239,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* The base class of all dialog UI elements.
* @constructor
* @param {CKEDITOR.dialog} dialog Parent dialog object.
- * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition Element
+ * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition Element
* definition. Accepted fields:
*
* - id (Required) The id of the UI element. See {@link
@@ -1937,8 +2291,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
html = [ '<', nodeName, ' ' ],
styles = ( stylesArg && stylesArg.call ? stylesArg( elementDefinition ) : stylesArg ) || {},
attributes = ( attributesArg && attributesArg.call ? attributesArg( elementDefinition ) : attributesArg ) || {},
- innerHTML = ( contentsArg && contentsArg.call ? contentsArg( dialog, elementDefinition ) : contentsArg ) || '',
- domId = this.domId = attributes.id || CKEDITOR.tools.getNextNumber() + '_uiElement',
+ innerHTML = ( contentsArg && contentsArg.call ? contentsArg.call( this, dialog, elementDefinition ) : contentsArg ) || '',
+ domId = this.domId = attributes.id || CKEDITOR.tools.getNextId() + '_uiElement',
id = this.id = elementDefinition.id,
i;
@@ -1951,6 +2305,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
classes[ 'cke_dialog_ui_' + elementDefinition.type ] = 1;
if ( elementDefinition.className )
classes[ elementDefinition.className ] = 1;
+ if ( elementDefinition.disabled )
+ classes[ 'cke_disabled' ] = 1;
+
var attributeClasses = ( attributes['class'] && attributes['class'].split ) ? attributes['class'].split( ' ' ) : [];
for ( i = 0 ; i < attributeClasses.length ; i++ )
{
@@ -1968,6 +2325,15 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
// Write the inline CSS styles.
var styleStr = ( elementDefinition.style || '' ).split( ';' );
+
+ // Element alignment support.
+ if ( elementDefinition.align )
+ {
+ var align = elementDefinition.align;
+ styles[ 'margin-left' ] = align == 'left' ? 0 : 'auto';
+ styles[ 'margin-right' ] = align == 'right' ? 0 : 'auto';
+ }
+
for ( i in styles )
styleStr.push( i + ':' + styles[i] );
if ( elementDefinition.hidden )
@@ -1998,6 +2364,23 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
if ( typeof( elementDefinition.isChanged ) == 'function' )
this.isChanged = elementDefinition.isChanged;
+ // Overload 'get(set)Value' on definition.
+ if ( typeof( elementDefinition.setValue ) == 'function' )
+ {
+ this.setValue = CKEDITOR.tools.override( this.setValue, function( org )
+ {
+ return function( val ){ org.call( this, elementDefinition.setValue.call( this, val ) ); };
+ } );
+ }
+
+ if ( typeof( elementDefinition.getValue ) == 'function' )
+ {
+ this.getValue = CKEDITOR.tools.override( this.getValue, function( org )
+ {
+ return function(){ return elementDefinition.getValue.call( this, org.call( this ) ); };
+ } );
+ }
+
// Add events.
CKEDITOR.event.implementOn( this );
@@ -2008,20 +2391,32 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
var me = this;
dialog.on( 'load', function()
{
- if ( me.getInputElement() )
+ var input = me.getInputElement();
+ if ( input )
{
- me.getInputElement().on( 'focus', function()
+ var focusClass = me.type in { 'checkbox' : 1, 'ratio' : 1 } && CKEDITOR.env.ie && CKEDITOR.env.version < 8 ? 'cke_dialog_ui_focused' : '';
+ input.on( 'focus', function()
{
dialog._.tabBarMode = false;
dialog._.hasFocus = true;
me.fire( 'focus' );
- }, me );
+ focusClass && this.addClass( focusClass );
+
+ });
+
+ input.on( 'blur', function()
+ {
+ me.fire( 'blur' );
+ focusClass && this.removeClass( focusClass );
+ });
}
} );
// Register the object as a tab focus if it can be included.
if ( this.keyboardFocusable )
{
+ this.tabIndex = elementDefinition.tabIndex || 0;
+
this.focusIndex = dialog._.focusList.push( this ) - 1;
this.on( 'focus', function()
{
@@ -2048,7 +2443,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* objects in childObjList.
* @param {Array} htmlList
* Array of HTML code that this element will output to.
- * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+ * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
* The element definition. Accepted fields:
*
* - widths (Optional) The widths of child cells.
@@ -2084,18 +2479,21 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
className = 'cke_dialog_ui_hbox_first';
if ( i == childHtmlList.length - 1 )
className = 'cke_dialog_ui_hbox_last';
- html.push( ' 0 )
html.push( 'style="' + styles.join('; ') + '" ' );
html.push( '>', childHtmlList[i], ' | ' );
@@ -2104,6 +2502,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
return html.join( '' );
};
+ var attribs = { role : 'presentation' };
+ elementDefinition && elementDefinition.align && ( attribs.align = elementDefinition.align );
+
CKEDITOR.ui.dialog.uiElement.call(
this,
dialog,
@@ -2111,7 +2512,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
htmlList,
'table',
styles,
- elementDefinition && elementDefinition.align && { align : elementDefinition.align } || null,
+ attribs,
innerHTML );
},
@@ -2129,7 +2530,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* objects in childObjList.
* @param {Array} htmlList
* Array of HTML code that this element will output to.
- * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
+ * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
* The element definition. Accepted fields:
*
* - width (Optional) The width of the layout.
@@ -2145,7 +2546,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
vbox : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )
{
- if (arguments.length < 3 )
+ if ( arguments.length < 3 )
return;
this._ || ( this._ = {} );
@@ -2156,11 +2557,11 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/** @ignore */
var innerHTML = function()
{
- var html = [ ' | 0 )
html.push( 'style="', styles.join( '; ' ), '" ' );
html.push( ' class="cke_dialog_ui_vbox_child">', childHtmlList[i], ' | ' );
@@ -2185,7 +2589,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
html.push( ' ' );
return html.join( '' );
};
- CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition || { type : 'vbox' }, htmlList, 'div', null, null, innerHTML );
+ CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition || { type : 'vbox' }, htmlList, 'div', null, { role : 'presentation' }, innerHTML );
}
};
})();
@@ -2231,14 +2635,15 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/**
* Sets the value of this dialog UI object.
* @param {Object} value The new value.
+ * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.
* @returns {CKEDITOR.dialog.uiElement} The current UI element.
* @example
* uiElement.setValue( 'Dingo' );
*/
- setValue : function( value )
+ setValue : function( value, noChangeEvent )
{
this.getInputElement().setValue( value );
- this.fire( 'change', { value : value } );
+ !noChangeEvent && this.fire( 'change', { value : value } );
return this;
},
@@ -2325,7 +2730,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*
* This function is only called at UI element instantiation, but can
* be overridded in child classes if they require more flexibility.
- * @param {CKEDITOR.dialog.uiElementDefinition} definition The UI element
+ * @param {CKEDITOR.dialog.definition.uiElement} definition The UI element
* definition.
* @returns {CKEDITOR.dialog.uiElement} The current UI element.
* @example
@@ -2429,8 +2834,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
disable : function()
{
- var element = this.getInputElement();
- element.setAttribute( 'disabled', 'true' );
+ var element = this.getElement(),
+ input = this.getInputElement();
+ input.setAttribute( 'disabled', 'true' );
element.addClass( 'cke_disabled' );
},
@@ -2440,8 +2846,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
enable : function()
{
- var element = this.getInputElement();
- element.removeAttribute( 'disabled' );
+ var element = this.getElement(),
+ input = this.getInputElement();
+ input.removeAttribute( 'disabled' );
element.removeClass( 'cke_disabled' );
},
@@ -2452,7 +2859,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
isEnabled : function()
{
- return !this.getInputElement().getAttribute( 'disabled' );
+ return !this.getElement().hasClass( 'cke_disabled' );
},
/**
@@ -2561,18 +2968,27 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
/** @ignore */
exec : function( editor )
{
- editor.openDialog( this.dialogName );
+ // Special treatment for Opera. (#8031)
+ CKEDITOR.env.opera ?
+ CKEDITOR.tools.setTimeout( function() { editor.openDialog( this.dialogName ); }, 0, this )
+ : editor.openDialog( this.dialogName );
},
+
// Dialog commands just open a dialog ui, thus require no undo logic,
// undo support should dedicate to specific dialog implementation.
- canUndo: false
+ canUndo: false,
+
+ editorFocus : CKEDITOR.env.ie || CKEDITOR.env.webkit
};
(function()
{
var notEmptyRegex = /^([a]|[^a])+$/,
integerRegex = /^\d*$/,
- numberRegex = /^\d*(?:\.\d+)?$/;
+ numberRegex = /^\d*(?:\.\d+)?$/,
+ htmlLengthRegex = /^(((\d*(\.\d+))|(\d*))(px|\%)?)?$/,
+ cssLengthRegex = /^(((\d*(\.\d+))|(\d*))(px|em|ex|in|cm|mm|pt|pc|\%)?)?$/i,
+ inlineStyleRegex = /^(\s*[\w-]+\s*:\s*[^:;]+(?:;|$))*$/;
CKEDITOR.VALIDATE_OR = 1;
CKEDITOR.VALIDATE_AND = 2;
@@ -2581,6 +2997,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
functions : function()
{
+ var args = arguments;
return function()
{
/**
@@ -2589,28 +3006,28 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
* combine validate functions together to make more sophisticated
* validators.
*/
- var value = this && this.getValue ? this.getValue() : arguments[0];
+ var value = this && this.getValue ? this.getValue() : args[ 0 ];
var msg = undefined,
relation = CKEDITOR.VALIDATE_AND,
functions = [], i;
- for ( i = 0 ; i < arguments.length ; i++ )
+ for ( i = 0 ; i < args.length ; i++ )
{
- if ( typeof( arguments[i] ) == 'function' )
- functions.push( arguments[i] );
+ if ( typeof( args[i] ) == 'function' )
+ functions.push( args[i] );
else
break;
}
- if ( i < arguments.length && typeof( arguments[i] ) == 'string' )
+ if ( i < args.length && typeof( args[i] ) == 'string' )
{
- msg = arguments[i];
+ msg = args[i];
i++;
}
- if ( i < arguments.length && typeof( arguments[i]) == 'number' )
- relation = arguments[i];
+ if ( i < args.length && typeof( args[i]) == 'number' )
+ relation = args[i];
var passed = ( relation == CKEDITOR.VALIDATE_AND ? true : false );
for ( i = 0 ; i < functions.length ; i++ )
@@ -2621,16 +3038,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
passed = passed || functions[i]( value );
}
- if ( !passed )
- {
- if ( msg !== undefined )
- alert( msg );
- if ( this && ( this.select || this.focus ) )
- ( this.select || this.focus )();
- return false;
- }
-
- return true;
+ return !passed ? msg : true;
};
},
@@ -2643,20 +3051,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
return function()
{
var value = this && this.getValue ? this.getValue() : arguments[0];
- if ( !regex.test( value ) )
- {
- if ( msg !== undefined )
- alert( msg );
- if ( this && ( this.select || this.focus ) )
- {
- if ( this.select )
- this.select();
- else
- this.focus();
- }
- return false;
- }
- return true;
+ return !regex.test( value ) ? msg : true;
};
},
@@ -2675,6 +3070,21 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
return this.regex( numberRegex, msg );
},
+ 'cssLength' : function( msg )
+ {
+ return this.functions( function( val ){ return cssLengthRegex.test( CKEDITOR.tools.trim( val ) ); }, msg );
+ },
+
+ 'htmlLength' : function( msg )
+ {
+ return this.functions( function( val ){ return htmlLengthRegex.test( CKEDITOR.tools.trim( val ) ); }, msg );
+ },
+
+ 'inlineStyle' : function( msg )
+ {
+ return this.functions( function( val ){ return inlineStyleRegex.test( CKEDITOR.tools.trim( val ) ); }, msg );
+ },
+
equals : function( value, msg )
{
return this.functions( function( val ){ return val == value; }, msg );
@@ -2685,61 +3095,103 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
return this.functions( function( val ){ return val != value; }, msg );
}
};
- })();
-})();
-// Extend the CKEDITOR.editor class with dialog specific functions.
-CKEDITOR.tools.extend( CKEDITOR.editor.prototype,
- /** @lends CKEDITOR.editor.prototype */
+ CKEDITOR.on( 'instanceDestroyed', function( evt )
{
- /**
- * Loads and opens a registered dialog.
- * @param {String} dialogName The registered name of the dialog.
- * @param {Function} callback The function to be invoked after dialog instance created.
- * @see CKEDITOR.dialog.add
- * @example
- * CKEDITOR.instances.editor1.openDialog( 'smiley' );
- * @returns {CKEDITOR.dialog} The dialog object corresponding to the dialog displayed. null if the dialog name is not registered.
- */
- openDialog : function( dialogName, callback )
+ // Remove dialog cover on last instance destroy.
+ if ( CKEDITOR.tools.isEmpty( CKEDITOR.instances ) )
{
- var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ];
+ var currentTopDialog;
+ while ( ( currentTopDialog = CKEDITOR.dialog._.currentTop ) )
+ currentTopDialog.hide();
+ removeCovers();
+ }
+
+ var dialogs = evt.editor._.storedDialogs;
+ for ( var name in dialogs )
+ dialogs[ name ].destroy();
+
+ });
- // If the dialogDefinition is already loaded, open it immediately.
- if ( typeof dialogDefinitions == 'function' )
+ })();
+
+ // Extend the CKEDITOR.editor class with dialog specific functions.
+ CKEDITOR.tools.extend( CKEDITOR.editor.prototype,
+ /** @lends CKEDITOR.editor.prototype */
+ {
+ /**
+ * Loads and opens a registered dialog.
+ * @param {String} dialogName The registered name of the dialog.
+ * @param {Function} callback The function to be invoked after dialog instance created.
+ * @see CKEDITOR.dialog.add
+ * @example
+ * CKEDITOR.instances.editor1.openDialog( 'smiley' );
+ * @returns {CKEDITOR.dialog} The dialog object corresponding to the dialog displayed. null if the dialog name is not registered.
+ */
+ openDialog : function( dialogName, callback )
{
- var storedDialogs = this._.storedDialogs ||
- ( this._.storedDialogs = {} );
+ if ( this.mode == 'wysiwyg' && CKEDITOR.env.ie )
+ {
+ var selection = this.getSelection();
+ selection && selection.lock();
+ }
- var dialog = storedDialogs[ dialogName ] ||
- ( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );
+ var dialogDefinitions = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],
+ dialogSkin = this.skin.dialog;
- callback && callback.call( dialog, dialog );
- dialog.show();
+ if ( CKEDITOR.dialog._.currentTop === null )
+ showCover( this );
- return dialog;
- }
- else if ( dialogDefinitions == 'failed' )
- throw new Error( '[CKEDITOR.dialog.openDialog] Dialog "' + dialogName + '" failed when loading definition.' );
+ // If the dialogDefinition is already loaded, open it immediately.
+ if ( typeof dialogDefinitions == 'function' && dialogSkin._isLoaded )
+ {
+ var storedDialogs = this._.storedDialogs ||
+ ( this._.storedDialogs = {} );
+
+ var dialog = storedDialogs[ dialogName ] ||
+ ( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );
- // Not loaded? Load the .js file first.
- var body = CKEDITOR.document.getBody(),
- cursor = body.$.style.cursor,
- me = this;
+ callback && callback.call( dialog, dialog );
+ dialog.show();
- body.setStyle( 'cursor', 'wait' );
- CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( dialogDefinitions ), function()
+ return dialog;
+ }
+ else if ( dialogDefinitions == 'failed' )
{
+ hideCover();
+ throw new Error( '[CKEDITOR.dialog.openDialog] Dialog "' + dialogName + '" failed when loading definition.' );
+ }
+
+ var me = this;
+
+ function onDialogFileLoaded( success )
+ {
+ var dialogDefinition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],
+ skin = me.skin.dialog;
+
+ // Check if both skin part and definition is loaded.
+ if ( !skin._isLoaded || loadDefinition && typeof success == 'undefined' )
+ return;
+
// In case of plugin error, mark it as loading failed.
- if ( typeof CKEDITOR.dialog._.dialogDefinitions[ dialogName ] != 'function' )
- CKEDITOR.dialog._.dialogDefinitions[ dialogName ] = 'failed';
+ if ( typeof dialogDefinition != 'function' )
+ CKEDITOR.dialog._.dialogDefinitions[ dialogName ] = 'failed';
+
me.openDialog( dialogName, callback );
- body.setStyle( 'cursor', cursor );
- } );
+ }
- return null;
- }
- });
+ if ( typeof dialogDefinitions == 'string' )
+ {
+ var loadDefinition = 1;
+ CKEDITOR.scriptLoader.load( CKEDITOR.getUrl( dialogDefinitions ), onDialogFileLoaded, null, 0, 1 );
+ }
+
+ CKEDITOR.skins.load( this, 'dialog', onDialogFileLoaded );
+
+ return null;
+ }
+ });
+})();
CKEDITOR.plugins.add( 'dialog',
{
@@ -2769,6 +3221,15 @@ CKEDITOR.plugins.add( 'dialog',
*/
/**
+ * If the dialog has more than one tab, put focus into the first tab as soon as dialog is opened.
+ * @name CKEDITOR.config.dialog_startupFocusTab
+ * @type Boolean
+ * @default false
+ * @example
+ * config.dialog_startupFocusTab = true;
+ */
+
+/**
* The distance of magnetic borders used in moving and resizing dialogs,
* measured in pixels.
* @name CKEDITOR.config.dialog_magnetDistance
@@ -2777,3 +3238,106 @@ CKEDITOR.plugins.add( 'dialog',
* @example
* config.dialog_magnetDistance = 30;
*/
+
+/**
+ * The guideline to follow when generating the dialog buttons. There are 3 possible options:
+ *
+ * - 'OS' - the buttons will be displayed in the default order of the user's OS;
+ * - 'ltr' - for Left-To-Right order;
+ * - 'rtl' - for Right-To-Left order.
+ *
+ * @name CKEDITOR.config.dialog_buttonsOrder
+ * @type String
+ * @default 'OS'
+ * @since 3.5
+ * @example
+ * config.dialog_buttonsOrder = 'rtl';
+ */
+
+/**
+ * The dialog contents to removed. It's a string composed by dialog name and tab name with a colon between them.
+ * Separate each pair with semicolon (see example).
+ * Note: All names are case-sensitive.
+ * Note: Be cautious when specifying dialog tabs that are mandatory, like "info", dialog functionality might be broken because of this!
+ * @name CKEDITOR.config.removeDialogTabs
+ * @type String
+ * @since 3.5
+ * @default ''
+ * @example
+ * config.removeDialogTabs = 'flash:advanced;image:Link';
+ */
+
+/**
+ * Fired when a dialog definition is about to be used to create a dialog into
+ * an editor instance. This event makes it possible to customize the definition
+ * before creating it.
+ * Note that this event is called only the first time a specific dialog is
+ * opened. Successive openings will use the cached dialog, and this event will
+ * not get fired.
+ * @name CKEDITOR#dialogDefinition
+ * @event
+ * @param {CKEDITOR.dialog.definition} data The dialog defination that
+ * is being loaded.
+ * @param {CKEDITOR.editor} editor The editor instance that will use the
+ * dialog.
+ */
+
+/**
+ * Fired when a tab is going to be selected in a dialog
+ * @name CKEDITOR.dialog#selectPage
+ * @event
+ * @param {String} page The id of the page that it's gonna be selected.
+ * @param {String} currentPage The id of the current page.
+ */
+
+/**
+ * Fired when the user tries to dismiss a dialog
+ * @name CKEDITOR.dialog#cancel
+ * @event
+ * @param {Boolean} hide Whether the event should proceed or not.
+ */
+
+/**
+ * Fired when the user tries to confirm a dialog
+ * @name CKEDITOR.dialog#ok
+ * @event
+ * @param {Boolean} hide Whether the event should proceed or not.
+ */
+
+/**
+ * Fired when a dialog is shown
+ * @name CKEDITOR.dialog#show
+ * @event
+ */
+
+/**
+ * Fired when a dialog is shown
+ * @name CKEDITOR.editor#dialogShow
+ * @event
+ */
+
+/**
+ * Fired when a dialog is hidden
+ * @name CKEDITOR.dialog#hide
+ * @event
+ */
+
+/**
+ * Fired when a dialog is hidden
+ * @name CKEDITOR.editor#dialogHide
+ * @event
+ */
+
+/**
+ * Fired when a dialog is being resized. The event is fired on
+ * both the 'CKEDITOR.dialog' object and the dialog instance
+ * since 3.5.3, previously it's available only in the global object.
+ * @name CKEDITOR.dialog#resize
+ * @since 3.5
+ * @event
+ * @param {CKEDITOR.dialog} dialog The dialog being resized (if
+ * it's fired on the dialog itself, this parameter isn't sent).
+ * @param {String} skin The skin name.
+ * @param {Number} width The new width.
+ * @param {Number} height The new height.
+ */
|