Browse Source

Extracted ImageAlternateText plugin.

Szymon Kupś 9 years ago
parent
commit
0ef6fce66e

+ 2 - 101
packages/ckeditor5-image/src/image.js

@@ -10,14 +10,8 @@
 import Plugin from 'ckeditor5-core/src/plugin';
 import ImageEngine from './imageengine';
 import Widget from './widget/widget';
-import ButtonView from 'ckeditor5-ui/src/button/buttonview';
-import { isImageWidget } from './utils';
-import AlternateTextFormView from 'ckeditor5-image/src/ui/alternatetextformview';
-import clickOutsideHandler from 'ckeditor5-ui/src/bindings/clickoutsidehandler';
-import escPressHandler from 'ckeditor5-ui/src/bindings/escpresshandler';
-import ImageBalloonPanel from './ui/imageballoonpanel';
+import ImageAlternateText from './imagealternatetext/imagealternatetext';
 
-import alternateTextIcon from 'ckeditor5-core/theme/icons/source.svg';
 import '../theme/theme.scss';
 
 /**
@@ -32,99 +26,6 @@ export default class Image extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ ImageEngine, Widget ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		// TODO: this returns promise too.
-		this._createAlternateTextChangeButton();
-
-		return this._createAlternateTextBalloonPanel();
-	}
-
-	/**
-	 * Creates button showing alternate text change balloon panel and registers it in
-	 * editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
-	 *
-	 * @private
-	 */
-	_createAlternateTextChangeButton() {
-		const editor = this.editor;
-		const command = editor.commands.get( 'imageAlternateText' );
-		const t = editor.t;
-
-		return editor.ui.componentFactory.add( 'imageAlternateText', ( locale ) => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: t( 'Change alternate text' ),
-				icon: alternateTextIcon
-			} );
-
-			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
-
-			this.listenTo( view, 'execute', () => this._showAlternateTextChangePanel() );
-
-			return view;
-		} );
-	}
-
-	_createAlternateTextBalloonPanel() {
-		const editor = this.editor;
-
-		const panel = new ImageBalloonPanel( editor );
-		const form = this._alternateTextForm = new AlternateTextFormView( editor.locale );
-
-		this.listenTo( form, 'submit', () => {
-			editor.execute( 'imageAlternateText', form.alternateTextInput.value );
-			this._hideAlternateTextChangePanel();
-		} );
-
-		this.listenTo( form, 'cancel', () => this._hideAlternateTextChangePanel() );
-
-		// Close on `ESC` press.
-		escPressHandler( {
-			emitter: panel,
-			activator: () => panel.isVisible,
-			callback: () => this._hideAlternateTextChangePanel()
-		} );
-
-		// Close on click outside of balloon panel element.
-		clickOutsideHandler( {
-			emitter: panel,
-			activator: () => panel.isVisible,
-			contextElement: panel.element,
-			callback: () => this._hideAlternateTextChangePanel()
-		} );
-
-		this.panel = panel;
-
-		return Promise.all( [
-			panel.content.add( this._alternateTextForm ),
-			editor.ui.view.body.add( panel )
-		] );
-	}
-
-	_showAlternateTextChangePanel() {
-		const editor = this.editor;
-		const editingView = editor.editing.view;
-		const selectedElement = editingView.selection.getSelectedElement();
-
-		if ( selectedElement && isImageWidget( selectedElement ) ) {
-			const command = editor.commands.get( 'imageAlternateText' );
-
-			this._alternateTextForm.alternateTextInput.value = command.value || '';
-
-			this._alternateTextForm.alternateTextInput.select();
-			this.panel.attach();
-		}
-	}
-
-	_hideAlternateTextChangePanel() {
-		this.panel.hide();
-		this.editor.editing.view.focus();
+		return [ ImageEngine, Widget, ImageAlternateText ];
 	}
 }

+ 120 - 0
packages/ckeditor5-image/src/imagealternatetext/imagealternatetext.js

