瀏覽代碼

Moved InlineEditorUI.defaultPositions to InlineEditorUIView.panelPositions with additional tests.

Aleksander Nowodzinski 8 年之前
父節點
當前提交
5312ba92aa

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

@@ -45,12 +45,6 @@ export default class InlineEditorUI {
 		this.focusTracker = new FocusTracker();
 
 		// Set–up the view#panel.
-		const { nw, sw, ne, se } = InlineEditorUI.defaultPositions;
-		const panelOptions = {
-			target: view.editableElement,
-			positions: [ nw, sw, ne, se ]
-		};
-
 		view.panel.bind( 'isVisible' ).to( this.focusTracker, 'isFocused' );
 
 		// https://github.com/ckeditor/ckeditor5-editor-inline/issues/4
@@ -58,7 +52,10 @@ export default class InlineEditorUI {
 			// Don't pin if the panel is not already visible. It prevents the panel
 			// showing up when there's no focus in the UI.
 			if ( view.panel.isVisible ) {
-				view.panel.pin( panelOptions );
+				view.panel.pin( {
+					target: view.editableElement,
+					positions: view.panelPositions
+				} );
 			}
 		} );
 
@@ -105,68 +102,3 @@ 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'
-	} )
-};

+ 69 - 0
packages/ckeditor5-editor-inline/src/inlineeditoruiview.js

@@ -77,4 +77,73 @@ export default class InlineEditorUIView extends EditorUIView {
 	get editableElement() {
 		return this.editable.element;
 	}
+
+	/**
+	 * A set of positioning functions used by the {@link #panel} to float around
+	 * {@link #editableElement}.
+	 *
+	 * The positioning functions are as follows:
+	 *
+	 * * South east:
+	 *
+	 *		+------------------+
+	 *		| #editableElement |
+	 *		+------------------+
+	 *		           [ Panel ]
+	 *
+	 * * South west:
+	 *
+	 *		+------------------+
+	 *		| #editableElement |
+	 *		+------------------+
+	 *		[ Panel ]
+	 *
+	 * * North east:
+	 *
+	 *		           [ Panel ]
+	 *		+------------------+
+	 *		| #editableElement |
+	 *		+------------------+
+	 *
+	 *
+	 * * North west:
+	 *
+	 *		[ Panel ]
+	 *		+------------------+
+	 *		| #editableElement |
+	 *		+------------------+
+	 *
+	 * @type {module:utils/dom/position~Options#positions}
+	 */
+	get panelPositions() {
+		return panelPositions;
+	}
 }
+
+// A set of positioning functions used by the
+// {@link module:editor-inline/inlineeditoruiview~InlineEditableUIView#panel}.
+//
+// @private
+// @type {module:utils/dom/position~Options#positions}
+const panelPositions = [
+	( editableRect, panelRect ) => ( {
+		top: editableRect.top - panelRect.height,
+		left: editableRect.left,
+		name: 'toolbar_nw'
+	} ),
+	( editableRect ) => ( {
+		top: editableRect.bottom,
+		left: editableRect.left,
+		name: 'toolbar_sw'
+	} ),
+	( editableRect, panelRect ) => ( {
+		top: editableRect.top - panelRect.height,
+		left: editableRect.left + editableRect.width - panelRect.width,
+		name: 'toolbar_ne'
+	} ),
+	( editableRect, panelRect ) => ( {
+		top: editableRect.bottom,
+		left: editableRect.left + editableRect.width - panelRect.width,
+		name: 'toolbar_se'
+	} )
+];

+ 4 - 0
packages/ckeditor5-editor-inline/tests/inlineeditorui.js

@@ -78,6 +78,10 @@ describe( 'InlineEditorUI', () => {
 
 				editor.editing.view.fire( 'render' );
 				sinon.assert.calledOnce( spy );
+				sinon.assert.calledWithExactly( spy, {
+					target: view.editableElement,
+					positions: sinon.match.array
+				} );
 			} );
 		} );
 

+ 49 - 1
packages/ckeditor5-editor-inline/tests/inlineeditoruiview.js

@@ -71,7 +71,7 @@ describe( 'InlineEditorUIView', () => {
 		} );
 	} );
 
-	describe( 'init', () => {
+	describe( 'init()', () => {
 		it( 'appends #toolbar to panel#content', () => {
 			expect( view.panel.content ).to.have.length( 0 );
 
@@ -92,4 +92,52 @@ describe( 'InlineEditorUIView', () => {
 				.then( () => view.destroy() );
 		} );
 	} );
+
+	describe( 'panelPositions', () => {
+		it( 'returns the right positions in the right order', () => {
+			const positions = view.panelPositions;
+			const editableRect = {
+				top: 100,
+				bottom: 200,
+				left: 100,
+				right: 100,
+				width: 100,
+				height: 100
+			};
+			const panelRect = {
+				top: 0,
+				bottom: 0,
+				left: 0,
+				right: 0,
+				width: 50,
+				height: 50
+			};
+
+			expect( positions ).to.have.length( 4 );
+
+			expect( positions[ 0 ]( editableRect, panelRect ) ).to.deep.equal( {
+				name: 'toolbar_nw',
+				left: 100,
+				top: 50
+			} );
+
+			expect( positions[ 1 ]( editableRect, panelRect ) ).to.deep.equal( {
+				name: 'toolbar_sw',
+				left: 100,
+				top: 200
+			} );
+
+			expect( positions[ 2 ]( editableRect, panelRect ) ).to.deep.equal( {
+				name: 'toolbar_ne',
+				left: 150,
+				top: 50
+			} );
+
+			expect( positions[ 3 ]( editableRect, panelRect ) ).to.deep.equal( {
+				name: 'toolbar_se',
+				left: 150,
+				top: 200
+			} );
+		} );
+	} );
 } );