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

Replaced FloatingPanelView with BalloonPanelView.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
0d49a39b88

+ 72 - 2
packages/ckeditor5-editor-inline/src/inlineeditorui.js

@@ -44,9 +44,14 @@ export default class InlineEditorUI {
 		 */
 		this.focusTracker = new FocusTracker();
 
+		const { nw, sw, ne, se } = InlineEditorUI.defaultPositions;
+
 		// Set–up the view#panel.
-		view.panel.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
-		view.panel.targetElement = view.editableElement;
+		view.panel.bind( 'isVisible' ).to( this.focusTracker, 'isFocused' );
+		view.panel.pin( {
+			target: view.editableElement,
+			positions: [ nw, sw, ne, se ]
+		} );
 
 		// Setup the editable.
 		const editingRoot = editor.editing.createRoot( view.editableElement );
@@ -91,3 +96,68 @@ export default class InlineEditorUI {
 		return this.view.destroy();
 	}
 }
+
+/**
+ * A default set of positioning functions used by the toolbar to float around
+ * {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#editableElement}.
+ *
+ * The available positioning functions are as follows:
+ *
+ * * South east:
+ *
+ *		+------------------+
+ *		| #editableElement |
+ *		+------------------+
+ *		           [ Panel ]
+ *
+ * * South west:
+ *
+ *		+------------------+
+ *		| #editableElement |
+ *		+------------------+
+ *		[ Panel ]
+ *
+ * * North east:
+ *
+ *		           [ Panel ]
+ *		+------------------+
+ *		| #editableElement |
+ *		+------------------+
+ *
+ *
+ * * North west:
+ *
+ *		[ Panel ]
+ *		+------------------+
+ *		| #editableElement |
+ *		+------------------+
+ *
+ * Positioning functions must be compatible with {@link module:utils/dom/position~Position}.
+ *
+ * @member {Object} module:editor-inline/inlineeditorui~InlineEditorUI.defaultPositions
+ */
+InlineEditorUI.defaultPositions = {
+	nw: ( targetRect, panelRect ) => ( {
+		top: targetRect.top - panelRect.height,
+		left: targetRect.left,
+		name: 'toolbar_nw'
+	} ),
+
+	sw: ( targetRect ) => ( {
+		top: targetRect.bottom,
+		left: targetRect.left,
+		name: 'toolbar_sw'
+	} ),
+
+	ne: ( targetRect, panelRect ) => ( {
+		top: targetRect.top - panelRect.height,
+		left: targetRect.left + targetRect.width - panelRect.width,
+		name: 'toolbar_ne'
+	} ),
+
+	se: ( targetRect, panelRect ) => ( {
+		top: targetRect.bottom,
+		left: targetRect.left + targetRect.width - panelRect.width,
+		name: 'toolbar_se'
+	} )
+};

+ 6 - 4
packages/ckeditor5-editor-inline/src/inlineeditoruiview.js

@@ -9,7 +9,7 @@
 
 import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
-import FloatingPanelView from '@ckeditor/ckeditor5-ui/src/panel/floating/floatingpanelview';
+import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 
@@ -36,12 +36,14 @@ export default class InlineEditorUIView extends EditorUIView {
 		this.toolbar = new ToolbarView( locale );
 
 		/**
-		 * A floating panel view instance.
+		 * A balloon panel view instance.
 		 *
 		 * @readonly
-		 * @member {module:ui/panel/floating/floatingpanelview~FloatingPanelView}
+		 * @member {module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
 		 */
-		this.panel = new FloatingPanelView( locale );
+		this.panel = new BalloonPanelView( locale );
+
+		this.panel.withArrow = false;
 
 		Template.extend( this.panel.template, {
 			attributes: {