Procházet zdrojové kódy

Changed the way of preventing ContextualToolbar from being displayed.

Oskar Wróbel před 8 roky
rodič
revize
c1f1fd0f21

+ 27 - 32
packages/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar.js

@@ -79,6 +79,9 @@ export default class ContextualToolbar extends Plugin {
 		// Attach lifecycle actions.
 		this._handleSelectionChange();
 		this._handleFocusChange();
+
+		// ContextualToolbar is displayed using event to make possible to prevent displaying it by stopping this event.
+		this.on( 'show', () => this._show(), { priority: 'low' } );
 	}
 
 	/**
@@ -146,42 +149,15 @@ export default class ContextualToolbar extends Plugin {
 	/**
 	 * Shows the toolbar and attaches it to the selection.
 	 *
-	 * Fires {@link #event:beforeShow} event just before displaying the panel.
+	 * Fires {@link #event:show} event which can be stopped that prevents toolbar from being displayed.
 	 */
 	show() {
-		const editingView = this.editor.editing.view;
-		let isStopped = false;
-
 		// Do not add toolbar to the balloon stack twice.
 		if ( this._balloon.hasView( this.toolbarView ) ) {
 			return;
 		}
 
-		// If `beforeShow` event is not stopped by any external code then panel will be displayed.
-		this.once( 'beforeShow', () => {
-			if ( isStopped ) {
-				return;
-			}
-
-			// Update panel position when selection changes while balloon will be opened
-			// (by an external document changes).
-			this.listenTo( editingView, 'render', () => {
-				this._balloon.updatePosition( this._getBalloonPositionData() );
-			} );
-
-			// Add panel to the common editor contextual balloon.
-			this._balloon.add( {
-				view: this.toolbarView,
-				position: this._getBalloonPositionData(),
-				balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container'
-			} );
-		} );
-
-		// Fire this event to inform that `ContextualToolbar` is going to be shown.
-		// Helper function for preventing the panel from being displayed is passed along with the event.
-		this.fire( 'beforeShow', () => {
-			isStopped = true;
-		} );
+		this.fire( 'show' );
 	}
 
 	/**
@@ -195,6 +171,26 @@ export default class ContextualToolbar extends Plugin {
 	}
 
 	/**
+	 * Executes showing toolbar.
+	 * When {@link #event:show} is not stopped then toolbar will be displayed.
+	 *
+	 * @private
+	 */
+	_show() {
+		// Update panel position when selection changes (by external document changes) while balloon is opened.
+		this.listenTo( this.editor.editing.view, 'render', () => {
+			this._balloon.updatePosition( this._getBalloonPositionData() );
+		} );
+
+		// Add panel to the common editor contextual balloon.
+		this._balloon.add( {
+			view: this.toolbarView,
+			position: this._getBalloonPositionData(),
+			balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container'
+		} );
+	}
+
+	/**
 	 * Returns positioning options for the {@link #_balloon}. They control the way balloon is attached
 	 * to the selection.
 	 *
@@ -236,10 +232,9 @@ export default class ContextualToolbar extends Plugin {
 	/**
 	 * This event is fired just before the toolbar shows.
 	 * Using this event, an external code can prevent ContextualToolbar
-	 * from being displayed by calling a `stop` function which is passed along with this event.
+	 * from being displayed by stopping it.
 	 *
-	 * @event beforeShow
-	 * @param {Function} stop Calling this function prevents panel from being displayed.
+	 * @event show
 	 */
 
 	/**

+ 4 - 6
packages/ckeditor5-ui/tests/toolbar/contextual/contextualtoolbar.js

@@ -409,24 +409,22 @@ describe( 'ContextualToolbar', () => {
 	} );
 
 	describe( 'beforeShow event', () => {
-		it( 'should fire `beforeShow` event just before panel shows', () => {
+		it( 'should fire `show` event just before panel shows', () => {
 			const spy = sinon.spy();
 
-			contextualToolbar.on( 'beforeShow', spy );
+			contextualToolbar.on( 'show', spy );
 			setData( editor.document, '<paragraph>b[a]r</paragraph>' );
 
 			contextualToolbar.show();
 			sinon.assert.calledOnce( spy );
 		} );
 
-		it( 'should not show the panel when `beforeShow` event is stopped', () => {
+		it( 'should not show the panel when `show` event is stopped', () => {
 			const balloonAddSpy = sandbox.spy( balloon, 'add' );
 
 			setData( editor.document, '<paragraph>b[a]r</paragraph>' );
 
-			contextualToolbar.on( 'beforeShow', ( evt, stop ) => {
-				stop();
-			} );
+			contextualToolbar.on( 'show', evt => evt.stop() );
 
 			contextualToolbar.show();
 			sinon.assert.notCalled( balloonAddSpy );