8
0
Просмотр исходного кода

Refactored the way of creating panel.

Oskar Wrobel 9 лет назад
Родитель
Сommit
c6d49766e4
1 измененных файлов с 27 добавлено и 6 удалено
  1. 27 6
      packages/ckeditor5-link/src/link.js

+ 27 - 6
packages/ckeditor5-link/src/link.js

@@ -47,7 +47,13 @@ export default class Link extends Feature {
 		} );
 		} );
 
 
 		// Show Balloon Panel on button click.
 		// Show Balloon Panel on button click.
-		this.listenTo( buttonModel, 'execute', () => this._createBalloonPanel( command.value ) );
+		this.listenTo( buttonModel, 'execute', () => {
+			if ( !this.balloonPanel ) {
+				this._createBalloonPanel();
+			}
+
+			this._attachPanelToElement();
+		} );
 
 
 		// Add link button to feature components.
 		// Add link button to feature components.
 		editor.ui.featureComponents.add( 'link', ButtonController, ButtonView, buttonModel );
 		editor.ui.featureComponents.add( 'link', ButtonController, ButtonView, buttonModel );
@@ -56,7 +62,11 @@ export default class Link extends Feature {
 		// @TODO: Get click event from editor instead of DOM.
 		// @TODO: Get click event from editor instead of DOM.
 		this.editor.ui.editable.view.element.addEventListener( 'click', () => {
 		this.editor.ui.editable.view.element.addEventListener( 'click', () => {
 			if ( editor.document.selection.isCollapsed && command.value !== undefined ) {
 			if ( editor.document.selection.isCollapsed && command.value !== undefined ) {
-				this._createBalloonPanel( command.value );
+				if ( !this.balloonPanel ) {
+					this._createBalloonPanel();
+				}
+
+				this._attachPanelToElement();
 			}
 			}
 		} );
 		} );
 	}
 	}
@@ -95,18 +105,21 @@ export default class Link extends Feature {
 	 *	                            |                   +----+ |
 	 *	                            |                   +----+ |
 	 *	                            +--------------------------+
 	 *	                            +--------------------------+
 	 */
 	 */
-	_createBalloonPanel( url ) {
+	_createBalloonPanel() {
 		const editor = this.editor;
 		const editor = this.editor;
 		const t = editor.t;
 		const t = editor.t;
+		const command = this.editor.commands.get( 'link' );
 		const editingView = editor.editing.view;
 		const editingView = editor.editing.view;
-		const editableViewElement = editor.ui.editable.view.element;
 
 
 		// Create the model of the panel.
 		// Create the model of the panel.
 		const panelModel = new Model( {
 		const panelModel = new Model( {
 			maxWidth: 300,
 			maxWidth: 300,
-			url: url
+			url: command.value
 		} );
 		} );
 
 
+		// Bind panel model to command.
+		panelModel.bind( 'url' ).to( command, 'value' );
+
 		// Observe #execute event from within the model of the panel, which means that
 		// Observe #execute event from within the model of the panel, which means that
 		// the "Save" button has been clicked.
 		// the "Save" button has been clicked.
 		this.listenTo( panelModel, 'execute', () => {
 		this.listenTo( panelModel, 'execute', () => {
@@ -140,8 +153,16 @@ export default class Link extends Feature {
 
 
 		editor.ui.add( 'body', this.balloonPanel );
 		editor.ui.add( 'body', this.balloonPanel );
 		// this.balloonPanel.urlInput.view.focus();
 		// this.balloonPanel.urlInput.view.focus();
+	}
+
+	_attachPanelToElement() {
+		if ( !this.balloonPanel ) {
+			return;
+		}
 
 
-		// Adjust Balloon position depends on selection place.
+		// Adjust balloon position.
+		const editingView = this.editor.editing.view;
+		const editableViewElement = this.editor.ui.editable.view.element;
 		const firstParent = editingView.selection.getFirstPosition().parent;
 		const firstParent = editingView.selection.getFirstPosition().parent;
 		const firstParentAncestors = firstParent.getAncestors();
 		const firstParentAncestors = firstParent.getAncestors();
 		const anchor = firstParentAncestors.find( ( ancestor ) => ancestor.name === 'a' );
 		const anchor = firstParentAncestors.find( ( ancestor ) => ancestor.name === 'a' );