Browse Source

Very base ui and command integration.

Oskar Wrobel 9 years ago
parent
commit
07f3fcbaa0
2 changed files with 33 additions and 37 deletions
  1. 31 35
      packages/ckeditor5-link/src/link.js
  2. 2 2
      packages/ckeditor5-link/src/linkcommand.js

+ 31 - 35
packages/ckeditor5-link/src/link.js

@@ -34,11 +34,6 @@ export default class Link extends Feature {
 	 * @inheritDoc
 	 */
 	init() {
-		this._createButtons();
-		this._createBalloonPanel();
-	}
-
-	_createButtons() {
 		const editor = this.editor;
 		const t = editor.t;
 		const command = editor.commands.get( 'link' );
@@ -51,15 +46,19 @@ export default class Link extends Feature {
 			icon: 'link'
 		} );
 
-		// Bind button model to command.
-		buttonModel.bind( 'isOn', 'isEnabled' ).to( command, 'isValue', 'isEnabled' );
-
-		// Execute command.
-		const hrefValue = 'http://www.cksource.com'; // Temporary href value.
-		this.listenTo( buttonModel, 'execute', () => editor.execute( 'link', hrefValue ) );
+		// Show Balloon Panel on button click.
+		this.listenTo( buttonModel, 'execute', () => this._createBalloonPanel( command.value ) );
 
 		// Add link button to feature components.
 		editor.ui.featureComponents.add( 'link', ButtonController, ButtonView, buttonModel );
+
+		// Show Balloon Panel on click directly in some link element.
+		// @TODO: Get click event from editor instead of DOM.
+		this.editor.ui.editable.view.element.addEventListener( 'click', () => {
+			if ( editor.document.selection.isCollapsed && command.value !== undefined ) {
+				this._createBalloonPanel( command.value );
+			}
+		} );
 	}
 
 	/**
@@ -96,7 +95,7 @@ export default class Link extends Feature {
 	 *	                            |                   +----+ |
 	 *	                            +--------------------------+
 	 */
-	_createBalloonPanel() {
+	_createBalloonPanel( url ) {
 		const editor = this.editor;
 		const t = editor.t;
 		const editingView = editor.editing.view;
@@ -105,7 +104,7 @@ export default class Link extends Feature {
 		// Create the model of the panel.
 		const panelModel = new Model( {
 			maxWidth: 300,
-			url: 'http://example.com'
+			url: url
 		} );
 
 		// Observe #execute event from within the model of the panel, which means that
@@ -115,8 +114,7 @@ export default class Link extends Feature {
 
 			// TODO: validate panelModel#url with some RegExp imported from v4.
 			if ( urlValue ) {
-				/* global console */
-				console.log( `URL "${ urlValue }" to be set.` );
+				this.editor.execute( 'link', urlValue );
 				this.balloonPanel.view.hide();
 			} else {
 				window.alert( t( `"${ urlValue }" URL address is incorrect.` ) );
@@ -131,26 +129,6 @@ export default class Link extends Feature {
 		 */
 		this.balloonPanel = new LinkBalloonPanel( panelModel, new LinkBalloonPanelView( editor.locale ) );
 
-		editingView.on( 'render', () => {
-			const firstParent = editingView.selection.getFirstPosition().parent;
-			const firstParentAncestors = firstParent.getAncestors();
-			const anchor = firstParentAncestors.find( ( ancestor ) => ancestor.name === 'a' );
-
-			if ( anchor ) {
-				this.balloonPanel.view.attachTo(
-					editingView.domConverter.getCorrespondingDomElement( anchor ),
-					editableViewElement
-				);
-			} else {
-				this.balloonPanel.view.attachTo(
-					editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ),
-					editableViewElement
-				);
-			}
-
-			this.balloonPanel.urlInput.view.focus();
-		}, this );
-
 		// TODO: It's a lame FocusManager.
 		editingView.on( 'blur', ( evt, domEvtData ) => {
 			if ( domEvtData.domEvent.relatedTarget === this.balloonPanel.urlInput ) {
@@ -161,5 +139,23 @@ export default class Link extends Feature {
 		} );
 
 		editor.ui.add( 'body', this.balloonPanel );
+		// this.balloonPanel.urlInput.view.focus();
+
+		// Adjust Balloon position depends on selection place.
+		const firstParent = editingView.selection.getFirstPosition().parent;
+		const firstParentAncestors = firstParent.getAncestors();
+		const anchor = firstParentAncestors.find( ( ancestor ) => ancestor.name === 'a' );
+
+		if ( anchor ) {
+			this.balloonPanel.view.attachTo(
+				editingView.domConverter.getCorrespondingDomElement( anchor ),
+				editableViewElement
+			);
+		} else {
+			this.balloonPanel.view.attachTo(
+				editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ),
+				editableViewElement
+			);
+		}
 	}
 }

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

@@ -30,10 +30,10 @@ export default class LinkCommand extends Command {
 		 * @observable
 		 * @member {Boolean} core.command.ToggleAttributeCommand#value
 		 */
-		this.set( 'hasValue', false );
+		this.set( 'value', false );
 
 		this.listenTo( this.editor.document.selection, 'change:attribute', () => {
-			this.hasValue = this.editor.document.selection.hasAttribute( 'link' );
+			this.value = this.editor.document.selection.getAttribute( 'link' );
 		} );
 	}