responsiveObserve.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { computed } from 'vue';
  3. import { useToken } from '../theme/internal';
  4. export const responsiveArray = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
  5. const getResponsiveMap = token => ({
  6. xs: `(max-width: ${token.screenXSMax}px)`,
  7. sm: `(min-width: ${token.screenSM}px)`,
  8. md: `(min-width: ${token.screenMD}px)`,
  9. lg: `(min-width: ${token.screenLG}px)`,
  10. xl: `(min-width: ${token.screenXL}px)`,
  11. xxl: `(min-width: ${token.screenXXL}px)`,
  12. xxxl: `{min-width: ${token.screenXXXL}px}`
  13. });
  14. export default function useResponsiveObserver() {
  15. const [, token] = useToken();
  16. return computed(() => {
  17. const responsiveMap = getResponsiveMap(token.value);
  18. const subscribers = new Map();
  19. let subUid = -1;
  20. let screens = {};
  21. return {
  22. matchHandlers: {},
  23. dispatch(pointMap) {
  24. screens = pointMap;
  25. subscribers.forEach(func => func(screens));
  26. return subscribers.size >= 1;
  27. },
  28. subscribe(func) {
  29. if (!subscribers.size) this.register();
  30. subUid += 1;
  31. subscribers.set(subUid, func);
  32. func(screens);
  33. return subUid;
  34. },
  35. unsubscribe(paramToken) {
  36. subscribers.delete(paramToken);
  37. if (!subscribers.size) this.unregister();
  38. },
  39. unregister() {
  40. Object.keys(responsiveMap).forEach(screen => {
  41. const matchMediaQuery = responsiveMap[screen];
  42. const handler = this.matchHandlers[matchMediaQuery];
  43. handler === null || handler === void 0 ? void 0 : handler.mql.removeListener(handler === null || handler === void 0 ? void 0 : handler.listener);
  44. });
  45. subscribers.clear();
  46. },
  47. register() {
  48. Object.keys(responsiveMap).forEach(screen => {
  49. const matchMediaQuery = responsiveMap[screen];
  50. const listener = _ref => {
  51. let {
  52. matches
  53. } = _ref;
  54. this.dispatch(_extends(_extends({}, screens), {
  55. [screen]: matches
  56. }));
  57. };
  58. const mql = window.matchMedia(matchMediaQuery);
  59. mql.addListener(listener);
  60. this.matchHandlers[matchMediaQuery] = {
  61. mql,
  62. listener
  63. };
  64. listener(mql);
  65. });
  66. },
  67. responsiveMap
  68. };
  69. });
  70. }