瀏覽代碼

Improved data flow between the feature and the UI.

Aleksander Nowodzinski 9 年之前
父節點
當前提交
b3b73c600f

+ 16 - 5
packages/ckeditor5-link/src/link.js

@@ -64,6 +64,7 @@ export default class Link extends Feature {
 
 	_createBalloonPanel() {
 		const editor = this.editor;
+		const t = editor.t;
 		const editingView = editor.editing.view;
 		const editableViewElement = editor.ui.editable.view.element;
 
@@ -73,13 +74,21 @@ export default class Link extends Feature {
 			url: 'http://example.com'
 		} );
 
-		// this.listenTo( balloonPanelModel, 'change:url', ( ...args ) => {
-		// 	console.log( 'URL has changed', args );
-		// } );
+		balloonPanelModel.on( 'execute', () => {
+			const urlValue = this.balloonPanel.urlInput.value;
 
-		this.balloonPanel = new LinkBalloonPanel( balloonPanelModel, new LinkBalloonPanelView( editor.locale ) );
+			// TODO: validate balloonPanelModel#url with some RegExp imported from v4.
+			if ( urlValue ) {
+				/* global console */
+				console.log( `URL "${ urlValue }" to be set.` );
+				this.balloonPanel.view.hide();
+			} else {
+				window.alert( t( `"${ urlValue }" URL address is incorrect.` ) );
+				this.balloonPanel.urlInput.view.focus();
+			}
+		} );
 
-		editor.ui.add( 'body', this.balloonPanel );
+		this.balloonPanel = new LinkBalloonPanel( balloonPanelModel, new LinkBalloonPanelView( editor.locale ) );
 
 		editingView.on( 'render', () => {
 			const firstParent = editingView.selection.getFirstPosition().parent;
@@ -109,5 +118,7 @@ export default class Link extends Feature {
 				this.balloonPanel.view.hide();
 			}
 		} );
+
+		editor.ui.add( 'body', this.balloonPanel );
 	}
 }

+ 4 - 0
packages/ckeditor5-link/src/ui/inputtext.js

@@ -25,4 +25,8 @@ export default class InputText extends Controller {
 		view.model.bind( 'value' ).to( model );
 		view.model.set( 'uid', `ck-input-${ uid() }` );
 	}
+
+	get value() {
+		return this.view.element.value;
+	}
 }

+ 4 - 0
packages/ckeditor5-link/src/ui/labeledinput.js

@@ -48,6 +48,10 @@ export default class LabeledInput extends Controller {
 		contentCollection.add( this.label, 0 );
 	}
 
+	get value() {
+		return this.input.value;
+	}
+
 	_createInput() {
 		const model = new Model();
 

+ 4 - 0
packages/ckeditor5-link/src/ui/labeledinputview.js

@@ -32,4 +32,8 @@ export default class LabeledInputView extends View {
 
 		this.register( 'content', el => el );
 	}
+
+	focus() {
+		this.regions.get( 'content' ).views.get( 1 ).element.focus();
+	}
 }

+ 9 - 13
packages/ckeditor5-link/src/ui/linkballoonpanel.js

@@ -42,16 +42,14 @@ export default class LinkBalloonPanel extends BalloonPanel {
 
 		model.bind( 'value' ).to( this.model, 'url' );
 
-		const labeledInput = new LabeledInput( model, new LabeledInputView( this.locale ) );
-
 		/**
 		 * TODO
 		 *
 		 * @member {} todo
 		 */
-		this.urlInput = labeledInput.input;
+		this.urlInput = new LabeledInput( model, new LabeledInputView( this.locale ) );
 
-		return labeledInput;
+		return this.urlInput;
 	}
 
 	_createButtons() {
@@ -81,19 +79,17 @@ export default class LinkBalloonPanel extends BalloonPanel {
 
 	_createSaveButton() {
 		const t = this.view.t;
-		const model = new Model( {
+		const saveModel = new Model( {
 			isEnabled: true,
 			isOn: false,
 			label: t( 'Save' ),
 			withText: true
 		} );
 
-		model.on( 'execute', () => {
-			this.model.url = this.urlInput.value;
-			this.view.hide();
-		} );
+		saveModel.delegate( 'execute' ).to( this.model );
+
+		const button = new Button( saveModel, new ButtonView( this.locale ) );
 
-		const button = new Button( model, new ButtonView( this.locale ) );
 		button.view.element.classList.add( 'ck-button-action' );
 
 		return button;
@@ -101,15 +97,15 @@ export default class LinkBalloonPanel extends BalloonPanel {
 
 	_createCancelButton() {
 		const t = this.view.t;
-		const model = new Model( {
+		const cancelModel = new Model( {
 			isEnabled: true,
 			isOn: false,
 			label: t( 'Cancel' ),
 			withText: true
 		} );
 
-		model.on( 'execute', () => this.view.hide() );
+		cancelModel.on( 'execute', () => this.view.hide() );
 
-		return new Button( model, new ButtonView( this.locale ) );
+		return new Button( cancelModel, new ButtonView( this.locale ) );
 	}
 }