Refresh balloon toolbar after change in the editor

CHANGES.md

@@ -5,6 +5,7 @@
 
 Fixed Issues:
 
+* [#1342](https://github.com/ckeditor/ckeditor-dev/issues/1342): Fixed: [Balloon Toolbar](https://ckeditor.com/cke4/addon/balloontoolbar) should be re-positioned after a [change](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.editor-event-change) event.
 * [#1048](https://github.com/ckeditor/ckeditor-dev/issues/1048): Fixed: [Balloon Panel](https://ckeditor.com/cke4/addon/balloonpanel) is not properly positioned when margin added to its non-static parent.
 * [#889](https://github.com/ckeditor/ckeditor-dev/issues/889): Fixed: Unclear error message for width and height fields in [Image](https://ckeditor.com/cke4/addon/image) and [Enhanced Image](https://ckeditor.com/cke4/addon/image2) plugins.
 * [#859](https://github.com/ckeditor/ckeditor-dev/issues/859): Fixed: Can't edit link after double click on text in link.

plugins/balloontoolbar/plugin.js

@@ -601,21 +601,16 @@
 				var editable = this.editor.editable();
 				this._detachListeners();
 
-				this._listeners.push( this.editor.on( 'resize', function() {
+				function attachListener() {
 					this.attach( this._pointedElement, {
 						focusElement: false
 					} );
-				}, this ) );
-				this._listeners.push( editable.attachListener( editable.getDocument(), 'scroll', function() {
-					this.attach( this._pointedElement, {
-						focusElement: false
-					} );
-				}, this ) );
-				this._listeners.push( CKEDITOR.document.getWindow().on( 'resize', function() {
-					this.attach( this._pointedElement, {
-						focusElement: false
-					} );
-				}, this ) );
+				}
+
+				this._listeners.push( this.editor.on( 'change', attachListener, this ) );
+				this._listeners.push( this.editor.on( 'resize', attachListener, this ) );
+				this._listeners.push( CKEDITOR.document.getWindow().on( 'resize', attachListener, this ) );
+				this._listeners.push( editable.attachListener( editable.getDocument(), 'scroll', attachListener, this ) );
 
 				CKEDITOR.ui.balloonPanel.prototype.show.call( this );
 			};

tests/plugins/balloontoolbar/manual/refreshposition.html

@@ -0,0 +1,70 @@
+<style>
+	body {
+		/* (#1048) */
+		margin-left: 0px;
+		padding-left: 400px;
+	}
+
+</style>
+
+<div id="editor1">
+	<p>This is a sample image widget:</p>
+
+	<figure class="image">
+		<img alt="Saturn V" src="%BASE_PATH%_assets/lena.jpg" width="120" />
+		<figcaption>This is an <strong>example</strong> caption description</figcaption>
+	</figure>
+</div>
+
+<div id="editor2" contenteditable="true">
+	<p>This is a sample image widget:</p>
+
+	<figure class="image">
+		<img alt="Saturn V" src="%BASE_PATH%_assets/lena.jpg" width="120" />
+		<figcaption>This is an <strong>example</strong> caption description</figcaption>
+	</figure>
+</div>
+
+<script>
+	if ( CKEDITOR.env.ie && CKEDITOR.env.version === 8 ) {
+		bender.ignore();
+	}
+
+	CKEDITOR.disableAutoInline = true;
+
+	CKEDITOR.addCss( '.sideimage {' +
+		'float: right;' +
+		'width: 25%;' +
+	'}' );
+
+	var config = {
+			height: 320,
+			width: 500,
+			allowedContent: true,
+			on: {
+				instanceReady: function( evt ) {
+					var editor = evt.editor;
+
+					editor.addCommand( 'sideImage', {
+						exec: function( editor, data ) {
+							data.widget.addClass( 'sideimage' );
+						}
+					} );
+
+					editor.balloonToolbars.create( {
+						buttons: 'Link,Unlink',
+						widgets: [ 'image' ]
+					} );
+
+					editor.widgets.instances[ 0 ].on( 'focus', function( evt ) {
+						setTimeout( function() {
+							editor.execCommand( 'sideImage', { widget: evt.sender } );
+						}, 2000 );
+					} );
+				}
+			}
+		};
+
+	CKEDITOR.replace( 'editor1', config );
+	CKEDITOR.inline( 'editor2', config );
+</script>

tests/plugins/balloontoolbar/manual/refreshposition.md

@@ -0,0 +1,17 @@
+@bender-ui: collapsed
+@bender-tags: 4.8.1, bug, balloontoolbar, 1342
+@bender-ckeditor-plugins: wysiwygarea, basicstyles, floatingspace, balloontoolbar, sourcearea, link, elementspath, image2, undo
+
+## Procedure
+
+1. Click image.
+2. Wait 2 seconds for image to change position.
+3. Look at balloon toolbar.
+
+## Expected:
+
+Balloon toolbar changes position acordingly to image position.
+
+## Unexpected:
+
+Balloon toolbar remains in the initial position.

tests/plugins/balloontoolbar/positioning.js

@@ -10,7 +10,7 @@
 			name: 'editor1',
 			creator: 'replace',
 			config: {
-				extraAllowedContent: 'span[id];p{height}',
+				extraAllowedContent: 'span[id];p{height};img[src]{margin-left}',
 				height: 200
 			}
 		},
@@ -19,7 +19,7 @@
 			creator: 'replace',
 			config: {
 				extraPlugins: 'divarea',
-				extraAllowedContent: 'span[id];p{height}',
+				extraAllowedContent: 'span[id];p{height};img[src]{margin-left}',
 				height: 200
 			}
 		}
@@ -37,10 +37,6 @@
 
 	var tests = {
 		setUp: function() {
-			// In IE8 tests are run in very small window which breaks positioning assertions and tests fails (#1076).
-			if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) {
-				assert.ignore();
-			}
 			if ( parentFrame ) {
 				parentFrame.style.height = '900px';
 			}
@@ -135,6 +131,35 @@
 				res = balloonToolbar._getAlignments( editor.editable().getFirst().getClientRect(), 10, 10 );
 
 			arrayAssert.itemsAreEqual( [ 'bottom hcenter', 'top hcenter' ], CKEDITOR.tools.objectKeys( res ) );
+		},
+
+		// #1342
+		'test panel refresh position': function( editor, bot ) {
+
+			bot.setData( '<img src="' + bender.basePath + '/_assets/lena.jpg">', function() {
+				var balloonToolbar = new CKEDITOR.ui.balloonToolbarView( editor, {
+						width: 100,
+						height: 200
+					} ),
+					markerElement = editor.editable().findOne( 'img' ),
+					initialPosition,
+					currentPosition;
+
+				balloonToolbar.attach( markerElement );
+				initialPosition = balloonToolbar.parts.panel.getClientRect();
+
+				editor.once( 'change', function() {
+					resume( function() {
+						currentPosition = balloonToolbar.parts.panel.getClientRect();
+						assert.areNotSame( initialPosition.left, currentPosition.left, 'position of toolbar' );
+					} );
+				} );
+
+				markerElement.setStyle( 'margin-left', '200px' );
+				editor.fire( 'change' );
+
+				wait();
+			} );
 		}
 	};
 

tests/plugins/balloontoolbar/view.js

@@ -78,7 +78,7 @@
 
 				view.show();
 				assert.isTrue( view.rect.visible, 'Toolbar should be shown after show method' );
-				assert.areEqual( 3, view._listeners.length, 'Listeners should be attached after show method' );
+				assert.areEqual( 4, view._listeners.length, 'Listeners should be attached after show method' );
 
 				view.hide();
 				assert.isFalse( view.rect.visible, 'Toolbar should not be shown after hide method' );