|
@@ -38,7 +38,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
it( 'should set default values', () => {
|
|
it( 'should set default values', () => {
|
|
|
expect( view.top ).to.equal( 0 );
|
|
expect( view.top ).to.equal( 0 );
|
|
|
expect( view.left ).to.equal( 0 );
|
|
expect( view.left ).to.equal( 0 );
|
|
|
- expect( view.position ).to.equal( 'arrow_ne' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_nw' );
|
|
|
expect( view.isVisible ).to.equal( false );
|
|
expect( view.isVisible ).to.equal( false );
|
|
|
expect( view.withArrow ).to.equal( true );
|
|
expect( view.withArrow ).to.equal( true );
|
|
|
} );
|
|
} );
|
|
@@ -51,11 +51,11 @@ describe( 'BalloonPanelView', () => {
|
|
|
describe( 'DOM bindings', () => {
|
|
describe( 'DOM bindings', () => {
|
|
|
describe( 'arrow', () => {
|
|
describe( 'arrow', () => {
|
|
|
it( 'should react on view#position', () => {
|
|
it( 'should react on view#position', () => {
|
|
|
- expect( view.element.classList.contains( 'ck-balloon-panel_arrow_ne' ) ).to.true;
|
|
|
|
|
|
|
+ expect( view.element.classList.contains( 'ck-balloon-panel_arrow_nw' ) ).to.true;
|
|
|
|
|
|
|
|
- view.position = 'arrow_nw';
|
|
|
|
|
|
|
+ view.position = 'arrow_ne';
|
|
|
|
|
|
|
|
- expect( view.element.classList.contains( 'ck-balloon-panel_arrow_nw' ) ).to.true;
|
|
|
|
|
|
|
+ expect( view.element.classList.contains( 'ck-balloon-panel_arrow_ne' ) ).to.true;
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should react on view#withArrow', () => {
|
|
it( 'should react on view#withArrow', () => {
|
|
@@ -188,10 +188,10 @@ describe( 'BalloonPanelView', () => {
|
|
|
element: view.element,
|
|
element: view.element,
|
|
|
target,
|
|
target,
|
|
|
positions: [
|
|
positions: [
|
|
|
- BalloonPanelView.defaultPositions.southEastArrowNorthEast,
|
|
|
|
|
- BalloonPanelView.defaultPositions.southWestArrowNorthEast,
|
|
|
|
|
- BalloonPanelView.defaultPositions.northEastArrowSouthWest,
|
|
|
|
|
- BalloonPanelView.defaultPositions.northWestArrowSouthEast
|
|
|
|
|
|
|
+ BalloonPanelView.defaultPositions.southArrowNorthWest,
|
|
|
|
|
+ BalloonPanelView.defaultPositions.southArrowNorthEast,
|
|
|
|
|
+ BalloonPanelView.defaultPositions.northArrowSouthWest,
|
|
|
|
|
+ BalloonPanelView.defaultPositions.northArrowSouthEast
|
|
|
],
|
|
],
|
|
|
limiter: document.body,
|
|
limiter: document.body,
|
|
|
fitInViewport: true
|
|
fitInViewport: true
|
|
@@ -220,7 +220,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
|
|
|
|
|
view.attachTo( { target, limiter } );
|
|
view.attachTo( { target, limiter } );
|
|
|
|
|
|
|
|
- expect( view.position ).to.equal( 'arrow_ne' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_nw' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should put balloon on the `south east` side of the target element when ' +
|
|
it( 'should put balloon on the `south east` side of the target element when ' +
|
|
@@ -234,7 +234,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
|
|
|
|
|
view.attachTo( { target, limiter } );
|
|
view.attachTo( { target, limiter } );
|
|
|
|
|
|
|
|
- expect( view.position ).to.equal( 'arrow_ne' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_nw' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should put balloon on the `south west` side of the target element when target is on the right side of the limiter', () => {
|
|
it( 'should put balloon on the `south west` side of the target element when target is on the right side of the limiter', () => {
|
|
@@ -247,7 +247,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
|
|
|
|
|
view.attachTo( { target, limiter } );
|
|
view.attachTo( { target, limiter } );
|
|
|
|
|
|
|
|
- expect( view.position ).to.equal( 'arrow_nw' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_ne' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should put balloon on the `north east` side of the target element when target is on the bottom of the limiter ', () => {
|
|
it( 'should put balloon on the `north east` side of the target element when target is on the bottom of the limiter ', () => {
|
|
@@ -260,7 +260,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
|
|
|
|
|
view.attachTo( { target, limiter } );
|
|
view.attachTo( { target, limiter } );
|
|
|
|
|
|
|
|
- expect( view.position ).to.equal( 'arrow_se' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_sw' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should put balloon on the `north west` side of the target element when ' +
|
|
it( 'should put balloon on the `north west` side of the target element when ' +
|
|
@@ -274,7 +274,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
|
|
|
|
|
view.attachTo( { target, limiter } );
|
|
view.attachTo( { target, limiter } );
|
|
|
|
|
|
|
|
- expect( view.position ).to.equal( 'arrow_sw' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_se' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
// https://github.com/ckeditor/ckeditor5-ui-default/issues/126
|
|
// https://github.com/ckeditor/ckeditor5-ui-default/issues/126
|
|
@@ -355,7 +355,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
|
|
|
|
|
view.attachTo( { target, limiter } );
|
|
view.attachTo( { target, limiter } );
|
|
|
|
|
|
|
|
- expect( view.position ).to.equal( 'arrow_nw' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_ne' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should put balloon on the `south east` position when `south west` is limited', () => {
|
|
it( 'should put balloon on the `south east` position when `south west` is limited', () => {
|
|
@@ -375,7 +375,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
|
|
|
|
|
view.attachTo( { target, limiter } );
|
|
view.attachTo( { target, limiter } );
|
|
|
|
|
|
|
|
- expect( view.position ).to.equal( 'arrow_ne' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_nw' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should put balloon on the `north east` position when `south east` is limited', () => {
|
|
it( 'should put balloon on the `north east` position when `south east` is limited', () => {
|
|
@@ -399,7 +399,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
|
|
|
|
|
view.attachTo( { target, limiter } );
|
|
view.attachTo( { target, limiter } );
|
|
|
|
|
|
|
|
- expect( view.position ).to.equal( 'arrow_se' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_sw' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should put balloon on the `south east` position when `north east` is limited', () => {
|
|
it( 'should put balloon on the `south east` position when `north east` is limited', () => {
|
|
@@ -419,7 +419,7 @@ describe( 'BalloonPanelView', () => {
|
|
|
|
|
|
|
|
view.attachTo( { target, limiter } );
|
|
view.attachTo( { target, limiter } );
|
|
|
|
|
|
|
|
- expect( view.position ).to.equal( 'arrow_ne' );
|
|
|
|
|
|
|
+ expect( view.position ).to.equal( 'arrow_nw' );
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
@@ -670,47 +670,65 @@ describe( 'BalloonPanelView', () => {
|
|
|
};
|
|
};
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'southEastArrowNorthEast', () => {
|
|
|
|
|
- expect( positions.southEastArrowNorthEast( targetRect ) ).to.deep.equal( {
|
|
|
|
|
- top: 215,
|
|
|
|
|
- left: 120,
|
|
|
|
|
- name: 'arrow_ne'
|
|
|
|
|
|
|
+ it( 'should have a proper length', () => {
|
|
|
|
|
+ expect( Object.keys( positions ) ).to.have.length( 18 );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ // ------- North
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "northArrowSouth" position', () => {
|
|
|
|
|
+ expect( positions.northArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 35,
|
|
|
|
|
+ left: 125,
|
|
|
|
|
+ name: 'arrow_s'
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'southWestArrowNorthEast', () => {
|
|
|
|
|
- expect( positions.southWestArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
- top: 215,
|
|
|
|
|
|
|
+ it( 'should define the "northArrowSouthEast" position', () => {
|
|
|
|
|
+ expect( positions.northArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 35,
|
|
|
left: 130,
|
|
left: 130,
|
|
|
- name: 'arrow_nw'
|
|
|
|
|
|
|
+ name: 'arrow_se'
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'northEastArrowSouthWest', () => {
|
|
|
|
|
- expect( positions.northEastArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
|
|
+ it( 'should define the "northArrowSouthWest" position', () => {
|
|
|
|
|
+ expect( positions.northArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
top: 35,
|
|
top: 35,
|
|
|
left: 120,
|
|
left: 120,
|
|
|
- name: 'arrow_se'
|
|
|
|
|
|
|
+ name: 'arrow_sw'
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'northWestArrowSouthEast', () => {
|
|
|
|
|
- expect( positions.northWestArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
|
|
+ // ------- North west
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "northWestArrowSouth" position', () => {
|
|
|
|
|
+ expect( positions.northWestArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
top: 35,
|
|
top: 35,
|
|
|
- left: 130,
|
|
|
|
|
|
|
+ left: 75,
|
|
|
|
|
+ name: 'arrow_s'
|
|
|
|
|
+ } );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "northWestArrowSouthWest" position', () => {
|
|
|
|
|
+ expect( positions.northWestArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 35,
|
|
|
|
|
+ left: 70,
|
|
|
name: 'arrow_sw'
|
|
name: 'arrow_sw'
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'southEastArrowNorth', () => {
|
|
|
|
|
- expect( positions.southEastArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
- top: 215,
|
|
|
|
|
- left: 175,
|
|
|
|
|
- name: 'arrow_n'
|
|
|
|
|
|
|
+ it( 'should define the "northWestArrowSouthEast" position', () => {
|
|
|
|
|
+ expect( positions.northWestArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 35,
|
|
|
|
|
+ left: 80,
|
|
|
|
|
+ name: 'arrow_se'
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'northEastArrowSouth', () => {
|
|
|
|
|
|
|
+ // ------- North east
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "northEastArrowSouth" position', () => {
|
|
|
expect( positions.northEastArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
expect( positions.northEastArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
top: 35,
|
|
top: 35,
|
|
|
left: 175,
|
|
left: 175,
|
|
@@ -718,15 +736,51 @@ describe( 'BalloonPanelView', () => {
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'northWestArrowSouth', () => {
|
|
|
|
|
- expect( positions.northWestArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
|
|
+ it( 'should define the "northEastArrowSouthEast" position', () => {
|
|
|
|
|
+ expect( positions.northEastArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
top: 35,
|
|
top: 35,
|
|
|
- left: 75,
|
|
|
|
|
- name: 'arrow_s'
|
|
|
|
|
|
|
+ left: 180,
|
|
|
|
|
+ name: 'arrow_se'
|
|
|
|
|
+ } );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "northEastArrowSouthWest" position', () => {
|
|
|
|
|
+ expect( positions.northEastArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 35,
|
|
|
|
|
+ left: 170,
|
|
|
|
|
+ name: 'arrow_sw'
|
|
|
|
|
+ } );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ // ------- South
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "southArrowNorth" position', () => {
|
|
|
|
|
+ expect( positions.southArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 215,
|
|
|
|
|
+ left: 125,
|
|
|
|
|
+ name: 'arrow_n'
|
|
|
|
|
+ } );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "southArrowNorthEast" position', () => {
|
|
|
|
|
+ expect( positions.southArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 215,
|
|
|
|
|
+ left: 130,
|
|
|
|
|
+ name: 'arrow_ne'
|
|
|
|
|
+ } );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "southArrowNorthWest" position', () => {
|
|
|
|
|
+ expect( positions.southArrowNorthWest( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 215,
|
|
|
|
|
+ left: 120,
|
|
|
|
|
+ name: 'arrow_nw'
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'southWestArrowNorth', () => {
|
|
|
|
|
|
|
+ // ------- South west
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "southWestArrowNorth" position', () => {
|
|
|
expect( positions.southWestArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
expect( positions.southWestArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
top: 215,
|
|
top: 215,
|
|
|
left: 75,
|
|
left: 75,
|
|
@@ -734,19 +788,45 @@ describe( 'BalloonPanelView', () => {
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'southArrowNorth', () => {
|
|
|
|
|
- expect( positions.southArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
|
|
+ it( 'should define the "southWestArrowNorthWest" position', () => {
|
|
|
|
|
+ expect( positions.southWestArrowNorthWest( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
top: 215,
|
|
top: 215,
|
|
|
- left: 125,
|
|
|
|
|
|
|
+ left: 70,
|
|
|
|
|
+ name: 'arrow_nw'
|
|
|
|
|
+ } );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "southWestArrowNorthEast" position', () => {
|
|
|
|
|
+ expect( positions.southWestArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 215,
|
|
|
|
|
+ left: 80,
|
|
|
|
|
+ name: 'arrow_ne'
|
|
|
|
|
+ } );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ // ------- South east
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "southEastArrowNorth" position', () => {
|
|
|
|
|
+ expect( positions.southEastArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 215,
|
|
|
|
|
+ left: 175,
|
|
|
name: 'arrow_n'
|
|
name: 'arrow_n'
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'northArrowSouth', () => {
|
|
|
|
|
- expect( positions.northArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
- top: 35,
|
|
|
|
|
- left: 125,
|
|
|
|
|
- name: 'arrow_s'
|
|
|
|
|
|
|
+ it( 'should define the "southEastArrowNorthEast" position', () => {
|
|
|
|
|
+ expect( positions.southEastArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 215,
|
|
|
|
|
+ left: 180,
|
|
|
|
|
+ name: 'arrow_ne'
|
|
|
|
|
+ } );
|
|
|
|
|
+ } );
|
|
|
|
|
+
|
|
|
|
|
+ it( 'should define the "southEastArrowNorthWest" position', () => {
|
|
|
|
|
+ expect( positions.southEastArrowNorthWest( targetRect, balloonRect ) ).to.deep.equal( {
|
|
|
|
|
+ top: 215,
|
|
|
|
|
+ left: 170,
|
|
|
|
|
+ name: 'arrow_nw'
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|