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

Fixed: BalloonPanelView#pin and BalloonPanelView#unpin should not
control the visibility of the panel.

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

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

@@ -95,7 +95,7 @@ export default class BalloonPanelView extends View {
 		 * `true`. Used by {@link #pin}.
 		 * `true`. Used by {@link #pin}.
 		 *
 		 *
 		 * @private
 		 * @private
-		 * @member {Function} #_pinWhenVisibleCallback
+		 * @member {Function} #_pinWhenIsVisibleCallback
 		 */
 		 */
 
 
 		/**
 		/**
@@ -197,7 +197,7 @@ export default class BalloonPanelView extends View {
 	pin( options ) {
 	pin( options ) {
 		this.unpin();
 		this.unpin();
 
 
-		this._pinWhenVisibleCallback = () => {
+		this._pinWhenIsVisibleCallback = () => {
 			if ( this.isVisible ) {
 			if ( this.isVisible ) {
 				this._startPinning( options );
 				this._startPinning( options );
 			} else {
 			} else {
@@ -205,7 +205,7 @@ export default class BalloonPanelView extends View {
 			}
 			}
 		};
 		};
 
 
-		// If the panel is already visible, enable the listeners immediately.
+		// If the panel is already visible, start pinning immediately.
 		if ( this.isVisible ) {
 		if ( this.isVisible ) {
 			this._startPinning( options );
 			this._startPinning( options );
 		}
 		}
@@ -213,23 +213,23 @@ export default class BalloonPanelView extends View {
 		// 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._pinWhenVisibleCallback );
+		this.listenTo( this, 'change:isVisible', this._pinWhenIsVisibleCallback );
 	}
 	}
 
 
 	/**
 	/**
 	 * Stops pinning the panel, as set up by {@link #pin}.
 	 * Stops pinning the panel, as set up by {@link #pin}.
 	 */
 	 */
 	unpin() {
 	unpin() {
-		// Deactivate listeners attached by pin().
-		this.stopListening( global.document, 'scroll' );
-		this.stopListening( global.window, 'resize' );
+		if ( this._pinWhenIsVisibleCallback ) {
+			// Deactivate listeners attached by pin().
+			this.stopListening( global.document, 'scroll' );
+			this.stopListening( global.window, 'resize' );
 
 
-		if ( this._pinWhenVisibleCallback ) {
 			// Deactivate the panel pin() control logic.
 			// Deactivate the panel pin() control logic.
 			// TODO: Use off() (https://github.com/ckeditor/ckeditor5-utils/issues/144).
 			// TODO: Use off() (https://github.com/ckeditor/ckeditor5-utils/issues/144).
-			this.stopListening( this, 'change:isVisible', this._pinWhenVisibleCallback );
+			this.stopListening( this, 'change:isVisible', this._pinWhenIsVisibleCallback );
 
 
-			this._pinWhenVisibleCallback = null;
+			this._pinWhenIsVisibleCallback = null;
 		}
 		}
 	}
 	}
 
 

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

@@ -52,6 +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.show();
 		panel.pin( {
 		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

+ 24 - 3
packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js

@@ -437,14 +437,26 @@ describe( 'BalloonPanelView', () => {
 		} );
 		} );
 
 
 		describe( 'pin()', () => {
 		describe( 'pin()', () => {
-			it( 'should not pin until the balloon gets visible', () => {
+			it( 'should not show the balloon', () => {
+				const showSpy = sinon.spy( view, 'show' );
+
 				view.hide();
 				view.hide();
 
 
 				view.pin( { target, limiter } );
 				view.pin( { target, limiter } );
-				sinon.assert.notCalled( attachToSpy );
+				sinon.assert.notCalled( showSpy );
+			} );
+
+			it( 'should start pinning when the balloon is visible', () => {
+				view.hide();
+				view.pin( { target, limiter } );
+
+				targetParent.dispatchEvent( new Event( 'scroll' ) );
 
 
 				view.show();
 				view.show();
-				sinon.assert.calledOnce( attachToSpy );
+
+				targetParent.dispatchEvent( new Event( 'scroll' ) );
+
+				sinon.assert.calledTwice( attachToSpy );
 			} );
 			} );
 
 
 			it( 'should stop pinning when the balloon becomes invisible', () => {
 			it( 'should stop pinning when the balloon becomes invisible', () => {
@@ -582,6 +594,15 @@ describe( 'BalloonPanelView', () => {
 		} );
 		} );
 
 
 		describe( 'unpin()', () => {
 		describe( 'unpin()', () => {
+			it( 'should not hide the balloon if pinned', () => {
+				const hideSpy = sinon.spy( view, 'hide' );
+
+				view.pin( { target, limiter } );
+				view.unpin();
+
+				sinon.assert.notCalled( hideSpy );
+			} );
+
 			it( 'should stop attaching', () => {
 			it( 'should stop attaching', () => {
 				view.pin( { target, limiter } );
 				view.pin( { target, limiter } );
 				sinon.assert.calledOnce( attachToSpy );
 				sinon.assert.calledOnce( attachToSpy );