Index: _source/plugins/dialog/plugin.js
===================================================================
--- _source/plugins/dialog/plugin.js (revision 3044)
+++ _source/plugins/dialog/plugin.js (working copy)
@@ -311,7 +311,7 @@
this._.dummyText = CKEDITOR.dom.element.createFromHtml( '' );
this._.dummyText.appendTo( element );
- CKEDITOR.skins.load( editor.config.skin, 'dialog' );
+ CKEDITOR.skins.load( editor.config.skin, 'dialog', this._.editor);
};
CKEDITOR.dialog.prototype =
@@ -331,13 +331,12 @@
if ( this._.size && this._.size.width == width && this._.size.height == height )
return;
- CKEDITOR.dialog.fire( 'resize',
- {
- dialog : this,
- skin : this._.editor.config.skin,
- width : width,
- height : height
- }, this._.editor );
+ this._.editor.fire( 'dialogBeforeResize', {
+ dialog : this,
+ skin : this._.editor.config.skin,
+ width : width,
+ height : height
+ } );
this._.size = { width : width, height : height };
};
@@ -841,6 +840,21 @@
{
if ( this._.editor.mode && this._.selectedRanges )
( new CKEDITOR.dom.selection( this._.editor.document ) ).selectRanges( this._.selectedRanges );
+ },
+ /**
+ * Sets the width of margins of dialogs, which is used for the dialog moving and resizing logic.
+ * The margin here means the area between the dialog's container
and the visual boundary of the dialog.
+ * Typically this area is used for dialog shadows.
+ * This function is typically called in a skin's JavaScript files.
+ * @param {Number} top The top margin in pixels.
+ * @param {Number} right The right margin in pixels.
+ * @param {Number} bottom The bottom margin in pixels.
+ * @param {Number} left The left margin in pixels.
+ * @example
+ */
+ setMargins : function( top, right, bottom, left )
+ {
+ this._.margins = [ top, right, bottom, left ];
}
};
@@ -946,22 +960,6 @@
addUIElement : function( typeName, builder )
{
this._.uiElementBuilders[typeName] = builder;
- },
-
- /**
- * Sets the width of margins of dialogs, which is used for the dialog moving and resizing logic.
- * The margin here means the area between the dialog's container
and the visual boundary of the dialog.
- * Typically this area is used for dialog shadows.
- * This function is typically called in a skin's JavaScript files.
- * @param {Number} top The top margin in pixels.
- * @param {Number} right The right margin in pixels.
- * @param {Number} bottom The bottom margin in pixels.
- * @param {Number} left The left margin in pixels.
- * @example
- */
- setMargins : function( top, right, bottom, left )
- {
- this._.margins = [ top, right, bottom, left ];
}
});
@@ -967,6 +965,12 @@
CKEDITOR.dialog._ =
{
+ /**
+ * The refered editor instance while opening.
+ * @field
+ */
+ editor: null,
+
uiElementBuilders : {},
dialogDefinitions : {},
@@ -1249,17 +1253,17 @@
abstractDialogCoords.x += dx;
abstractDialogCoords.y += dy;
- if ( abstractDialogCoords.x + CKEDITOR.dialog._.margins[3] < magnetDistance )
- realX = - CKEDITOR.dialog._.margins[3];
- else if ( abstractDialogCoords.x - CKEDITOR.dialog._.margins[1] > viewPaneSize.width - dialogSize.width - magnetDistance )
- realX = viewPaneSize.width - dialogSize.width + CKEDITOR.dialog._.margins[1];
+ if ( abstractDialogCoords.x + dialog._.margins[3] < magnetDistance )
+ realX = - dialog._.margins[3];
+ else if ( abstractDialogCoords.x - dialog._.margins[1] > viewPaneSize.width - dialogSize.width - magnetDistance )
+ realX = viewPaneSize.width - dialogSize.width + dialog._.margins[1];
else
realX = abstractDialogCoords.x;
- if ( abstractDialogCoords.y + CKEDITOR.dialog._.margins[0] < magnetDistance )
- realY = - CKEDITOR.dialog._.margins[0];
- else if ( abstractDialogCoords.y - CKEDITOR.dialog._.margins[2] > viewPaneSize.height - dialogSize.height - magnetDistance )
- realY = viewPaneSize.height - dialogSize.height + CKEDITOR.dialog._.margins[2];
+ if ( abstractDialogCoords.y + dialog._.margins[0] < magnetDistance )
+ realY = - dialog._.margins[0];
+ else if ( abstractDialogCoords.y - dialog._.margins[2] > viewPaneSize.height - dialogSize.height - magnetDistance )
+ realY = viewPaneSize.height - dialogSize.height + dialog._.margins[2];
else
realY = abstractDialogCoords.y;
@@ -1370,8 +1374,8 @@
var realX, realY, realX2, realY2;
- if ( abstractDialogCoords.x + CKEDITOR.dialog._.margins[3] < magnetDistance )
- realX = - CKEDITOR.dialog._.margins[3];
+ if ( abstractDialogCoords.x + dialog._.margins[3] < magnetDistance )
+ realX = - dialog._.margins[3];
else if ( partName.search( 'l' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
realX = abstractDialogCoords.x2 - minWidth;
else
@@ -1377,8 +1381,8 @@
else
realX = abstractDialogCoords.x;
- if ( abstractDialogCoords.y + CKEDITOR.dialog._.margins[0] < magnetDistance )
- realY = - CKEDITOR.dialog._.margins[0];
+ if ( abstractDialogCoords.y + dialog._.margins[0] < magnetDistance )
+ realY = - dialog._.margins[0];
else if ( partName.search( 't' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
realY = abstractDialogCoords.y2 - minHeight;
else
@@ -1384,8 +1388,8 @@
else
realY = abstractDialogCoords.y;
- if ( abstractDialogCoords.x2 - CKEDITOR.dialog._.margins[1] > viewPaneSize.width - magnetDistance )
- realX2 = viewPaneSize.width + CKEDITOR.dialog._.margins[1] ;
+ if ( abstractDialogCoords.x2 - dialog._.margins[1] > viewPaneSize.width - magnetDistance )
+ realX2 = viewPaneSize.width + dialog._.margins[1] ;
else if ( partName.search( 'r' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
realX2 = abstractDialogCoords.x + minWidth;
else
@@ -1391,8 +1395,8 @@
else
realX2 = abstractDialogCoords.x2;
- if ( abstractDialogCoords.y2 - CKEDITOR.dialog._.margins[2] > viewPaneSize.height - magnetDistance )
- realY2= viewPaneSize.height + CKEDITOR.dialog._.margins[2] ;
+ if ( abstractDialogCoords.y2 - dialog._.margins[2] > viewPaneSize.height - magnetDistance )
+ realY2= viewPaneSize.height + dialog._.margins[2] ;
else if ( partName.search( 'b' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
realY2 = abstractDialogCoords.y + minHeight;
else
@@ -1423,7 +1427,7 @@
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] ) )
+ resizable == CKEDITOR.DIALOG_RESIZE_WIDTH && heightTest.test( parts[i] ) )
{
element.hide();
continue;
@@ -2366,7 +2370,7 @@
var dialog = storedDialogs[ dialogName ] ||
( storedDialogs[ dialogName ] = new CKEDITOR.dialog( this, dialogName ) );
-
+ this.fire( 'dialogBeforeShow', dialog );
dialog.show();
return dialog;
Index: _source/core/skins.js
===================================================================
--- _source/core/skins.js (revision 3044)
+++ _source/core/skins.js (working copy)
@@ -145,6 +145,7 @@
* @param {String} skinName The name of the skin to be loaded.
* @param {String} skinPart The skin part to be loaded. Common skin parts
* are "editor" and "dialog".
+ * @param {CKEDITOR.editor} editor The editor instance which this skin belongs to.
* @param {Function} [callback] A function to be called once the skin
* part files are loaded.
* @example
@@ -149,10 +150,23 @@
* part files are loaded.
* @example
*/
- load : function( skinName, skinPart, callback )
+ load : function( skinName, skinPart, editor, callback )
{
- if ( loaded[ skinName ] )
- loadedPart( skinName, skinPart, callback );
+ var skinDefinition = loaded[ skinName ];
+
+ function onSkinPartLoaded()
+ {
+ var init;
+ // Initialize skin parts.
+ ( init = loaded[ skinName ][ 'init' + CKEDITOR.tools
+ .capitalize( skinPart ) + 'Part' ] )
+ && init( editor );
+ if( callback )
+ callback();
+ }
+
+ if( skinDefinition )
+ loadedPart( skinName, skinPart, onSkinPartLoaded );
else
{
CKEDITOR.scriptLoader.load( CKEDITOR.getUrl(
@@ -159,9 +173,12 @@
'_source/' + // %REMOVE_LINE%
'skins/' + skinName + '/skin.js' ), function()
{
- loadedPart( skinName, skinPart, callback );
+ var init;
+ //Initialize the skin.
+ (init = loaded[skinName].init) && init(editor);
+ loadedPart( skinName, skinPart, onSkinPartLoaded );
} );
}
}
- };
+ };
})();
Index: _source/core/editor.js
===================================================================
--- _source/core/editor.js (revision 3044)
+++ _source/core/editor.js (working copy)
@@ -198,7 +198,7 @@
var loadSkin = function( editor )
{
- CKEDITOR.skins.load( editor.config.skin, 'editor', function()
+ CKEDITOR.skins.load( editor.config.skin, 'editor', editor, function()
{
loadTheme( editor );
});
Index: _source/core/tools.js
===================================================================
--- _source/core/tools.js (revision 3044)
+++ _source/core/tools.js (working copy)
@@ -310,6 +310,14 @@
return i;
}
return -1;
+ },
+
+ /**
+ * Turn the first letter of string to upper-case.
+ * @param {String} str
+ */
+ capitalize: function( str ) {
+ return str.charAt( 0 ).toUpperCase( ) + str.substring( 1 ).toLowerCase( );
}
};
Index: _source/skins/default/skin.js
===================================================================
--- _source/skins/default/skin.js (revision 3044)
+++ _source/skins/default/skin.js (working copy)
@@ -3,29 +3,6 @@
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
-CKEDITOR.skins.add( 'default', (function()
-{
- var preload = [];
- var dialogJs = [];
-
- if ( CKEDITOR.env.ie && CKEDITOR.env.version <= 6 )
- {
- // For IE6, we need to preload some images, otherwhise they will be
- // downloaded several times (CSS background bug).
- preload.push( 'icons.gif', 'images/sprites.gif', 'images/dialog.sides.gif' );
-
- // The dialog must be fixed by code in IE6, as it doesn't support
- // several CSS features (absolute positioning).
- // dialogJs.push( 'dialog_ie6.js' );
- }
-
- return {
- preload : preload,
- editor : { css : [ 'editor.css' ] },
- dialog : { css : [ 'dialog.css' ], js : dialogJs }
- };
-})() );
-
(function()
{
// Define the function for resizing dialog parts at load to speed up
@@ -30,23 +7,48 @@
{
// Define the function for resizing dialog parts at load to speed up
// the actual resize operation.
- var skinName = 'default',
- setSize = function( dialog, partName, width, height )
- {
- var element = partName ? dialog.parts[partName] : dialog._.element.getFirst();
- if ( width )
- element.setStyle( 'width', width + 'px' );
- if ( height )
- element.setStyle( 'height', height + 'px' );
- };
-
- if ( CKEDITOR.dialog )
+ function setSize( dialog, partName, width, height )
{
- CKEDITOR.dialog.setMargins( 0, 14, 18, 14 );
-
- CKEDITOR.dialog.on( 'resize', function( evt )
+ var element = partName ? dialog.parts[partName] : dialog._.element.getFirst();
+ if ( width )
+ element.setStyle( 'width', width + 'px' );
+ if ( height )
+ element.setStyle( 'height', height + 'px' );
+ };
+
+ CKEDITOR.skins.add( 'default', (function()
+ {
+
+ var preload = [];
+ var dialogJs = [];
+
+ if ( CKEDITOR.env.ie && CKEDITOR.env.version <= 6 )
+ {
+ // For IE6, we need to preload some images, otherwhise they will be
+ // downloaded several times (CSS background bug).
+ preload.push( 'icons.gif', 'images/sprites.gif', 'images/dialog.sides.gif' );
+
+ // The dialog must be fixed by code in IE6, as it doesn't support
+ // several CSS features (absolute positioning).
+ // dialogJs.push( 'dialog_ie6.js' );
+ }
+
+ return {
+
+ preload : preload,
+ editor : { css : [ 'editor.css' ] },
+ dialog : { css : [ 'dialog.css' ], js : dialogJs },
+ initDialogPart : function( editor )
{
- var data = evt.data,
+ editor.on( 'dialogBeforeShow', function(evt)
+ {
+ var dialog = evt.data;
+ dialog.setMargins( 0, 14, 18, 14 );
+ });
+
+ editor.on( 'dialogBeforeResize', function( evt )
+ {
+ var data = evt.data,
width = data.width,
height = data.height,
dialog = data.dialog,
@@ -51,60 +53,60 @@
height = data.height,
dialog = data.dialog,
standardsMode = ( CKEDITOR.document.$.compatMode == 'CSS1Compat' );
- if ( data.skin != skinName )
- return;
-
- // Dialog parts dimensions.
- // 16x16 | ?x16 | 16x16
- // 16x? | ?x? | 16x?
- // 30x51 | ?x51 | 30x51
- setSize( dialog, 't', width - 32, 16 );
- setSize( dialog, 't_resize', width - 32, null );
- setSize( dialog, 'l', 16, height - 67 );
- setSize( dialog, 'l_resize', null, height - 22 );
- setSize( dialog, 'c', width - 32, height - 67 );
- setSize( dialog, 'r', 16, height - 67 );
- setSize( dialog, 'r_resize', null, height - 22 );
- setSize( dialog, 'b', width - 60, 51 );
- setSize( dialog, 'b_resize', width - 32, null );
- setSize( dialog, 'tabs_table', width - 32, null );
-
- /*
- * Although the following fix seems to be for IE6 only, it's also for IE7.
- * While IE7 can render DIV nodes with left: and right: defined, it cannot
- * put 100% height TABLES correctly inside those DIVs. Unless the width is
- * set as well.
- */
- if ( CKEDITOR.env.ie )
- {
- var contentWidth = width - 34,
- contentHeight = dialog.getPageCount() > 1 ? height - 106 : height - 84,
- contentsLength = dialog.parts.contents.getChildCount();
-
- if ( !standardsMode )
- {
- contentWidth += 2;
- contentHeight += 2;
- dialog.parts.tabs.setStyle( 'top', '33px' );
- }
-
- setSize( dialog, 'title', standardsMode ? width - 52 : width - 32, standardsMode ? null : 31 );
- setSize( dialog, 'contents', contentWidth, contentHeight );
- setSize( dialog, 'footer', width - 32);
-
- for ( var i = 0 ; i < contentsLength ; i++ )
+
+ // Dialog parts dimensions.
+ // 16x16 | ?x16 | 16x16
+ // 16x? | ?x? | 16x?
+ // 30x51 | ?x51 | 30x51
+ setSize( dialog, 't', width - 32, 16 );
+ setSize( dialog, 't_resize', width - 32, null );
+ setSize( dialog, 'l', 16, height - 67 );
+ setSize( dialog, 'l_resize', null, height - 22 );
+ setSize( dialog, 'c', width - 32, height - 67 );
+ setSize( dialog, 'r', 16, height - 67 );
+ setSize( dialog, 'r_resize', null, height - 22 );
+ setSize( dialog, 'b', width - 60, 51 );
+ setSize( dialog, 'b_resize', width - 32, null );
+ setSize( dialog, 'tabs_table', width - 32, null );
+
+ /*
+ * Although the following fix seems to be for IE6 only, it's also for IE7.
+ * While IE7 can render DIV nodes with left: and right: defined, it cannot
+ * put 100% height TABLES correctly inside those DIVs. Unless the width is
+ * set as well.
+ */
+ if ( CKEDITOR.env.ie )
{
- var child = dialog.parts.contents.getChild( i );
- if ( ( child instanceof CKEDITOR.dom.element ) && ( child.$.className || '' ).search( 'cke_dialog_page_contents' ) > -1 )
- child.setStyles(
- {
- width : contentWidth - ( standardsMode ? 20 : 0 ) + 'px',
- height : contentHeight - ( standardsMode ? 20 : 0 ) + 'px'
- } );
+ var contentWidth = width - 34,
+ contentHeight = dialog.getPageCount() > 1 ? height - 106 : height - 84,
+ contentsLength = dialog.parts.contents.getChildCount();
+
+ if ( !standardsMode )
+ {
+ contentWidth += 2;
+ contentHeight += 2;
+ dialog.parts.tabs.setStyle( 'top', '33px' );
+ }
+
+ setSize( dialog, 'title', standardsMode ? width - 52 : width - 32, standardsMode ? null : 31 );
+ setSize( dialog, 'contents', contentWidth, contentHeight );
+ setSize( dialog, 'footer', width - 32);
+
+ for ( var i = 0 ; i < contentsLength ; i++ )
+ {
+ var child = dialog.parts.contents.getChild( i );
+ if ( ( child instanceof CKEDITOR.dom.element ) && ( child.$.className || '' ).search( 'cke_dialog_page_contents' ) > -1 )
+ child.setStyles(
+ {
+ width : contentWidth - ( standardsMode ? 20 : 0 ) + 'px',
+ height : contentHeight - ( standardsMode ? 20 : 0 ) + 'px'
+ } );
+ }
}
- }
-
- setSize( dialog, null, width, height );
- });
- }
+
+ setSize( dialog, null, width, height );
+ });
+ }
+ };
+})() );
})();