浏览代码

Aligned code to the latest ContextualBalloon API.

Oskar Wróbel 8 年之前
父节点
当前提交
5dfa6c39cc
共有 2 个文件被更改,包括 44 次插入31 次删除
  1. 25 19
      packages/ckeditor5-link/src/link.js
  2. 19 12
      packages/ckeditor5-link/tests/link.js

+ 25 - 19
packages/ckeditor5-link/src/link.js

@@ -11,6 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
 import LinkEngine from './linkengine';
 import LinkElement from './linkelement';
+import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/contextualballoon';
 
 import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
 
@@ -23,10 +24,10 @@ import unlinkIcon from '../theme/icons/unlink.svg';
 import '../theme/theme.scss';
 
 /**
- * The link feature. It introduces the Link and Unlink buttons and the <kbd>Ctrl+K</kbd> keystroke.
- * Link UI is displayed using {@link module:core/editor/editorui~EditorUI#balloon}.
+ * The link plugin. It introduces the Link and Unlink buttons and the <kbd>Ctrl+K</kbd> keystroke.
  *
- * It uses the {@link module:link/linkengine~LinkEngine link engine feature}.
+ * It uses the {@link module:link/linkengine~LinkEngine link engine plugin} and
+ * {@link module:ui/contextualballoon~ContextualBalloon contextual balloon plugin}.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -35,7 +36,7 @@ export default class Link extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ LinkEngine ];
+		return [ LinkEngine, ContextualBalloon ];
 	}
 
 	/**
@@ -58,6 +59,14 @@ export default class Link extends Plugin {
 		 */
 		this.formView = this._createForm();
 
+		/**
+		 * Contextual balloon plugin instance.
+		 *
+		 * @private
+		 * @member {module:ui/contextualballoon~ContextualBalloon}
+		 */
+		this._balloon = this.editor.plugins.get( ContextualBalloon );
+
 		// Create toolbar buttons.
 		this._createToolbarLinkButton();
 		this._createToolbarUnlinkButton();
@@ -67,25 +76,23 @@ export default class Link extends Plugin {
 	}
 
 	/**
-	 * Returns `true` when link panel is added to the {@link module:core/editor/editorui~EditorUI#balloon} stack.
+	 * Returns `true` when link view is added to the {@link module:ui/contextualballoon~ContextualBalloon}.
 	 *
 	 * @private
 	 * @returns {Boolean}
 	 */
 	get _isInStack() {
-		return this.editor.ui.balloon.isPanelInStack( this.formView );
+		return this._balloon.isViewInStack( this.formView );
 	}
 
 	/**
-	 * Returns `true` when link panel is currently visible in {@link module:core/editor/editorui~EditorUI#balloon}.
+	 * Returns `true` when link view is currently visible in {@link module:ui/contextualballoon~ContextualBalloon}.
 	 *
 	 * @private
 	 * @returns {Boolean}
 	 */
 	get _isVisible() {
-		const balloon = this.editor.ui.balloon;
-
-		return balloon.visible && balloon.visible.view === this.formView;
+		return this._balloon.visible && this._balloon.visible.view === this.formView;
 	}
 
 	/**
@@ -112,7 +119,7 @@ export default class Link extends Plugin {
 			this._hidePanel( true );
 		} );
 
-		// Hide balloon panel after clicking on formView `Cancel` button.
+		// Hide the panel after clicking on formView `Cancel` button.
 		this.listenTo( formView, 'cancel', () => this._hidePanel( true ) );
 
 		// Close the panel on esc key press when the form has focus.
@@ -135,7 +142,7 @@ export default class Link extends Plugin {
 		const linkCommand = editor.commands.get( 'link' );
 		const t = editor.t;
 
-		// Handle `Ctrl+K` keystroke and show panel.
+		// Handle `Ctrl+K` keystroke and show the panel.
 		editor.keystrokes.set( 'CTRL+K', () => this._showPanel( true ) );
 
 		editor.ui.componentFactory.add( 'link', ( locale ) => {
@@ -193,7 +200,6 @@ export default class Link extends Plugin {
 	 */
 	_attachActions() {
 		const viewDocument = this.editor.editing.view;
-		const balloon = this.editor.ui.balloon;
 
 		// Handle click on view document and show panel when selection is placed inside the link element.
 		// Keep panel open until selection will be inside the same link element.
@@ -217,7 +223,7 @@ export default class Link extends Plugin {
 					if ( !viewSelection.isCollapsed || parentLink !== currentParentLink ) {
 						this._hidePanel();
 					} else {
-						balloon.updatePosition();
+						this._balloon.updatePosition();
 					}
 				} );
 			}
