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:

+ +
+ Saturn V +
This is an example caption description
+
+
+ +
+

This is a sample image widget:

+ +
+ Saturn V +
This is an example caption description
+
+
+ + 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' );