popper.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.82
  5. */
  6. import { createPopper as setupPopper } from "@popperjs/core";
  7. import { getElementDir } from "./dom";
  8. export const popperPlacements = [
  9. "auto",
  10. "auto-start",
  11. "auto-end",
  12. "top",
  13. "top-start",
  14. "top-end",
  15. "bottom",
  16. "bottom-start",
  17. "bottom-end",
  18. "right",
  19. "right-start",
  20. "right-end",
  21. "left",
  22. "left-start",
  23. "left-end",
  24. "leading-start",
  25. "leading",
  26. "leading-end",
  27. "trailing-end",
  28. "trailing",
  29. "trailing-start",
  30. "leading-leading",
  31. "leading-trailing",
  32. "trailing-leading",
  33. "trailing-trailing",
  34. "top-leading",
  35. "top-trailing",
  36. "bottom-leading",
  37. "bottom-trailing",
  38. "right-leading",
  39. "right-trailing",
  40. "left-leading",
  41. "left-trailing"
  42. ];
  43. export const popperComputedPlacements = [
  44. "top",
  45. "bottom",
  46. "right",
  47. "left",
  48. "top-start",
  49. "top-end",
  50. "bottom-start",
  51. "bottom-end",
  52. "right-start",
  53. "right-end",
  54. "left-start",
  55. "left-end"
  56. ];
  57. export const defaultMenuPlacement = "bottom-leading";
  58. export const popperMenuPlacements = [
  59. "top-start",
  60. "top",
  61. "top-end",
  62. "bottom-start",
  63. "bottom",
  64. "bottom-end",
  65. "top-leading",
  66. "top-trailing",
  67. "bottom-leading",
  68. "bottom-trailing"
  69. ];
  70. export const popperMenuComputedPlacements = [
  71. "top-start",
  72. "top",
  73. "top-end",
  74. "bottom-start",
  75. "bottom",
  76. "bottom-end"
  77. ];
  78. export const CSS = {
  79. animation: "calcite-popper-anim",
  80. animationActive: "calcite-popper-anim--active"
  81. };
  82. export function filterComputedPlacements(placements, el) {
  83. const filteredPlacements = placements.filter((placement) => popperComputedPlacements.includes(placement));
  84. if (filteredPlacements.length !== placements.length) {
  85. console.warn(`${el.tagName}: Invalid value found in: flipPlacements. Try any of these: ${popperComputedPlacements
  86. .map((placement) => `"${placement}"`)
  87. .join(", ")
  88. .trim()}`, { el });
  89. }
  90. return filteredPlacements;
  91. }
  92. export function getPlacement(el, placement) {
  93. const placements = ["left", "right"];
  94. const variations = ["start", "end"];
  95. if (getElementDir(el) === "rtl") {
  96. placements.reverse();
  97. variations.reverse();
  98. }
  99. return placement
  100. .replace(/-leading/gi, `-${variations[0]}`)
  101. .replace(/-trailing/gi, `-${variations[1]}`)
  102. .replace(/leading/gi, placements[0])
  103. .replace(/trailing/gi, placements[1]);
  104. }
  105. export function createPopper({ referenceEl, el, placement, overlayPositioning = "absolute", modifiers }) {
  106. if (!referenceEl) {
  107. return null;
  108. }
  109. return setupPopper(referenceEl, el, {
  110. strategy: overlayPositioning,
  111. placement: getPlacement(el, placement),
  112. modifiers
  113. });
  114. }
  115. export async function updatePopper({ el, modifiers, placement: PopperPlacement, popper }) {
  116. const placement = getPlacement(el, PopperPlacement);
  117. await popper.setOptions({
  118. modifiers,
  119. placement
  120. });
  121. }
  122. export function hypotenuse(sideA, sideB) {
  123. return Math.sqrt(Math.pow(sideA, 2) + Math.pow(sideB, 2));
  124. }
  125. const visiblePointerSize = 4;
  126. export const defaultOffsetDistance = Math.ceil(hypotenuse(visiblePointerSize, visiblePointerSize));