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

Added show and hide methods to ImageToolbar.

Szymon Kupś 9 лет назад
Родитель
Сommit
7c33282b49

+ 16 - 5
packages/ckeditor5-image/src/imagealternatetext/imagealternatetext.js

@@ -13,6 +13,8 @@ import ButtonView from 'ckeditor5-ui/src/button/buttonview';
 import clickOutsideHandler from 'ckeditor5-ui/src/bindings/clickoutsidehandler';
 import escPressHandler from 'ckeditor5-ui/src/bindings/escpresshandler';
 
+import ImageToolbar from '../imagetoolbar';
+
 import AlternateTextFormView from './ui/alternatetextformview';
 import ImageBalloonPanel from '../ui/imageballoonpanel';
 
@@ -22,16 +24,14 @@ import alternateTextIcon from 'ckeditor5-core/theme/icons/source.svg';
 /**
  * The image alternate text plugin.
  *
- *
  * @extends module:core/plugin~Plugin
  */
 export default class ImageAlternateText extends Plugin {
-
 	/**
 	 * @inheritDoc
 	 */
 	init() {
-		// Register ImageAlternateTextCommand.
+		// TODO: Register ImageAlternateTextCommand in engine part.
 		this.editor.commands.set( 'imageAlternateText', new ImageAlternateTextCommand( this.editor ) );
 
 		// TODO: this returns promise too.
@@ -106,15 +106,26 @@ export default class ImageAlternateText extends Plugin {
 	_showAlternateTextChangePanel() {
 		const editor = this.editor;
 		const command = editor.commands.get( 'imageAlternateText' );
+		const imageToolbar = editor.plugins.get( ImageToolbar );
 
-		this._alternateTextForm.alternateTextInput.value = command.value || '';
+		if ( imageToolbar ) {
+			imageToolbar.hide();
+		}
 
+		this._alternateTextForm.alternateTextInput.value = command.value || '';
 		this._alternateTextForm.alternateTextInput.select();
 		this.panel.attach();
 	}
 
 	_hideAlternateTextChangePanel() {
+		const editor = this.editor;
 		this.panel.hide();
-		this.editor.editing.view.focus();
+		editor.editing.view.focus();
+
+		const imageToolbar = editor.plugins.get( ImageToolbar );
+
+		if ( imageToolbar ) {
+			imageToolbar.show();
+		}
 	}
 }

+ 17 - 8
packages/ckeditor5-image/src/imagetoolbar.js

@@ -31,7 +31,9 @@ export default class ImageToolbar extends Plugin {
 			return;
 		}
 
-		const panel = new ImageBalloonPanel( editor );
+		this._panel = new ImageBalloonPanel( editor );
+
+		const panel = this._panel;
 		const promises = [];
 		const toolbar = new ToolbarView();
 		panel.content.add( toolbar );
@@ -45,15 +47,22 @@ export default class ImageToolbar extends Plugin {
 		promises.push( editor.ui.view.body.add( panel ) );
 
 		// Show toolbar each time image widget is selected.
-		const editingView = editor.editing.view;
-		editor.listenTo( editingView, 'render', () => {
-			const selectedElement = editingView.selection.getSelectedElement();
-
-			if ( selectedElement && isImageWidget( selectedElement ) ) {
-				panel.attach();
-			}
+		editor.listenTo( this.editor.editing.view, 'render', () => {
+			this.show();
 		} );
 
 		return Promise.all( promises );
 	}
+
+	show() {
+		const selectedElement = this.editor.editing.view.selection.getSelectedElement();
+
+		if ( selectedElement && isImageWidget( selectedElement ) ) {
+			this._panel.attach();
+		}
+	}
+
+	hide() {
+		this._panel.detach();
+	}
 }