responsiveObserve.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. export var responsiveArray = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
  4. export var responsiveMap = {
  5. xs: '(max-width: 575px)',
  6. sm: '(min-width: 576px)',
  7. md: '(min-width: 768px)',
  8. lg: '(min-width: 992px)',
  9. xl: '(min-width: 1200px)',
  10. xxl: '(min-width: 1600px)',
  11. xxxl: '(min-width: 2000px)'
  12. };
  13. var subscribers = new Map();
  14. var subUid = -1;
  15. var screens = {};
  16. var responsiveObserve = {
  17. matchHandlers: {},
  18. dispatch: function dispatch(pointMap) {
  19. screens = pointMap;
  20. subscribers.forEach(function (func) {
  21. return func(screens);
  22. });
  23. return subscribers.size >= 1;
  24. },
  25. subscribe: function subscribe(func) {
  26. if (!subscribers.size) this.register();
  27. subUid += 1;
  28. subscribers.set(subUid, func);
  29. func(screens);
  30. return subUid;
  31. },
  32. unsubscribe: function unsubscribe(token) {
  33. subscribers.delete(token);
  34. if (!subscribers.size) this.unregister();
  35. },
  36. unregister: function unregister() {
  37. var _this = this;
  38. Object.keys(responsiveMap).forEach(function (screen) {
  39. var matchMediaQuery = responsiveMap[screen];
  40. var handler = _this.matchHandlers[matchMediaQuery];
  41. handler === null || handler === void 0 ? void 0 : handler.mql.removeListener(handler === null || handler === void 0 ? void 0 : handler.listener);
  42. });
  43. subscribers.clear();
  44. },
  45. register: function register() {
  46. var _this2 = this;
  47. Object.keys(responsiveMap).forEach(function (screen) {
  48. var matchMediaQuery = responsiveMap[screen];
  49. var listener = function listener(_ref) {
  50. var matches = _ref.matches;
  51. _this2.dispatch(_objectSpread(_objectSpread({}, screens), {}, _defineProperty({}, screen, matches)));
  52. };
  53. var mql = window.matchMedia(matchMediaQuery);
  54. mql.addListener(listener);
  55. _this2.matchHandlers[matchMediaQuery] = {
  56. mql: mql,
  57. listener: listener
  58. };
  59. listener(mql);
  60. });
  61. }
  62. };
  63. export default responsiveObserve;