Преглед на файлове

Changed ContextualBalloon from component to plugin.

Oskar Wróbel преди 8 години
родител
ревизия
271e3e2796
променени са 2 файла, в които са добавени 71 реда и са изтрити 19 реда
  1. 29 9
      packages/ckeditor5-ui/src/contextualballoon.js
  2. 42 10
      packages/ckeditor5-ui/tests/contextualballoon.js

+ 29 - 9
packages/ckeditor5-ui/src/contextualballoon.js

@@ -7,23 +7,27 @@
  * @module ui/contextualballoon
  */
 
-import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import BalloonPanelView from './panel/balloon/balloonpanelview';
+import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 /**
  * Common contextual balloon of the Editor.
  *
- * This class reuses the same {module:ui/view~View} for each contextual balloon panel in the editor UI, makes
- * possible to add multiple views to the same balloon (stored in the stack, last one in the stack is visible)
- * and prevents of displaying more than one contextual balloon panel at the same time.
+ * This plugin is for reusing the same {module:ui/panel/balloon/balloonpanelview~BalloonPanelView} instance
+ * for each contextual balloon panel in the editor. Also it makes possible to add multiple views to the same balloon.
+ * Views are stored in the stack, last one in the stack is currently visible. When visible view will be removed from
+ * the stack then previous view become visible, if there is no more view in the stack balloon will hide.
+ *
+ * Using this plugin prevents of displaying more than one contextual balloon panel at the same time.
+ *
+ * @extends module:core/plugin~Plugin
  */
-export default class ContextualBalloon {
+export default class ContextualBalloon extends Plugin {
 	/**
-	 * Creates ContextualBalloon instance.
-	 *
-	 * @constructor
+	 * @inheritDoc
 	 */
-	constructor() {
+	init() {
 		/**
 		 * Balloon panel view.
 		 *
@@ -40,6 +44,13 @@ export default class ContextualBalloon {
 		 * @member {Map} #_stack
 		 */
 		this._stack = new Map();
+
+		// Add balloon panel view to editor `body` collection.
+		this.editor.ui.view.body.add( this.view );
+	}
+
+	static get pluginName() {
+		return 'contextualballoon';
 	}
 
 	/**
@@ -161,6 +172,15 @@ export default class ContextualBalloon {
 	_getBalloonPosition() {
 		return Array.from( this._stack.values() )[ 0 ].position;
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		this.editor.ui.view.body.remove( this.view );
+		this.view.destroy();
+		super.destroy();
+	}
 }
 
 /**

+ 42 - 10
packages/ckeditor5-ui/tests/contextualballoon.js

@@ -3,33 +3,57 @@
  * For licensing, see LICENSE.md.
  */
 
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import ContextualBalloon from '../src/contextualballoon';
 import BalloonPanelView from '../src/panel/balloon/balloonpanelview';
 import View from '../src/view';
 import Template from '../src/template';
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+/* global document */
 
 describe( 'ContextualBalloon', () => {
-	let balloon, viewA, viewB;
+	let balloon, viewA, viewB, editor;
 
 	beforeEach( () => {
-		balloon = new ContextualBalloon();
+		return ClassicTestEditor.create( document.createElement( 'div' ), {
+			plugins: [ ContextualBalloon ]
+		} )
+		.then( newEditor => {
+			editor = newEditor;
+			balloon = editor.plugins.get( ContextualBalloon );
+
+			viewA = new ViewA();
+			viewB = new ViewB();
+
+			// We don't need to test attachTo method of BalloonPanel it's enough to check if was called with proper data.
+			sinon.stub( balloon.view, 'attachTo', () => {} );
+		} );
+	} );
 
-		viewA = new ViewA();
-		viewB = new ViewB();
+	afterEach( () => {
+		editor.destroy();
+	} );
 
-		// We don't need to test attachTo method of BalloonPanel it's enough to check if was called with proper data.
-		sinon.stub( balloon.view, 'attachTo', () => {} );
+	it( 'should be a plugin instance', () => {
+		expect( balloon ).to.instanceof( Plugin );
 	} );
 
-	afterEach( () => {
-		balloon.view.attachTo.restore();
+	describe( 'pluginName', () => {
+		it( 'should return plugin by name', () => {
+			expect( editor.plugins.get( 'contextualballoon' ) ).to.instanceof( ContextualBalloon );
+		} );
 	} );
 
-	describe( 'constructor()', () => {
-		it( 'should create a class instance with properties', () => {
+	describe( 'init()', () => {
+		it( 'should create a plugin instance with properties', () => {
 			expect( balloon.view ).to.instanceof( BalloonPanelView );
 		} );
+
+		it( 'should add balloon panel view to editor `body` collection', () => {
+			expect( editor.ui.view.body.getIndex( balloon.view ) ).to.above( -1 );
+		} );
 	} );
 
 	describe( 'isViewInStack()', () => {
@@ -289,6 +313,14 @@ describe( 'ContextualBalloon', () => {
 			} ).to.throw( CKEditorError, /^contextualballoon-remove-view-not-exist/ );
 		} );
 	} );
+
+	describe( 'destroy()', () => {
+		it( 'should balloon panel remove view from editor body collection', () => {
+			balloon.destroy();
+
+			expect( editor.ui.view.body.getIndex( balloon.view ) ).to.equal( -1 );
+		} );
+	} );
 } );
 
 class ViewA extends View {