You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

168 lines
5.6 KiB

2 months ago
  1. import { top, left, right, bottom, end } from "../enums.js";
  2. import getOffsetParent from "../dom-utils/getOffsetParent.js";
  3. import getWindow from "../dom-utils/getWindow.js";
  4. import getDocumentElement from "../dom-utils/getDocumentElement.js";
  5. import getComputedStyle from "../dom-utils/getComputedStyle.js";
  6. import getBasePlacement from "../utils/getBasePlacement.js";
  7. import getVariation from "../utils/getVariation.js";
  8. import { round } from "../utils/math.js"; // eslint-disable-next-line import/no-unused-modules
  9. var unsetSides = {
  10. top: 'auto',
  11. right: 'auto',
  12. bottom: 'auto',
  13. left: 'auto'
  14. }; // Round the offsets to the nearest suitable subpixel based on the DPR.
  15. // Zooming can change the DPR, but it seems to report a value that will
  16. // cleanly divide the values into the appropriate subpixels.
  17. function roundOffsetsByDPR(_ref, win) {
  18. var x = _ref.x,
  19. y = _ref.y;
  20. var dpr = win.devicePixelRatio || 1;
  21. return {
  22. x: round(x * dpr) / dpr || 0,
  23. y: round(y * dpr) / dpr || 0
  24. };
  25. }
  26. export function mapToStyles(_ref2) {
  27. var _Object$assign2;
  28. var popper = _ref2.popper,
  29. popperRect = _ref2.popperRect,
  30. placement = _ref2.placement,
  31. variation = _ref2.variation,
  32. offsets = _ref2.offsets,
  33. position = _ref2.position,
  34. gpuAcceleration = _ref2.gpuAcceleration,
  35. adaptive = _ref2.adaptive,
  36. roundOffsets = _ref2.roundOffsets,
  37. isFixed = _ref2.isFixed;
  38. var _offsets$x = offsets.x,
  39. x = _offsets$x === void 0 ? 0 : _offsets$x,
  40. _offsets$y = offsets.y,
  41. y = _offsets$y === void 0 ? 0 : _offsets$y;
  42. var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
  43. x: x,
  44. y: y
  45. }) : {
  46. x: x,
  47. y: y
  48. };
  49. x = _ref3.x;
  50. y = _ref3.y;
  51. var hasX = offsets.hasOwnProperty('x');
  52. var hasY = offsets.hasOwnProperty('y');
  53. var sideX = left;
  54. var sideY = top;
  55. var win = window;
  56. if (adaptive) {
  57. var offsetParent = getOffsetParent(popper);
  58. var heightProp = 'clientHeight';
  59. var widthProp = 'clientWidth';
  60. if (offsetParent === getWindow(popper)) {
  61. offsetParent = getDocumentElement(popper);
  62. if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
  63. heightProp = 'scrollHeight';
  64. widthProp = 'scrollWidth';
  65. }
  66. } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
  67. offsetParent = offsetParent;
  68. if (placement === top || (placement === left || placement === right) && variation === end) {
  69. sideY = bottom;
  70. var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
  71. offsetParent[heightProp];
  72. y -= offsetY - popperRect.height;
  73. y *= gpuAcceleration ? 1 : -1;
  74. }
  75. if (placement === left || (placement === top || placement === bottom) && variation === end) {
  76. sideX = right;
  77. var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
  78. offsetParent[widthProp];
  79. x -= offsetX - popperRect.width;
  80. x *= gpuAcceleration ? 1 : -1;
  81. }
  82. }
  83. var commonStyles = Object.assign({
  84. position: position
  85. }, adaptive && unsetSides);
  86. var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
  87. x: x,
  88. y: y
  89. }, getWindow(popper)) : {
  90. x: x,
  91. y: y
  92. };
  93. x = _ref4.x;
  94. y = _ref4.y;
  95. if (gpuAcceleration) {
  96. var _Object$assign;
  97. return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
  98. }
  99. return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
  100. }
  101. function computeStyles(_ref5) {
  102. var state = _ref5.state,
  103. options = _ref5.options;
  104. var _options$gpuAccelerat = options.gpuAcceleration,
  105. gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
  106. _options$adaptive = options.adaptive,
  107. adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
  108. _options$roundOffsets = options.roundOffsets,
  109. roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
  110. var commonStyles = {
  111. placement: getBasePlacement(state.placement),
  112. variation: getVariation(state.placement),
  113. popper: state.elements.popper,
  114. popperRect: state.rects.popper,
  115. gpuAcceleration: gpuAcceleration,
  116. isFixed: state.options.strategy === 'fixed'
  117. };
  118. if (state.modifiersData.popperOffsets != null) {
  119. state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
  120. offsets: state.modifiersData.popperOffsets,
  121. position: state.options.strategy,
  122. adaptive: adaptive,
  123. roundOffsets: roundOffsets
  124. })));
  125. }
  126. if (state.modifiersData.arrow != null) {
  127. state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
  128. offsets: state.modifiersData.arrow,
  129. position: 'absolute',
  130. adaptive: false,
  131. roundOffsets: roundOffsets
  132. })));
  133. }
  134. state.attributes.popper = Object.assign({}, state.attributes.popper, {
  135. 'data-popper-placement': state.placement
  136. });
  137. } // eslint-disable-next-line import/no-unused-modules
  138. export default {
  139. name: 'computeStyles',
  140. enabled: true,
  141. phase: 'beforeWrite',
  142. fn: computeStyles,
  143. data: {}
  144. };