浏览代码

Extended positions used by the ContextualToolbar. Defined the position limiter for the ContextualToolbar. Fixed ContextualToolbar content collapsing in narrow spaces.

Aleksander Nowodzinski 8 年之前
父节点
当前提交
1253565ffa

+ 31 - 6
packages/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar.js

@@ -14,8 +14,6 @@ import ToolbarView from '../toolbarview';
 import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
 import debounce from '@ckeditor/ckeditor5-utils/src/lib/lodash/debounce';
 
-const defaultPositions = BalloonPanelView.defaultPositions;
-
 /**
  * The contextual toolbar.
  *
@@ -51,7 +49,10 @@ export default class ContextualToolbar extends Plugin {
 
 		Template.extend( this.toolbarView.template, {
 			attributes: {
-				class: 'ck-editor-toolbar'
+				class: [
+					'ck-editor-toolbar',
+					'ck-toolbar_floating'
+				]
 			}
 		} );
 
@@ -231,9 +232,8 @@ export default class ContextualToolbar extends Plugin {
 				// Select the proper range rect depending on the direction of the selection.
 				return isBackward ? rangeRects.item( 0 ) : rangeRects.item( rangeRects.length - 1 );
 			},
-			positions: isBackward ?
-				[ defaultPositions.northWestArrowSouth, defaultPositions.southWestArrowNorth ] :
-				[ defaultPositions.southEastArrowNorth, defaultPositions.northEastArrowSouth ]
+			limiter: this.editor.ui.view.editable.element,
+			positions: getBalloonPositions( isBackward )
 		};
 	}
 
@@ -263,3 +263,28 @@ export default class ContextualToolbar extends Plugin {
 	 * @event _selectionChangeDebounced
 	 */
 }
+
+// Returns toolbar positions for the given direction of the selection.
+//
+// @private
+// @param {Boolean} isBackward
+// @returns {Array.<module:utils/dom/position~Position>}
+function getBalloonPositions( isBackward ) {
+	const defaultPositions = BalloonPanelView.defaultPositions;
+
+	return isBackward ? [
+		defaultPositions.northWestArrowSouth,
+		defaultPositions.northWestArrowSouthWest,
+		defaultPositions.northWestArrowSouthEast,
+		defaultPositions.southWestArrowNorth,
+		defaultPositions.southWestArrowNorthWest,
+		defaultPositions.southWestArrowNorthEast,
+	] : [
+		defaultPositions.southEastArrowNorth,
+		defaultPositions.southEastArrowNorthEast,
+		defaultPositions.southEastArrowNorthWest,
+		defaultPositions.northEastArrowSouth,
+		defaultPositions.northEastArrowSouthEast,
+		defaultPositions.northEastArrowSouthWest,
+	];
+}

+ 19 - 2
packages/ckeditor5-ui/tests/toolbar/contextual/contextualtoolbar.js

@@ -59,6 +59,7 @@ describe( 'ContextualToolbar', () => {
 		expect( contextualToolbar ).to.instanceOf( ContextualToolbar );
 		expect( contextualToolbar.toolbarView ).to.instanceof( ToolbarView );
 		expect( contextualToolbar.toolbarView.element.classList.contains( 'ck-editor-toolbar' ) ).to.be.true;
+		expect( contextualToolbar.toolbarView.element.classList.contains( 'ck-toolbar_floating' ) ).to.be.true;
 	} );
 
 	it( 'should load ContextualBalloon', () => {
@@ -161,7 +162,15 @@ describe( 'ContextualToolbar', () => {
 					balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container',
 					position: {
 						target: sinon.match( value => value() == backwardSelectionRect ),
-						positions: [ defaultPositions.southEastArrowNorth, defaultPositions.northEastArrowSouth ]
+						limiter: editor.ui.view.editable.element,
+						positions: [
+							defaultPositions.southEastArrowNorth,
+							defaultPositions.southEastArrowNorthEast,
+							defaultPositions.southEastArrowNorthWest,
+							defaultPositions.northEastArrowSouth,
+							defaultPositions.northEastArrowSouthEast,
+							defaultPositions.northEastArrowSouthWest,
+						]
 					}
 				} );
 			} );
@@ -179,7 +188,15 @@ describe( 'ContextualToolbar', () => {
 						balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container',
 						position: {
 							target: sinon.match( value => value() == forwardSelectionRect ),
-							positions: [ defaultPositions.northWestArrowSouth, defaultPositions.southWestArrowNorth ]
+							limiter: editor.ui.view.editable.element,
+							positions: [
+								defaultPositions.northWestArrowSouth,
+								defaultPositions.northWestArrowSouthWest,
+								defaultPositions.northWestArrowSouthEast,
+								defaultPositions.southWestArrowNorth,
+								defaultPositions.southWestArrowNorthWest,
+								defaultPositions.southWestArrowNorthEast,
+							]
 						}
 					} );
 				} );