X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;ds=sidebyside;f=_source%2Fplugins%2Fdialog%2Fplugin.js;h=68494616cb9bb2f7cc2d7282ff62845dc6b6fc90;hb=48b1db88210b4160dce439c6e3e32e14af8c106b;hp=c052120dcb0c6119e0aff1dd9ee387e97097ae27;hpb=ea7e3453c7b0f023b050aca6d9f83ab372860d91;p=ckeditor.git
diff --git a/_source/plugins/dialog/plugin.js b/_source/plugins/dialog/plugin.js
index c052120..6849461 100644
--- a/_source/plugins/dialog/plugin.js
+++ b/_source/plugins/dialog/plugin.js
@@ -1,5 +1,5 @@
/*
-Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
@@ -7,11 +7,6 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
* @fileOverview The floating dialog plugin.
*/
-CKEDITOR.plugins.add( 'dialog',
- {
- requires : [ 'dialogui' ]
- });
-
/**
* No resize for this dialog.
* @constant
@@ -38,6 +33,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
(function()
{
+ var cssLength = CKEDITOR.tools.cssLength;
function isTabVisible( tabId )
{
return !!this._.tabs[ tabId ][ 0 ].$.offsetHeight;
@@ -73,8 +69,29 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
return null;
}
- // Stores dialog related data from skin definitions. e.g. margin sizes.
- var skinData = {};
+
+ 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', '' );
+ }
+ }
+ }
+ }
/**
* This is the base class for runtime dialog objects. An instance of this
@@ -88,15 +105,19 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
CKEDITOR.dialog = function( editor, dialogName )
{
// Load the dialog definition.
- var definition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ];
- if ( !definition )
- {
- console.log( 'Error: The dialog "' + dialogName + '" is not defined.' );
- return;
- }
+ var definition = CKEDITOR.dialog._.dialogDefinitions[ dialogName ],
+ defaultDefinition = CKEDITOR.tools.clone( defaultDialogDefinition ),
+ buttonsOrder = editor.config.dialog_buttonsOrder || 'OS',
+ dir = editor.lang.dir;
+
+ 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 );
@@ -105,15 +126,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 );
@@ -126,7 +138,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
name : dialogName,
contentSize : { width : 0, height : 0 },
size : { width : 0, height : 0 },
- updateSize : false,
contents : {},
buttons : {},
accessKeyMap : {},
@@ -148,6 +159,12 @@ 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(
@@ -161,6 +178,42 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
// 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;
+
+ var tabsToRemove = {};
+ // 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 );
@@ -175,6 +228,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;
});
@@ -255,8 +311,29 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
if ( this.fire( 'cancel', { hide : true } ).hide !== false )
this.hide();
+ evt.data.preventDefault();
}, this );
+ // 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( forward )
{
var focusList = me._.focusList,
@@ -264,16 +341,35 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
if ( focusList.length < 1 )
return;
- var currentIndex = ( 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() )
{
currentIndex = ( currentIndex + offset + focusList.length ) % focusList.length;
- if ( currentIndex == me._.currentFocusIndex )
+ if ( currentIndex == startIndex )
break;
}
focusList[ currentIndex ].focus();
+
+ // Select whole field content.
+ if ( focusList[ currentIndex ].type == 'text' )
+ focusList[ currentIndex ].select();
}
+ this.changeFocus = changeFocus;
+
+ var processed;
+
function focusKeydownHandler( evt )
{
// If I'm not the top dialog, ignore.
@@ -281,7 +377,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
return;
var keystroke = evt.data.getKeystroke(),
- processed = false;
+ rtl = editor.lang.dir == 'rtl';
+
+ processed = 0;
if ( keystroke == 9 || keystroke == CKEDITOR.SHIFT + 9 )
{
var shiftPressed = ( keystroke == CKEDITOR.SHIFT + 9 );
@@ -300,22 +398,30 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
changeFocus( !shiftPressed );
}
- processed = true;
+ 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;
me._.tabs[ me._.currentTabId ][ 0 ].focus();
- processed = true;
+ processed = 1;
}
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 = true;
+ processed = 1;
+ }
+ else if ( ( keystroke == 13 || keystroke == 32 ) && me._.tabBarMode )
+ {
+ this.selectPage( this._.currentTabId );
+ this._.tabBarMode = false;
+ this._.currentFocusIndex = -1;
+ changeFocus( true );
+ processed = 1;
}
if ( processed )
@@ -325,20 +431,27 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
}
}
+ function focusKeyPressHandler( evt )
+ {
+ processed && evt.data.preventDefault();
+ }
+
+ var dialogElement = this._.element;
// Add the dialog keyboard handlers.
this.on( 'show', function()
{
- CKEDITOR.document.on( 'keydown', focusKeydownHandler, this, null, 0 );
+ dialogElement.on( 'keydown', focusKeydownHandler, this, null, 0 );
+ // 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 ) )
+ dialogElement.on( 'keypress', focusKeyPressHandler, 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 );
+ dialogElement.removeListener( 'keydown', focusKeydownHandler );
+ if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )
+ dialogElement.removeListener( 'keypress', focusKeyPressHandler );
} );
this.on( 'iframeAdded', function( evt )
{
@@ -349,10 +462,30 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
// 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( true );
/*
* IE BUG: If the initial focus went into a non-text element (e.g. button),
@@ -399,30 +532,29 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
// Insert the tabs and contents.
for ( var i = 0 ; i < definition.contents.length ; i++ )
- this.addPage( definition.contents[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( true );
+ }
+ evt.data.preventDefault();
+ }
}, this );
// Insert buttons.
@@ -438,17 +570,18 @@ 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.
- function Focusable( dialog, element, index ) {
+ function Focusable( dialog, element, index )
+ {
this.element = element;
this.focusIndex = index;
+ // TODO: support tabIndex for focusables.
+ this.tabIndex = 0;
this.isFocusable = function()
{
- return true;
+ return !element.getAttribute( 'disabled' ) && element.isVisible();
};
this.focus = function()
{
@@ -473,6 +606,12 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
CKEDITOR.dialog.prototype =
{
+ destroy : function()
+ {
+ this.hide();
+ this._.element.remove();
+ },
+
/**
* Resizes the dialog.
* @param {Number} width The width of the dialog in pixels.
@@ -497,7 +636,6 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
}, this._.editor );
this._.contentSize = { width : width, height : height };
- this._.updateSize = true;
};
})(),
@@ -509,15 +647,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};
},
/**
@@ -525,13 +656,14 @@ 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()
{
var isFixed;
- return function( x, y )
+ return function( x, y, save )
{
// The dialog may be fixed positioned or absolute positioned. Ask the
// browser what is the current situation first.
@@ -558,6 +690,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
'left' : ( x > 0 ? x : 0 ) + 'px',
'top' : ( y > 0 ? y : 0 ) + 'px'
});
+
+ save && ( this._.moved = 1 );
};
})(),
@@ -576,16 +710,13 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
show : function()
{
- if ( this._.editor.mode == 'wysiwyg' && CKEDITOR.env.ie )
- this._.editor.getSelection().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 )
@@ -600,14 +731,15 @@ 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.minWidth,
+ this._.contentSize && this._.contentSize.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;
@@ -619,10 +751,14 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
CKEDITOR.dialog._.currentTop = this;
this._.parentDialog = null;
- addCover( this._.editor );
+ showCover( this._.editor );
- CKEDITOR.document.on( 'keydown', accessKeyDownHandler );
- CKEDITOR.document.on( 'keyup', accessKeyUpHandler );
+ element.on( 'keydown', accessKeyDownHandler );
+ element.on( CKEDITOR.env.opera ? 'keypress' : 'keyup', accessKeyUpHandler );
+
+ // Prevent some keys from bubbling up. (#4269)
+ for ( var event in { keyup :1, keydown :1, keypress :1 } )
+ element.on( event, preventKeyBubbling );
}
else
{
@@ -641,21 +777,17 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
// 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();
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 );
// Save the initial values of the dialog.
this.foreach( function( contentObj ) { contentObj.setInitValue && contentObj.setInitValue(); } );
@@ -665,6 +797,19 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
},
/**
+ * Rearrange the dialog to its previous position or the middle of the window.
+ * @since 3.5
+ */
+ layout : function()
+ {
+ var viewSize = CKEDITOR.document.getWindow().getViewPaneSize(),
+ dialogSize = this.getSize();
+
+ this.move( this._.moved ? this._.position.x : ( viewSize.width - dialogSize.width ) / 2,
+ this._.moved ? this._.position.y : ( viewSize.height - dialogSize.height ) / 2 );
+ },
+
+ /**
* Executes a function for each UI element.
* @param {Function} fn Function to execute for each UI element.
* @returns {CKEDITOR.dialog} The current dialog object.
@@ -674,7 +819,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( this._.contents[i][j] );
}
return this;
},
@@ -687,7 +832,7 @@ 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; };
})(),
@@ -718,22 +863,24 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
hide : function()
{
- this.fire( 'hide', {} );
-
- // Remove the dialog's element from the root document.
- var element = this._.element;
- if ( !element.getParent() )
+ if ( !this.parts.dialog.isVisible() )
return;
- element.remove();
+ this.fire( 'hide', {} );
+ this._.editor.fire( 'dialogHide', this );
+ var element = this._.element;
+ 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();
@@ -747,19 +894,26 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
CKEDITOR.dialog._.currentZIndex = null;
// Remove access key handlers.
- CKEDITOR.document.removeListener( 'keydown', accessKeyDownHandler );
- CKEDITOR.document.removeListener( 'keyup', accessKeyUpHandler );
+ 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();
if ( editor.mode == 'wysiwyg' && CKEDITOR.env.ie )
- editor.getSelection().unlock( true );
+ {
+ var selection = editor.getSelection();
+ selection && selection.unlock( true );
+ }
}
else
CKEDITOR.dialog._.currentZIndex -= 10;
-
+ delete this._.parentDialog;
// Reset the initial values of the dialog.
this.foreach( function( contentObj ) { contentObj.resetInitValue && contentObj.resetInitValue(); } );
},
@@ -781,34 +935,37 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
children : contents.elements,
expand : !!contents.expand,
padding : contents.padding,
- style : contents.style || 'width: 100%; height: 100%;'
+ style : contents.style || 'width: 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,
@@ -846,6 +1003,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 )
{
@@ -856,15 +1020,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.
@@ -874,9 +1061,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();
},
/**
@@ -891,6 +1084,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
if ( !tab )
return;
tab.show();
+ this._.pageCount++;
+ this.updateStyle();
},
/**
@@ -925,7 +1120,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
*/
getContentElement : function( pageId, elementId )
{
- return this._.contents[pageId][elementId];
+ var page = this._.contents[ pageId ];
+ return page && page[ elementId ];
},
/**
@@ -1172,7 +1368,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 ]
@@ -1264,7 +1460,7 @@ 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 );
};
@@ -1424,7 +1620,10 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
element = dialog.getElement().getFirst(),
editor = dialog.getParentEditor(),
magnetDistance = editor.config.dialog_magnetDistance,
- margins = skinData[ editor.skinName ].margins || [ 0, 0, 0, 0 ];
+ margins = editor.skin.margins || [ 0, 0, 0, 0 ];
+
+ if ( typeof magnetDistance == 'undefined' )
+ magnetDistance = 20;
function mouseMoveHandler( evt )
{
@@ -1443,7 +1642,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;
@@ -1454,7 +1653,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
else
realY = abstractDialogCoords.y;
- dialog.move( realX, realY );
+ dialog.move( realX, realY, 1 );
evt.data.preventDefault();
}
@@ -1466,7 +1665,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 );
}
@@ -1474,8 +1673,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 );
@@ -1484,7 +1681,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 );
}
@@ -1495,169 +1692,189 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
function initResizeHandles( dialog )
{
- var definition = dialog.definition,
- minWidth = definition.minWidth || 0,
- minHeight = definition.minHeight || 0,
- resizable = definition.resizable,
- margins = skinData[ dialog.getParentEditor().skinName ].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 )
+ function positionDialog( right )
{
- coords.y2 += dy;
+ // Maintain righthand sizing in RTL.
+ if ( dialog._.moved && editor.lang.dir == 'rtl' )
+ {
+ var element = dialog._.element.getFirst();
+ element.setStyle( 'right', right + "px" );
+ element.removeStyle( 'left' );
+ }
+ else if ( !dialog._.moved )
+ dialog.layout();
}
- function leftSizer( coords, dx )
+ var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )
{
- coords.x += dx;
- }
+ startSize = dialog.getSize();
- var lastCoords = null,
- abstractDialogCoords = null,
- magnetDistance = dialog._.editor.config.magnetDistance,
- parts = [ 'tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br' ];
+ var content = dialog.parts.contents,
+ iframeDialog = content.$.getElementsByTagName( 'iframe' ).length;
- 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 };
+ // Shim to help capturing "mousemove" over iframe.
+ if ( iframeDialog )
+ {
+ dialogCover = CKEDITOR.dom.element.createFromHtml( '' );
+ content.append( dialogCover );
+ }
+
+ // 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 );
+
+ origin = { x : $event.screenX, y : $event.screenY };
+
+ viewSize = CKEDITOR.document.getWindow().getViewPaneSize();
- CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
- CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
+ 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;
-
- 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 );
+ 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();
- lastCoords = { x : x, y : y };
-
- var realX, realY, realX2, realY2;
+ // IE might return "auto", we need exact position.
+ if ( right )
+ right = right == 'auto' ? viewSize.width - ( position.x || 0 ) - element.getSize( 'width' ) : parseInt( right, 10 );
- 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 ( position.y + internalHeight > viewSize.height )
+ internalHeight = viewSize.height - position.y;
- 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 ( ( rtl ? right : position.x ) + internalWidth > viewSize.width )
+ internalWidth = viewSize.width - ( rtl ? right : position.x );
- 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;
+ // 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 ) && !( rtl && dx > 0 && !position.x ) )
+ width = Math.max( def.minWidth || 0, internalWidth - wrapperWidth );
- 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 ;
+ if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
+ height = Math.max( def.minHeight || 0, internalHeight - wrapperHeight );
- dialog.move( realX, realY );
- dialog.resize( realX2 - realX, realY2 - realY );
+ dialog.resize( width, height );
+ // The right property might get broken during resizing, so computing it before the resizing.
+ positionDialog( right );
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] } );
-// }
+ // Switch back to use the left property, if RTL is used.
+ if ( editor.lang.dir == 'rtl' )
+ {
+ var element = dialog._.element.getFirst(),
+ left = element.getComputedStyle( 'left' );
+
+ // IE might return "auto", we need exact position.
+ if ( left == 'auto' )
+ left = viewSize.width - parseInt( element.getStyle( 'right' ), 10 ) - dialog.getSize().width;
+ else
+ left = parseInt( left, 10 );
+
+ element.removeStyle( 'right' );
+ // Make sure the left property gets applied, even if it is the same as previously.
+ dialog._.position.x += 1;
+ dialog.move( left, dialog._.position.y );
+ }
+ }
}
var resizeCover;
- var coverElement;
+ // Caching resuable covers and allowing only one cover
+ // on screen.
+ var covers = {},
+ currentCover;
- 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 html = [
- ' '
+ ( !CKEDITOR.env.ie6Compat ? 'background-color: ' + backgroundColorStyle : '' ),
+ '" class="cke_dialog_background_cover">'
];
-
if ( CKEDITOR.env.ie6Compat )
{
// Support for custom document.domain in IE.
- var isCustomDomain = CKEDITOR.env.isCustomDomain();
+ var isCustomDomain = CKEDITOR.env.isCustomDomain(),
+ iframeHtml = '';
html.push(
' |