resize.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = exports.ResizeEvent = void 0;
  6. var _ctor = _interopRequireDefault(require("xe-utils/ctor"));
  7. var _conf = _interopRequireDefault(require("../../conf"));
  8. var _dom = _interopRequireDefault(require("./dom"));
  9. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  10. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  11. function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
  12. function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
  13. /**
  14. * 监听 resize 事件
  15. * 如果项目中已使用了 resize-observer-polyfill,那么只需要将方法定义全局,该组件就会自动使用
  16. */
  17. var resizeTimeout;
  18. var eventStore = [];
  19. var defaultInterval = 500;
  20. function eventHandle() {
  21. if (eventStore.length) {
  22. eventStore.forEach(function (item) {
  23. item.tarList.forEach(function (observer) {
  24. var target = observer.target,
  25. width = observer.width,
  26. heighe = observer.heighe;
  27. var clientWidth = target.clientWidth;
  28. var clientHeight = target.clientHeight;
  29. var rWidth = clientWidth && width !== clientWidth;
  30. var rHeight = clientHeight && heighe !== clientHeight;
  31. if (rWidth || rHeight) {
  32. observer.width = clientWidth;
  33. observer.heighe = clientHeight;
  34. requestAnimationFrame(item.callback);
  35. }
  36. });
  37. });
  38. /* eslint-disable @typescript-eslint/no-use-before-define */
  39. eventListener();
  40. }
  41. }
  42. function eventListener() {
  43. clearTimeout(resizeTimeout);
  44. resizeTimeout = setTimeout(eventHandle, _conf.default.resizeInterval || defaultInterval);
  45. }
  46. var ResizeObserverPolyfill = /*#__PURE__*/function () {
  47. function ResizeObserverPolyfill(callback) {
  48. _classCallCheck(this, ResizeObserverPolyfill);
  49. this.tarList = [];
  50. this.callback = callback;
  51. }
  52. _createClass(ResizeObserverPolyfill, [{
  53. key: "observe",
  54. value: function observe(target) {
  55. var _this = this;
  56. if (target) {
  57. if (!this.tarList.some(function (observer) {
  58. return observer.target === target;
  59. })) {
  60. this.tarList.push({
  61. target: target,
  62. width: target.clientWidth,
  63. heighe: target.clientHeight
  64. });
  65. }
  66. if (!eventStore.length) {
  67. eventListener();
  68. }
  69. if (!eventStore.some(function (item) {
  70. return item === _this;
  71. })) {
  72. eventStore.push(this);
  73. }
  74. }
  75. }
  76. }, {
  77. key: "unobserve",
  78. value: function unobserve(target) {
  79. _ctor.default.remove(eventStore, function (item) {
  80. return item.tarList.some(function (observer) {
  81. return observer.target === target;
  82. });
  83. });
  84. }
  85. }, {
  86. key: "disconnect",
  87. value: function disconnect() {
  88. var _this2 = this;
  89. _ctor.default.remove(eventStore, function (item) {
  90. return item === _this2;
  91. });
  92. }
  93. }]);
  94. return ResizeObserverPolyfill;
  95. }();
  96. var ResizeEvent = _dom.default.browse.isDoc ? window.ResizeObserver || ResizeObserverPolyfill : ResizeObserverPolyfill;
  97. exports.ResizeEvent = ResizeEvent;
  98. var _default = ResizeEvent;
  99. exports.default = _default;