ソースを参照

Created balloonPanel#url attribute. Basic focus handling when editing url.

Aleksander Nowodzinski 9 年 前
コミット
aa41888575

+ 15 - 2
packages/ckeditor5-link/src/link.js

@@ -69,9 +69,14 @@ export default class Link extends Feature {
 
 		// Create panel model.
 		const balloonPanelModel = new Model( {
-			maxWidth: 300
+			maxWidth: 300,
+			url: 'foo'
 		} );
 
+		// this.listenTo( balloonPanelModel, 'change:url', ( ...args ) => {
+		// 	console.log( 'URL has changed', args );
+		// } );
+
 		this.balloonPanel = new LinkBalloonPanel( balloonPanelModel, new LinkBalloonPanelView( editor.locale ) );
 
 		editor.ui.add( 'body', this.balloonPanel );
@@ -94,6 +99,14 @@ export default class Link extends Feature {
 			}
 		}, this );
 
-		editingView.on( 'blur', () => this.balloonPanel.view.hide() );
+		editingView.on( 'blur', ( evt, domEvtData ) => {
+			// TODO: Lame FocusManager.
+			// TODO input and label as separate components.
+			if ( domEvtData.domEvent.relatedTarget === this.balloonPanel.view.element.querySelector( 'input' ) ) {
+				domEvtData.domEvent.preventDefault();
+			} else {
+				this.balloonPanel.view.hide();
+			}
+		} );
 	}
 }

+ 7 - 1
packages/ckeditor5-link/src/ui/linkballoonpanel.js

@@ -28,7 +28,7 @@ export default class LinkBalloonPanel extends Controller {
 
 		const t = this.view.t;
 
-		view.model.bind( 'arrow', 'maxWidth', 'maxHeight' ).to( model );
+		view.model.bind( 'arrow', 'maxWidth', 'maxHeight', 'url' ).to( model );
 		view.model.set( 'top', 0 );
 		view.model.set( 'left', 0 );
 		view.model.set( 'isVisible', false );
@@ -40,6 +40,12 @@ export default class LinkBalloonPanel extends Controller {
 			withText: true
 		} );
 
+		buttonModel.on( 'execute', () => {
+			// TODO input and label as separate components.
+			model.url = view.element.querySelector( 'input' ).value;
+			this.view.hide();
+		} );
+
 		this.saveButton = new Button( buttonModel, new ButtonView( this.locale ) );
 		this.saveButton.view.element.classList.add( 'ck-button-action' );
 

+ 5 - 1
packages/ckeditor5-link/src/ui/linkballoonpanelview.js

@@ -71,7 +71,11 @@ export default class LinkBalloonPanelView extends View {
 							'ck-input-text'
 						],
 						id: urlFieldId,
-						type: 'text'
+						type: 'text',
+						value: bind.to( 'url' )
+					},
+					on: {
+						change: bind.to( 'urlChange' )
 					}
 				},
 				{