@swimlane/ngx-charts
Version:
Declarative Charting Framework for Angular2 and beyond!
275 lines • 10.1 kB
JavaScript
;
var placement_type_1 = require('./placement.type');
var caretOffset = 7;
function verticalPosition(elDimensions, popoverDimensions, alignment) {
var result;
if (alignment === 'top') {
result = elDimensions.top - caretOffset;
}
if (alignment === 'bottom') {
result = elDimensions.top + elDimensions.height - popoverDimensions.height + caretOffset;
}
if (alignment === 'center') {
result = elDimensions.top + elDimensions.height / 2 - popoverDimensions.height / 2;
}
return result;
}
function horizontalPosition(elDimensions, popoverDimensions, alignment) {
var result;
if (alignment === 'left') {
return elDimensions.left - caretOffset;
}
if (alignment === 'right') {
return elDimensions.left + elDimensions.width - popoverDimensions.width + caretOffset;
}
if (alignment === 'center') {
return elDimensions.left + elDimensions.width / 2 - popoverDimensions.width / 2;
}
return result;
}
/**
* Position helper for the popover directive.
*
* @export
* @class PositionHelper
*/
var PositionHelper = (function () {
function PositionHelper() {
}
/**
* Calculate vertical alignment position
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} alignment
* @returns {number}
*
* @memberOf PositionHelper
*/
PositionHelper.calculateVerticalAlignment = function (elDimensions, popoverDimensions, alignment) {
var result = verticalPosition(elDimensions, popoverDimensions, alignment);
if (result + popoverDimensions.height > window.innerHeight) {
result = window.innerHeight - popoverDimensions.height;
}
return result;
};
/**
* Calculate vertical caret position
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} caretDimensions
* @param {any} alignment
* @returns {number}
*
* @memberOf PositionHelper
*/
PositionHelper.calculateVerticalCaret = function (elDimensions, popoverDimensions, caretDimensions, alignment) {
var result;
if (alignment === 'top') {
result = elDimensions.height / 2 - caretDimensions.height / 2 + caretOffset;
}
if (alignment === 'bottom') {
result = popoverDimensions.height - elDimensions.height / 2 - caretDimensions.height / 2 - caretOffset;
}
if (alignment === 'center') {
result = popoverDimensions.height / 2 - caretDimensions.height / 2;
}
var popoverPosition = verticalPosition(elDimensions, popoverDimensions, alignment);
if (popoverPosition + popoverDimensions.height > window.innerHeight) {
result += (popoverPosition + popoverDimensions.height - window.innerHeight);
}
return result;
};
/**
* Calculate horz alignment position
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} alignment
* @returns {number}
*
* @memberOf PositionHelper
*/
PositionHelper.calculateHorizontalAlignment = function (elDimensions, popoverDimensions, alignment) {
var result = horizontalPosition(elDimensions, popoverDimensions, alignment);
if (result + popoverDimensions.width > window.innerWidth) {
result = window.innerWidth - popoverDimensions.width;
}
return result;
};
/**
* Calculate horz caret position
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} caretDimensions
* @param {any} alignment
* @returns {number}
*
* @memberOf PositionHelper
*/
PositionHelper.calculateHorizontalCaret = function (elDimensions, popoverDimensions, caretDimensions, alignment) {
var result;
if (alignment === 'left') {
result = elDimensions.width / 2 - caretDimensions.width / 2 + caretOffset;
}
if (alignment === 'right') {
result = popoverDimensions.width - elDimensions.width / 2 - caretDimensions.width / 2 - caretOffset;
}
if (alignment === 'center') {
result = popoverDimensions.width / 2 - caretDimensions.width / 2;
}
var popoverPosition = horizontalPosition(elDimensions, popoverDimensions, alignment);
if (popoverPosition + popoverDimensions.width > window.innerWidth) {
result += (popoverPosition + popoverDimensions.width - window.innerWidth);
}
return result;
};
/**
* Checks if the element's position should be flipped
*
* @static
* @param {any} elDimensions
* @param {any} popoverDimensions
* @param {any} placement
* @param {any} alignment
* @param {any} spacing
* @returns {boolean}
*
* @memberOf PositionHelper
*/
PositionHelper.shouldFlip = function (elDimensions, popoverDimensions, placement, alignment, spacing) {
var flip = false;
if (placement === 'right') {
var popoverPosition = horizontalPosition(elDimensions, popoverDimensions, alignment);
if (popoverPosition + popoverDimensions.width + spacing > window.innerWidth) {
flip = true;
}
}
if (placement === 'left') {
var popoverPosition = horizontalPosition(elDimensions, popoverDimensions, alignment);
if (popoverPosition - spacing < 0) {
flip = true;
}
}
if (placement === 'top') {
if (elDimensions.top - popoverDimensions.height - spacing < 0) {
flip = true;
}
}
if (placement === 'bottom') {
var popoverPosition = verticalPosition(elDimensions, popoverDimensions, alignment);
if (popoverPosition + popoverDimensions.height + spacing > window.innerHeight) {
flip = true;
}
}
return flip;
};
/**
* Position caret
*
* @static
* @param {any} placement
* @param {any} elmDim
* @param {any} hostDim
* @param {any} caretDimensions
* @param {any} alignment
* @returns {*}
*
* @memberOf PositionHelper
*/
PositionHelper.positionCaret = function (placement, elmDim, hostDim, caretDimensions, alignment) {
var top = 0;
var left = 0;
if (placement === placement_type_1.PlacementTypes.right) {
left = -7;
top = PositionHelper.calculateVerticalCaret(hostDim, elmDim, caretDimensions, alignment);
}
else if (placement === placement_type_1.PlacementTypes.left) {
left = elmDim.width;
top = PositionHelper.calculateVerticalCaret(hostDim, elmDim, caretDimensions, alignment);
}
else if (placement === placement_type_1.PlacementTypes.top) {
top = elmDim.height;
left = PositionHelper.calculateHorizontalCaret(hostDim, elmDim, caretDimensions, alignment);
}
else if (placement === placement_type_1.PlacementTypes.bottom) {
top = -7;
left = PositionHelper.calculateHorizontalCaret(hostDim, elmDim, caretDimensions, alignment);
}
return { top: top, left: left };
};
/**
* Position content
*
* @static
* @param {any} placement
* @param {any} elmDim
* @param {any} hostDim
* @param {any} spacing
* @param {any} alignment
* @returns {*}
*
* @memberOf PositionHelper
*/
PositionHelper.positionContent = function (placement, elmDim, hostDim, spacing, alignment) {
var top = 0;
var left = 0;
if (placement === placement_type_1.PlacementTypes.right) {
left = hostDim.left + hostDim.width + spacing;
top = PositionHelper.calculateVerticalAlignment(hostDim, elmDim, alignment);
}
else if (placement === placement_type_1.PlacementTypes.left) {
left = hostDim.left - elmDim.width - spacing;
top = PositionHelper.calculateVerticalAlignment(hostDim, elmDim, alignment);
}
else if (placement === placement_type_1.PlacementTypes.top) {
top = hostDim.top - elmDim.height - spacing;
left = PositionHelper.calculateHorizontalAlignment(hostDim, elmDim, alignment);
}
else if (placement === placement_type_1.PlacementTypes.bottom) {
top = hostDim.top + hostDim.height + spacing;
left = PositionHelper.calculateHorizontalAlignment(hostDim, elmDim, alignment);
}
return { top: top, left: left };
};
/**
* Determine placement based on flip
*
* @static
* @param {any} placement
* @param {any} elmDim
* @param {any} hostDim
* @param {any} spacing
* @param {any} alignment
* @returns {*}
*
* @memberOf PositionHelper
*/
PositionHelper.determinePlacement = function (placement, elmDim, hostDim, spacing, alignment) {
var shouldFlip = PositionHelper.shouldFlip(hostDim, elmDim, placement, alignment, spacing);
if (shouldFlip) {
if (placement === placement_type_1.PlacementTypes.right) {
return placement_type_1.PlacementTypes.left;
}
else if (placement === placement_type_1.PlacementTypes.left) {
return placement_type_1.PlacementTypes.right;
}
else if (placement === placement_type_1.PlacementTypes.top) {
return placement_type_1.PlacementTypes.bottom;
}
else if (placement === placement_type_1.PlacementTypes.bottom) {
return placement_type_1.PlacementTypes.top;
}
}
return placement;
};
return PositionHelper;
}());
exports.PositionHelper = PositionHelper;
//# sourceMappingURL=position.js.map