Skip to content

Commit

Permalink
Merge branch 't/11097'
Browse files Browse the repository at this point in the history
  • Loading branch information
@Reinmar
Reinmar committed Dec 19, 2013
2 parents df27339 + 9b280db commit 70d9474
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 110 deletions.
1 change: 1 addition & 0 deletions CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ CKEditor 4 Changelog

## CKEditor 4.3.2

* [#11097](http://dev.ckeditor.com/ticket/11097): Improved the [Autogrow](http://ckeditor.com/addon/autogrow) plugin performance when dealing with very big tables.
* [#11290](http://dev.ckeditor.com/ticket/11290): Removed redundant code in `sourcedialog` plugin.

## CKEditor 4.3.1
Expand Down
234 changes: 124 additions & 110 deletions plugins/autogrow/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,133 +7,147 @@
* @fileOverview AutoGrow plugin.
*/

( function() {

// Actual content height, figured out by appending check the last element's document position.
function contentHeight( scrollable ) {
var overflowY = scrollable.getStyle( 'overflow-y' );

var doc = scrollable.getDocument();
// Create a temporary marker element.
var marker = CKEDITOR.dom.element.createFromHtml( '<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:1px;display:block;">' + ( CKEDITOR.env.webkit ? '&nbsp;' : '' ) + '</span>', doc );
doc[ CKEDITOR.env.ie ? 'getBody' : 'getDocumentElement' ]().append( marker );

var height = marker.getDocumentPosition( doc ).y + marker.$.offsetHeight;
marker.remove();
scrollable.setStyle( 'overflow-y', overflowY );
return height;
}

function getScrollable( editor ) {
var doc = editor.document,
body = doc.getBody(),
htmlElement = doc.getDocumentElement();

// Quirks mode overflows body, standards overflows document element
return doc.$.compatMode == 'BackCompat' ? body : htmlElement;
}

// @param editor
// @param {Number} lastHeight The last height set by autogrow.
// @returns {Number} New height if has been changed, or the passed `lastHeight`.
var resizeEditor = function( editor, lastHeight ) {
if ( !editor.window )
return null;

var maximize = editor.getCommand( 'maximize' );
// Disable autogrow when the editor is maximized .(#6339)
if ( maximize && maximize.state == CKEDITOR.TRISTATE_ON )
return null;

var scrollable = getScrollable( editor ),
currentHeight = editor.window.getViewPaneSize().height,
newHeight = contentHeight( scrollable );

// Additional space specified by user.
newHeight += ( editor.config.autoGrow_bottomSpace || 0 );

var min = editor.config.autoGrow_minHeight != undefined ? editor.config.autoGrow_minHeight : 200,
max = editor.config.autoGrow_maxHeight || Infinity;

newHeight = Math.max( newHeight, min );
newHeight = Math.min( newHeight, max );

// #10196 Do not resize editor if new height is equal
// to the one set by previous resizeEditor() call.
if ( newHeight != currentHeight && lastHeight != newHeight ) {
newHeight = editor.fire( 'autoGrow', { currentHeight: currentHeight, newHeight: newHeight } ).newHeight;
editor.resize( editor.container.getStyle( 'width' ), newHeight, true );
lastHeight = newHeight;
}

if ( scrollable.$.scrollHeight > scrollable.$.clientHeight && newHeight < max )
scrollable.setStyle( 'overflow-y', 'hidden' );
else
scrollable.removeStyle( 'overflow-y' );

return lastHeight;
};
'use strict';

( function() {
CKEDITOR.plugins.add( 'autogrow', {
init: function( editor ) {

// This feature is available only for themed ui instance.
if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE )
return;

editor.on( 'instanceReady', function() {

var editable = editor.editable(),
lastHeight;

// Simply set auto height with div wysiwyg.
if ( editable.isInline() )
if ( editor.editable().isInline() )
editor.ui.space( 'contents' ).setStyle( 'height', 'auto' );
// For framed wysiwyg we need to resize the editor.
else
{
editor.addCommand( 'autogrow', {
exec: function( editor ) {
lastHeight = resizeEditor( editor, lastHeight );
},
modes: { wysiwyg: 1 },
readOnly: 1,
canUndo: false,
editorFocus: false
} );

var eventsList = { contentDom: 1, key: 1, selectionChange: 1, insertElement: 1, mode: 1 };
for ( var eventName in eventsList ) {
editor.on( eventName, function( evt ) {
// Some time is required for insertHtml, and it gives other events better performance as well.
if ( evt.editor.mode == 'wysiwyg' ) {
setTimeout( function() {
lastHeight = resizeEditor( evt.editor, lastHeight );
// Second pass to make correction upon
// the first resize, e.g. scrollbar.
lastHeight = resizeEditor( evt.editor, lastHeight );
}, 100 );
}
} );
}

// Coordinate with the "maximize" plugin. (#9311)
editor.on( 'afterCommandExec', function( evt ) {
if ( evt.data.name == 'maximize' && evt.editor.mode == 'wysiwyg' ) {
if ( evt.data.command.state == CKEDITOR.TRISTATE_ON ) {
var scrollable = getScrollable( editor );
scrollable.removeStyle( 'overflow' );
}
else
lastHeight = resizeEditor( editor, lastHeight );
initIframeAutogrow( editor );
} );
}
} );

function initIframeAutogrow( editor ) {
var lastHeight,
doc,
markerContainer,
scrollable,
marker,
configBottomSpace = editor.config.autoGrow_bottomSpace || 0,
configMinHeight = editor.config.autoGrow_minHeight != undefined ? editor.config.autoGrow_minHeight : 200,
configMaxHeight = editor.config.autoGrow_maxHeight || Infinity,
maxHeightIsUnlimited = !editor.config.autoGrow_maxHeight;

editor.addCommand( 'autogrow', {
exec: resizeEditor,
modes: { wysiwyg: 1 },
readOnly: 1,
canUndo: false,
editorFocus: false
} );

var eventsList = { contentDom: 1, key: 1, selectionChange: 1, insertElement: 1, mode: 1 };
for ( var eventName in eventsList ) {
editor.on( eventName, function( evt ) {
// Some time is required for insertHtml, and it gives other events better performance as well.
if ( evt.editor.mode == 'wysiwyg' ) {
setTimeout( function() {
if ( isNotResizable() ) {
lastHeight = null;
return;
}
} );

editor.config.autoGrow_onStartup && editor.execCommand( 'autogrow' );
resizeEditor();

// Second pass to make correction upon the first resize, e.g. scrollbar.
// If height is unlimited vertical scrollbar was removed in the first
// resizeEditor() call, so we don't need the second pass.
if ( !maxHeightIsUnlimited )
resizeEditor();
}, 100 );
}
} );
}
} );

// Coordinate with the "maximize" plugin. (#9311)
editor.on( 'afterCommandExec', function( evt ) {
if ( evt.data.name == 'maximize' && evt.editor.mode == 'wysiwyg' ) {
if ( evt.data.command.state == CKEDITOR.TRISTATE_ON )
scrollable.removeStyle( 'overflow-y' );
else
resizeEditor();
}
} );

editor.on( 'contentDom', refreshCache );

refreshCache();
editor.config.autoGrow_onStartup && editor.execCommand( 'autogrow' );

function refreshCache() {
doc = editor.document;
markerContainer = doc[ CKEDITOR.env.ie ? 'getBody' : 'getDocumentElement' ]();

// Quirks mode overflows body, standards overflows document element.
scrollable = CKEDITOR.env.quirks ? doc.getBody() : doc.getDocumentElement();

marker = CKEDITOR.dom.element.createFromHtml(
'<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:1px;display:block;">' +
( CKEDITOR.env.webkit ? '&nbsp;' : '' ) +
'</span>',
doc );
}

function isNotResizable() {
var maximizeCommand = editor.getCommand( 'maximize' );

return (
!editor.window ||
// Disable autogrow when the editor is maximized. (#6339)
maximizeCommand && maximizeCommand.state == CKEDITOR.TRISTATE_ON
);
}

// Actual content height, figured out by appending check the last element's document position.
function contentHeight() {
// Append a temporary marker element.
markerContainer.append( marker );
var height = marker.getDocumentPosition( doc ).y + marker.$.offsetHeight;
marker.remove();

return height;
}

function resizeEditor() {
// Hide scroll because we won't need it at all.
// Thanks to that we'll need only one resizeEditor() call per change.
if ( maxHeightIsUnlimited )
scrollable.setStyle( 'overflow-y', 'hidden' );

var currentHeight = editor.window.getViewPaneSize().height,
newHeight = contentHeight();

// Additional space specified by user.
newHeight += configBottomSpace;
newHeight = Math.max( newHeight, configMinHeight );
newHeight = Math.min( newHeight, configMaxHeight );

// #10196 Do not resize editor if new height is equal
// to the one set by previous resizeEditor() call.
if ( newHeight != currentHeight && lastHeight != newHeight ) {
newHeight = editor.fire( 'autoGrow', { currentHeight: currentHeight, newHeight: newHeight } ).newHeight;
editor.resize( editor.container.getStyle( 'width' ), newHeight, true );
lastHeight = newHeight;
}

if ( !maxHeightIsUnlimited ) {
if ( newHeight < configMaxHeight && scrollable.$.scrollHeight > scrollable.$.clientHeight )
scrollable.setStyle( 'overflow-y', 'hidden' );
else
scrollable.removeStyle( 'overflow-y' );
}
}
}
} )();

/**
Expand Down

0 comments on commit 70d9474

Please sign in to comment.