@@ -243,13 +249,13 @@ export default class Link extends Plugin {
 		clickOutsideHandler( {
 			emitter: this.formView,
 			activator: () => this._isInStack,
-			contextElement: balloon.view.element,
+			contextElement: this._balloon.view.element,
 			callback: () => this._hidePanel()
 		} );
 	}
 
 	/**
-	 * Adds panel to {@link: core/editor/editorui~EditorUI#balloon}.
+	 * Adds link view to {_@link module:ui/contextualballoon~ContextualBalloon}.
 	 *
 	 * @private
 	 * @param {Boolean} [focusInput=false] When `true` then link form will be focused on panel show.
@@ -259,7 +265,7 @@ export default class Link extends Plugin {
 			return;
 		}
 
-		this.editor.ui.balloon.add( {
+		this._balloon.add( {
 			view: this.formView,
 			position: this._getBalloonPositionData()
 		} );
@@ -270,7 +276,7 @@ export default class Link extends Plugin {
 	}
 
 	/**
-	 * Removes panel from {@link: core/editor/editorui~EditorUI#balloon}.
+	 * Removes link view from {_@link module:ui/contextualballoon~ContextualBalloon}.
 	 *
 	 * @private
 	 * @param {Boolean} [focusEditable=false] When `true` then editable focus will be restored on panel hide.
@@ -280,7 +286,7 @@ export default class Link extends Plugin {
 			return;
 		}
 
-		this.editor.ui.balloon.remove( this.formView );
+		this._balloon.remove( this.formView );
 		this.stopListening( this.editor.editing.view, 'render' );
 
 		if ( focusEditable ) {

+ 19 - 12
packages/ckeditor5-link/tests/link.js

@@ -12,6 +12,7 @@ import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-util
 
 import Link from '../src/link';
 import LinkEngine from '../src/linkengine';
+import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/contextualballoon';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
 import Range from '@ckeditor/ckeditor5-engine/src/view/range';
@@ -37,7 +38,7 @@ describe( 'Link', () => {
 			linkFeature = editor.plugins.get( Link );
 			linkButton = editor.ui.componentFactory.create( 'link' );
 			unlinkButton = editor.ui.componentFactory.create( 'unlink' );
-			balloon = editor.ui.balloon;
+			balloon = editor.plugins.get( ContextualBalloon );
 			formView = linkFeature.formView;
 
 			// There is no point to execute `BalloonPanelView#attachTo` so override it.
@@ -57,6 +58,10 @@ describe( 'Link', () => {
 		expect( editor.plugins.get( LinkEngine ) ).to.instanceOf( LinkEngine );
 	} );
 
+	it( 'should load ContextualBalloon', () => {
+		expect( editor.plugins.get( ContextualBalloon ) ).to.instanceOf( ContextualBalloon );
+	} );
+
 	it( 'should register click observer', () => {
 		expect( editor.editing.view.getObserver( ClickObserver ) ).to.instanceOf( ClickObserver );
 	} );
@@ -76,13 +81,15 @@ describe( 'Link', () => {
 			expect( linkButton.isEnabled ).to.be.false;
 		} );
 
-		it( 'should add panel to the `ui#balloon` on execute event', () => {
+		it( 'should add link form to the ContextualBalloon on execute event', () => {
 			linkButton.fire( 'execute' );
 
 			expect( balloon.visible.view ).to.equal( linkFeature.formView );
 		} );
 
-		it( 'should add panel to `ui#balloon` attached to the link element, when collapsed selection is inside link element', () => {
+		it( 'should add link form to the ContextualBalloon and attach balloon to the link element ' +
+			'when collapsed selection is inside link element',
+		() => {
 			editor.document.schema.allow( { name: '$text', inside: '$root' } );
 			setModelData( editor.document, '<$text linkHref="url">some[] url</$text>' );
 			editor.editing.view.isFocused = true;
@@ -97,7 +104,7 @@ describe( 'Link', () => {
 			} ) );
 		} );
 
-		it( 'should add panel to `ui#balloon` attached to the selection, when there is non-collapsed selection', () => {
+		it( 'should add link form to the ContextualBalloon and attach balloon to the selection, when selection is non-collapsed', () => {
 			editor.document.schema.allow( { name: '$text', inside: '$root' } );
 			setModelData( editor.document, 'so[me ur]l' );
 			editor.editing.view.isFocused = true;
@@ -112,7 +119,7 @@ describe( 'Link', () => {
 			} ) );
 		} );
 
-		it( 'should select panel input value when panel is opened', () => {
+		it( 'should select link input value when link balloon is opened', () => {
 			const selectUrlInputSpy = testUtils.sinon.spy( linkFeature.formView.urlInputView, 'select' );
 
 			editor.editing.view.isFocused = true;
@@ -148,27 +155,27 @@ describe( 'Link', () => {
 		} );
 	} );
 
-	describe( 'balloon panel', () => {
+	describe( 'ContextualBalloon', () => {
 		let focusEditableSpy;
 
 		beforeEach( () => {
 			focusEditableSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 		} );
 
-		it( 'should not be added to `balloon#ui` at default', () => {
-			expect( editor.ui.balloon.visible ).to.null;
+		it( 'should not be added to ContextualBalloon at default', () => {
+			expect( balloon.visible ).to.null;
 		} );
 
-		it( 'should be added to `balloon#ui` and form should be selected on `CTRL+K` keystroke', () => {
+		it( 'should be added to ContextualBalloon and form should be selected on `CTRL+K` keystroke', () => {
 			const selectUrlInputSpy = testUtils.sinon.spy( formView.urlInputView, 'select' );
 
 			editor.keystrokes.press( { keyCode: keyCodes.k, ctrlKey: true } );
 
-			expect( editor.ui.balloon.visible.view ).to.equal( formView );
+			expect( balloon.visible.view ).to.equal( formView );
 			expect( selectUrlInputSpy.calledOnce ).to.true;
 		} );
 
-		it( 'should do not add panel to `balloon#ui` more than once', () => {
+		it( 'should not add panel to ContextualBalloon more than once', () => {
 			// Add panel to balloon by pressing toolbar button.
 			linkButton.fire( 'execute' );
 
@@ -248,7 +255,7 @@ describe( 'Link', () => {
 					editor.keystrokes.press( keyEvtData );
 
 					expect( balloon.visible.view ).to.equal( viewMock );
-					expect( balloon.isPanelInStack( formView ) ).to.true;
+					expect( balloon.isViewInStack( formView ) ).to.true;
 					sinon.assert.notCalled( focusEditableSpy );
 				} );