diff --git a/CHANGES.md b/CHANGES.md
index 67ef6085c5e..dd1fd39e5c7 100644
--- a/CHANGES.md
+++ b/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.
diff --git a/plugins/balloontoolbar/plugin.js b/plugins/balloontoolbar/plugin.js
index cea6006043a..bf347e9edad 100644
--- a/plugins/balloontoolbar/plugin.js
+++ b/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 );
};
diff --git a/tests/plugins/balloontoolbar/manual/refreshposition.html b/tests/plugins/balloontoolbar/manual/refreshposition.html
new file mode 100644
index 00000000000..6dcd90a9822
--- /dev/null
+++ b/tests/plugins/balloontoolbar/manual/refreshposition.html
@@ -0,0 +1,70 @@
+
+
+
+
This is a sample image widget:
+
+
+
+
+
+
This is a sample image widget:
+
+
+
+
+
diff --git a/tests/plugins/balloontoolbar/manual/refreshposition.md b/tests/plugins/balloontoolbar/manual/refreshposition.md
new file mode 100644
index 00000000000..3969403d9e2
--- /dev/null
+++ b/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.
diff --git a/tests/plugins/balloontoolbar/positioning.js b/tests/plugins/balloontoolbar/positioning.js
index a240b9c31e6..e94d9413fa6 100644
--- a/tests/plugins/balloontoolbar/positioning.js
+++ b/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( '', 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();
+ } );
}
};
diff --git a/tests/plugins/balloontoolbar/view.js b/tests/plugins/balloontoolbar/view.js
index 103de282e13..c44272614fa 100644
--- a/tests/plugins/balloontoolbar/view.js
+++ b/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' );