8
0
Quellcode durchsuchen

Renamed default positions in BalloonPanelView.defaultPositions. Updated tests to the new pin() API. Updated documentation.

Aleksander Nowodzinski vor 8 Jahren
Ursprung
Commit
8bc0ddd49e

+ 21 - 9
packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

@@ -61,9 +61,9 @@ export default class BalloonPanelView extends View {
 		 *
 		 * @observable
 		 * @default 'se'
-		 * @member {'se'|'sw'|'ne'|'nw'} #position
+		 * @member {'arrow_se'|'arrow_sw'|'arrow_ne'|'arrow_nw'} #position
 		 */
-		this.set( 'position', 'se' );
+		this.set( 'position', 'arrow_se' );
 
 		/**
 		 * Controls whether the balloon panel is visible or not.
@@ -91,6 +91,14 @@ export default class BalloonPanelView extends View {
 		 */
 
 		/**
+		 * A callback that starts pining the panel when {@link #isVisible} gets
+		 * `true`. Used by {@link #pin}.
+		 *
+		 * @private
+		 * @member {Function} #_pinWhenVisibleCallback
+		 */
+
+		/**
 		 * Collection of the child views which creates balloon panel contents.
 		 *
 		 * @readonly
@@ -189,7 +197,7 @@ export default class BalloonPanelView extends View {
 	pin( options ) {
 		this.unpin();
 
-		this._pinWhenVisible = () => {
+		this._pinWhenVisibleCallback = () => {
 			if ( this.isVisible ) {
 				this._startPinning( options );
 			} else {
@@ -198,12 +206,14 @@ export default class BalloonPanelView extends View {
 		};
 
 		// If the panel is already visible, enable the listeners immediately.
-		this._pinWhenVisible();
+		if ( this.isVisible ) {
+			this._startPinning( options );
+		}
 
 		// Control the state of the listeners depending on whether the panel is visible
 		// or not.
 		// TODO: Use on() (https://github.com/ckeditor/ckeditor5-utils/issues/144).
-		this.listenTo( this, 'change:isVisible', this._pinWhenVisible );
+		this.listenTo( this, 'change:isVisible', this._pinWhenVisibleCallback );
 	}
 
 	/**
@@ -214,10 +224,12 @@ export default class BalloonPanelView extends View {
 		this.stopListening( global.document, 'scroll' );
 		this.stopListening( global.window, 'resize' );
 
-		// Deactivate the panel pin() control logic.
-		// TODO: Use off() (https://github.com/ckeditor/ckeditor5-utils/issues/144).
-		if ( this._pinWhenVisible ) {
-			this.stopListening( this, 'change:isVisible', this._pinWhenVisible );
+		if ( this._pinWhenVisibleCallback ) {
+			// Deactivate the panel pin() control logic.
+			// TODO: Use off() (https://github.com/ckeditor/ckeditor5-utils/issues/144).
+			this.stopListening( this, 'change:isVisible', this._pinWhenVisibleCallback );
+
+			this._pinWhenVisibleCallback = null;
 		}
 	}
 

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/170/1.js

@@ -52,7 +52,7 @@ ClassicEditor.create( document.querySelector( '#editor-stick' ), {
 	editor.ui.view.element.querySelector( '.ck-editor__editable' ).scrollTop = 360;
 
 	panel.init().then( () => {
-		panel.keepAttachedTo( {
+		panel.pin( {
 			target: editor.ui.view.element.querySelector( '.ck-editor__editable p strong' ),
 			limiter: editor.ui.view.editableElement
 		} );

+ 1 - 1
packages/ckeditor5-ui/tests/manual/tickets/170/1.md

@@ -1,4 +1,4 @@
-## BalloonPanelView `attachTo` vs `keepAttachedTo`
+## BalloonPanelView `attachTo` vs `pin`
 
 Scroll editable elements and container (horizontally as well). Balloon in the left editor should float but balloon in the
 right editor should stick to the target element.

+ 48 - 23
packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js

@@ -25,6 +25,12 @@ describe( 'BalloonPanelView', () => {
 		return view.init();
 	} );
 
+	afterEach( () => {
+		if ( view ) {
+			return view.destroy();
+		}
+	} );
+
 	describe( 'constructor()', () => {
 		it( 'should create element from template', () => {
 			expect( view.element.tagName ).to.equal( 'DIV' );
@@ -35,7 +41,7 @@ describe( 'BalloonPanelView', () => {
 		it( 'should set default values', () => {
 			expect( view.top ).to.equal( 0 );
 			expect( view.left ).to.equal( 0 );
-			expect( view.position ).to.equal( 'se' );
+			expect( view.position ).to.equal( 'arrow_se' );
 			expect( view.isVisible ).to.equal( false );
 		} );
 
@@ -49,7 +55,7 @@ describe( 'BalloonPanelView', () => {
 			it( 'should react on view#position', () => {
 				expect( view.element.classList.contains( 'ck-balloon-panel_arrow_se' ) ).to.true;
 
-				view.position = 'sw';
+				view.position = 'arrow_sw';
 
 				expect( view.element.classList.contains( 'ck-balloon-panel_arrow_sw' ) ).to.true;
 			} );
@@ -96,9 +102,10 @@ describe( 'BalloonPanelView', () => {
 				expect( view.element.childNodes.length ).to.equal( 0 );
 
 				const button = new ButtonView( { t() {} } );
-				view.content.add( button );
 
-				expect( view.element.childNodes.length ).to.equal( 1 );
+				return view.content.add( button ).then( () => {
+					expect( view.element.childNodes.length ).to.equal( 1 );
+				} );
 			} );
 		} );
 	} );
@@ -203,7 +210,7 @@ describe( 'BalloonPanelView', () => {
 
 				view.attachTo( { target, limiter } );
 
-				expect( view.position ).to.equal( 'se' );
+				expect( view.position ).to.equal( 'arrow_se' );
 			} );
 
 			it( 'should put balloon on the `south east` side of the target element when target is on the top left side of the limiter', () => {
@@ -216,7 +223,7 @@ describe( 'BalloonPanelView', () => {
 
 				view.attachTo( { target, limiter } );
 
-				expect( view.position ).to.equal( 'se' );
+				expect( view.position ).to.equal( 'arrow_se' );
 			} );
 
 			it( 'should put balloon on the `south west` side of the target element when target is on the right side of the limiter', () => {
@@ -229,7 +236,7 @@ describe( 'BalloonPanelView', () => {
 
 				view.attachTo( { target, limiter } );
 
-				expect( view.position ).to.equal( 'sw' );
+				expect( view.position ).to.equal( 'arrow_sw' );
 			} );
 
 			it( 'should put balloon on the `north east` side of the target element when target is on the bottom of the limiter ', () => {
@@ -242,7 +249,7 @@ describe( 'BalloonPanelView', () => {
 
 				view.attachTo( { target, limiter } );
 
-				expect( view.position ).to.equal( 'ne' );
+				expect( view.position ).to.equal( 'arrow_ne' );
 			} );
 
 			it( 'should put balloon on the `north west` side of the target element when target is on the bottom right of the limiter', () => {
@@ -255,7 +262,7 @@ describe( 'BalloonPanelView', () => {
 
 				view.attachTo( { target, limiter } );
 
-				expect( view.position ).to.equal( 'nw' );
+				expect( view.position ).to.equal( 'arrow_nw' );
 			} );
 
 			// https://github.com/ckeditor/ckeditor5-ui-default/issues/126
@@ -336,7 +343,7 @@ describe( 'BalloonPanelView', () => {
 
 				view.attachTo( { target, limiter } );
 
-				expect( view.position ).to.equal( 'sw' );
+				expect( view.position ).to.equal( 'arrow_sw' );
 			} );
 
 			it( 'should put balloon on the `south east` position when `south west` is limited', () => {
@@ -356,7 +363,7 @@ describe( 'BalloonPanelView', () => {
 
 				view.attachTo( { target, limiter } );
 
-				expect( view.position ).to.equal( 'se' );
+				expect( view.position ).to.equal( 'arrow_se' );
 			} );
 
 			it( 'should put balloon on the `north east` position when `south east` is limited', () => {
@@ -380,7 +387,7 @@ describe( 'BalloonPanelView', () => {
 
 				view.attachTo( { target, limiter } );
 
-				expect( view.position ).to.equal( 'ne' );
+				expect( view.position ).to.equal( 'arrow_ne' );
 			} );
 
 			it( 'should put balloon on the `south east` position when `north east` is limited', () => {
@@ -400,7 +407,7 @@ describe( 'BalloonPanelView', () => {
 
 				view.attachTo( { target, limiter } );
 
-				expect( view.position ).to.equal( 'se' );
+				expect( view.position ).to.equal( 'arrow_se' );
 			} );
 		} );
 	} );
@@ -409,7 +416,7 @@ describe( 'BalloonPanelView', () => {
 		let attachToSpy, target, targetParent, limiter, notRelatedElement;
 
 		beforeEach( () => {
-			attachToSpy = testUtils.sinon.spy( view, 'attachTo' );
+			attachToSpy = sinon.spy( view, 'attachTo' );
 			limiter = document.createElement( 'div' );
 			targetParent = document.createElement( 'div' );
 			target = document.createElement( 'div' );
@@ -451,6 +458,22 @@ describe( 'BalloonPanelView', () => {
 			sinon.assert.calledOnce( attachToSpy );
 		} );
 
+		it( 'should unpin if already pinned', () => {
+			const unpinSpy = testUtils.sinon.spy( view, 'unpin' );
+
+			view.show();
+			sinon.assert.notCalled( attachToSpy );
+
+			view.pin( { target, limiter } );
+			sinon.assert.calledOnce( attachToSpy );
+
+			view.pin( { target, limiter } );
+			sinon.assert.calledTwice( unpinSpy );
+
+			targetParent.dispatchEvent( new Event( 'scroll' ) );
+			sinon.assert.calledThrice( attachToSpy );
+		} );
+
 		it( 'should keep the balloon pinned to the target when any of the related elements is scrolled', () => {
 			view.pin( { target, limiter } );
 
@@ -505,13 +528,15 @@ describe( 'BalloonPanelView', () => {
 
 			sinon.assert.calledOnce( attachToSpy );
 
-			view.destroy();
+			return view.destroy().then( () => {
+				view = null;
 
-			window.dispatchEvent( new Event( 'resize' ) );
-			window.dispatchEvent( new Event( 'scroll' ) );
+				window.dispatchEvent( new Event( 'resize' ) );
+				window.dispatchEvent( new Event( 'scroll' ) );
 
-			// Still once.
-			sinon.assert.calledOnce( attachToSpy );
+				// Still once.
+				sinon.assert.calledOnce( attachToSpy );
+			} );
 		} );
 
 		it( 'should set document.body as the default limiter', () => {
@@ -559,7 +584,7 @@ describe( 'BalloonPanelView', () => {
 		let attachToSpy, target, targetParent, limiter;
 
 		beforeEach( () => {
-			attachToSpy = testUtils.sinon.spy( view, 'attachTo' );
+			attachToSpy = sinon.spy( view, 'attachTo' );
 			limiter = document.createElement( 'div' );
 			targetParent = document.createElement( 'div' );
 			target = document.createElement( 'div' );
@@ -576,7 +601,7 @@ describe( 'BalloonPanelView', () => {
 			limiter.remove();
 		} );
 
-		it( 'should stop attaching when the balloon is hidden', () => {
+		it( 'should stop attaching', () => {
 			view.pin( { target, limiter } );
 			sinon.assert.calledOnce( attachToSpy );
 
@@ -584,10 +609,10 @@ describe( 'BalloonPanelView', () => {
 
 			view.hide();
 			window.dispatchEvent( new Event( 'resize' ) );
-			window.dispatchEvent( new Event( 'scroll' ) );
+			document.dispatchEvent( new Event( 'scroll' ) );
 			view.show();
 			window.dispatchEvent( new Event( 'resize' ) );
-			window.dispatchEvent( new Event( 'scroll' ) );
+			document.dispatchEvent( new Event( 'scroll' ) );
 
 			sinon.assert.calledOnce( attachToSpy );
 		} );