1 | import { toKebabCase, isFunction } from '@tarojs/shared';
|
2 |
|
3 | function generateMediaQueryStr(descriptor) {
|
4 | const mediaQueryArr = [];
|
5 | const descriptorMenu = ['width', 'minWidth', 'maxWidth', 'height', 'minHeight', 'maxHeight', 'orientation'];
|
6 | for (const item of descriptorMenu) {
|
7 | if (item !== 'orientation' &&
|
8 | descriptor[item] &&
|
9 | Number(descriptor[item]) >= 0) {
|
10 | mediaQueryArr.push(`(${(toKebabCase(item))}: ${Number(descriptor[item])}px)`);
|
11 | }
|
12 | if (item === 'orientation' && descriptor[item]) {
|
13 | mediaQueryArr.push(`(${toKebabCase(item)}: ${descriptor[item]})`);
|
14 | }
|
15 | }
|
16 | return mediaQueryArr.join(' and ');
|
17 | }
|
18 | class MediaQueryObserver {
|
19 |
|
20 | observe(descriptor, callback) {
|
21 | if (isFunction(callback)) {
|
22 |
|
23 | this._mediaQueryObserver = window.matchMedia(generateMediaQueryStr(descriptor));
|
24 |
|
25 | this._listener = (ev) => {
|
26 | callback({ matches: ev.matches });
|
27 | };
|
28 | callback({ matches: this._mediaQueryObserver.matches });
|
29 |
|
30 | if ('addEventListener' in this._mediaQueryObserver) {
|
31 | this._mediaQueryObserver.addEventListener('change', this._listener);
|
32 | }
|
33 | else {
|
34 |
|
35 | this._mediaQueryObserver.addListener(this._listener);
|
36 | }
|
37 | }
|
38 | }
|
39 |
|
40 | disconnect() {
|
41 | if (this._mediaQueryObserver && this._listener) {
|
42 |
|
43 | if ('removeEventListener' in this._mediaQueryObserver) {
|
44 | this._mediaQueryObserver.removeEventListener('change', this._listener);
|
45 | }
|
46 | else {
|
47 |
|
48 | this._mediaQueryObserver.removeListener(this._listener);
|
49 | }
|
50 | }
|
51 | }
|
52 | }
|
53 |
|
54 | export { MediaQueryObserver };
|
55 |
|