Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Pin the toolbar to the element, not range, to fix positioning on Edge. #102

Merged
merged 1 commit into from
Apr 24, 2017
Merged

Pin the toolbar to the element, not range, to fix positioning on Edge. #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/image/ui/imageballoonpanelview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default class ImageBalloonPanelView extends BalloonPanelView {
const defaultPositions = BalloonPanelView.defaultPositions;

this.attachTo( {
target: editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ),
target: editingView.domConverter.viewToDom( editingView.selection.getSelectedElement() ),
positions: [ defaultPositions.northArrowSouth, defaultPositions.southArrowNorth ]
} );
}
Expand Down
20 changes: 13 additions & 7 deletions tests/image/ui/imageballoonpanelview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ describe( 'ImageBalloonPanel', () => {

it( 'should detach when image element is no longer selected', () => {
const spy = sinon.spy( panel, 'detach' );

setData( document, '[<image src=""></image>]' );
panel.attach();

Expand All @@ -79,13 +80,17 @@ describe( 'ImageBalloonPanel', () => {

it( 'should attach panel correctly', () => {
const spy = sinon.spy( panel, 'attachTo' );

setData( document, '[<image src=""></image>]' );
panel.attach();

testPanelAttach( spy );
} );

it( 'should calculate panel position on scroll event', () => {
setData( document, '[<image src=""></image>]' );
panel.attach();

const spy = sinon.spy( panel, 'attachTo' );

global.window.dispatchEvent( new Event( 'scroll' ) );
Expand All @@ -94,7 +99,9 @@ describe( 'ImageBalloonPanel', () => {
} );

it( 'should calculate panel position on resize event event', () => {
setData( document, '[<image src=""></image>]' );
panel.attach();

const spy = sinon.spy( panel, 'attachTo' );

global.window.dispatchEvent( new Event( 'resize' ) );
Expand All @@ -103,7 +110,9 @@ describe( 'ImageBalloonPanel', () => {
} );

it( 'should hide panel on detach', () => {
setData( document, '[<image src=""></image>]' );
panel.attach();

const spy = sinon.spy( panel, 'hide' );

panel.detach();
Expand All @@ -112,7 +121,9 @@ describe( 'ImageBalloonPanel', () => {
} );

it( 'should not reposition panel after detaching', () => {
setData( document, '[<image src=""></image>]' );
panel.attach();

const spy = sinon.spy( panel, 'attachTo' );

panel.detach();
Expand All @@ -124,16 +135,11 @@ describe( 'ImageBalloonPanel', () => {

// Tests if panel.attachTo() was called correctly.
function testPanelAttach( spy ) {
const domRange = editor.editing.view.domConverter.viewRangeToDom( editingView.selection.getFirstRange() );

sinon.assert.calledOnce( spy );
const options = spy.firstCall.args[ 0 ];

// Check if proper range was used.
expect( options.target.startContainer ).to.equal( domRange.startContainer );
expect( options.target.startOffset ).to.equal( domRange.startOffset );
expect( options.target.endContainer ).to.equal( domRange.endContainer );
expect( options.target.endOffset ).to.equal( domRange.endOffset );
// Check if proper target element was used.
expect( options.target.tagName.toLowerCase() ).to.equal( 'figure' );

// Check if correct positions are used.
const [ north, south ] = options.positions;
Expand Down