@rhtml/custom-attributes 0.0.109 → 0.0.112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +90 -0
- package/dist/index.d.ts +35 -1
- package/dist/index.js +109 -9
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +143 -14
package/README.md
CHANGED
|
@@ -306,3 +306,93 @@ By changing `delay` attribute because we use `observe: true` method `OnUpdateAtt
|
|
|
306
306
|
My Animated Element
|
|
307
307
|
</h2>
|
|
308
308
|
```
|
|
309
|
+
|
|
310
|
+
#### Media query matcher
|
|
311
|
+
|
|
312
|
+
By extending `MediaQueryAttribute` we gain two more events to handle media matches `OnEnterMediaQuery` and `OnExitMediaQuery`
|
|
313
|
+
|
|
314
|
+
For example when we define attribute selector `color` we can use available media breakpoints `xs`, `sm`, `md`,`lg`,`xl`.
|
|
315
|
+
|
|
316
|
+
Extending `MediaQueryAttribute` will help you to track values from specific resolutions
|
|
317
|
+
|
|
318
|
+
```typescript
|
|
319
|
+
import {
|
|
320
|
+
EnterMediaQueryAttributes,
|
|
321
|
+
ExitMediaQueryAttributes,
|
|
322
|
+
MediaQueryAttribute,
|
|
323
|
+
Modifier
|
|
324
|
+
} from '@rhtml/custom-attributes';
|
|
325
|
+
|
|
326
|
+
interface Styles {
|
|
327
|
+
color: string;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
@Modifier({
|
|
331
|
+
selector: 'color'
|
|
332
|
+
})
|
|
333
|
+
export class Color extends MediaQueryAttribute<Styles> {
|
|
334
|
+
OnInit() {
|
|
335
|
+
this.modify();
|
|
336
|
+
/* Executing media matcher init */
|
|
337
|
+
super.OnInit();
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
OnDestroy() {
|
|
341
|
+
this.clean();
|
|
342
|
+
/* Executing media matcher destroy */
|
|
343
|
+
super.OnDestroy();
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
OnUpdate() {
|
|
347
|
+
this.modify();
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
OnEnterMediaQuery([event, attribute]: EnterMediaQueryAttributes) {
|
|
351
|
+
console.log(event, attribute.value);
|
|
352
|
+
this.prevValue = this.value;
|
|
353
|
+
this.value = attribute.value ?? this.value;
|
|
354
|
+
this.modify();
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
OnExitMediaQuery([event, selector]: ExitMediaQueryAttributes) {
|
|
358
|
+
this.value = this.prevValue ?? this.originalValue;
|
|
359
|
+
this.modify();
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
clean() {
|
|
363
|
+
this.setStyles({ color: null })(this.element);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
modify() {
|
|
367
|
+
this.setStyles({ color: this.value || null })(this.element);
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
```
|
|
371
|
+
|
|
372
|
+
##### Usage
|
|
373
|
+
|
|
374
|
+
```html
|
|
375
|
+
<div color="red" color.xs="green" color.md="gray">
|
|
376
|
+
My text
|
|
377
|
+
</div>
|
|
378
|
+
```
|
|
379
|
+
|
|
380
|
+
##### Available breakpoints
|
|
381
|
+
|
|
382
|
+
| Breakpoint | Media Query |
|
|
383
|
+
| ---------- | ------------------------------------------------------ |
|
|
384
|
+
| xs | screen and (max-width: 599px) |
|
|
385
|
+
| sm | screen and (min-width: 600px) and (max-width: 959px) |
|
|
386
|
+
| md | screen and (min-width: 960px) and (max-width: 1279px) |
|
|
387
|
+
| lg | screen and (min-width: 1280px) and (max-width: 1919px) |
|
|
388
|
+
| xl | screen and (min-width: 1920px) and (max-width: 5000px) |
|
|
389
|
+
| | |
|
|
390
|
+
| lt-sm | screen and (max-width: 599px) (use xs) |
|
|
391
|
+
| lt-md | screen and (max-width: 959px) |
|
|
392
|
+
| lt-lg | screen and (max-width: 1279px) |
|
|
393
|
+
| lt-xl | screen and (max-width: 1919px) |
|
|
394
|
+
| | |
|
|
395
|
+
| gt-xs | screen and (min-width: 600px) |
|
|
396
|
+
| gt-sm | screen and (min-width: 960px) |
|
|
397
|
+
| gt-md | screen and (min-width: 1280px) |
|
|
398
|
+
| gt-lg | screen and (min-width: 1920px) |
|
package/dist/index.d.ts
CHANGED
|
@@ -17,13 +17,22 @@ interface InputOptions {
|
|
|
17
17
|
* Decorator @Input
|
|
18
18
|
* Used to get attribute from element
|
|
19
19
|
*/
|
|
20
|
-
export declare const Input: (options?: InputOptions) => (target:
|
|
20
|
+
export declare const Input: (options?: InputOptions) => (target: any, memberName: string) => void;
|
|
21
21
|
/**
|
|
22
22
|
* Decorator @Modifier
|
|
23
23
|
* Accepts parameter options with selector and registry
|
|
24
24
|
*/
|
|
25
25
|
export declare const Modifier: (options: ModifierOptions) => (target: Function) => void;
|
|
26
|
+
/**
|
|
27
|
+
* Decorator @CustomAttribute
|
|
28
|
+
* Accepts parameter options with selector and registry
|
|
29
|
+
*/
|
|
26
30
|
export declare const CustomAttribute: (options: ModifierOptions) => (target: Function) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Decorator @Directive
|
|
33
|
+
* Accepts parameter options with selector and registry
|
|
34
|
+
*/
|
|
35
|
+
export declare const Directive: (options: ModifierOptions) => (target: Function) => void;
|
|
27
36
|
export declare abstract class Attribute<T = {}> {
|
|
28
37
|
static options: ModifierOptions;
|
|
29
38
|
element?: HTMLElement;
|
|
@@ -36,6 +45,31 @@ export declare abstract class Attribute<T = {}> {
|
|
|
36
45
|
OnUpdate(_oldValue: string, _newValue: string): void;
|
|
37
46
|
OnUpdateAttribute(_name: string, _value: string): void;
|
|
38
47
|
}
|
|
48
|
+
/**
|
|
49
|
+
* Media query Attribute
|
|
50
|
+
* for performance reasons it is key value pair
|
|
51
|
+
*/
|
|
52
|
+
export declare const MediaMatchers: Map<string, string>;
|
|
53
|
+
declare type MediaEvent = MediaQueryList | MediaQueryListEvent;
|
|
54
|
+
export declare type EnterMediaQueryAttributes = [MediaEvent, Attr];
|
|
55
|
+
export declare type ExitMediaQueryAttributes = [MediaEvent, string];
|
|
56
|
+
export interface OnUpdateMediaQuery {
|
|
57
|
+
OnEnterMediaQuery(tuple: [MediaEvent, Attr]): void;
|
|
58
|
+
OnExitMediaQuery(tuple: [MediaEvent, string]): void;
|
|
59
|
+
}
|
|
60
|
+
export declare const Breakpoints: string[];
|
|
61
|
+
export declare const createFiltersFromSelector: (selector: string) => string[];
|
|
62
|
+
export declare abstract class MediaQueryAttribute<T> extends Attribute<T> implements OnUpdateMediaQuery {
|
|
63
|
+
prevValue: string;
|
|
64
|
+
originalValue: string;
|
|
65
|
+
private matchers;
|
|
66
|
+
private cachedAttributes;
|
|
67
|
+
listener: (event: MediaQueryList | MediaQueryListEvent) => void;
|
|
68
|
+
OnInit(): void;
|
|
69
|
+
OnDestroy(): void;
|
|
70
|
+
abstract OnEnterMediaQuery(tuple: [MediaEvent, Attr]): void;
|
|
71
|
+
abstract OnExitMediaQuery(tuple: [MediaEvent, string]): void;
|
|
72
|
+
}
|
|
39
73
|
export declare class CustomAttributeRegistry {
|
|
40
74
|
private parent;
|
|
41
75
|
private _attrMap;
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.CustomAttributeRegistry = exports.Attribute = exports.CustomAttribute = exports.Modifier = exports.Input = void 0;
|
|
3
|
+
exports.CustomAttributeRegistry = exports.MediaQueryAttribute = exports.createFiltersFromSelector = exports.Breakpoints = exports.MediaMatchers = exports.Attribute = exports.Directive = exports.CustomAttribute = exports.Modifier = exports.Input = void 0;
|
|
4
4
|
const noop = function () {
|
|
5
5
|
/* */
|
|
6
6
|
};
|
|
7
7
|
const observe = (target, memberName) => {
|
|
8
8
|
const prototype = target.constructor.prototype;
|
|
9
9
|
const OnInit = prototype.OnInit || noop;
|
|
10
|
-
const OnDestroy = prototype.
|
|
10
|
+
const OnDestroy = prototype.OnDestroy || noop;
|
|
11
11
|
const OnUpdateAttribute = prototype.OnUpdateAttribute || noop;
|
|
12
12
|
let observer;
|
|
13
13
|
prototype.OnInit = function () {
|
|
@@ -16,7 +16,10 @@ const observe = (target, memberName) => {
|
|
|
16
16
|
if (observer) {
|
|
17
17
|
observer.disconnect();
|
|
18
18
|
}
|
|
19
|
-
observer = new MutationObserver(() =>
|
|
19
|
+
observer = new MutationObserver(() => {
|
|
20
|
+
OnUpdateAttribute.call(this, memberName, element.getAttribute(memberName));
|
|
21
|
+
target[memberName] = element.getAttribute(memberName);
|
|
22
|
+
});
|
|
20
23
|
observer.observe(element, {
|
|
21
24
|
attributeFilter: [memberName],
|
|
22
25
|
attributes: true
|
|
@@ -33,12 +36,26 @@ const observe = (target, memberName) => {
|
|
|
33
36
|
* Used to get attribute from element
|
|
34
37
|
*/
|
|
35
38
|
exports.Input = (options) => (target, memberName) => {
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
const OnInit = target.OnInit || noop;
|
|
40
|
+
Object.defineProperty(target, 'OnInit', {
|
|
41
|
+
value() {
|
|
38
42
|
var _a;
|
|
43
|
+
let originalValue = this[memberName];
|
|
39
44
|
const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
|
|
40
|
-
|
|
41
|
-
|
|
45
|
+
Object.defineProperty(this, memberName, {
|
|
46
|
+
get: function () {
|
|
47
|
+
originalValue = element.getAttribute(memberName.toLowerCase());
|
|
48
|
+
return originalValue;
|
|
49
|
+
},
|
|
50
|
+
set(value) {
|
|
51
|
+
element.setAttribute(memberName.toLowerCase(), value);
|
|
52
|
+
originalValue = value;
|
|
53
|
+
},
|
|
54
|
+
configurable: true
|
|
55
|
+
});
|
|
56
|
+
return OnInit.call(this);
|
|
57
|
+
},
|
|
58
|
+
configurable: true
|
|
42
59
|
});
|
|
43
60
|
if (options === null || options === void 0 ? void 0 : options.observe) {
|
|
44
61
|
observe(target, memberName);
|
|
@@ -53,8 +70,17 @@ exports.Modifier = (options) => {
|
|
|
53
70
|
target['options'] = options;
|
|
54
71
|
};
|
|
55
72
|
};
|
|
56
|
-
|
|
73
|
+
/**
|
|
74
|
+
* Decorator @CustomAttribute
|
|
75
|
+
* Accepts parameter options with selector and registry
|
|
76
|
+
*/
|
|
57
77
|
exports.CustomAttribute = exports.Modifier;
|
|
78
|
+
/**
|
|
79
|
+
* Decorator @Directive
|
|
80
|
+
* Accepts parameter options with selector and registry
|
|
81
|
+
*/
|
|
82
|
+
exports.Directive = exports.Modifier;
|
|
83
|
+
/* */
|
|
58
84
|
class Attribute {
|
|
59
85
|
setStyles(keys) {
|
|
60
86
|
return (div) => {
|
|
@@ -79,11 +105,76 @@ class Attribute {
|
|
|
79
105
|
}
|
|
80
106
|
}
|
|
81
107
|
exports.Attribute = Attribute;
|
|
108
|
+
/**
|
|
109
|
+
* Media query Attribute
|
|
110
|
+
* for performance reasons it is key value pair
|
|
111
|
+
*/
|
|
112
|
+
exports.MediaMatchers = new Map([
|
|
113
|
+
['screen and (max-width: 599px)', 'xs'],
|
|
114
|
+
['screen and (min-width: 600px) and (max-width: 959px)', 'sm'],
|
|
115
|
+
['screen and (min-width: 960px) and (max-width: 1279px)', 'md'],
|
|
116
|
+
['screen and (min-width: 1280px) and (max-width: 1919px)', 'lg'],
|
|
117
|
+
['screen and (min-width: 1920px) and (max-width: 5000px)', 'xl'],
|
|
118
|
+
['screen and (max-width: 959px)', 'lt-md'],
|
|
119
|
+
['screen and (max-width: 1279px)', 'lt-lg'],
|
|
120
|
+
['screen and (max-width: 1919px)', 'lt-xl'],
|
|
121
|
+
['screen and (min-width: 600px)', 'gt-xs'],
|
|
122
|
+
['screen and (min-width: 960px)', 'gt-sm'],
|
|
123
|
+
['screen and (min-width: 1280px)', 'gt-md'],
|
|
124
|
+
['screen and (min-width: 1920px)', 'gt-lg']
|
|
125
|
+
]);
|
|
126
|
+
exports.Breakpoints = [...exports.MediaMatchers.values()];
|
|
127
|
+
exports.createFiltersFromSelector = (selector) => [
|
|
128
|
+
...exports.Breakpoints.map(breakpoint => `${selector}.${breakpoint}`),
|
|
129
|
+
selector
|
|
130
|
+
];
|
|
131
|
+
class MediaQueryAttribute extends Attribute {
|
|
132
|
+
constructor() {
|
|
133
|
+
super(...arguments);
|
|
134
|
+
this.matchers = new Map();
|
|
135
|
+
this.cachedAttributes = new Map();
|
|
136
|
+
this.listener = (event) => {
|
|
137
|
+
const key = `${this.selector.toLowerCase()}.${exports.MediaMatchers.get(event.media)}`;
|
|
138
|
+
const attribute = this.cachedAttributes.get(key);
|
|
139
|
+
if (event.matches && attribute) {
|
|
140
|
+
return this.OnEnterMediaQuery([event, attribute]);
|
|
141
|
+
}
|
|
142
|
+
return this.OnExitMediaQuery([event, key]);
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
OnInit() {
|
|
146
|
+
if (this.OnEnterMediaQuery || this.OnExitMediaQuery) {
|
|
147
|
+
this.originalValue = this.value;
|
|
148
|
+
for (const query of exports.MediaMatchers.keys()) {
|
|
149
|
+
const matcher = window.matchMedia(query);
|
|
150
|
+
const attr = Object.values(this.element.attributes).find(v => v.name ===
|
|
151
|
+
`${this.selector.toLowerCase()}.${exports.MediaMatchers.get(query)}`);
|
|
152
|
+
if (attr) {
|
|
153
|
+
this.cachedAttributes.set(attr.name, attr);
|
|
154
|
+
matcher.addEventListener('change', this.listener);
|
|
155
|
+
}
|
|
156
|
+
if (attr && matcher.matches) {
|
|
157
|
+
this.listener(matcher);
|
|
158
|
+
}
|
|
159
|
+
this.matchers.set(matcher, matcher);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
OnDestroy() {
|
|
164
|
+
for (const matcher of this.matchers.values()) {
|
|
165
|
+
matcher.removeEventListener('change', this.listener);
|
|
166
|
+
}
|
|
167
|
+
this.cachedAttributes.clear();
|
|
168
|
+
this.matchers.clear();
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
exports.MediaQueryAttribute = MediaQueryAttribute;
|
|
172
|
+
/* Media query Attribute END */
|
|
82
173
|
class CustomAttributeRegistry {
|
|
83
174
|
constructor(parent) {
|
|
84
175
|
this.parent = parent;
|
|
85
176
|
this._attrMap = new Map();
|
|
86
|
-
this._elementMap = new
|
|
177
|
+
this._elementMap = new Map();
|
|
87
178
|
if (!parent) {
|
|
88
179
|
throw new Error('Must be given a parent element');
|
|
89
180
|
}
|
|
@@ -132,6 +223,15 @@ class CustomAttributeRegistry {
|
|
|
132
223
|
unsubscribe() {
|
|
133
224
|
var _a;
|
|
134
225
|
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
226
|
+
const values = [...this._elementMap.values()];
|
|
227
|
+
for (const elModifiers of values) {
|
|
228
|
+
const modifiers = [...elModifiers.values()];
|
|
229
|
+
for (const modifier of modifiers) {
|
|
230
|
+
modifier.OnDestroy();
|
|
231
|
+
}
|
|
232
|
+
elModifiers.clear();
|
|
233
|
+
}
|
|
234
|
+
this._elementMap.clear();
|
|
135
235
|
}
|
|
136
236
|
upgradeAttribute(attrName, doc) {
|
|
137
237
|
const parent = doc || this.parent;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAMA,MAAM,IAAI,GAAG;IACX,MAAM;AACR,CAAC,CAAC;AAeF,MAAM,OAAO,GAAG,CAAC,MAAe,EAAE,UAAkB,EAAE,EAAE;IACtD,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC;IACxC,MAAM,SAAS,GAAG,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -24,7 +24,7 @@ interface InputOptions {
|
|
|
24
24
|
const observe = (target: unknown, memberName: string) => {
|
|
25
25
|
const prototype = target.constructor.prototype;
|
|
26
26
|
const OnInit = prototype.OnInit || noop;
|
|
27
|
-
const OnDestroy = prototype.
|
|
27
|
+
const OnDestroy = prototype.OnDestroy || noop;
|
|
28
28
|
const OnUpdateAttribute = prototype.OnUpdateAttribute || noop;
|
|
29
29
|
|
|
30
30
|
let observer: MutationObserver;
|
|
@@ -33,9 +33,14 @@ const observe = (target: unknown, memberName: string) => {
|
|
|
33
33
|
if (observer) {
|
|
34
34
|
observer.disconnect();
|
|
35
35
|
}
|
|
36
|
-
observer = new MutationObserver(() =>
|
|
37
|
-
OnUpdateAttribute.call(
|
|
38
|
-
|
|
36
|
+
observer = new MutationObserver(() => {
|
|
37
|
+
OnUpdateAttribute.call(
|
|
38
|
+
this,
|
|
39
|
+
memberName,
|
|
40
|
+
element.getAttribute(memberName)
|
|
41
|
+
);
|
|
42
|
+
target[memberName] = element.getAttribute(memberName);
|
|
43
|
+
});
|
|
39
44
|
observer.observe(element, {
|
|
40
45
|
attributeFilter: [memberName],
|
|
41
46
|
attributes: true
|
|
@@ -53,15 +58,31 @@ const observe = (target: unknown, memberName: string) => {
|
|
|
53
58
|
* Used to get attribute from element
|
|
54
59
|
*/
|
|
55
60
|
export const Input = (options?: InputOptions) => (
|
|
56
|
-
target
|
|
61
|
+
target,
|
|
57
62
|
memberName: string
|
|
58
63
|
) => {
|
|
59
|
-
|
|
60
|
-
|
|
64
|
+
const OnInit = target.OnInit || noop;
|
|
65
|
+
Object.defineProperty(target, 'OnInit', {
|
|
66
|
+
value() {
|
|
67
|
+
let originalValue = this[memberName];
|
|
68
|
+
|
|
61
69
|
const element = this.element ?? this;
|
|
62
|
-
|
|
63
|
-
|
|
70
|
+
Object.defineProperty(this, memberName, {
|
|
71
|
+
get: function() {
|
|
72
|
+
originalValue = element.getAttribute(memberName.toLowerCase());
|
|
73
|
+
return originalValue;
|
|
74
|
+
},
|
|
75
|
+
set(value) {
|
|
76
|
+
element.setAttribute(memberName.toLowerCase(), value);
|
|
77
|
+
originalValue = value;
|
|
78
|
+
},
|
|
79
|
+
configurable: true
|
|
80
|
+
});
|
|
81
|
+
return OnInit.call(this);
|
|
82
|
+
},
|
|
83
|
+
configurable: true
|
|
64
84
|
});
|
|
85
|
+
|
|
65
86
|
if (options?.observe) {
|
|
66
87
|
observe(target, memberName);
|
|
67
88
|
}
|
|
@@ -77,9 +98,18 @@ export const Modifier = (options: ModifierOptions) => {
|
|
|
77
98
|
};
|
|
78
99
|
};
|
|
79
100
|
|
|
80
|
-
|
|
101
|
+
/**
|
|
102
|
+
* Decorator @CustomAttribute
|
|
103
|
+
* Accepts parameter options with selector and registry
|
|
104
|
+
*/
|
|
81
105
|
export const CustomAttribute = Modifier;
|
|
106
|
+
/**
|
|
107
|
+
* Decorator @Directive
|
|
108
|
+
* Accepts parameter options with selector and registry
|
|
109
|
+
*/
|
|
110
|
+
export const Directive = Modifier;
|
|
82
111
|
|
|
112
|
+
/* */
|
|
83
113
|
export abstract class Attribute<T = {}> {
|
|
84
114
|
public static options: ModifierOptions;
|
|
85
115
|
public element?: HTMLElement;
|
|
@@ -109,12 +139,102 @@ export abstract class Attribute<T = {}> {
|
|
|
109
139
|
}
|
|
110
140
|
}
|
|
111
141
|
|
|
142
|
+
/**
|
|
143
|
+
* Media query Attribute
|
|
144
|
+
* for performance reasons it is key value pair
|
|
145
|
+
*/
|
|
146
|
+
export const MediaMatchers = new Map([
|
|
147
|
+
['screen and (max-width: 599px)', 'xs'],
|
|
148
|
+
['screen and (min-width: 600px) and (max-width: 959px)', 'sm'],
|
|
149
|
+
['screen and (min-width: 960px) and (max-width: 1279px)', 'md'],
|
|
150
|
+
['screen and (min-width: 1280px) and (max-width: 1919px)', 'lg'],
|
|
151
|
+
['screen and (min-width: 1920px) and (max-width: 5000px)', 'xl'],
|
|
152
|
+
['screen and (max-width: 959px)', 'lt-md'],
|
|
153
|
+
['screen and (max-width: 1279px)', 'lt-lg'],
|
|
154
|
+
['screen and (max-width: 1919px)', 'lt-xl'],
|
|
155
|
+
['screen and (min-width: 600px)', 'gt-xs'],
|
|
156
|
+
['screen and (min-width: 960px)', 'gt-sm'],
|
|
157
|
+
['screen and (min-width: 1280px)', 'gt-md'],
|
|
158
|
+
['screen and (min-width: 1920px)', 'gt-lg']
|
|
159
|
+
]);
|
|
160
|
+
type MediaEvent = MediaQueryList | MediaQueryListEvent;
|
|
161
|
+
export type EnterMediaQueryAttributes = [MediaEvent, Attr];
|
|
162
|
+
export type ExitMediaQueryAttributes = [MediaEvent, string];
|
|
163
|
+
|
|
164
|
+
export interface OnUpdateMediaQuery {
|
|
165
|
+
OnEnterMediaQuery(tuple: [MediaEvent, Attr]): void;
|
|
166
|
+
OnExitMediaQuery(tuple: [MediaEvent, string]): void;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
export const Breakpoints = [...MediaMatchers.values()];
|
|
170
|
+
|
|
171
|
+
export const createFiltersFromSelector = (selector: string) => [
|
|
172
|
+
...Breakpoints.map(breakpoint => `${selector}.${breakpoint}`),
|
|
173
|
+
selector
|
|
174
|
+
];
|
|
175
|
+
|
|
176
|
+
export abstract class MediaQueryAttribute<T> extends Attribute<T>
|
|
177
|
+
implements OnUpdateMediaQuery {
|
|
178
|
+
prevValue: string;
|
|
179
|
+
originalValue: string;
|
|
180
|
+
|
|
181
|
+
private matchers: Map<MediaQueryList, MediaQueryList> = new Map();
|
|
182
|
+
private cachedAttributes: Map<string, Attr> = new Map();
|
|
183
|
+
|
|
184
|
+
listener = (event: MediaQueryList | MediaQueryListEvent) => {
|
|
185
|
+
const key = `${this.selector.toLowerCase()}.${MediaMatchers.get(
|
|
186
|
+
event.media
|
|
187
|
+
)}`;
|
|
188
|
+
const attribute = this.cachedAttributes.get(key);
|
|
189
|
+
|
|
190
|
+
if (event.matches && attribute) {
|
|
191
|
+
return this.OnEnterMediaQuery([event, attribute]);
|
|
192
|
+
}
|
|
193
|
+
return this.OnExitMediaQuery([event, key]);
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
OnInit() {
|
|
197
|
+
if (this.OnEnterMediaQuery || this.OnExitMediaQuery) {
|
|
198
|
+
this.originalValue = this.value;
|
|
199
|
+
for (const query of MediaMatchers.keys()) {
|
|
200
|
+
const matcher = window.matchMedia(query);
|
|
201
|
+
|
|
202
|
+
const attr = Object.values(this.element.attributes).find(
|
|
203
|
+
v =>
|
|
204
|
+
v.name ===
|
|
205
|
+
`${this.selector.toLowerCase()}.${MediaMatchers.get(query)}`
|
|
206
|
+
);
|
|
207
|
+
|
|
208
|
+
if (attr) {
|
|
209
|
+
this.cachedAttributes.set(attr.name, attr);
|
|
210
|
+
matcher.addEventListener('change', this.listener);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
if (attr && matcher.matches) {
|
|
214
|
+
this.listener(matcher);
|
|
215
|
+
}
|
|
216
|
+
this.matchers.set(matcher, matcher);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
OnDestroy() {
|
|
222
|
+
for (const matcher of this.matchers.values()) {
|
|
223
|
+
matcher.removeEventListener('change', this.listener);
|
|
224
|
+
}
|
|
225
|
+
this.cachedAttributes.clear();
|
|
226
|
+
this.matchers.clear();
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
abstract OnEnterMediaQuery(tuple: [MediaEvent, Attr]): void;
|
|
230
|
+
abstract OnExitMediaQuery(tuple: [MediaEvent, string]): void;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* Media query Attribute END */
|
|
234
|
+
|
|
112
235
|
export class CustomAttributeRegistry {
|
|
113
236
|
private _attrMap: Map<string, Constructor<Attribute>> = new Map();
|
|
114
|
-
private _elementMap:
|
|
115
|
-
HTMLElement,
|
|
116
|
-
Map<string, Attribute>
|
|
117
|
-
> = new WeakMap();
|
|
237
|
+
private _elementMap: Map<HTMLElement, Map<string, Attribute>> = new Map();
|
|
118
238
|
private observer: MutationObserver;
|
|
119
239
|
|
|
120
240
|
constructor(private parent: HTMLElement) {
|
|
@@ -171,6 +291,15 @@ export class CustomAttributeRegistry {
|
|
|
171
291
|
|
|
172
292
|
unsubscribe() {
|
|
173
293
|
this.observer?.disconnect();
|
|
294
|
+
const values = [...this._elementMap.values()];
|
|
295
|
+
for (const elModifiers of values) {
|
|
296
|
+
const modifiers = [...elModifiers.values()];
|
|
297
|
+
for (const modifier of modifiers) {
|
|
298
|
+
modifier.OnDestroy();
|
|
299
|
+
}
|
|
300
|
+
elModifiers.clear();
|
|
301
|
+
}
|
|
302
|
+
this._elementMap.clear();
|
|
174
303
|
}
|
|
175
304
|
|
|
176
305
|
private upgradeAttribute(attrName: string, doc?: HTMLElement) {
|