130 lines
3.9 KiB
JavaScript
130 lines
3.9 KiB
JavaScript
|
/**
|
||
|
|
* Custom positioning reference element.
|
||
|
|
* @see https://floating-ui.com/docs/virtual-elements
|
||
|
|
*/
|
||
|
|
|
||
|
|
const sides = ['top', 'right', 'bottom', 'left'];
|
||
|
|
const alignments = ['start', 'end'];
|
||
|
|
const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
|
||
|
|
const min = Math.min;
|
||
|
|
const max = Math.max;
|
||
|
|
const round = Math.round;
|
||
|
|
const floor = Math.floor;
|
||
|
|
const createCoords = v => ({
|
||
|
|
x: v,
|
||
|
|
y: v
|
||
|
|
});
|
||
|
|
const oppositeSideMap = {
|
||
|
|
left: 'right',
|
||
|
|
right: 'left',
|
||
|
|
bottom: 'top',
|
||
|
|
top: 'bottom'
|
||
|
|
};
|
||
|
|
const oppositeAlignmentMap = {
|
||
|
|
start: 'end',
|
||
|
|
end: 'start'
|
||
|
|
};
|
||
|
|
function clamp(start, value, end) {
|
||
|
|
return max(start, min(value, end));
|
||
|
|
}
|
||
|
|
function evaluate(value, param) {
|
||
|
|
return typeof value === 'function' ? value(param) : value;
|
||
|
|
}
|
||
|
|
function getSide(placement) {
|
||
|
|
return placement.split('-')[0];
|
||
|
|
}
|
||
|
|
function getAlignment(placement) {
|
||
|
|
return placement.split('-')[1];
|
||
|
|
}
|
||
|
|
function getOppositeAxis(axis) {
|
||
|
|
return axis === 'x' ? 'y' : 'x';
|
||
|
|
}
|
||
|
|
function getAxisLength(axis) {
|
||
|
|
return axis === 'y' ? 'height' : 'width';
|
||
|
|
}
|
||
|
|
function getSideAxis(placement) {
|
||
|
|
return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
|
||
|
|
}
|
||
|
|
function getAlignmentAxis(placement) {
|
||
|
|
return getOppositeAxis(getSideAxis(placement));
|
||
|
|
}
|
||
|
|
function getAlignmentSides(placement, rects, rtl) {
|
||
|
|
if (rtl === void 0) {
|
||
|
|
rtl = false;
|
||
|
|
}
|
||
|
|
const alignment = getAlignment(placement);
|
||
|
|
const alignmentAxis = getAlignmentAxis(placement);
|
||
|
|
const length = getAxisLength(alignmentAxis);
|
||
|
|
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
||
|
|
if (rects.reference[length] > rects.floating[length]) {
|
||
|
|
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
||
|
|
}
|
||
|
|
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
||
|
|
}
|
||
|
|
function getExpandedPlacements(placement) {
|
||
|
|
const oppositePlacement = getOppositePlacement(placement);
|
||
|
|
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
||
|
|
}
|
||
|
|
function getOppositeAlignmentPlacement(placement) {
|
||
|
|
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
||
|
|
}
|
||
|
|
function getSideList(side, isStart, rtl) {
|
||
|
|
const lr = ['left', 'right'];
|
||
|
|
const rl = ['right', 'left'];
|
||
|
|
const tb = ['top', 'bottom'];
|
||
|
|
const bt = ['bottom', 'top'];
|
||
|
|
switch (side) {
|
||
|
|
case 'top':
|
||
|
|
case 'bottom':
|
||
|
|
if (rtl) return isStart ? rl : lr;
|
||
|
|
return isStart ? lr : rl;
|
||
|
|
case 'left':
|
||
|
|
case 'right':
|
||
|
|
return isStart ? tb : bt;
|
||
|
|
default:
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
||
|
|
const alignment = getAlignment(placement);
|
||
|
|
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
||
|
|
if (alignment) {
|
||
|
|
list = list.map(side => side + "-" + alignment);
|
||
|
|
if (flipAlignment) {
|
||
|
|
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return list;
|
||
|
|
}
|
||
|
|
function getOppositePlacement(placement) {
|
||
|
|
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
||
|
|
}
|
||
|
|
function expandPaddingObject(padding) {
|
||
|
|
return {
|
||
|
|
top: 0,
|
||
|
|
right: 0,
|
||
|
|
bottom: 0,
|
||
|
|
left: 0,
|
||
|
|
...padding
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function getPaddingObject(padding) {
|
||
|
|
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
||
|
|
top: padding,
|
||
|
|
right: padding,
|
||
|
|
bottom: padding,
|
||
|
|
left: padding
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function rectToClientRect(rect) {
|
||
|
|
return {
|
||
|
|
...rect,
|
||
|
|
top: rect.y,
|
||
|
|
left: rect.x,
|
||
|
|
right: rect.x + rect.width,
|
||
|
|
bottom: rect.y + rect.height
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export { alignments, clamp, createCoords, evaluate, expandPaddingObject, floor, getAlignment, getAlignmentAxis, getAlignmentSides, getAxisLength, getExpandedPlacements, getOppositeAlignmentPlacement, getOppositeAxis, getOppositeAxisPlacements, getOppositePlacement, getPaddingObject, getSide, getSideAxis, max, min, placements, rectToClientRect, round, sides };
|