8
0
Quellcode durchsuchen

Aligned Dropdown and DropdownPanel components to the View#render API.

Aleksander Nowodzinski vor 8 Jahren
Ursprung
Commit
65a4d91bab

+ 1 - 2
packages/ckeditor5-ui/src/dropdown/dropdownpanelview.js

@@ -8,7 +8,6 @@
  */
 
 import View from '../view';
-import Template from '../template';
 
 /**
  * The dropdown panel view class.
@@ -46,7 +45,7 @@ export default class DropdownPanelView extends View {
 		 */
 		this.children = this.createCollection();
 
-		this.template = new Template( {
+		this.setTemplate( {
 			tag: 'div',
 
 			attributes: {

+ 11 - 12
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -8,7 +8,6 @@
  */
 
 import View from '../view';
-import Template from '../template';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
@@ -46,7 +45,7 @@ export default class DropdownView extends View {
 		// Extend button's template before it's registered as a child of the dropdown because
 		// by doing so, its #element is rendered and any post–render template extension will
 		// not be reflected in DOM.
-		Template.extend( buttonView.template, {
+		buttonView.extendTemplate( {
 			attributes: {
 				class: [
 					'ck-dropdown__button'
@@ -106,7 +105,7 @@ export default class DropdownView extends View {
 		 */
 		this.keystrokes = new KeystrokeHandler();
 
-		this.template = new Template( {
+		this.setTemplate( {
 			tag: 'div',
 
 			attributes: {
@@ -120,20 +119,22 @@ export default class DropdownView extends View {
 				panelView
 			]
 		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
 
 		// Toggle the the dropdown when it's button has been clicked.
-		this.listenTo( buttonView, 'execute', () => {
+		this.listenTo( this.buttonView, 'execute', () => {
 			this.isOpen = !this.isOpen;
 		} );
 
 		// Toggle the visibility of the panel when the dropdown becomes open.
-		panelView.bind( 'isVisible' ).to( this, 'isOpen' );
-	}
+		this.panelView.bind( 'isVisible' ).to( this, 'isOpen' );
 
-	/**
-	 * @inheritDoc
-	 */
-	init() {
 		// Listen for keystrokes coming from within #element.
 		this.keystrokes.listenTo( this.element );
 
@@ -167,8 +168,6 @@ export default class DropdownView extends View {
 		// Close the dropdown using the arrow left/escape key.
 		this.keystrokes.set( 'arrowleft', closeDropdown );
 		this.keystrokes.set( 'esc', closeDropdown );
-
-		super.init();
 	}
 
 	/**

+ 2 - 1
packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js

@@ -14,7 +14,8 @@ describe( 'DropdownPanelView', () => {
 	beforeEach( () => {
 		locale = { t() {} };
 
-		return ( view = new DropdownPanelView( locale ) ).init();
+		view = new DropdownPanelView( locale );
+		view.render();
 	} );
 
 	describe( 'constructor()', () => {

+ 5 - 4
packages/ckeditor5-ui/tests/dropdown/dropdownview.js

@@ -19,7 +19,8 @@ describe( 'DropdownView', () => {
 		buttonView = new ButtonView( locale );
 		panelView = new DropdownPanelView( locale );
 
-		return ( view = new DropdownView( locale, buttonView, panelView ) ).init();
+		view = new DropdownView( locale, buttonView, panelView );
+		view.render();
 	} );
 
 	describe( 'constructor()', () => {
@@ -92,7 +93,7 @@ describe( 'DropdownView', () => {
 		} );
 	} );
 
-	describe( 'init()', () => {
+	describe( 'render()', () => {
 		it( 'starts listening for #keystrokes coming from #element', () => {
 			view = new DropdownView( locale,
 				new ButtonView( locale ),
@@ -100,7 +101,7 @@ describe( 'DropdownView', () => {
 
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
-			view.init();
+			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
 		} );
@@ -112,7 +113,7 @@ describe( 'DropdownView', () => {
 
 			const spy = sinon.spy( view.focusTracker, 'add' );
 
-			view.init();
+			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
 		} );