浏览代码

Various fixes to widget toolbar.

Maciej Bukowski 7 年之前
父节点
当前提交
f6cfa8ee38
共有 1 个文件被更改,包括 53 次插入25 次删除
  1. 53 25
      packages/ckeditor5-widget/src/widgettoolbar.js

+ 53 - 25
packages/ckeditor5-widget/src/widgettoolbar.js

@@ -9,7 +9,7 @@ const defaultBalloonClassName = 'ck-toolbar-container';
 /**
  * Widget toolbar plugin. It ease the process of creating widget toolbars by handling the whole rendering process and providing concise API.
  *
- * Creating toolbar for the widget bases on the {@link ~add()} method. TODO.
+ * Creating toolbar for the widget bases on the {@link ~add()} method. TODO
  *
  * This plugin added to the plugin list directly or indirectly prevents showing up
  * the {@link module:ui/toolbar/balloontoolbar~BalloonToolbar} toolbar and the widget toolbar at the same time.
@@ -27,7 +27,7 @@ const defaultBalloonClassName = 'ck-toolbar-container';
  *
  *				widgetToolbar.add( {
  *					toolbarItems: editor.config.get( 'image.toolbar' )
- *					isSelected: isImageWidgetSelected
+ *					isVisible: isImageWidgetSelected
  *				} );
  *			}
  *		}
@@ -54,17 +54,28 @@ export default class WidgetToolbar extends Plugin {
 		const editor = this.editor;
 		const balloonToolbar = editor.plugins.get( 'BalloonToolbar' );
 
-		// Disable the default balloon toolbar for all widgets.
-		this.listenTo( balloonToolbar, 'show', evt => {
-			if ( isWidgetSelected( editor.editing.view.document.selection ) ) {
-				evt.stop();
-			}
-		}, { priority: 'high' } );
+		// Disables the default balloon toolbar for all widgets.
+		if ( balloonToolbar ) {
+			this.listenTo( balloonToolbar, 'show', evt => {
+				if ( isWidgetSelected( editor.editing.view.document.selection ) ) {
+					evt.stop();
+				}
+			}, { priority: 'high' } );
+		}
 
+		/**
+		 * A map of toolbars.
+		 *
+		 * @protected
+		 * @member {Map.<string,Object>} #_toolbars
+		 */
+		this._toolbars = new Map();
+
+		/**
+		 * @private
+		 */
 		this._balloon = this.editor.plugins.get( 'ContextualBalloon' );
 
-		this._toolbars = [];
-
 		this.listenTo( editor.ui, 'update', () => {
 			this._updateToolbarsVisibility();
 		} );
@@ -77,43 +88,60 @@ export default class WidgetToolbar extends Plugin {
 
 	/**
 	 * Adds toolbar to the WidgetToolbar's collection. It renders it in the `ContextualBalloon` based on the value of the invoked
-	 * `isSelected` function. Toolbar items are gathered from `toolbarItems` array.
+	 * `isVisible` function. Toolbar items are gathered from `toolbarItems` array.
 	 * The balloon's CSS class is by default `ck-toolbar-container` and may be override with the `balloonClassName` option.
 	 *
 	 * Note: This method should be called in the `module:core/plugin/Plugin~afterInit` to make sure that plugins for toolbar items
 	 * will be already loaded and available in the UI component factory.
 	 *
+	 * @param {String} toolbarId An id for the toolbar. Used to
 	 * @param {Object} options
 	 * @param {Array.<String>} options.toolbarItems Array of toolbar items.
-	 * @param {Function} options.isSelected Callback which specifies when the toolbar should be visible for the widget.
+	 * @param {Function} options.isVisible Callback which specifies when the toolbar should be visible for the widget.
 	 * @param {String} [options.balloonClassName] CSS class for the widget balloon.
 	 */
-	add( { toolbarItems, isSelected, balloonClassName = defaultBalloonClassName } ) {
+	add( toolbarId, { toolbarItems, isVisible, balloonClassName = defaultBalloonClassName } ) {
 		const editor = this.editor;
-
-		if ( !toolbarItems ) {
-			return;
-		}
-
 		const toolbarView = new ToolbarView();
 
 		toolbarView.fillFromConfig( toolbarItems, editor.ui.componentFactory );
 
-		this._toolbars.push( {
+		if ( this._toolbars.has( toolbarId ) ) {
+			/**
+			 * Toolbar with the given id was already added.
+			 *
+			 * @error
+			 */
+			throw new Error( 'duplicated-toolbar: Toolbar with the given id was already added.', { toolbarId } )
+		}
+
+		this._toolbars.set( toolbarId, {
 			view: toolbarView,
-			isSelected,
+			isVisible,
 			balloonClassName,
 		} );
 	}
 
 	/**
+	 * Removes toolbar of the given toolbarId.
+	 *
+	 * @param {String} toolbarId Toolbar identificator.
+	 */
+	remove( toolbarId ) {
+		const toolbar = this._toolbars.get( toolbarId );
+
+		this._hideToolbar( toolbar );
+		this._toolbars.delete( toolbarId );
+	}
+
+	/**
 	 * Iterates over stored toolbars and makes them visible or hidden.
 	 *
 	 * @private
 	 */
 	_updateToolbarsVisibility() {
-		for ( const toolbar of this._toolbars ) {
-			if ( !this.editor.ui.focusTracker.isFocused || !toolbar.isSelected( this.editor.editing.view.document.selection ) ) {
+		for ( const toolbar of this._toolbars.values() ) {
+			if ( !this.editor.ui.focusTracker.isFocused || !toolbar.isVisible( this.editor.editing.view.document.selection ) ) {
 				this._hideToolbar( toolbar );
 			} else {
 				this._showToolbar( toolbar );
@@ -122,7 +150,7 @@ export default class WidgetToolbar extends Plugin {
 	}
 
 	/**
-	 * Hides given toolbar.
+	 * Hides the given toolbar.
 	 *
 	 * @private
 	 * @param {Object} toolbar
@@ -136,7 +164,7 @@ export default class WidgetToolbar extends Plugin {
 	}
 
 	/**
-	 * Shows up or repositions given toolbar.
+	 * Shows up or repositions the given toolbar.
 	 *
 	 * @private
 	 * @param {Object} toolbar
@@ -198,7 +226,7 @@ function getParentWidget( selection ) {
 	let parent = position.parent;
 
 	while ( parent ) {
-		if ( isWidget( parent ) ) {
+		if ( parent.is( 'element' ) && isWidget( parent ) ) {
 			return parent;
 		}