瀏覽代碼

Update the plugin with a much simpler version.

panr 5 年之前
父節點
當前提交
437cb423f3
共有 2 個文件被更改,包括 38 次插入129 次删除
  1. 26 69
      packages/ckeditor5-link/src/linkimageui.js
  2. 12 60
      packages/ckeditor5-link/tests/linkimageui.js

+ 26 - 69
packages/ckeditor5-link/src/linkimageui.js

@@ -12,7 +12,6 @@ import Image from '@ckeditor/ckeditor5-image/src/image';
 import LinkUI from './linkui';
 import LinkEditing from './linkediting';
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
 const linkKeystroke = 'Ctrl+K';
@@ -23,7 +22,7 @@ import '../theme/linkimageui.css';
 /**
  * The link image UI plugin.
  *
- * TODO: Docs.
+ * The feature simply allows to link an image.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -46,15 +45,12 @@ export default class LinkImageUI extends Plugin {
 		const editor = this.editor;
 		const viewDocument = editor.editing.view.document;
 
-		// TODO
+		/**
+		 * The plugin button view.
+		 *
+		 * @member {module:ui/button/buttonview~Button}
+		 */
 		this.linkButtonView = null;
-		// TODO
-		this.actionsView = null;
-
-		// TODO
-		this._linkCommand = editor.commands.get( 'link' );
-		// TODO
-		this._linkUIPlugin = editor.plugins.get( 'LinkUI' );
 
 		this.listenTo( viewDocument, 'click', ( evt, data ) => {
 			const hasLink = this._isImageLinked( editor.model.document.selection.getSelectedElement() );
@@ -68,9 +64,10 @@ export default class LinkImageUI extends Plugin {
 	}
 
 	/**
-	 * Creates a LinkImageUI view containing {@link #linkButtonView} and {@link #actionsView}.
-	 * Clicking on {@link #linkButtonView} will show a {@link module:link/linkui~LinkUI#_balloon} attached to the selection.
-	 * When image is already linked, the view shows {@link #actionsView} instead.
+	 * Creates a LinkImageUI button view.
+	 * Clicking on the button shows a {@link module:link/linkui~LinkUI#_balloon} attached to the selection.
+	 * When image is already linked, the view shows {@link module:link/linkui~LinkUI#actionsView} or
+	 * {@link module:link/linkui~LinkUI#formView} if it's not.
 	 *
 	 * @private
 	 */
@@ -79,9 +76,9 @@ export default class LinkImageUI extends Plugin {
 		const t = editor.t;
 
 		editor.ui.componentFactory.add( 'linkImage', locale => {
-			const view = new View( locale );
 			const button = new ButtonView( locale );
-			const actionsView = this._linkUIPlugin._createActionsView();
+			const plugin = editor.plugins.get( 'LinkUI' );
+			const linkCommand = editor.commands.get( 'link' );
 
 			button.isEnabled = true;
 			button.label = t( 'Link image' );
@@ -91,71 +88,31 @@ export default class LinkImageUI extends Plugin {
 			button.isToggleable = true;
 
 			// Bind button to the command.
-			button.bind( 'isEnabled' ).to( this._linkCommand, 'isEnabled' );
-			button.bind( 'isOn' ).to( this._linkCommand, 'value', value => !!value );
+			button.bind( 'isEnabled' ).to( linkCommand, 'isEnabled' );
+			button.bind( 'isOn' ).to( linkCommand, 'value', value => !!value );
 			button.bind( 'hasLink' ).to( this, 'hasLink' );
 
-			actionsView.bind( 'isVisible' ).to( actionsView, 'href' );
-			actionsView.extendTemplate( {
-				attributes: {
-					class: [ actionsView.bindTemplate.if( 'isVisible', 'ck-hidden', value => !value ) ]
-				}
-			} );
-
-			// Show the panel on button click.
-			this.listenTo( button, 'execute', () => this._linkUIPlugin._showUI( true ) );
-
-			view.setTemplate( {
-				tag: 'div',
-				attributes: {
-					class: 'ck-link-image-options'
-				},
-				children: [
-					button,
-					actionsView
-				]
-			} );
-
-			// EVENT HIJACK ALLEY.
-			// Listen to the selection change for the proper UI state handling before toolbar is visible.
-			this.listenTo( editor.model.document.selection, 'change:range', () => {
+			// Show the actionsView or formView (both from LinkUI) on button click depending on whether the image is linked already.
+			this.listenTo( button, 'execute', () => {
 				const hasLink = this._isImageLinked( editor.model.document.selection.getSelectedElement() );
 
-				button.isVisible = !hasLink;
-				actionsView.isVisible = hasLink;
-			} );
-
-			// Toggle the proper state of the plugin UI after clicking the "Save" button.
-			this.listenTo( this._linkUIPlugin.formView, 'submit', () => {
-				this._linkUIPlugin._hideUI();
-
-				actionsView.isVisible = true;
-				button.isVisible = false;
-			} );
-
-			// Toggle the proper state of the plugin UI after clicking the "Cancel" button.
-			this.listenTo( this._linkUIPlugin.formView, 'cancel', () => {
-				this._linkUIPlugin._hideUI();
-
-				actionsView.isVisible = true;
-				button.isVisible = false;
-			} );
-
-			// Toggle the proper state of the plugin UI after clicking the "Unlink" button.
-			this.listenTo( actionsView, 'unlink', () => {
-				this._linkUIPlugin._hideUI();
-
-				actionsView.isVisible = false;
-				button.isVisible = true;
+				hasLink ? plugin._addActionsView() : plugin._showUI( true );
 			} );
 
 			this.linkButtonView = button;
-			this.actionsView = actionsView;
 
-			return view;
+			return button;
 		} );
 	}
 
+	/**
+	 * A helper function that checks whether the element is a linked image.
+	 *
+	 * @private
+	 *
+	 * @param {module:engine/model/element~Element} element
+	 * @returns {Boolean}
+	 */
 	_isImageLinked( element ) {
 		if ( !( element && element.is( 'image' ) ) ) {
 			return false;

+ 12 - 60
packages/ckeditor5-link/tests/linkimageui.js

@@ -8,20 +8,16 @@
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import LinkImageUI from '../src/linkimageui';
-import LinkUI from '../src/linkui';
-import LinkCommand from '../src/linkcommand';
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import EventInfo from '@ckeditor/ckeditor5-utils/src/eventinfo';
 import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 
 import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
 describe( 'LinkImageUI', () => {
 	let editor, viewDocument, editorElement;
-	let linkImageComponent, linkButton, actionsView;
-	let plugin;
+	let plugin, linkImageComponent, linkButton;
 
 	testUtils.createSinonSandbox();
 
@@ -39,12 +35,7 @@ describe( 'LinkImageUI', () => {
 				linkImageComponent = editor.ui.componentFactory.create( 'linkImage' );
 
 				plugin = editor.plugins.get( 'LinkImageUI' );
-
 				linkButton = plugin.linkButtonView;
-				actionsView = plugin.actionsView;
-
-				linkButton.render();
-				actionsView.render();
 			} );
 	} );
 
@@ -59,14 +50,6 @@ describe( 'LinkImageUI', () => {
 	} );
 
 	describe( 'init()', () => {
-		it( 'should create #_linkUIPlugin instance of LinkUI', () => {
-			expect( plugin._linkUIPlugin ).to.be.instanceOf( LinkUI );
-		} );
-
-		it( 'should create #_linkCommand instance of LinkCommand', () => {
-			expect( plugin._linkCommand ).to.be.instanceOf( LinkCommand );
-		} );
-
 		it( 'should listen to the click event on the images', () => {
 			const linkPlugin = editor.plugins.get( 'LinkUI' );
 			const listenToSpy = sinon.stub( linkPlugin, 'listenTo' );
@@ -84,29 +67,13 @@ describe( 'LinkImageUI', () => {
 			expect( linkImageComponent ).to.be.instanceOf( View );
 		} );
 
-		it( 'should have "ck-link-image-options" class', () => {
-			linkImageComponent.render();
-
-			expect( linkImageComponent.element.classList.contains( 'ck-link-image-options' ) ).to.be.true;
-		} );
-
-		it( 'should contain #linkButton and #actionsView', () => {
-			expect( linkImageComponent.template.children.length ).to.equal( 2 );
-
-			expect( linkImageComponent.template.children[ 0 ] ).to.be.instanceOf( ButtonView );
-			expect( linkImageComponent.template.children[ 0 ] ).equals( linkButton );
-
-			expect( linkImageComponent.template.children[ 1 ] ).to.be.instanceOf( View );
-			expect( linkImageComponent.template.children[ 1 ] ).equals( actionsView );
-		} );
-
 		describe( 'link button', () => {
 			it( 'should have a toggleable button', () => {
 				expect( linkButton.isToggleable ).to.be.true;
 			} );
 
 			it( 'should be bound to the link command', () => {
-				const command = plugin._linkCommand;
+				const command = editor.commands.get( 'link' );
 
 				command.isEnabled = true;
 				command.value = 'http://ckeditor.com';
@@ -122,22 +89,12 @@ describe( 'LinkImageUI', () => {
 			} );
 
 			it( 'should call #_showUI upon #execute', () => {
-				const spy = testUtils.sinon.stub( plugin._linkUIPlugin, '_showUI' );
+				const spy = testUtils.sinon.stub( editor.plugins.get( 'LinkUI' ), '_showUI' );
 
 				linkButton.fire( 'execute' );
 				sinon.assert.calledWithExactly( spy, true );
 			} );
 		} );
-
-		describe( 'actions view', () => {
-			it( 'should bound "ck-hidden" class to the "isVisible" state', () => {
-				actionsView.isVisible = true;
-				expect( actionsView.element.classList.contains( 'ck-hidden' ) ).to.be.false;
-
-				actionsView.isVisible = false;
-				expect( actionsView.element.classList.contains( 'ck-hidden' ) ).to.be.true;
-			} );
-		} );
 	} );
 
 	describe( 'click', () => {
@@ -187,29 +144,24 @@ describe( 'LinkImageUI', () => {
 	} );
 
 	describe( 'event handling', () => {
-		it( 'should show #actionsView after "submit"', () => {
+		it( 'should show plugin#actionsView after "execute" if image is already linked', () => {
 			const linkUIPlugin = editor.plugins.get( 'LinkUI' );
 
-			linkUIPlugin.formView.fire( 'submit' );
+			setModelData( editor.model, '[<image src="" linkHref="https://example.com"></image>]' );
+
+			linkButton.fire( 'execute' );
 
-			expect( linkButton.isVisible ).to.be.false;
-			expect( actionsView.isVisible ).to.be.true;
+			expect( linkUIPlugin._balloon.visibleView ).to.equals( linkUIPlugin.actionsView );
 		} );
 
-		it( 'should show #actionsView after "cancel"', () => {
+		it( 'should show plugin#formView after "execute" if image is not linked', () => {
 			const linkUIPlugin = editor.plugins.get( 'LinkUI' );
 
-			linkUIPlugin.formView.fire( 'cancel' );
-
-			expect( linkButton.isVisible ).to.be.false;
-			expect( actionsView.isVisible ).to.be.true;
-		} );
+			setModelData( editor.model, '[<image src=""></image>]' );
 
-		it( 'should show #linkButton after "unlink"', () => {
-			actionsView.fire( 'unlink' );
+			linkButton.fire( 'execute' );
 
-			expect( linkButton.isVisible ).to.be.true;
-			expect( actionsView.isVisible ).to.be.false;
+			expect( linkUIPlugin._balloon.visibleView ).to.equals( linkUIPlugin.formView );
 		} );
 	} );
 } );