Merge branch 't/11905' into major

Author: Piotr Jasiun

CHANGES.md

@@ -15,6 +15,7 @@ New Features:
 * [#12416](http://dev.ckeditor.com/ticket/12416): Added [`widget.definition.upcastPriority`](http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.widget.definition-property-upcastPriority) property which gives more control over widgets upcasting order to the widget author.
 * [#12448](http://dev.ckeditor.com/ticket/12448): Set of new methods, params and events giving the developer more control over HTML insertion. See the [`editable.insertHtml()`](http://docs.ckeditor.com/#!/api/CKEDITOR.editable-method-insertHtml) param `range`, the [`editable.insertHtmlIntoRange()`](http://docs.ckeditor.com/#!/api/CKEDITOR.editable-method-insertHtmlIntoRange) method and the [`editor.afterInsertHtml`](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-afterInsertHtml) event.
 * [#12036](http://dev.ckeditor.com/ticket/12036): Initialize editor in [`readOnly`](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-readOnly) mode when `<textarea>` has `readonly` attribute.
+* [#11905](http://dev.ckeditor.com/ticket/11905): [`resize` event](http://docs.ckeditor.dev/#!/api/CKEDITOR.editor-event-resize) pass dimensions in data.
 
 Fixed Issues:
 

core/creators/themedui.js

@@ -217,9 +217,8 @@ CKEDITOR.replaceClass = 'ckeditor';
 			editor.ui.space( 'contents' ).setHtml( '' );
 
 			editor.mode = '';
-		} else {
+		} else
 			editor._.previousModeData = editor.getData( 1 );
-		}
 
 		// Fire the mode handler.
 		this._.modes[ newMode ]( function() {
@@ -287,15 +286,24 @@ CKEDITOR.replaceClass = 'ckeditor';
 		contentsFrame && ( contentsFrame.style.width = '1%' );
 
 		// Get the height delta between the outer table and the content area.
+		var contentsOuterDelta = ( outer.$.offsetHeight || 0 ) - ( contents.$.clientHeight || 0 ),
+
 		// If we're setting the content area's height, then we don't need the delta.
-		var delta = isContentHeight ? 0 : ( outer.$.offsetHeight || 0 ) - ( contents.$.clientHeight || 0 );
-		contents.setStyle( 'height', Math.max( height - delta, 0 ) + 'px' );
+			resultContentsHeight = Math.max( height - ( isContentHeight ? 0 : contentsOuterDelta ), 0 ),
+			resultOuterHeight = ( isContentHeight ? height + contentsOuterDelta : height );
+
+		contents.setStyle( 'height', resultContentsHeight + 'px' );
 
 		// WebKit needs to refresh the iframe size to avoid rendering issues. (2/2) (#8348)
 		contentsFrame && ( contentsFrame.style.width = '100%' );
 
 		// Emit a resize event.
-		this.fire( 'resize' );
+		this.fire( 'resize', {
+			outerHeight: resultOuterHeight,
+			contentsHeight: resultContentsHeight,
+			// Sometimes width is not provided.
+			outerWidth: width || outer.getSize( 'width' )
+		} );
 	};
 
 	/**
@@ -419,9 +427,8 @@ CKEDITOR.replaceClass = 'ckeditor';
 		if ( elementMode == CKEDITOR.ELEMENT_MODE_REPLACE ) {
 			element.hide();
 			container.insertAfter( element );
-		} else {
+		} else
 			element.append( container );
-		}
 
 		editor.container = container;
 
@@ -482,6 +489,10 @@ CKEDITOR.config.startupMode = 'wysiwyg';
  *
  * @event resize
  * @param {CKEDITOR.editor} editor This editor instance.
+ * @param {Object} data Available since CKEditor 4.5.0.
+ * @param {Number} data.outerHeight Entire height area, which the editor covers.
+ * @param {Number} data.contentsHeight Editable area height in pixels.
+ * @param {Number} data.outerWidth Entire width area, which the editor covers.
  */
 
 /**

plugins/maximize/plugin.js

@@ -239,7 +239,11 @@
 
 						// Emit a resize event, because this time the size is modified in
 						// restoreStyles.
-						editor.fire( 'resize' );
+						editor.fire( 'resize', {
+							outerHeight: editor.container.$.offsetHeight,
+							contentsHeight: contents.$.offsetHeight,
+							outerWidth: editor.container.$.offsetWidth
+						} );
 					}
 
 					this.toggleState();

plugins/toolbar/plugin.js

@@ -353,7 +353,11 @@
 							var dy = toolboxContainer.$.offsetHeight - previousHeight;
 							contents.setStyle( 'height', ( contentHeight - dy ) + 'px' );
 
-							editor.fire( 'resize' );
+							editor.fire( 'resize', {
+								outerHeight: editor.container.$.offsetHeight,
+								contentsHeight: contents.$.offsetHeight,
+								outerWidth: editor.container.$.offsetWidth
+							} );
 						},
 
 						modes: { wysiwyg: 1, source: 1 }

tests/core/creators/themedui.js

@@ -0,0 +1,37 @@
+/* bender-ckeditor-plugins: wysiwygarea,toolbar,table */
+( function() {
+	'use strict';
+
+	function getEditorContentHeight( editor ) {
+		return editor.ui.space( 'contents' ).$.offsetHeight;
+	}
+
+	function getEditorOuterHeight( editor ) {
+		return editor.container.$.offsetHeight;
+	}
+
+	bender.editor = true;
+
+	bender.test( {
+		'test resize event': function() {
+			var editor = this.editor,
+			lastResizeData = 0;
+
+			editor.on( 'resize', function(e) {
+				lastResizeData = e.data;
+			} );
+
+			editor.resize( 100, 400 );
+			assert.areSame( 400, lastResizeData.outerHeight, 'Outer height should be same as passed one in 2nd argument.' );
+			assert.areSame( 100, lastResizeData.outerWidth, 'Outer width should be same as passed one in 1st argument.' );
+			assert.areSame( getEditorContentHeight( editor ), lastResizeData.contentsHeight, 'Content height should be same as calculated one.' );
+			assert.areSame( 400, getEditorOuterHeight( editor ), 'Outer height should be properly set.' );
+
+			editor.resize( 100, 400, true );
+			assert.areSame( getEditorOuterHeight( editor ), lastResizeData.outerHeight, 'Outer height should be same as calculated one.' );
+			assert.areSame( 100, lastResizeData.outerWidth, 'Outer width should be same as passed one in 1st argument.' );
+			assert.areSame( 400, lastResizeData.contentsHeight, 'Content height should be same as passed one in 2nd argument.' );
+			assert.areSame( 400, getEditorContentHeight( editor ), 'Content height should be properly set.' );
+		}
+	} )
+} )();

tests/plugins/maximize/maximize.js

@@ -47,6 +47,26 @@ bender.test( {
 		wait();
 	},
 
+	'test maximize fire resize event with proper properties': function() {
+		var calls = 0,
+			lastResizeData;
+
+		this.editor.on( 'resize', function( e ) {
+			calls++;
+			lastResizeData = e.data;
+		} );
+
+		this.editor.resize( 200, 400 );
+
+		this.editor.execCommand( 'maximize' );
+		assert.areEqual( window.innerHeight || document.documentElement.clientHeight, lastResizeData.outerHeight, 'Height should be same as window height.' );
+		assert.areEqual( window.innerWidth || document.documentElement.clientWidth, lastResizeData.outerWidth, 'Width should be same as window height.' );
+
+		this.editor.execCommand( 'maximize' );
+		assert.areEqual( 200, lastResizeData.outerWidth, 'Width should be restored.' );
+		assert.areEqual( 400, lastResizeData.outerHeight, 'Height should be restored.' );
+	},
+
 	'test maximize command work when config title is set to empty string': function() {
 		bender.editorBot.create( {
 			name: 'editor2',

tests/plugins/resize/manual/firedimensions.html

@@ -0,0 +1,40 @@
+<textarea id="editor1">&lt;p&gt;The more a thing tends to be permanent, the more it tends to be lifeless.&lt;/p&gt;</textarea>
+<button id="destroy"><span>Destroy editor</span></button>
+<button id="create"><span>Create editor</span></button>
+<script>
+	( function() {
+		var destroyBtn = CKEDITOR.document.getById( 'destroy' ),
+			createBtn = CKEDITOR.document.getById( 'create' ),
+			editor1 = null,
+			storage;
+
+		function destroyEditor() {
+			editor1.destroy();
+			editor1 = null;
+
+			createBtn.on( 'click', createEditor );
+			destroyBtn.removeListener( 'click', destroyEditor );
+		}
+
+		function createEditor() {
+			editor1 = CKEDITOR.replace( 'editor1', {
+				resize_dir: 'both'
+			} );
+
+			editor1.on( 'instanceReady', function() {
+				editor1.on( 'resize', function( e ) {
+					storage = e.data;
+				} );
+
+				destroyBtn.on( 'click', destroyEditor );
+				createBtn.removeListener( 'click', createEditor );
+
+				if ( storage ) {
+					editor1.resize( storage.outerWidth, storage.outerHeight );
+				}
+			} );
+		}
+
+		createEditor();
+	}() );
+</script>

tests/plugins/resize/manual/firedimensions.md

@@ -0,0 +1,10 @@
+@bender-tags: 4.5.0, tc
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, elementspath, resize
+
+This test checks whether resize event is fired with dimensions as a properties. If so, destroying and creating editor instances should save its size.
+
+1. Resize editor
+2. Destroy and create editor.
+
+**Expected result:** After creating new editor instance dimensions should be saved.

tests/plugins/toolbar/basic.js

@@ -92,5 +92,33 @@ bender.test( {
 			},
 			testToolbarExpanded
 		);
+	},
+
+	'test toolbar collapse/expand fire resize event': function() {
+		bender.editorBot.create( {
+				name: 'editor4',
+				config: {
+					toolbarCanCollapse: true
+				}
+			},
+			function( bot ) {
+				var resizeData = [],
+					editor = bot.editor;
+
+				editor.on( 'resize', function( e ) {
+					resizeData.push( e.data );
+				} );
+
+				editor.resize( 200, 400 );
+				assert.areEqual( 200, resizeData[ 0 ].outerWidth, 'Width should be set properly.' );
+				assert.areEqual( 400, resizeData[ 0 ].outerHeight, 'Height should be set properly.' );
+
+				editor.execCommand( 'toolbarCollapse' );
+				assert.isTrue( resizeData[ 1 ].outerHeight < resizeData[ 0 ].outerHeight, 'Height after collapse should be less.' );
+
+				editor.execCommand( 'toolbarCollapse' );
+				assert.areSame( resizeData[ 0 ].outerHeight, resizeData[ 2 ].outerHeight, 'Height should properly restore to same value.' );
+			}
+		);
 	}
 } );