@blueprintjs/core
Version:
Core styles & components
76 lines (74 loc) • 12.5 kB
JavaScript
;
var position_1 = require("../../common/position");
// this value causes popover and target edges to line up on 50px targets
exports.MIN_ARROW_SPACING = 18;
function computeArrowOffset(sideLength, arrowSize, minimum) {
if (minimum === void 0) { minimum = exports.MIN_ARROW_SPACING; }
return Math.max(Math.round((sideLength - arrowSize) / 2), minimum);
}
exports.computeArrowOffset = computeArrowOffset;
function getPopoverTransformOrigin(position, arrowSize, targetDimensions) {
var offsetX = computeArrowOffset(targetDimensions.width, arrowSize);
var offsetY = computeArrowOffset(targetDimensions.height, arrowSize);
switch (position) {
case position_1.Position.TOP_LEFT:
return offsetX + "px bottom";
case position_1.Position.TOP_RIGHT:
return "calc(100% - " + offsetX + "px) bottom";
case position_1.Position.BOTTOM_LEFT:
return offsetX + "px top";
case position_1.Position.BOTTOM_RIGHT:
return "calc(100% - " + offsetX + "px) top";
case position_1.Position.LEFT_TOP:
return "right " + offsetY + "px";
case position_1.Position.LEFT_BOTTOM:
return "right calc(100% - " + offsetY + "px)";
case position_1.Position.RIGHT_TOP:
return "left " + offsetY + "px";
case position_1.Position.RIGHT_BOTTOM:
return "left calc(100% - " + offsetY + "px)";
default:
return undefined;
}
}
exports.getPopoverTransformOrigin = getPopoverTransformOrigin;
function getArrowPositionStyles(position, arrowSize, ignoreTargetDimensions, targetDimensions, inline) {
// compute the offset to center an arrow with given hypotenuse in a side of the given length
var popoverOffset = function (sideLength) {
var offset = computeArrowOffset(sideLength, arrowSize, 0);
return offset < exports.MIN_ARROW_SPACING ? exports.MIN_ARROW_SPACING - offset : 0;
};
var popoverOffsetX = popoverOffset(targetDimensions.width);
var popoverOffsetY = popoverOffset(targetDimensions.height);
// TOP, RIGHT, BOTTOM, LEFT are handled purely in CSS because of centering transforms
switch (position) {
case position_1.Position.TOP_LEFT:
case position_1.Position.BOTTOM_LEFT:
return {
arrow: ignoreTargetDimensions ? {} : { left: computeArrowOffset(targetDimensions.width, arrowSize) },
container: { marginLeft: -popoverOffsetX },
};
case position_1.Position.TOP_RIGHT:
case position_1.Position.BOTTOM_RIGHT:
return {
arrow: ignoreTargetDimensions ? {} : { right: computeArrowOffset(targetDimensions.width, arrowSize) },
container: { marginLeft: popoverOffsetX },
};
case position_1.Position.RIGHT_TOP:
case position_1.Position.LEFT_TOP:
return {
arrow: ignoreTargetDimensions ? {} : { top: computeArrowOffset(targetDimensions.height, arrowSize) },
container: inline ? { top: -popoverOffsetY } : { marginTop: -popoverOffsetY },
};
case position_1.Position.RIGHT_BOTTOM:
case position_1.Position.LEFT_BOTTOM:
return {
arrow: ignoreTargetDimensions ? {} : { bottom: computeArrowOffset(targetDimensions.height, arrowSize) },
container: inline ? { bottom: -popoverOffsetY } : { marginTop: popoverOffsetY },
};
default:
return {};
}
}
exports.getArrowPositionStyles = getArrowPositionStyles;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9jb21wb25lbnRzL3BvcG92ZXIvYXJyb3dzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFFQSx5QkFBeUIsdUJBQXVCLENBQUMsQ0FBQTtBQUVqRCx3RUFBd0U7QUFDM0QseUJBQWlCLEdBQUcsRUFBRSxDQUFDO0FBWXBDLDRCQUFtQyxVQUFrQixFQUFFLFNBQWlCLEVBQUUsT0FBMkI7SUFBM0IsdUJBQTJCLEdBQTNCLG1DQUEyQjtJQUNqRyxNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsVUFBVSxHQUFHLFNBQVMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxDQUFDO0FBQ3ZFLENBQUM7QUFGZSwwQkFBa0IscUJBRWpDLENBQUE7QUFFRCxtQ0FBMEMsUUFBa0IsRUFDbEIsU0FBaUIsRUFDakIsZ0JBQTZCO0lBQ25FLElBQU0sT0FBTyxHQUFHLGtCQUFrQixDQUFDLGdCQUFnQixDQUFDLEtBQUssRUFBRSxTQUFTLENBQUMsQ0FBQztJQUN0RSxJQUFNLE9BQU8sR0FBRyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsU0FBUyxDQUFDLENBQUM7SUFDdkUsTUFBTSxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQztRQUNmLEtBQUssbUJBQVEsQ0FBQyxRQUFRO1lBQ2xCLE1BQU0sQ0FBSSxPQUFPLGNBQVcsQ0FBQztRQUNqQyxLQUFLLG1CQUFRLENBQUMsU0FBUztZQUNuQixNQUFNLENBQUMsaUJBQWUsT0FBTyxlQUFZLENBQUM7UUFDOUMsS0FBSyxtQkFBUSxDQUFDLFdBQVc7WUFDckIsTUFBTSxDQUFJLE9BQU8sV0FBUSxDQUFDO1FBQzlCLEtBQUssbUJBQVEsQ0FBQyxZQUFZO1lBQ3RCLE1BQU0sQ0FBQyxpQkFBZSxPQUFPLFlBQVMsQ0FBQztRQUMzQyxLQUFLLG1CQUFRLENBQUMsUUFBUTtZQUNsQixNQUFNLENBQUMsV0FBUyxPQUFPLE9BQUks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QUFBIiwiZmlsZSI6ImNvbXBvbmVudHMvcG9wb3Zlci9hcnJvd3MuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDU1NQcm9wZXJ0aWVzIH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB7IFBvc2l0aW9uIH0gZnJvbSBcIi4uLy4uL2NvbW1vbi9wb3NpdGlvblwiO1xuXG4vLyB0aGlzIHZhbHVlIGNhdXNlcyBwb3BvdmVyIGFuZCB0YXJnZXQgZWRnZXMgdG8gbGluZSB1cCBvbiA1MHB4IHRhcmdldHNcbmV4cG9ydCBjb25zdCBNSU5fQVJST1dfU1BBQ0lORyA9IDE4O1xuXG5leHBvcnQgaW50ZXJmYWNlIElEaW1lbnNpb25zIHtcbiAgICBoZWlnaHQ6IG51bWJlcjtcbiAgICB3aWR0aDogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElBcnJvd1Bvc2l0aW9uU3R5bGVzIHtcbiAgICBhcnJvdz86IENTU1Byb3BlcnRpZXM7XG4gICAgY29udGFpbmVyPzogQ1NTUHJvcGVydGllcztcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGNvbXB1dGVBcnJvd09mZnNldChzaWRlTGVuZ3RoOiBudW1iZXIsIGFycm93U2l6ZTogbnVtYmVyLCBtaW5pbXVtID0gTUlOX0FSUk9XX1NQQUNJTkcpIHtcbiAgICByZXR1cm4gTWF0aC5tYXgoTWF0aC5yb3VuZCgoc2lkZUxlbmd0aCAtIGFycm93U2l6ZSkgLyAyKSwgbWluaW11bSk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRQb3BvdmVyVHJhbnNmb3JtT3JpZ2luKHBvc2l0aW9uOiBQb3NpdGlvbixcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGFycm93U2l6ZTogbnVtYmVyLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdGFyZ2V0RGltZW5zaW9uczogSURpbWVuc2lvbnMpOiBzdHJpbmcge1xuICAgIGNvbnN0IG9mZnNldFggPSBjb21wdXRlQXJyb3dPZmZzZXQodGFyZ2V0RGltZW5zaW9ucy53aWR0aCwgYXJyb3dTaXplKTtcbiAgICBjb25zdCBvZmZzZXRZID0gY29tcHV0ZUFycm93T2Zmc2V0KHRhcmdldERpbWVuc2lvbnMuaGVpZ2h0LCBhcnJvd1NpemUpO1xuICAgIHN3aXRjaCAocG9zaXRpb24pIHtcbiAgICAgICAgY2FzZSBQb3NpdGlvbi5UT1BfTEVGVDpcbiAgICAgICAgICAgIHJldHVybiBgJHtvZmZzZXRYfXB4IGJvdHRvbWA7XG4gICAgICAgIGNhc2UgUG9zaXRpb24uVE9QX1JJR0hUOlxuICAgICAgICAgICAgcmV0dXJuIGBjYWxjKDEwMCUgLSAke29mZnNldFh9cHgpIGJvdHRvbWA7XG4gICAgICAgIGNhc2UgUG9zaXRpb24uQk9UVE9NX0xFRlQ6XG4gICAgICAgICAgICByZXR1cm4gYCR7b2Zmc2V0WH1weCB0b3BgO1xuICAgICAgICBjYXNlIFBvc2l0aW9uLkJPVFRPTV9SSUdIVDpcbiAgICAgICAgICAgIHJldHVybiBgY2FsYygxMDAlIC0gJHtvZmZzZXRYfXB4KSB0b3BgO1xuICAgICAgICBjYXNlIFBvc2l0aW9uLkxFRlRfVE9QOlxuICAgICAgICAgICAgcmV0dXJuIGByaWdodCAke29mZnNldFl9cHhgO1xuICAgICAgICBjYXNlIFBvc2l0aW9uLkxFRlRfQk9UVE9NOlxuICAgICAgICAgICAgcmV0dXJuIGByaWdodCBjYWxjKDEwMCUgLSAke29mZnNldFl9cHgpYDtcbiAgICAgICAgY2FzZSBQb3NpdGlvbi5SSUdIVF9UT1A6XG4gICAgICAgICAgICByZXR1cm4gYGxlZnQgJHtvZmZzZXRZfXB4YDtcbiAgICAgICAgY2FzZSBQb3NpdGlvbi5SSUdIVF9CT1RUT006XG4gICAgICAgICAgICByZXR1cm4gYGxlZnQgY2FsYygxMDAlIC0gJHtvZmZzZXRZfXB4KWA7XG4gICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgICByZXR1cm4gdW5kZWZpbmVkO1xuICAgIH1cbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGdldEFycm93UG9zaXRpb25TdHlsZXMocG9zaXRpb246IFBvc2l0aW9uLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYXJyb3dTaXplOiBudW1iZXIsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZ25vcmVUYXJnZXREaW1lbnNpb25zOiBib29sZWFuLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdGFyZ2V0RGltZW5zaW9uczogSURpbWVuc2lvbnMsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbmxpbmU6IGJvb2xlYW4pOiBJQXJyb3dQb3NpdGlvblN0eWxlcyB7XG4gICAgLy8gY29tcHV0ZSB0aGUgb2Zmc2V0IHRvIGNlbnRlciBhbiBhcnJvdyB3aXRoIGdpdmVuIGh5cG90ZW51c2UgaW4gYSBzaWRlIG9mIHRoZSBnaXZlbiBsZW5ndGhcbiAgICBjb25zdCBwb3BvdmVyT2Zmc2V0ID0gKHNpZGVMZW5ndGg6IG51bWJlcikgPT4ge1xuICAgICAgICBjb25zdCBvZmZzZXQgPSBjb21wdXRlQXJyb3dPZmZzZXQoc2lkZUxlbmd0aCwgYXJyb3dTaXplLCAwKTtcbiAgICAgICAgcmV0dXJuIG9mZnNldCA8IE1JTl9BUlJPV19TUEFDSU5HID8gTUlOX0FSUk9XX1NQQUNJTkcgLSBvZmZzZXQgOiAwO1xuICAgIH07XG4gICAgY29uc3QgcG9wb3Zlck9mZnNldFggPSBwb3BvdmVyT2Zmc2V0KHRhcmdldERpbWVuc2lvbnMud2lkdGgpO1xuICAgIGNvbnN0IHBvcG92ZXJPZmZzZXRZID0gcG9wb3Zlck9mZnNldCh0YXJnZXREaW1lbnNpb25zLmhlaWdodCk7XG4gICAgLy8gVE9QLCBSSUdIVCwgQk9UVE9NLCBMRUZUIGFyZSBoYW5kbGVkIHB1cmVseSBpbiBDU1MgYmVjYXVzZSBvZiBjZW50ZXJpbmcgdHJhbnNmb3Jtc1xuICAgIHN3aXRjaCAocG9zaXRpb24pIHtcbiAgICAgICAgY2FzZSBQb3NpdGlvbi5UT1BfTEVGVDpcbiAgICAgICAgY2FzZSBQb3NpdGlvbi5CT1RUT01fTEVGVDpcbiAgICAgICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICAgICAgYXJyb3c6IGlnbm9yZVRhcmdldERpbWVuc2lvbnMgPyB7fSA6IHsgbGVmdDogY29tcHV0ZUFycm93T2Zmc2V0KHRhcmdldERpbWVuc2lvbnMud2lkdGgsIGFycm93U2l6ZSkgfSxcbiAgICAgICAgICAgICAgICBjb250YWluZXI6IHsgbWFyZ2luTGVmdDogLXBvcG92ZXJPZmZzZXRYIH0sXG4gICAgICAgICAgICB9O1xuICAgICAgICBjYXNlIFBvc2l0aW9uLlRPUF9SSUdIVDpcbiAgICAgICAgY2FzZSBQb3NpdGlvbi5CT1RUT01fUklHSFQ6XG4gICAgICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgICAgIGFycm93OiBpZ25vcmVUYXJnZXREaW1lbnNpb25zID8ge30gOiB7IHJpZ2h0OiBjb21wdXRlQXJyb3dPZmZzZXQodGFyZ2V0RGltZW5zaW9ucy53aWR0aCwgYXJyb3dTaXplKSB9LFxuICAgICAgICAgICAgICAgIGNvbnRhaW5lcjogeyBtYXJnaW5MZWZ0OiBwb3BvdmVyT2Zmc2V0WCB9LFxuICAgICAgICAgICAgfTtcbiAgICAgICAgY2FzZSBQb3NpdGlvbi5SSUdIVF9UT1A6XG4gICAgICAgIGNhc2UgUG9zaXRpb24uTEVGVF9UT1A6XG4gICAgICAgICAgICByZXR1cm4ge1xuICAgICAgICAgICAgICAgIGFycm93OiBpZ25vcmVUYXJnZXREaW1lbnNpb25zID8ge30gOiB7IHRvcDogY29tcHV0ZUFycm93T2Zmc2V0KHRhcmdldERpbWVuc2lvbnMuaGVpZ2h0LCBhcnJvd1NpemUpIH0sXG4gICAgICAgICAgICAgICAgY29udGFpbmVyOiBpbmxpbmUgPyB7IHRvcDogLXBvcG92ZXJPZmZzZXRZIH0gOiB7IG1hcmdpblRvcDogLXBvcG92ZXJPZmZzZXRZIH0sXG4gICAgICAgICAgICB9O1xuICAgICAgICBjYXNlIFBvc2l0aW9uLlJJR0hUX0JPVFRPTTpcbiAgICAgICAgY2FzZSBQb3NpdGlvbi5MRUZUX0JPVFRPTTpcbiAgICAgICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICAgICAgYXJyb3c6IGlnbm9yZVRhcmdldERpbWVuc2lvbnMgPyB7fSA6IHsgYm90dG9tOiBjb21wdXRlQXJyb3dPZmZzZXQodGFyZ2V0RGltZW5zaW9ucy5oZWlnaHQsIGFycm93U2l6ZSkgfSxcbiAgICAgICAgICAgICAgICBjb250YWluZXI6IGlubGluZSA/IHsgYm90dG9tOiAtcG9wb3Zlck9mZnNldFl9IDogeyBtYXJnaW5Ub3A6IHBvcG92ZXJPZmZzZXRZIH0sXG4gICAgICAgICAgICB9O1xuICAgICAgICBkZWZhdWx0OlxuICAgICAgICAgICAgcmV0dXJuIHt9O1xuICAgIH1cbn1cbiJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ==