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

Aligned link package to the View#render API.

Internal: Aligned the UI to the latest API of the framework (see ckeditor/ckeditor5-ui#262).
Aleksander Nowodzinski преди 8 години
родител
ревизия
f067678eaa

+ 11 - 11
packages/ckeditor5-link/src/link.js

@@ -225,17 +225,6 @@ export default class Link extends Plugin {
 		const showIsCollapsed = showViewDocument.selection.isCollapsed;
 		const showSelectedLink = this._getSelectedLinkElement();
 
-		// https://github.com/ckeditor/ckeditor5-link/issues/53
-		this.formView.unlinkButtonView.isVisible = unlinkCommand.isEnabled;
-
-		// Make sure that each time the panel shows up, the URL field remains in sync with the value of
-		// the command. If the user typed in the input, then canceled the balloon (`urlInputView#value` stays
-		// unaltered) and re-opened it without changing the value of the link command (e.g. because they
-		// clicked the same link), they would see the old value instead of the actual value of the command.
-		// https://github.com/ckeditor/ckeditor5-link/issues/78
-		// https://github.com/ckeditor/ckeditor5-link/issues/123
-		this.formView.urlInputView.inputView.element.value = linkCommand.value || '';
-
 		this.listenTo( showViewDocument, 'render', () => {
 			const renderSelectedLink = this._getSelectedLinkElement();
 			const renderIsCollapsed = showViewDocument.selection.isCollapsed;
@@ -275,6 +264,17 @@ export default class Link extends Plugin {
 				this.formView.urlInputView.select();
 			}
 		}
+
+		// https://github.com/ckeditor/ckeditor5-link/issues/53
+		this.formView.unlinkButtonView.isVisible = unlinkCommand.isEnabled;
+
+		// Make sure that each time the panel shows up, the URL field remains in sync with the value of
+		// the command. If the user typed in the input, then canceled the balloon (`urlInputView#value` stays
+		// unaltered) and re-opened it without changing the value of the link command (e.g. because they
+		// clicked the same link), they would see the old value instead of the actual value of the command.
+		// https://github.com/ckeditor/ckeditor5-link/issues/78
+		// https://github.com/ckeditor/ckeditor5-link/issues/123
+		this.formView.urlInputView.inputView.element.value = linkCommand.value || '';
 	}
 
 	/**

+ 9 - 10
packages/ckeditor5-link/src/ui/linkformview.js

@@ -8,7 +8,6 @@
  */
 
 import View from '@ckeditor/ckeditor5-ui/src/view';
-import Template from '@ckeditor/ckeditor5-ui/src/template';
 import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
@@ -110,7 +109,7 @@ export default class LinkFormView extends View {
 			}
 		} );
 
