8
0
Просмотр исходного кода

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

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
8bc0ddd49e

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

@@ -61,9 +61,9 @@ export default class BalloonPanelView extends View {
 		 *
 		 *
 		 * @observable
 		 * @observable
 		 * @default 'se'
 		 * @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.
 		 * Controls whether the balloon panel is visible or not.
@@ -90,6 +90,14 @@ export default class BalloonPanelView extends View {
 		 * @member {Number} #maxWidth
 		 * @member {Number} #maxWidth
 		 */
 		 */
 
 
+		/**
+		 * 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.
 		 * Collection of the child views which creates balloon panel contents.
 		 *
 		 *
@@ -189,7 +197,7 @@ export default class BalloonPanelView extends View {
 	pin( options ) {
 	pin( options ) {
 		this.unpin();
 		this.unpin();
 
 
-		this._pinWhenVisible = () => {
+		this._pinWhenVisibleCallback = () => {
 			if ( this.isVisible ) {
 			if ( this.isVisible ) {
 				this._startPinning( options );
 				this._startPinning( options );
 			} else {
 			} else {
@@ -198,12 +206,14 @@ export default class BalloonPanelView extends View {
 		};
 		};
 
 
 		// If the panel is already visible, enable the listeners immediately.
 		// 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
 		// Control the state of the listeners depending on whether the panel is visible
 		// or not.
 		// or not.
 		// TODO: Use on() (https://github.com/ckeditor/ckeditor5-utils/issues/144).
 		// 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.document, 'scroll' );
 		this.stopListening( global.window, 'resize' );
 		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;
 	editor.ui.view.element.querySelector( '.ck-editor__editable' ).scrollTop = 360;
 
 
 	panel.init().then( () => {
 	panel.init().then( () => {
-		panel.keepAttachedTo( {
+		panel.pin( {
 			target: editor.ui.view.element.querySelector( '.ck-editor__editable p strong' ),
 			target: editor.ui.view.element.querySelector( '.ck-editor__editable p strong' ),
 			limiter: editor.ui.view.editableElement
 			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
 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.
 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();
 		return view.init();
 	} );
 	} );
 
 
+	afterEach( () => {
+		if ( view ) {
+			return view.destroy();
+		}
+	} );
+
 	describe( 'constructor()', () => {
 	describe( 'constructor()', () => {
 		it( 'should create element from template', () => {
 		it( 'should create element from template', () => {
 			expect( view.element.tagName ).to.equal( 'DIV' );
 			expect( view.element.tagName ).to.equal( 'DIV' );
@@ -35,7 +41,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( 'se' );
+			expect( view.position ).to.equal( 'arrow_se' );
 			expect( view.isVisible ).to.equal( false );
 			expect( view.isVisible ).to.equal( false );
 		} );
 		} );
 
 
@@ -49,7 +55,7 @@ describe( 'BalloonPanelView', () => {
 			it( 'should react on view#position', () => {
 			it( 'should react on view#position', () => {
 				expect( view.element.classList.contains( 'ck-balloon-panel_arrow_se' ) ).to.true;
 				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;
 				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 );
 				expect( view.element.childNodes.length ).to.equal( 0 );
 
 
 				const button = new ButtonView( { t() {} } );
 				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 } );
 				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', () => {
 			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 } );
 				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', () => {
 			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 } );
 				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 ', () => {
 			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 } );
 				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', () => {
 			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 } );
 				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
 			// https://github.com/ckeditor/ckeditor5-ui-default/issues/126
@@ -336,7 +343,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				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', () => {
 			it( 'should put balloon on the `south east` position when `south west` is limited', () => {
@@ -356,7 +363,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				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', () => {
 			it( 'should put balloon on the `north east` position when `south east` is limited', () => {
@@ -380,7 +387,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				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', () => {
 			it( 'should put balloon on the `south east` position when `north east` is limited', () => {
@@ -400,7 +407,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				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;
 		let attachToSpy, target, targetParent, limiter, notRelatedElement;
 
 
 		beforeEach( () => {
 		beforeEach( () => {
-			attachToSpy = testUtils.sinon.spy( view, 'attachTo' );
+			attachToSpy = sinon.spy( view, 'attachTo' );
 			limiter = document.createElement( 'div' );
 			limiter = document.createElement( 'div' );
 			targetParent = document.createElement( 'div' );
 			targetParent = document.createElement( 'div' );
 			target = document.createElement( 'div' );
 			target = document.createElement( 'div' );
@@ -451,6 +458,22 @@ describe( 'BalloonPanelView', () => {
 			sinon.assert.calledOnce( attachToSpy );
 			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', () => {
 		it( 'should keep the balloon pinned to the target when any of the related elements is scrolled', () => {
 			view.pin( { target, limiter } );
 			view.pin( { target, limiter } );
 
 
@@ -505,13 +528,15 @@ describe( 'BalloonPanelView', () => {
 
 
 			sinon.assert.calledOnce( attachToSpy );
 			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', () => {
 		it( 'should set document.body as the default limiter', () => {
@@ -559,7 +584,7 @@ describe( 'BalloonPanelView', () => {
 		let attachToSpy, target, targetParent, limiter;
 		let attachToSpy, target, targetParent, limiter;
 
 
 		beforeEach( () => {
 		beforeEach( () => {
-			attachToSpy = testUtils.sinon.spy( view, 'attachTo' );
+			attachToSpy = sinon.spy( view, 'attachTo' );
 			limiter = document.createElement( 'div' );
 			limiter = document.createElement( 'div' );
 			targetParent = document.createElement( 'div' );
 			targetParent = document.createElement( 'div' );
 			target = document.createElement( 'div' );
 			target = document.createElement( 'div' );
@@ -576,7 +601,7 @@ describe( 'BalloonPanelView', () => {
 			limiter.remove();
 			limiter.remove();
 		} );
 		} );
 
 
-		it( 'should stop attaching when the balloon is hidden', () => {
+		it( 'should stop attaching', () => {
 			view.pin( { target, limiter } );
 			view.pin( { target, limiter } );
 			sinon.assert.calledOnce( attachToSpy );
 			sinon.assert.calledOnce( attachToSpy );
 
 
@@ -584,10 +609,10 @@ describe( 'BalloonPanelView', () => {
 
 
 			view.hide();
 			view.hide();
 			window.dispatchEvent( new Event( 'resize' ) );
 			window.dispatchEvent( new Event( 'resize' ) );
-			window.dispatchEvent( new Event( 'scroll' ) );
+			document.dispatchEvent( new Event( 'scroll' ) );
 			view.show();
 			view.show();
 			window.dispatchEvent( new Event( 'resize' ) );
 			window.dispatchEvent( new Event( 'resize' ) );
-			window.dispatchEvent( new Event( 'scroll' ) );
+			document.dispatchEvent( new Event( 'scroll' ) );
 
 
 			sinon.assert.calledOnce( attachToSpy );
 			sinon.assert.calledOnce( attachToSpy );
 		} );
 		} );