position.mjs 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import { isClient } from '@vueuse/core';
  2. const isInContainer = (el, container) => {
  3. if (!isClient || !el || !container)
  4. return false;
  5. const elRect = el.getBoundingClientRect();
  6. let containerRect;
  7. if (container instanceof Element) {
  8. containerRect = container.getBoundingClientRect();
  9. } else {
  10. containerRect = {
  11. top: 0,
  12. right: window.innerWidth,
  13. bottom: window.innerHeight,
  14. left: 0
  15. };
  16. }
  17. return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
  18. };
  19. const getOffsetTop = (el) => {
  20. let offset = 0;
  21. let parent = el;
  22. while (parent) {
  23. offset += parent.offsetTop;
  24. parent = parent.offsetParent;
  25. }
  26. return offset;
  27. };
  28. const getOffsetTopDistance = (el, containerEl) => {
  29. return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl));
  30. };
  31. const getClientXY = (event) => {
  32. let clientX;
  33. let clientY;
  34. if (event.type === "touchend") {
  35. clientY = event.changedTouches[0].clientY;
  36. clientX = event.changedTouches[0].clientX;
  37. } else if (event.type.startsWith("touch")) {
  38. clientY = event.touches[0].clientY;
  39. clientX = event.touches[0].clientX;
  40. } else {
  41. clientY = event.clientY;
  42. clientX = event.clientX;
  43. }
  44. return {
  45. clientX,
  46. clientY
  47. };
  48. };
  49. export { getClientXY, getOffsetTop, getOffsetTopDistance, isInContainer };
  50. //# sourceMappingURL=position.mjs.map