utils.js 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.addObserveTarget = addObserveTarget;
  7. exports.getFixedBottom = getFixedBottom;
  8. exports.getFixedTop = getFixedTop;
  9. exports.getObserverEntities = getObserverEntities;
  10. exports.getTargetRect = getTargetRect;
  11. exports.removeObserveTarget = removeObserveTarget;
  12. var _addEventListener = _interopRequireDefault(require("../vc-util/Dom/addEventListener"));
  13. var _supportsPassive = _interopRequireDefault(require("../_util/supportsPassive"));
  14. function getTargetRect(target) {
  15. return target !== window ? target.getBoundingClientRect() : {
  16. top: 0,
  17. bottom: window.innerHeight
  18. };
  19. }
  20. function getFixedTop(placeholderRect, targetRect, offsetTop) {
  21. if (offsetTop !== undefined && targetRect.top > placeholderRect.top - offsetTop) {
  22. return `${offsetTop + targetRect.top}px`;
  23. }
  24. return undefined;
  25. }
  26. function getFixedBottom(placeholderRect, targetRect, offsetBottom) {
  27. if (offsetBottom !== undefined && targetRect.bottom < placeholderRect.bottom + offsetBottom) {
  28. const targetBottomOffset = window.innerHeight - targetRect.bottom;
  29. return `${offsetBottom + targetBottomOffset}px`;
  30. }
  31. return undefined;
  32. }
  33. // ======================== Observer ========================
  34. const TRIGGER_EVENTS = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load'];
  35. let observerEntities = [];
  36. function getObserverEntities() {
  37. // Only used in test env. Can be removed if refactor.
  38. return observerEntities;
  39. }
  40. function addObserveTarget(target, affix) {
  41. if (!target) return;
  42. let entity = observerEntities.find(item => item.target === target);
  43. if (entity) {
  44. entity.affixList.push(affix);
  45. } else {
  46. entity = {
  47. target,
  48. affixList: [affix],
  49. eventHandlers: {}
  50. };
  51. observerEntities.push(entity);
  52. // Add listener
  53. TRIGGER_EVENTS.forEach(eventName => {
  54. entity.eventHandlers[eventName] = (0, _addEventListener.default)(target, eventName, () => {
  55. entity.affixList.forEach(targetAffix => {
  56. const {
  57. lazyUpdatePosition
  58. } = targetAffix.exposed;
  59. lazyUpdatePosition();
  60. }, (eventName === 'touchstart' || eventName === 'touchmove') && _supportsPassive.default ? {
  61. passive: true
  62. } : false);
  63. });
  64. });
  65. }
  66. }
  67. function removeObserveTarget(affix) {
  68. const observerEntity = observerEntities.find(oriObserverEntity => {
  69. const hasAffix = oriObserverEntity.affixList.some(item => item === affix);
  70. if (hasAffix) {
  71. oriObserverEntity.affixList = oriObserverEntity.affixList.filter(item => item !== affix);
  72. }
  73. return hasAffix;
  74. });
  75. if (observerEntity && observerEntity.affixList.length === 0) {
  76. observerEntities = observerEntities.filter(item => item !== observerEntity);
  77. // Remove listener
  78. TRIGGER_EVENTS.forEach(eventName => {
  79. const handler = observerEntity.eventHandlers[eventName];
  80. if (handler && handler.remove) {
  81. handler.remove();
  82. }
  83. });
  84. }
  85. }