Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #86 from ckeditor/t/ckeditor5-ui/491
Browse files Browse the repository at this point in the history
Internal: Aligned code to the latest ContextualBalloon API. Part of ckeditor/ckeditor5-ui#491.
  • Loading branch information
Piotr Jasiun authored May 14, 2019
2 parents 96ec042 + 3d597b7 commit 7bd86e0
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 8 deletions.
28 changes: 20 additions & 8 deletions src/widgettoolbarrepository.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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 );
}

Expand All @@ -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 ),
Expand All @@ -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 );
}
}

Expand Down
65 changes: 65 additions & 0 deletions tests/widgettoolbarrepository.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
Expand Down

0 comments on commit 7bd86e0

Please sign in to comment.