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

Code refactoring in BalloonPanelView.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
8069350cc3
1 измененных файлов с 55 добавлено и 49 удалено
  1. 55 49
      packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

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

@@ -177,63 +177,23 @@ export default class BalloonPanelView extends View {
 	 * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
 	 * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
 	 */
 	 */
 	pin( options ) {
 	pin( options ) {
-		// See https://github.com/ckeditor/ckeditor5-ui/issues/170.
-
 		this.unpin();
 		this.unpin();
 
 
-		const limiter = options.limiter || defaultLimiterElement;
-		let target = null;
-
-		// We need to take HTMLElement related to the target if it is possible.
-		if ( isElement( options.target ) ) {
-			target = options.target;
-		} else if ( isRange( options.target ) ) {
-			target = options.target.commonAncestorContainer;
-		}
-
-		// Starts managing the pinned state of the panel.
-		//
-		// @private
-		const startPinning = () => {
-			this.attachTo( options );
-
-			// Then we need to listen on scroll event of eny element in the document.
-			this.listenTo( global.document, 'scroll', ( evt, domEvt ) => {
-				// We need to update position if scrolled element contains related to the balloon elements.
-				if ( ( target && domEvt.target.contains( target ) ) || domEvt.target.contains( limiter ) ) {
-					this.attachTo( options );
-				}
-			}, { useCapture: true } );
-
-			// We need to listen on window resize event and update position.
-			this.listenTo( global.window, 'resize', () => {
-				this.attachTo( options );
-			} );
-		};
-
-		// Stops managing the pinned state of the panel.
-		//
-		// @private
-		const stopPinning = () => {
-			this.stopListening( global.document, 'scroll' );
-			this.stopListening( global.window, 'resize' );
+		this._pinWhenVisible = () => {
+			if ( this.isVisible ) {
+				this._startPinning( options );
+			} else {
+				this._stopPinning();
+			}
 		};
 		};
 
 
 		// If the panel is already visible, enable the listeners immediately.
 		// If the panel is already visible, enable the listeners immediately.
-		if ( this.isVisible ) {
-			startPinning();
-		}
+		this._pinWhenVisible();
 
 
 		// 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', () => {
-			if ( this.isVisible ) {
-				startPinning();
-			} else {
-				stopPinning();
-			}
-		} );
+		this.listenTo( this, 'change:isVisible', this._pinWhenVisible );
 	}
 	}
 
 
 	/**
 	/**
@@ -246,7 +206,53 @@ export default class BalloonPanelView extends View {
 
 
 		// 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' );
+		if ( this._pinWhenVisible ) {
+			this.stopListening( this, 'change:isVisible', this._pinWhenVisible );
+		}
+	}
+
+	/**
+	 * Starts managing the pinned state of the panel. See {@link #pin}.
+	 *
+	 * @private
+	 * @param {module:utils/dom/position~Options} options Positioning options compatible with
+	 * {@link module:utils/dom/position~getOptimalPosition}.
+	 */
+	_startPinning( options ) {
+		this.attachTo( options );
+
+		const limiter = options.limiter || defaultLimiterElement;
+		let target = null;
+
+		// We need to take HTMLElement related to the target if it is possible.
+		if ( isElement( options.target ) ) {
+			target = options.target;
+		} else if ( isRange( options.target ) ) {
+			target = options.target.commonAncestorContainer;
+		}
+
+		// Then we need to listen on scroll event of eny element in the document.
+		this.listenTo( global.document, 'scroll', ( evt, domEvt ) => {
+			// We need to update position if scrolled element contains related to the balloon elements.
+			if ( ( target && domEvt.target.contains( target ) ) || domEvt.target.contains( limiter ) ) {
+				this.attachTo( options );
+			}
+		}, { useCapture: true } );
+
+		// We need to listen on window resize event and update position.
+		this.listenTo( global.window, 'resize', () => {
+			this.attachTo( options );
+		} );
+	}
+
+	/**
+	 * Stops managing the pinned state of the panel. See {@link #pin}.
+	 *
+	 * @private
+	 */
+	_stopPinning() {
+		this.stopListening( global.document, 'scroll' );
+		this.stopListening( global.window, 'resize' );
 	}
 	}
 }
 }