|
@@ -44,9 +44,14 @@ export default class InlineEditorUI {
|
|
|
*/
|
|
*/
|
|
|
this.focusTracker = new FocusTracker();
|
|
this.focusTracker = new FocusTracker();
|
|
|
|
|
|
|
|
|
|
+ const { nw, sw, ne, se } = InlineEditorUI.defaultPositions;
|
|
|
|
|
+
|
|
|
// Set–up the view#panel.
|
|
// 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.
|
|
// Setup the editable.
|
|
|
const editingRoot = editor.editing.createRoot( view.editableElement );
|
|
const editingRoot = editor.editing.createRoot( view.editableElement );
|
|
@@ -91,3 +96,68 @@ export default class InlineEditorUI {
|
|
|
return this.view.destroy();
|
|
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'
|
|
|
|
|
+ } )
|
|
|
|
|
+};
|