-		Template.extend( this.saveButtonView.template, {
+		this.saveButtonView.extendTemplate( {
 			attributes: {
 				class: [
 					'ck-button-action'
@@ -118,7 +117,7 @@ export default class LinkFormView extends View {
 			}
 		} );
 
-		this.template = new Template( {
+		this.setTemplate( {
 			tag: 'form',
 
 			attributes: {
@@ -149,6 +148,13 @@ export default class LinkFormView extends View {
 				}
 			]
 		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
 
 		submitHandler( {
 			view: this
@@ -168,16 +174,9 @@ export default class LinkFormView extends View {
 			// Register the view in the focus tracker.
 			this.focusTracker.add( v.element );
 		} );
-	}
 
-	/**
-	 * @inheritDoc
-	 */
-	init() {
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
-
-		return super.init();
 	}
 
 	/**

+ 3 - 3
packages/ckeditor5-link/tests/link.js

@@ -46,7 +46,7 @@ describe( 'Link', () => {
 				testUtils.sinon.stub( balloon.view, 'attachTo' ).returns( {} );
 				testUtils.sinon.stub( balloon.view, 'pin' ).returns( {} );
 
-				formView.init();
+				formView.render();
 			} );
 	} );
 
@@ -146,7 +146,7 @@ describe( 'Link', () => {
 			const spy = testUtils.sinon.spy( formView.urlInputView, 'select' );
 			const viewMock = {
 				ready: true,
-				init: () => {},
+				render: () => {},
 				destroy: () => {}
 			};
 
@@ -546,7 +546,7 @@ describe( 'Link', () => {
 
 			const viewMock = {
 				ready: true,
-				init: () => {},
+				render: () => {},
 				destroy: () => {}
 			};
 

+ 30 - 30
packages/ckeditor5-link/tests/ui/linkformview.js

@@ -21,8 +21,7 @@ describe( 'LinkFormView', () => {
 
 	beforeEach( () => {
 		view = new LinkFormView( { t: val => val } );
-
-		return view.init();
+		view.render();
 	} );
 
 	describe( 'constructor()', () => {
@@ -59,26 +58,6 @@ describe( 'LinkFormView', () => {
 			expect( view._focusables ).to.be.instanceOf( ViewCollection );
 		} );
 
-		it( 'should register child views in #_focusables', () => {
-			expect( view._focusables.map( f => f ) ).to.have.members( [
-				view.urlInputView,
-				view.saveButtonView,
-				view.cancelButtonView,
-				view.unlinkButtonView
-			] );
-		} );
-
-		it( 'should register child views\' #element in #focusTracker', () => {
-			const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
-
-			view = new LinkFormView( { t: () => {} } );
-
-			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.urlInputView.element );
-			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.saveButtonView.element );
-			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.cancelButtonView.element );
-			sinon.assert.calledWithExactly( spy.getCall( 3 ), view.unlinkButtonView.element );
-		} );
-
 		it( 'should fire `cancel` event on cancelButtonView#execute', () => {
 			const spy = sinon.spy();
 
@@ -107,30 +86,51 @@ describe( 'LinkFormView', () => {
 
 		describe( 'template', () => {
 			it( 'has url input view', () => {
-				expect( view.template.children.get( 0 ) ).to.equal( view.urlInputView );
+				expect( view.template.children[ 0 ] ).to.equal( view.urlInputView );
 			} );
 
 			it( 'has form actions container', () => {
-				expect( view.template.children.get( 1 ).attributes.class ).to.have.members( [ 'ck-link-form__actions' ] );
+				expect( view.template.children[ 1 ].attributes.class ).to.have.members( [ 'ck-link-form__actions' ] );
 			} );
 
 			it( 'has form action views', () => {
-				const actions = view.template.children.get( 1 ).children;
+				const actions = view.template.children[ 1 ].children;
 
-				expect( actions.get( 0 ) ).to.equal( view.saveButtonView );
-				expect( actions.get( 1 ) ).to.equal( view.cancelButtonView );
-				expect( actions.get( 2 ) ).to.equal( view.unlinkButtonView );
+				expect( actions[ 0 ] ).to.equal( view.saveButtonView );
+				expect( actions[ 1 ] ).to.equal( view.cancelButtonView );
+				expect( actions[ 2 ] ).to.equal( view.unlinkButtonView );
 			} );
 		} );
 	} );
 
-	describe( 'init()', () => {
+	describe( 'render()', () => {
+		it( 'should register child views in #_focusables', () => {
+			expect( view._focusables.map( f => f ) ).to.have.members( [
+				view.urlInputView,
+				view.saveButtonView,
+				view.cancelButtonView,
+				view.unlinkButtonView
+			] );
+		} );
+
+		it( 'should register child views\' #element in #focusTracker', () => {
+			const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
+
+			view = new LinkFormView( { t: () => {} } );
+			view.render();
+
+			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.urlInputView.element );
+			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.saveButtonView.element );
+			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.cancelButtonView.element );
+			sinon.assert.calledWithExactly( spy.getCall( 3 ), view.unlinkButtonView.element );
+		} );
+
 		it( 'starts listening for #keystrokes coming from #element', () => {
 			view = new LinkFormView( { t: () => {} } );
 
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
-			view.init();
+			view.render();
 			sinon.assert.calledOnce( spy );
 			sinon.assert.calledWithExactly( spy, view.element );
 		} );