|
|
@@ -53,7 +53,7 @@ export default class BalloonPanelView extends View {
|
|
|
|
|
|
/**
|
|
|
* Balloon panel's current position. The position name is reflected in the CSS class set
|
|
|
- * to the balloon, i.e. `.ck-balloon-panel_arrow_ne` for "arrow_ne" position. The class
|
|
|
+ * to the balloon, i.e. `.ck-balloon-panel_arrow_nw` for "arrow_nw" position. The class
|
|
|
* 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.
|
|
|
*
|
|
|
@@ -65,10 +65,10 @@ export default class BalloonPanelView extends View {
|
|
|
* See {@link #withArrow}.
|
|
|
*
|
|
|
* @observable
|
|
|
- * @default 'arrow_ne'
|
|
|
- * @member {'arrow_ne'|'arrow_nw'|'arrow_se'|'arrow_sw'} #position
|
|
|
+ * @default 'arrow_nw'
|
|
|
+ * @member {'arrow_nw'|'arrow_ne'|'arrow_sw'|'arrow_se'} #position
|
|
|
*/
|
|
|
- this.set( 'position', 'arrow_ne' );
|
|
|
+ this.set( 'position', 'arrow_nw' );
|
|
|
|
|
|
/**
|
|
|
* Controls whether the balloon panel is visible or not.
|
|
|
@@ -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`
|
|
|
*
|
|
|
+ * +-----------------+
|
|
|
+ * | Balloon |
|
|
|
+ * +-----------------+
|
|
|
+ * V
|
|
|
+ * [ Target ]
|
|
|
*
|
|
|
- * * South west (arrow north):
|
|
|
+ * * `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,143 @@ 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_se'
|
|
|
} ),
|
|
|
|
|
|
- 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'
|
|
|
+ name: 'arrow_sw'
|
|
|
} ),
|
|
|
|
|
|
- northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
|
|
|
- top: targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset,
|
|
|
- left: targetRect.left + targetRect.width / 2 - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
|
|
|
+ // ------- 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_sw'
|
|
|
} ),
|
|
|
|
|
|
- southEastArrowNorth: ( targetRect, balloonRect ) => ( {
|
|
|
- top: targetRect.bottom + BalloonPanelView.arrowVerticalOffset,
|
|
|
- left: targetRect.right - balloonRect.width / 2,
|
|
|
- name: 'arrow_n'
|
|
|
+ northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
|
|
|
+ top: getNorthTop( targetRect, balloonRect ),
|
|
|
+ left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
|
|
|
+ name: 'arrow_se'
|
|
|
} ),
|
|
|
|
|
|
+ // ------- 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_se'
|
|
|
} ),
|
|
|
|
|
|
+ northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
|
|
|
+ top: getNorthTop( targetRect, balloonRect ),
|
|
|
+ left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
|
|
|
+ name: 'arrow_sw'
|
|
|
+ } ),
|
|
|
+
|
|
|
+ // ------- 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_ne'
|
|
|
+ } ),
|
|
|
+
|
|
|
+ southArrowNorthWest: ( targetRect, balloonRect ) => ( {
|
|
|
+ top: getSouthTop( targetRect, balloonRect ),
|
|
|
+ left: targetRect.left + targetRect.width / 2 - BalloonPanelView.arrowHorizontalOffset,
|
|
|
+ name: 'arrow_nw'
|
|
|
+ } ),
|
|
|
+
|
|
|
+ // ------- 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_nw'
|
|
|
+ } ),
|
|
|
+
|
|
|
+ southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
|
|
|
+ top: getSouthTop( targetRect, balloonRect ),
|
|
|
+ left: targetRect.left - balloonRect.width + BalloonPanelView.arrowHorizontalOffset,
|
|
|
+ name: 'arrow_ne'
|
|
|
+ } ),
|
|
|
+
|
|
|
+ // ------- 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_ne'
|
|
|
+ } ),
|
|
|
+
|
|
|
+ southEastArrowNorthWest: ( targetRect, balloonRect ) => ( {
|
|
|
+ top: getSouthTop( targetRect, balloonRect ),
|
|
|
+ left: targetRect.right - BalloonPanelView.arrowHorizontalOffset,
|
|
|
+ name: 'arrow_nw'
|
|
|
+ } ),
|
|
|
};
|
|
|
+
|
|
|
+// Returns the top coordinate for positions starting with `north*`.
|
|
|
+//
|
|
|
+// @private
|
|
|
+// @param {utils/dom/rect~Rect} targetRect A rect of the target.
|
|
|
+// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
|
|
|
+// @returns {Number}
|
|
|
+function getNorthTop( targetRect, balloonRect ) {
|
|
|
+ return targetRect.top - balloonRect.height - BalloonPanelView.arrowVerticalOffset;
|
|
|
+}
|
|
|
+
|
|
|
+// Returns the top coordinate for positions starting with `south*`.
|
|
|
+//
|
|
|
+// @private
|
|
|
+// @param {utils/dom/rect~Rect} targetRect A rect of the target.
|
|
|
+// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
|
|
|
+// @returns {Number}
|
|
|
+function getSouthTop( targetRect ) {
|
|
|
+ return targetRect.bottom + BalloonPanelView.arrowVerticalOffset;
|
|
|
+}
|