浏览代码

Enabled LinkBalloonPanel in Link feature. Code refactoring.

Aleksander Nowodzinski 9 年之前
父节点
当前提交
fe53ade480
共有 1 个文件被更改,包括 50 次插入1 次删除
  1. 50 1
      packages/ckeditor5-link/src/link.js

+ 50 - 1
packages/ckeditor5-link/src/link.js

@@ -4,10 +4,15 @@
  */
 
 import Feature from '../core/feature.js';
+import Model from '../ui/model.js';
+
 import LinkEngine from './linkengine.js';
+
 import ButtonController from '../ui/button/button.js';
 import ButtonView from '../ui/button/buttonview.js';
-import Model from '../ui/model.js';
+
+import LinkBalloonPanel from './ui/linkballoonpanel.js';
+import LinkBalloonPanelView from './ui/linkballoonpanelview.js';
 
 /**
  * The link feature.
@@ -29,6 +34,11 @@ 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,4 +61,43 @@ export default class Link extends Feature {
 		// Add link button to feature components.
 		editor.ui.featureComponents.add( 'link', ButtonController, ButtonView, buttonModel );
 	}
+
+	_createBalloonPanel() {
+		const editor = this.editor;
+		const editingView = editor.editing.view;
+		const editableViewElement = editor.ui.editable.view.element;
+		const t = editor.t;
+
+		// Create panel model.
+		const balloonPanelModel = new Model( {
+			maxWidth: 300
+		} );
+
+		this.balloonPanel = new LinkBalloonPanel( balloonPanelModel, new LinkBalloonPanelView( t ) );
+
+		editor.ui.add( 'body', this.balloonPanel );
+
+		this.balloonPanel.view.element.innerHTML = 'LinkBalloonPanel';
+
+		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 {
+				const selection = document.getSelection();
+
+				if ( selection && selection.rangeCount ) {
+					this.balloonPanel.view.attachTo( selection.getRangeAt( 0 ), editableViewElement );
+				}
+			}
+		}, this );
+
+		editingView.on( 'blur', () => this.balloonPanel.view.hide() );
+	}
 }