@@ -0,0 +1,120 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module image/image
+ */
+
+import Plugin from 'ckeditor5-core/src/plugin';
+import ImageAlternateTextCommand from './imagealternatetextcommand';
+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 AlternateTextFormView from './ui/alternatetextformview';
+import ImageBalloonPanel from '../ui/imageballoonpanel';
+
+import alternateTextIcon from 'ckeditor5-core/theme/icons/source.svg';
+// TODO: move part of the theme to this sub-directory.
+
+/**
+ * The image alternate text plugin.
+ *
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageAlternateText extends Plugin {
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		// Register ImageAlternateTextCommand.
+		this.editor.commands.set( 'imageAlternateText', new ImageAlternateTextCommand( this.editor ) );
+
+		// TODO: this returns promise too.
+		this._createAlternateTextChangeButton();
+
+		return this._createAlternateTextBalloonPanel();
+	}
+
+	/**
+	 * Creates button showing alternate text change balloon panel and registers it in
+	 * editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
+	 *
+	 * @private
+	 */
+	_createAlternateTextChangeButton() {
+		const editor = this.editor;
+		const command = editor.commands.get( 'imageAlternateText' );
+		const t = editor.t;
+
+		return editor.ui.componentFactory.add( 'imageAlternateText', ( locale ) => {
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Change alternate text' ),
+				icon: alternateTextIcon
+			} );
+
+			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+
+			this.listenTo( view, 'execute', () => this._showAlternateTextChangePanel() );
+
+			return view;
+		} );
+	}
+
+	_createAlternateTextBalloonPanel() {
+		const editor = this.editor;
+
+		const panel = new ImageBalloonPanel( editor );
+		const form = this._alternateTextForm = new AlternateTextFormView( editor.locale );
+
+		this.listenTo( form, 'submit', () => {
+			editor.execute( 'imageAlternateText', form.alternateTextInput.value );
+			this._hideAlternateTextChangePanel();
+		} );
+
+		this.listenTo( form, 'cancel', () => this._hideAlternateTextChangePanel() );
+
+		// Close on `ESC` press.
+		escPressHandler( {
+			emitter: panel,
+			activator: () => panel.isVisible,
+			callback: () => this._hideAlternateTextChangePanel()
+		} );
+
+		// Close on click outside of balloon panel element.
+		clickOutsideHandler( {
+			emitter: panel,
+			activator: () => panel.isVisible,
+			contextElement: panel.element,
+			callback: () => this._hideAlternateTextChangePanel()
+		} );
+
+		this.panel = panel;
+
+		return Promise.all( [
+			panel.content.add( this._alternateTextForm ),
+			editor.ui.view.body.add( panel )
+		] );
+	}
+
+	_showAlternateTextChangePanel() {
+		const editor = this.editor;
+		const command = editor.commands.get( 'imageAlternateText' );
+
+		this._alternateTextForm.alternateTextInput.value = command.value || '';
+
+		this._alternateTextForm.alternateTextInput.select();
+		this.panel.attach();
+	}
+
+	_hideAlternateTextChangePanel() {
+		this.panel.hide();
+		this.editor.editing.view.focus();
+	}
+}

+ 2 - 2
packages/ckeditor5-image/src/imagealternatetextcommand.js

@@ -4,13 +4,13 @@
  */
 
 /**
- * @module image/alternatetextcommand
+ * @module image/imagelaternatetext/imagealternatetextcommand
  */
 
 import Command from 'ckeditor5-core/src/command/command';
 
 // TODO: isImage to image utils.
-import { isImage } from './imagestyle/utils';
+import { isImage } from '../imagestyle/utils';
 
 export default class ImageAlternateTextCommand extends Command {
 	constructor( editor ) {

packages/ckeditor5-image/src/ui/alternatetextformview.js → packages/ckeditor5-image/src/imagealternatetext/ui/alternatetextformview.js


+ 0 - 4
packages/ckeditor5-image/src/imageengine.js

@@ -10,7 +10,6 @@
 import Plugin from 'ckeditor5-core/src/plugin';
 import buildModelConverter from 'ckeditor5-engine/src/conversion/buildmodelconverter';
 import WidgetEngine from './widget/widgetengine';
-import ImageAlternateTextCommand from './imagealternatetextcommand.js';
 import { modelToViewImage, viewToModelImage, modelToViewSelection } from './converters';
 import { toImageWidget } from './utils';
 
@@ -60,8 +59,5 @@ export default class ImageEngine extends Plugin {
 
 		// Creates fake selection label if selection is placed around image widget.
 		editing.modelToView.on( 'selection', modelToViewSelection( editor.t ), { priority: 'lowest' } );
-
-		// Register ImageAlternateTextCommand.
-		editor.commands.set( 'imageAlternateText', new ImageAlternateTextCommand( editor ) );
 	}
 }

+ 1 - 1
packages/ckeditor5-image/tests/manual/alternatetext.js

@@ -17,7 +17,7 @@ import ImageToolbar from 'ckeditor5-image/src/imagetoolbar';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
 	plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin, ImageToolbar ],
-	toolbar: [ 'headings', 'undo', 'redo' ],
+	toolbar: [ 'headings', 'undo', 'redo', 'imageAlternateText' ],
 	image: {
 		toolbar: [ 'imageAlternateText' ]
 	}