resize.js 3.6 KB

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