X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Fdialog%2Fplugin.js;h=e21f5d1afd5ae5e3b628d4eea959853d7b335717;hb=fb481ba0a7d298e3e7b9034fcb9f2afdc6e8e796;hp=c052120dcb0c6119e0aff1dd9ee387e97097ae27;hpb=ea7e3453c7b0f023b050aca6d9f83ab372860d91;p=ckeditor.git
diff --git a/_source/plugins/dialog/plugin.js b/_source/plugins/dialog/plugin.js
index c052120..e21f5d1 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-2012, 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,59 @@ 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', '' );
+ }
+ }
+ }
+ }
+
+ // 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
@@ -88,15 +135,22 @@ 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,
+ 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 );
@@ -105,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 );
@@ -126,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 : {},
@@ -148,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 );
@@ -175,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;
});
@@ -215,25 +305,17 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
{
if ( item.validate )
{
- var isValid = item.validate( this );
+ var retval = item.validate( this ),
+ invalid = typeof ( retval ) == 'string' || retval === false;
- if ( typeof isValid == 'string' )
+ if ( invalid )
{
- alert( isValid );
- isValid = false;
- }
-
- if ( isValid === false )
- {
- 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 );
@@ -255,33 +337,78 @@ 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 currentIndex = ( me._.currentFocusIndex + offset + focusList.length ) % focusList.length;
- while ( !focusList[ currentIndex ].isFocusable() )
+ 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 ( offset && !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();
}
- function focusKeydownHandler( evt )
+ this.changeFocus = changeFocus;
+
+
+ function keydownHandler( evt )
{
// If I'm not the top dialog, ignore.
if ( me != CKEDITOR.dialog._.currentTop )
return;
var keystroke = evt.data.getKeystroke(),
- processed = false;
+ rtl = editor.lang.dir == 'rtl',
+ button;
+
+ processed = stopPropagation = 0;
+
if ( keystroke == 9 || keystroke == CKEDITOR.SHIFT + 9 )
{
var shiftPressed = ( keystroke == CKEDITOR.SHIFT + 9 );
@@ -297,62 +424,129 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
else
{
// Change the focus of inputs.
- changeFocus( !shiftPressed );
+ changeFocus( shiftPressed ? -1 : 1 );
}
- 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;
}
-
- 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 keypressHandler( evt )
+ {
+ 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,#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 );
+ 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),
@@ -398,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.
@@ -438,17 +631,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()
{
@@ -471,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.
@@ -496,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;
};
})(),
@@ -509,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};
},
/**
@@ -525,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.
@@ -576,16 +796,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,29 +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 );
+ showCover( this._.editor );
- CKEDITOR.document.on( 'keydown', accessKeyDownHandler );
- CKEDITOR.document.on( 'keyup', accessKeyUpHandler );
}
else
{
@@ -632,30 +847,25 @@ 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 );
// Save the initial values of the dialog.
this.foreach( function( contentObj ) { contentObj.setInitValue && contentObj.setInitValue(); } );
@@ -665,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.
@@ -674,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;
},
@@ -687,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;
@@ -701,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 );
});
@@ -718,22 +979,26 @@ 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 );
+ // Reset the tab page.
+ this.selectPage( this._.tabIdList[ 0 ] );
+ 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 +1012,22 @@ 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 );
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 +1049,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%;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,
@@ -846,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 )
{
@@ -856,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.
@@ -874,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();
},
/**
@@ -891,6 +1198,8 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
if ( !tab )
return;
tab.show();
+ this._.pageCount++;
+ this.updateStyle();
},
/**
@@ -921,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 ];
},
/**
@@ -933,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 )
@@ -946,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 )
{
@@ -1053,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 )
{
@@ -1172,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 ]
@@ -1246,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 )
* {
@@ -1264,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 )
@@ -1286,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 )
@@ -1296,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 )
@@ -1312,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 )
@@ -1329,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 )
@@ -1340,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 )
@@ -1352,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 )
* {
@@ -1375,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 )
{
@@ -1389,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 )
@@ -1407,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
*/
@@ -1424,7 +1805,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 +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;
@@ -1454,7 +1838,7 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
else
realY = abstractDialogCoords.y;
- dialog.move( realX, realY );
+ dialog.move( realX, realY, 1 );
evt.data.preventDefault();
}
@@ -1466,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 );
}
@@ -1474,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 );
@@ -1484,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 );
}
@@ -1495,169 +1877,161 @@ 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 )
+ 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 );
+
+ origin = { x : $event.screenX, y : $event.screenY };
- CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
- CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
+ 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;
-
- 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.resize( width, height );
- 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;
- var addCover = function( editor )
+ function cancelEvent( ev )
+ {
+ ev.data.preventDefault(1);
+ }
+
+ 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(
' |