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

Code refactoring: Simplified BalloonPanelView.defaultPositions' names which were ambiguous.

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

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

@@ -52,7 +52,7 @@ export default class BalloonPanelView extends View {
 
 
 		/**
 		/**
 		 * Balloon panel's current position. The position name is reflected in the CSS class set
 		 * Balloon panel's current position. The position name is reflected in the CSS class set
-		 * to the balloon, i.e. `.ck-balloon-panel_arrow_se` for "arrow_se" position. The class
+		 * to the balloon, i.e. `.ck-balloon-panel_arrow_ne` for "arrow_ne" position. The class
 		 * controls the minor aspects of the balloon's visual appearance like placement
 		 * controls the minor aspects of the balloon's visual appearance like placement
 		 * of the "arrow". To support a new position, an additional CSS must be created.
 		 * of the "arrow". To support a new position, an additional CSS must be created.
 		 *
 		 *
@@ -64,10 +64,10 @@ export default class BalloonPanelView extends View {
 		 * See {@link #withArrow}.
 		 * See {@link #withArrow}.
 		 *
 		 *
 		 * @observable
 		 * @observable
-		 * @default 'arrow_se'
-		 * @member {'arrow_se'|'arrow_sw'|'arrow_ne'|'arrow_nw'} #position
+		 * @default 'arrow_ne'
+		 * @member {'arrow_ne'|'arrow_nw'|'arrow_se'|'arrow_sw'} #position
 		 */
 		 */
-		this.set( 'position', 'arrow_se' );
+		this.set( 'position', 'arrow_ne' );
 
 
 		/**
 		/**
 		 * Controls whether the balloon panel is visible or not.
 		 * Controls whether the balloon panel is visible or not.
@@ -433,60 +433,60 @@ BalloonPanelView.defaultPositions = {
 	southEastArrowNorthEast: ( targetRect ) => ( {
 	southEastArrowNorthEast: ( targetRect ) => ( {
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
 		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_se'
+		name: 'arrow_ne'
 	} ),
 	} ),
 
 
 	southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
 	southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_sw'
+		name: 'arrow_nw'
 	} ),
 	} ),
 
 
 	northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
 	northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
 		left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_ne'
+		name: 'arrow_se'
 	} ),
 	} ),
 
 
 	northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
 	northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
-		name: 'arrow_nw'
+		name: 'arrow_sw'
 	} ),
 	} ),
 
 
 	southEastArrowNorth: ( targetRect, balloonRect ) => ( {
 	southEastArrowNorth: ( targetRect, balloonRect ) => ( {
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.right - balloonRect.width / 2,
 		left: targetRect.right - balloonRect.width / 2,
-		name: 'arrow_s'
+		name: 'arrow_n'
 	} ),
 	} ),
 
 
 	northEastArrowSouth: ( targetRect, balloonRect ) => ( {
 	northEastArrowSouth: ( targetRect, balloonRect ) => ( {
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.right - balloonRect.width / 2,
 		left: targetRect.right - balloonRect.width / 2,
-		name: 'arrow_n'
+		name: 'arrow_s'
 	} ),
 	} ),
 
 
 	northWestArrowSouth: ( targetRect, balloonRect ) => ( {
 	northWestArrowSouth: ( targetRect, balloonRect ) => ( {
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left - balloonRect.width / 2,
 		left: targetRect.left - balloonRect.width / 2,
-		name: 'arrow_n'
+		name: 'arrow_s'
 	} ),
 	} ),
 
 
 	southWestArrowNorth: ( targetRect, balloonRect ) => ( {
 	southWestArrowNorth: ( targetRect, balloonRect ) => ( {
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left - balloonRect.width / 2,
 		left: targetRect.left - balloonRect.width / 2,
-		name: 'arrow_s'
+		name: 'arrow_n'
 	} ),
 	} ),
 
 
 	southArrowNorth: ( targetRect, balloonRect ) => ( {
 	southArrowNorth: ( targetRect, balloonRect ) => ( {
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
-		name: 'arrow_s'
+		name: 'arrow_n'
 	} ),
 	} ),
 
 
 	northArrowSouth: ( targetRect, balloonRect ) => ( {
 	northArrowSouth: ( targetRect, balloonRect ) => ( {
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
 		left: targetRect.left + targetRect.width / 2 - balloonRect.width / 2,
-		name: 'arrow_n'
+		name: 'arrow_s'
 	} )
 	} )
 };
 };

+ 3 - 16
packages/ckeditor5-ui/tests/manual/contextualballoon/contextualballoon.js

@@ -16,6 +16,7 @@ import EssentialsPresets from '@ckeditor/ckeditor5-presets/src/essentials';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 
+import BalloonPanelView from '../../../src/panel/balloon/balloonpanelview';
 import ContextualBalloon from '../../../src/panel/balloon/contextualballoon';
 import ContextualBalloon from '../../../src/panel/balloon/contextualballoon';
 import ToolbarView from '../../../src/toolbar/toolbarview';
 import ToolbarView from '../../../src/toolbar/toolbarview';
 import ButtonView from '../../../src/button/buttonview';
 import ButtonView from '../../../src/button/buttonview';
@@ -224,21 +225,7 @@ function createContextualToolbar( editor ) {
 	const balloon = editor.plugins.get( ContextualBalloon );
 	const balloon = editor.plugins.get( ContextualBalloon );
 	const toolbar = new ToolbarView();
 	const toolbar = new ToolbarView();
 	const editingView = editor.editing.view;
 	const editingView = editor.editing.view;
-	const arrowVOffset = 20;
-
-	const positions = {
-		forwardSelection: ( targetRect, balloonRect ) => ( {
-			top: targetRect.bottom + arrowVOffset,
-			left: targetRect.right - balloonRect.width / 2,
-			name: 'arrow_s'
-		} ),
-
-		backwardSelection: ( targetRect, balloonRect ) => ( {
-			top: targetRect.top - balloonRect.height - arrowVOffset,
-			left: targetRect.left - balloonRect.width / 2,
-			name: 'arrow_n'
-		} )
-	};
+	const defaultPositions = BalloonPanelView.defaultPositions;
 
 
 	// Add plugins to the toolbar.
 	// Add plugins to the toolbar.
 	toolbar.fillFromConfig( [ 'PluginA', 'PluginB' ], editor.ui.componentFactory );
 	toolbar.fillFromConfig( [ 'PluginA', 'PluginB' ], editor.ui.componentFactory );
@@ -257,7 +244,7 @@ function createContextualToolbar( editor ) {
 				view: toolbar,
 				view: toolbar,
 				position: {
 				position: {
 					target: isBackward ? rangeRects.item( 0 ) : rangeRects.item( rangeRects.length - 1 ),
 					target: isBackward ? rangeRects.item( 0 ) : rangeRects.item( rangeRects.length - 1 ),
-					positions: [ positions[ isBackward ? 'backwardSelection' : 'forwardSelection' ] ]
+					positions: [ defaultPositions[ isBackward ? 'northArrowSouth' : 'southArrowNorth' ] ]
 				}
 				}
 			} );
 			} );
 		}
 		}

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

@@ -41,7 +41,7 @@ describe( 'BalloonPanelView', () => {
 		it( 'should set default values', () => {
 		it( 'should set default values', () => {
 			expect( view.top ).to.equal( 0 );
 			expect( view.top ).to.equal( 0 );
 			expect( view.left ).to.equal( 0 );
 			expect( view.left ).to.equal( 0 );
-			expect( view.position ).to.equal( 'arrow_se' );
+			expect( view.position ).to.equal( 'arrow_ne' );
 			expect( view.isVisible ).to.equal( false );
 			expect( view.isVisible ).to.equal( false );
 			expect( view.withArrow ).to.equal( true );
 			expect( view.withArrow ).to.equal( true );
 		} );
 		} );
@@ -54,11 +54,11 @@ describe( 'BalloonPanelView', () => {
 	describe( 'DOM bindings', () => {
 	describe( 'DOM bindings', () => {
 		describe( 'arrow', () => {
 		describe( 'arrow', () => {
 			it( 'should react on view#position', () => {
 			it( 'should react on view#position', () => {
-				expect( view.element.classList.contains( 'ck-balloon-panel_arrow_se' ) ).to.true;
+				expect( view.element.classList.contains( 'ck-balloon-panel_arrow_ne' ) ).to.true;
 
 
-				view.position = 'arrow_sw';
+				view.position = 'arrow_nw';
 
 
-				expect( view.element.classList.contains( 'ck-balloon-panel_arrow_sw' ) ).to.true;
+				expect( view.element.classList.contains( 'ck-balloon-panel_arrow_nw' ) ).to.true;
 			} );
 			} );
 
 
 			it( 'should react on view#withArrow', () => {
 			it( 'should react on view#withArrow', () => {
@@ -221,7 +221,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				view.attachTo( { target, limiter } );
 
 
-				expect( view.position ).to.equal( 'arrow_se' );
+				expect( view.position ).to.equal( 'arrow_ne' );
 			} );
 			} );
 
 
 			it( 'should put balloon on the `south east` side of the target element when target is on the top left side of the limiter', () => {
 			it( 'should put balloon on the `south east` side of the target element when target is on the top left side of the limiter', () => {
@@ -234,7 +234,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				view.attachTo( { target, limiter } );
 
 
-				expect( view.position ).to.equal( 'arrow_se' );
+				expect( view.position ).to.equal( 'arrow_ne' );
 			} );
 			} );
 
 
 			it( 'should put balloon on the `south west` side of the target element when target is on the right side of the limiter', () => {
 			it( 'should put balloon on the `south west` side of the target element when target is on the right side of the limiter', () => {
@@ -247,7 +247,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				view.attachTo( { target, limiter } );
 
 
-				expect( view.position ).to.equal( 'arrow_sw' );
+				expect( view.position ).to.equal( 'arrow_nw' );
 			} );
 			} );
 
 
 			it( 'should put balloon on the `north east` side of the target element when target is on the bottom of the limiter ', () => {
 			it( 'should put balloon on the `north east` side of the target element when target is on the bottom of the limiter ', () => {
@@ -260,7 +260,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				view.attachTo( { target, limiter } );
 
 
-				expect( view.position ).to.equal( 'arrow_ne' );
+				expect( view.position ).to.equal( 'arrow_se' );
 			} );
 			} );
 
 
 			it( 'should put balloon on the `north west` side of the target element when target is on the bottom right of the limiter', () => {
 			it( 'should put balloon on the `north west` side of the target element when target is on the bottom right of the limiter', () => {
@@ -273,7 +273,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				view.attachTo( { target, limiter } );
 
 
-				expect( view.position ).to.equal( 'arrow_nw' );
+				expect( view.position ).to.equal( 'arrow_sw' );
 			} );
 			} );
 
 
 			// https://github.com/ckeditor/ckeditor5-ui-default/issues/126
 			// https://github.com/ckeditor/ckeditor5-ui-default/issues/126
@@ -354,7 +354,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				view.attachTo( { target, limiter } );
 
 
-				expect( view.position ).to.equal( 'arrow_sw' );
+				expect( view.position ).to.equal( 'arrow_nw' );
 			} );
 			} );
 
 
 			it( 'should put balloon on the `south east` position when `south west` is limited', () => {
 			it( 'should put balloon on the `south east` position when `south west` is limited', () => {
@@ -374,7 +374,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				view.attachTo( { target, limiter } );
 
 
-				expect( view.position ).to.equal( 'arrow_se' );
+				expect( view.position ).to.equal( 'arrow_ne' );
 			} );
 			} );
 
 
 			it( 'should put balloon on the `north east` position when `south east` is limited', () => {
 			it( 'should put balloon on the `north east` position when `south east` is limited', () => {
@@ -398,7 +398,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				view.attachTo( { target, limiter } );
 
 
-				expect( view.position ).to.equal( 'arrow_ne' );
+				expect( view.position ).to.equal( 'arrow_se' );
 			} );
 			} );
 
 
 			it( 'should put balloon on the `south east` position when `north east` is limited', () => {
 			it( 'should put balloon on the `south east` position when `north east` is limited', () => {
@@ -418,7 +418,7 @@ describe( 'BalloonPanelView', () => {
 
 
 				view.attachTo( { target, limiter } );
 				view.attachTo( { target, limiter } );
 
 
-				expect( view.position ).to.equal( 'arrow_se' );
+				expect( view.position ).to.equal( 'arrow_ne' );
 			} );
 			} );
 		} );
 		} );
 	} );
 	} );
@@ -662,7 +662,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.southEastArrowNorthEast( targetRect ) ).to.deep.equal( {
 			expect( positions.southEastArrowNorthEast( targetRect ) ).to.deep.equal( {
 				top: 215,
 				top: 215,
 				left: 120,
 				left: 120,
-				name: 'arrow_se'
+				name: 'arrow_ne'
 			} );
 			} );
 		} );
 		} );
 
 
@@ -670,7 +670,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.southWestArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
 			expect( positions.southWestArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 215,
 				top: 215,
 				left: 130,
 				left: 130,
-				name: 'arrow_sw'
+				name: 'arrow_nw'
 			} );
 			} );
 		} );
 		} );
 
 
@@ -678,7 +678,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.northEastArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
 			expect( positions.northEastArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 35,
 				top: 35,
 				left: 120,
 				left: 120,
-				name: 'arrow_ne'
+				name: 'arrow_se'
 			} );
 			} );
 		} );
 		} );
 
 
@@ -686,7 +686,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.northWestArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
 			expect( positions.northWestArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 35,
 				top: 35,
 				left: 130,
 				left: 130,
-				name: 'arrow_nw'
+				name: 'arrow_sw'
 			} );
 			} );
 		} );
 		} );
 
 
@@ -694,7 +694,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.southEastArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
 			expect( positions.southEastArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 215,
 				top: 215,
 				left: 175,
 				left: 175,
-				name: 'arrow_s'
+				name: 'arrow_n'
 			} );
 			} );
 		} );
 		} );
 
 
@@ -702,7 +702,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.northEastArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
 			expect( positions.northEastArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 35,
 				top: 35,
 				left: 175,
 				left: 175,
-				name: 'arrow_n'
+				name: 'arrow_s'
 			} );
 			} );
 		} );
 		} );
 
 
@@ -710,7 +710,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.northWestArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
 			expect( positions.northWestArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 35,
 				top: 35,
 				left: 75,
 				left: 75,
-				name: 'arrow_n'
+				name: 'arrow_s'
 			} );
 			} );
 		} );
 		} );
 
 
@@ -718,7 +718,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.southWestArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
 			expect( positions.southWestArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 215,
 				top: 215,
 				left: 75,
 				left: 75,
-				name: 'arrow_s'
+				name: 'arrow_n'
 			} );
 			} );
 		} );
 		} );
 
 
@@ -726,7 +726,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.southArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
 			expect( positions.southArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 215,
 				top: 215,
 				left: 125,
 				left: 125,
-				name: 'arrow_s'
+				name: 'arrow_n'
 			} );
 			} );
 		} );
 		} );
 
 
@@ -734,7 +734,7 @@ describe( 'BalloonPanelView', () => {
 			expect( positions.northArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
 			expect( positions.northArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
 				top: 35,
 				top: 35,
 				left: 125,
 				left: 125,
-				name: 'arrow_n'
+				name: 'arrow_s'
 			} );
 			} );
 		} );
 		} );
 	} );
 	} );

+ 6 - 6
packages/ckeditor5-ui/theme/components/panel/balloonpanel.scss

@@ -26,9 +26,9 @@
 	}
 	}
 
 
 	&.ck-balloon-panel_arrow {
 	&.ck-balloon-panel_arrow {
-		&_s,
-		&_se,
-		&_sw {
+		&_n,
+		&_ne,
+		&_nw {
 			&:before {
 			&:before {
 				z-index: ck-z( 'default' );
 				z-index: ck-z( 'default' );
 			}
 			}
@@ -38,9 +38,9 @@
 			}
 			}
 		}
 		}
 
 
-		&_n,
-		&_ne,
-		&_nw {
+		&_s,
+		&_se,
+		&_sw {
 			&:before {
 			&:before {
 				z-index: ck-z( 'default' );
 				z-index: ck-z( 'default' );
 			}
 			}