Bladeren bron

Improved the naming of BalloonPanelView.defaultPositions, added new positions.

Aleksander Nowodzinski 8 jaren geleden
bovenliggende
commit
9e20e21a2e

+ 226 - 89
packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

@@ -175,10 +175,10 @@ export default class BalloonPanelView extends View {
 		const positionOptions = Object.assign( {}, {
 			element: this.element,
 			positions: [
-				defaultPositions.southEastArrowNorthEast,
-				defaultPositions.southWestArrowNorthEast,
-				defaultPositions.northEastArrowSouthWest,
-				defaultPositions.northWestArrowSouthEast
+				defaultPositions.southArrowNorthWest,
+				defaultPositions.southArrowNorthEast,
+				defaultPositions.northArrowSouthWest,
+				defaultPositions.northArrowSouthEast
 			],
 			limiter: defaultLimiterElement,
 			fitInViewport: true
@@ -334,94 +334,163 @@ BalloonPanelView.arrowVerticalOffset = 15;
  * A default set of positioning functions used by the balloon panel view
  * when attaching using {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo} method.
  *
- * The available positioning functions are as follows:
+ * The available positioning functions are as follow:
  *
- * * South east (arrow north west):
+ * **North**
  *
- *		[ Target ]
- *		    ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *
- *
- * * South west (arrow north east):
- *
- *		         [ Target ]
- *		              ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *
- *
- * * North east (arrow south west):
- *
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		    V
- *		[ Target ]
- *
- *
- * * North west (arrow south east):
- *
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		              V
- *		         [ Target ]
+ * * `northArrowSouth`
  *
+ * 		+-----------------+
+ * 		|     Balloon     |
+ * 		+-----------------+
+ * 		         V
+ * 		    [ Target ]
  *
- * * South east (arrow north):
- *
- * 		      [ Target ]
- * 		           ^
- * 		  +-----------------+
- * 		  |     Balloon     |
- * 		  +-----------------+
+ * * `northArrowSouthEast`
  *
+ * 		+-----------------+
+ * 		|     Balloon     |
+ * 		+-----------------+
+ * 		               V
+ * 		          [ Target ]
  *
- * * North east (arrow south):
+ * * `northArrowSouthWest`
  *
  * 		  +-----------------+
  * 		  |     Balloon     |
  * 		  +-----------------+
- * 		           V
- * 		      [ Target ]
+ * 		     V
+ * 		[ Target ]
  *
+ * **North west**
  *
- * * North west (arrow south):
+ * * `northWestArrowSouth`
  *
  * 		+-----------------+
  * 		|     Balloon     |
  * 		+-----------------+
  * 		         V
- * 		    [ Target ]
+ * 		         [ Target ]
  *
+ * * `northWestArrowSouthWest`
  *
- * * South west (arrow north):
+ * 		+-----------------+
+ * 		|     Balloon     |
+ * 		+-----------------+
+ * 		   V
+ * 		   [ Target ]
+ *
+ * * `northWestArrowSouthEast`
  *
- * 		    [ Target ]
- * 		         ^
  * 		+-----------------+
  * 		|     Balloon     |
  * 		+-----------------+
+ * 		               V
+ * 		               [ Target ]
+ *
+ * **North east**
  *
- * * South (arrow north):
+ * * `northEastArrowSouth`
  *
- * 		     [ Target ]
- * 		         ^
  * 		+-----------------+
  * 		|     Balloon     |
  * 		+-----------------+
+ * 		         V
+ * 		[ Target ]
  *
- * * North (arrow south):
+ * * `northEastArrowSouthEast`
  *
  * 		+-----------------+
  * 		|     Balloon     |
  * 		+-----------------+
- * 		        V
- * 		    [ Target ]
+ * 		               V
+ * 		      [ Target ]
+ *
+ * * `northEastArrowSouthWest`
+ *
+ * 		      +-----------------+
+ * 		      |     Balloon     |
+ * 		      +-----------------+
+ * 		         V
+ * 		[ Target ]
+ *
+ * **South**
+ *
+ * * `southArrowNorth`
+ *
+ *		    [ Target ]
+ *		         ^
+ *		+-----------------+
+ *		|     Balloon     |
+ *		+-----------------+
+ *
+ * * `southArrowNorthEast`
+ *
+ *		          [ Target ]
+ *		               ^
+ *		+-----------------+
+ *		|     Balloon     |
+ *		+-----------------+
+ *
+ * * `southArrowNorthWest`
+ *
+ *		[ Target ]
+ *		     ^
+ *		   +-----------------+
+ *		   |     Balloon     |
+ *		   +-----------------+
+ *
+ * **South west**
+ *
+ * * `southWestArrowNorth`
+ *
+ *		         [ Target ]
+ *		         ^
+ *		+-----------------+
+ *		|     Balloon     |
+ *		+-----------------+
+ *
+ * * `southWestArrowNorthWest`
+ *
+ *		  [ Target ]
+ *		  ^
+ *		+-----------------+
+ *		|     Balloon     |
+ *		+-----------------+
+ *
+ * * `southWestArrowNorthEast`
+ *
+ *		               [ Target ]
+ *		               ^
+ *		+-----------------+
+ *		|     Balloon     |
+ *		+-----------------+
+ *
+ * **South east**
+ *
+ * * `southEastArrowNorth`
+ *
+ *		[ Target ]
+ *		         ^
+ *		+-----------------+
+ *		|     Balloon     |
+ *		+-----------------+
+ *
+ * * `southEastArrowNorthEast`
+ *
+ *		       [ Target ]
+ *		                ^
+ *		+-----------------+
+ *		|     Balloon     |
+ *		+-----------------+
+ *
+ * * `southEastArrowNorthWest`
+ *
+ *		[ Target ]
+ *		         ^
+ *		       +-----------------+
+ *		       |     Balloon     |
+ *		       +-----------------+
  *
  * See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
  *
@@ -433,63 +502,131 @@ BalloonPanelView.arrowVerticalOffset = 15;
  * @member {Object} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions
  */
 BalloonPanelView.defaultPositions = {
-	southEastArrowNorthEast: targetRect => ( {
-		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
-		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_ne'
+	// ------- North
+
+	northArrowSouth: ( targetRect, balloonRect ) => ( {
+		top: getNorthTop( targetRect, balloonRect ),
+		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
+		name: 'arrow_s'
 	} ),
 
-	southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
-		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
+	northArrowSouthEast: ( targetRect, balloonRect ) => ( {
+		top: getNorthTop( targetRect, balloonRect ),
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nw'
+		name: 'arrow_sw'
 	} ),
 
-	northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
-		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
+	northArrowSouthWest: ( targetRect, balloonRect ) => ( {
+		top: getNorthTop( targetRect, balloonRect ),
 		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
 		name: 'arrow_se'
 	} ),
 
+	// ------- North west
+
+	northWestArrowSouth: ( targetRect, balloonRect ) => ( {
+		top: getNorthTop( targetRect, balloonRect ),
+		left: targetRect.left - balloonRect.width / 2,
+		name: 'arrow_s'
+	} ),
+
+	northWestArrowSouthWest: ( targetRect, balloonRect ) => ( {
+		top: getNorthTop( targetRect, balloonRect ),
+		left: targetRect.left - BalloonPanelView.arrowHorizontalOffset,
+		name: 'arrow_se'
+	} ),
+
 	northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
-		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
-		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
+		top: getNorthTop( targetRect, balloonRect ),
+		left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
 		name: 'arrow_sw'
 	} ),
 
-	southEastArrowNorth: ( targetRect, balloonRect ) => ( {
-		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
-		left: targetRect.right - balloonRect.width / 2,
-		name: 'arrow_n'
-	} ),
+	// ------- North east
 
 	northEastArrowSouth: ( targetRect, balloonRect ) => ( {
-		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
+		top: getNorthTop( targetRect, balloonRect ),
 		left: targetRect.right - balloonRect.width / 2,
 		name: 'arrow_s'
 	} ),
 
-	northWestArrowSouth: ( targetRect, balloonRect ) => ( {
-		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
-		left: targetRect.left - balloonRect.width / 2,
-		name: 'arrow_s'
+	northEastArrowSouthEast: ( targetRect, balloonRect ) => ( {
+		top: getNorthTop( targetRect, balloonRect ),
+		left: targetRect.right - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
+		name: 'arrow_sw'
+	} ),
+
+	northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
+		top: getNorthTop( targetRect, balloonRect ),
+		left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
+		name: 'arrow_se'
 	} ),
 
+	// ------- South
+
+	southArrowNorth: ( targetRect, balloonRect ) => ( {
+		top: getSouthTop( targetRect, balloonRect ),
+		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
+		name: 'arrow_n'
+	} ),
+
+	southArrowNorthEast: ( targetRect, balloonRect ) => ( {
+		top: getSouthTop( targetRect, balloonRect ),
+		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
+		name: 'arrow_nw'
+	} ),
+
+	southArrowNorthWest: ( targetRect, balloonRect ) => ( {
+		top: getSouthTop( targetRect, balloonRect ),
+		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
+		name: 'arrow_ne'
+	} ),
+
+	// ------- South west
+
 	southWestArrowNorth: ( targetRect, balloonRect ) => ( {
-		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
+		top: getSouthTop( targetRect, balloonRect ),
 		left: targetRect.left - balloonRect.width / 2,
 		name: 'arrow_n'
 	} ),
 
-	southArrowNorth: ( targetRect, balloonRect ) => ( {
-		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
-		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
+	southWestArrowNorthWest: ( targetRect, balloonRect ) => ( {
+		top: getSouthTop( targetRect, balloonRect ),
+		left: targetRect.left - BalloonPanelView.arrowHorizontalOffset,
+		name: 'arrow_ne'
+	} ),
+
+	southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
+		top: getSouthTop( targetRect, balloonRect ),
+		left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
+		name: 'arrow_nw'
+	} ),
+
+	// ------- South east
+
+	southEastArrowNorth: ( targetRect, balloonRect ) => ( {
+		top: getSouthTop( targetRect, balloonRect ),
+		left: targetRect.right - balloonRect.width / 2,
 		name: 'arrow_n'
 	} ),
 
-	northArrowSouth: ( targetRect, balloonRect ) => ( {
-		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
-		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
-		name: 'arrow_s'
-	} )
+	southEastArrowNorthEast: ( targetRect, balloonRect ) => ( {
+		top: getSouthTop( targetRect, balloonRect ),
+		left: targetRect.right - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
+		name: 'arrow_nw'
+	} ),
+
+	southEastArrowNorthWest: ( targetRect, balloonRect ) => ( {
+		top: getSouthTop( targetRect, balloonRect ),
+		left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
+		name: 'arrow_ne'
+	} ),
 };
+
+function getNorthTop( targetRect, balloonRect ) {
+	return targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset;
+}
+
+function getSouthTop( targetRect ) {
+	return targetRect.bottom + BalloonPanelView.arrowVerticalOffset;
+}

+ 22 - 0
packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanelview.html

@@ -0,0 +1,22 @@
+<div id="container"></div>
+
+<style>
+	#container {
+		padding: 5em;
+	}
+
+	.target {
+		width: 125px;
+		height: 20px;
+		background: green;
+		margin: 0 0 0 100px;
+	}
+
+	.target + .target {
+		margin-top: 70px;
+	}
+
+	.ck-balloon-panel {
+		padding: .3em;
+	}
+</style>

+ 29 - 0
packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanelview.js

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document */
+
+import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
+import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
+
+const defaultPositions = BalloonPanelView.defaultPositions;
+const container = document.querySelector( '#container' );
+
+for ( const i in defaultPositions ) {
+	const target = document.createElement( 'div' );
+	target.classList.add( 'target' );
+	container.appendChild( target );
+
+	const balloon = new BalloonPanelView();
+	balloon.element.textContent = i;
+	document.body.appendChild( balloon.element );
+
+	balloon.attachTo( {
+		target,
+		positions: [
+			defaultPositions[ i ]
+		]
+	} );
+}

+ 5 - 0
packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanelview.md

@@ -0,0 +1,5 @@
+## `BalloonPanelView` and `defaultPositions`
+
+1. A number of green rectangles should be displayed in the page.
+2. Each rectangle should have a panel attached.
+3. Make sure the description in each panel matches the location of the panel.

+ 118 - 38
packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js

@@ -188,10 +188,10 @@ describe( 'BalloonPanelView', () => {
 				element: view.element,
 				target,
 				positions: [
-					BalloonPanelView.defaultPositions.southEastArrowNorthEast,
-					BalloonPanelView.defaultPositions.southWestArrowNorthEast,
-					BalloonPanelView.defaultPositions.northEastArrowSouthWest,
-					BalloonPanelView.defaultPositions.northWestArrowSouthEast
+					BalloonPanelView.defaultPositions.southArrowNorthWest,
+					BalloonPanelView.defaultPositions.southArrowNorthEast,
+					BalloonPanelView.defaultPositions.northArrowSouthWest,
+					BalloonPanelView.defaultPositions.northArrowSouthEast
 				],
 				limiter: document.body,
 				fitInViewport: true
@@ -670,47 +670,65 @@ describe( 'BalloonPanelView', () => {
 			};
 		} );
 
-		it( 'southEastArrowNorthEast', () => {
-			expect( positions.southEastArrowNorthEast( targetRect ) ).to.deep.equal( {
-				top: 215,
-				left: 120,
-				name: 'arrow_ne'
+		it( 'should have a proper length', () => {
+			expect( Object.keys( positions ) ).to.have.length( 18 );
+		} );
+
+		// ------- North
+
+		it( 'should define the "northArrowSouth" position', () => {
+			expect( positions.northArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 35,
+				left: 125,
+				name: 'arrow_s'
 			} );
 		} );
 
-		it( 'southWestArrowNorthEast', () => {
-			expect( positions.southWestArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
-				top: 215,
+		it( 'should define the "northArrowSouthEast" position', () => {
+			expect( positions.northArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 35,
 				left: 130,
-				name: 'arrow_nw'
+				name: 'arrow_sw'
 			} );
 		} );
 
-		it( 'northEastArrowSouthWest', () => {
-			expect( positions.northEastArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
+		it( 'should define the "northArrowSouthWest" position', () => {
+			expect( positions.northArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 35,
 				left: 120,
 				name: 'arrow_se'
 			} );
 		} );
 
-		it( 'northWestArrowSouthEast', () => {
-			expect( positions.northWestArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
+		// ------- North west
+
+		it( 'should define the "northWestArrowSouth" position', () => {
+			expect( positions.northWestArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 35,
-				left: 130,
-				name: 'arrow_sw'
+				left: 75,
+				name: 'arrow_s'
 			} );
 		} );
 
-		it( 'southEastArrowNorth', () => {
-			expect( positions.southEastArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
-				top: 215,
-				left: 175,
-				name: 'arrow_n'
+		it( 'should define the "northWestArrowSouthWest" position', () => {
+			expect( positions.northWestArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 35,
+				left: 70,
+				name: 'arrow_se'
+			} );
+		} );
+
+		it( 'should define the "northWestArrowSouthEast" position', () => {
+			expect( positions.northWestArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 35,
+				left: 80,
+				name: 'arrow_sw'
 			} );
 		} );
 
-		it( 'northEastArrowSouth', () => {
+		// ------- North east
+
+		it( 'should define the "northEastArrowSouth" position', () => {
 			expect( positions.northEastArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 35,
 				left: 175,
@@ -718,15 +736,51 @@ describe( 'BalloonPanelView', () => {
 			} );
 		} );
 
-		it( 'northWestArrowSouth', () => {
-			expect( positions.northWestArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
+		it( 'should define the "northEastArrowSouthEast" position', () => {
+			expect( positions.northEastArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 35,
-				left: 75,
-				name: 'arrow_s'
+				left: 180,
+				name: 'arrow_sw'
+			} );
+		} );
+
+		it( 'should define the "northEastArrowSouthWest" position', () => {
+			expect( positions.northEastArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 35,
+				left: 170,
+				name: 'arrow_se'
+			} );
+		} );
+
+		// ------- South
+
+		it( 'should define the "southArrowNorth" position', () => {
+			expect( positions.southArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 125,
+				name: 'arrow_n'
+			} );
+		} );
+
+		it( 'should define the "southArrowNorthEast" position', () => {
+			expect( positions.southArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 130,
+				name: 'arrow_nw'
+			} );
+		} );
+
+		it( 'should define the "southArrowNorthWest" position', () => {
+			expect( positions.southArrowNorthWest( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 120,
+				name: 'arrow_ne'
 			} );
 		} );
 
-		it( 'southWestArrowNorth', () => {
+		// ------- South west
+
+		it( 'should define the "southWestArrowNorth" position', () => {
 			expect( positions.southWestArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 215,
 				left: 75,
@@ -734,19 +788,45 @@ describe( 'BalloonPanelView', () => {
 			} );
 		} );
 
-		it( 'southArrowNorth', () => {
-			expect( positions.southArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
+		it( 'should define the "southWestArrowNorthWest" position', () => {
+			expect( positions.southWestArrowNorthWest( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 215,
-				left: 125,
+				left: 70,
+				name: 'arrow_ne'
+			} );
+		} );
+
+		it( 'should define the "southWestArrowNorthEast" position', () => {
+			expect( positions.southWestArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 80,
+				name: 'arrow_nw'
+			} );
+		} );
+
+		// ------- South east
+
+		it( 'should define the "southEastArrowNorth" position', () => {
+			expect( positions.southEastArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 175,
 				name: 'arrow_n'
 			} );
 		} );
 
-		it( 'northArrowSouth', () => {
-			expect( positions.northArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
-				top: 35,
-				left: 125,
-				name: 'arrow_s'
+		it( 'should define the "southEastArrowNorthEast" position', () => {
+			expect( positions.southEastArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 180,
+				name: 'arrow_nw'
+			} );
+		} );
+
+		it( 'should define the "southEastArrowNorthWest" position', () => {
+			expect( positions.southEastArrowNorthWest( targetRect, balloonRect ) ).to.deep.equal( {
+				top: 215,
+				left: 170,
+				name: 'arrow_ne'
 			} );
 		} );
 	} );