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

Merge pull request #86 from ckeditor/t/ckeditor5-ui/491

Internal: Aligned code to the latest ContextualBalloon API. Part of ckeditor/ckeditor5-ui#491.
Piotr Jasiun 6 лет назад
Родитель
Сommit
a13fc99335

+ 20 - 8
packages/ckeditor5-widget/src/widgettoolbarrepository.js

@@ -151,8 +151,14 @@ export default class WidgetToolbarRepository extends Plugin {
 		for ( const definition of this._toolbarDefinitions.values() ) {
 			const relatedElement = definition.getRelatedElement( this.editor.editing.view.document.selection );
 
-			if ( !this.editor.ui.focusTracker.isFocused || !relatedElement ) {
-				this._hideToolbar( definition );
+			if ( !this.editor.ui.focusTracker.isFocused ) {
+				if ( this._isToolbarVisible( definition ) ) {
+					this._hideToolbar( definition );
+				}
+			} else if ( !relatedElement ) {
+				if ( this._isToolbarInBalloon( definition ) ) {
+					this._hideToolbar( definition );
+				}
 			} else {
 				const relatedElementDepth = relatedElement.getAncestors().length;
 
@@ -180,10 +186,6 @@ export default class WidgetToolbarRepository extends Plugin {
 	 * @param {module:widget/widgettoolbarrepository~WidgetRepositoryToolbarDefinition} toolbarDefinition
 	 */
 	_hideToolbar( toolbarDefinition ) {
-		if ( !this._isToolbarVisible( toolbarDefinition ) ) {
-			return;
-		}
-
 		this._balloon.remove( toolbarDefinition.view );
 	}
 
@@ -201,7 +203,7 @@ export default class WidgetToolbarRepository extends Plugin {
 	_showToolbar( toolbarDefinition, relatedElement ) {
 		if ( this._isToolbarVisible( toolbarDefinition ) ) {
 			repositionContextualBalloon( this.editor, relatedElement );
-		} else if ( !this._balloon.hasView( toolbarDefinition.view ) ) {
+		} else if ( !this._isToolbarInBalloon( toolbarDefinition ) ) {
 			this._balloon.add( {
 				view: toolbarDefinition.view,
 				position: getBalloonPositionData( this.editor, relatedElement ),
@@ -213,9 +215,19 @@ export default class WidgetToolbarRepository extends Plugin {
 	/**
 	 * @private
 	 * @param {Object} toolbar
+	 * @returns {Boolean}
 	 */
 	_isToolbarVisible( toolbar ) {
-		return this._balloon.visibleView == toolbar.view;
+		return this._balloon.visibleView === toolbar.view;
+	}
+
+	/**
+	 * @private
+	 * @param {Object} toolbar
+	 * @returns {Boolean}
+	 */
+	_isToolbarInBalloon( toolbar ) {
+		return this._balloon.hasView( toolbar.view );
 	}
 }
 

+ 65 - 0
packages/ckeditor5-widget/tests/widgettoolbarrepository.js

@@ -136,6 +136,71 @@ describe( 'WidgetToolbarRepository', () => {
 			expect( balloon.visibleView ).to.equal( null );
 		} );
 
+		it( 'toolbar should be removed from not visible balloon stack when the `getRelatedElement` callback returns null', () => {
+			balloon.add( {
+				view: new View(),
+				stackId: 'secondary',
+				position: {
+					target: {}
+				}
+			} );
+
+			widgetToolbarRepository.register( 'fake', {
+				items: editor.config.get( 'fake.toolbar' ),
+				getRelatedElement: getSelectedFakeWidget
+			} );
+
+			setData( model, '<paragraph>foo</paragraph>[<fake-widget></fake-widget>]' );
+
+			const fakeWidgetToolbarView = widgetToolbarRepository._toolbarDefinitions.get( 'fake' ).view;
+
+			expect( balloon.hasView( fakeWidgetToolbarView ) );
+			expect( balloon.visibleView ).to.not.equal( fakeWidgetToolbarView );
+
+			model.change( writer => {
+				// Select the <paragraph>foo</paragraph>.
+				writer.setSelection( model.document.getRoot().getChild( 0 ), 'in' );
+			} );
+
+			expect( balloon.hasView( fakeWidgetToolbarView ) ).to.equal( false );
+		} );
+
+		it( 'toolbar should be hidden when the editor ui lost focus', () => {
+			widgetToolbarRepository.register( 'fake', {
+				items: editor.config.get( 'fake.toolbar' ),
+				getRelatedElement: getSelectedFakeWidget
+			} );
+
+			setData( model, '<paragraph>foo</paragraph>[<fake-widget></fake-widget>]' );
+
+			editor.ui.focusTracker.isFocused = false;
+
+			expect( balloon.visibleView ).to.equal( null );
+		} );
+
+		it( 'toolbar should do nothing with toolbar when the editor ui lost focus but toolbar is not a visible view', () => {
+			balloon.add( {
+				view: new View(),
+				stackId: 'secondary',
+				position: {
+					target: {}
+				}
+			} );
+
+			widgetToolbarRepository.register( 'fake', {
+				items: editor.config.get( 'fake.toolbar' ),
+				getRelatedElement: getSelectedFakeWidget
+			} );
+
+			setData( model, '<paragraph>foo</paragraph>[<fake-widget></fake-widget>]' );
+
+			const fakeWidgetToolbarView = widgetToolbarRepository._toolbarDefinitions.get( 'fake' ).view;
+
+			editor.ui.focusTracker.isFocused = false;
+
+			expect( balloon.hasView( fakeWidgetToolbarView ) ).to.equal( true );
+		} );
+
 		it( 'toolbar should update its position when other widget is selected', () => {
 			widgetToolbarRepository.register( 'fake', {
 				items: editor.config.get( 'fake.toolbar' ),