@rhtml/custom-attributes 0.0.113 → 0.0.114
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 +4 -2
- package/dist/media-attribute.d.ts +6 -10
- package/dist/media-attribute.js +1 -2
- package/dist/media-attribute.js.map +1 -1
- package/package.json +1 -1
- package/src/media-attribute.ts +8 -12
package/README.md
CHANGED
|
@@ -317,7 +317,7 @@ Extending `MediaQueryAttribute` will help you to track values from specific reso
|
|
|
317
317
|
|
|
318
318
|
```typescript
|
|
319
319
|
import {
|
|
320
|
-
|
|
320
|
+
MediaQueryEvent,
|
|
321
321
|
ExitMediaQueryAttributes,
|
|
322
322
|
MediaQueryAttribute,
|
|
323
323
|
Modifier
|
|
@@ -331,6 +331,8 @@ interface Styles {
|
|
|
331
331
|
selector: 'color'
|
|
332
332
|
})
|
|
333
333
|
export class Color extends MediaQueryAttribute<Styles> {
|
|
334
|
+
private prevValue: string;
|
|
335
|
+
|
|
334
336
|
OnInit() {
|
|
335
337
|
this.modify();
|
|
336
338
|
/* Executing media matcher init */
|
|
@@ -347,7 +349,7 @@ export class Color extends MediaQueryAttribute<Styles> {
|
|
|
347
349
|
this.modify();
|
|
348
350
|
}
|
|
349
351
|
|
|
350
|
-
OnEnterMediaQuery([event, attribute]:
|
|
352
|
+
OnEnterMediaQuery([event, attribute]: MediaQueryEvent) {
|
|
351
353
|
console.log(event, attribute.value);
|
|
352
354
|
this.prevValue = this.value;
|
|
353
355
|
this.value = attribute.value ?? this.value;
|
|
@@ -4,24 +4,20 @@ import { Attribute } from './attribute';
|
|
|
4
4
|
* for performance reasons it is key value pair
|
|
5
5
|
*/
|
|
6
6
|
export declare const MediaMatchers: Map<string, string>;
|
|
7
|
-
declare type MediaEvent = MediaQueryList | MediaQueryListEvent;
|
|
8
|
-
export declare type
|
|
9
|
-
export declare type ExitMediaQueryAttributes = [MediaEvent, string];
|
|
7
|
+
export declare type MediaEvent = MediaQueryList | MediaQueryListEvent;
|
|
8
|
+
export declare type MediaQueryEvent = [MediaEvent, Attr];
|
|
10
9
|
export interface OnUpdateMediaQuery {
|
|
11
|
-
OnEnterMediaQuery(tuple:
|
|
12
|
-
OnExitMediaQuery(tuple:
|
|
10
|
+
OnEnterMediaQuery(tuple: MediaQueryEvent): void;
|
|
11
|
+
OnExitMediaQuery(tuple: MediaQueryEvent): void;
|
|
13
12
|
}
|
|
14
13
|
export declare const Breakpoints: string[];
|
|
15
14
|
export declare const createFiltersFromSelector: (selector: string) => string[];
|
|
16
15
|
export declare abstract class MediaQueryAttribute<T> extends Attribute<T> implements OnUpdateMediaQuery {
|
|
17
|
-
prevValue: string;
|
|
18
|
-
originalValue: string;
|
|
19
16
|
private matchers;
|
|
20
17
|
private cachedAttributes;
|
|
21
18
|
listener: (event: MediaQueryList | MediaQueryListEvent) => void;
|
|
22
19
|
OnInit(): void;
|
|
23
20
|
OnDestroy(): void;
|
|
24
|
-
abstract OnEnterMediaQuery(tuple:
|
|
25
|
-
abstract OnExitMediaQuery(tuple:
|
|
21
|
+
abstract OnEnterMediaQuery(tuple: MediaQueryEvent): void;
|
|
22
|
+
abstract OnExitMediaQuery(tuple: MediaQueryEvent): void;
|
|
26
23
|
}
|
|
27
|
-
export {};
|
package/dist/media-attribute.js
CHANGED
|
@@ -36,12 +36,11 @@ class MediaQueryAttribute extends attribute_1.Attribute {
|
|
|
36
36
|
if (event.matches && attribute) {
|
|
37
37
|
return this.OnEnterMediaQuery([event, attribute]);
|
|
38
38
|
}
|
|
39
|
-
return this.OnExitMediaQuery([event,
|
|
39
|
+
return this.OnExitMediaQuery([event, attribute]);
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
42
|
OnInit() {
|
|
43
43
|
if (this.OnEnterMediaQuery || this.OnExitMediaQuery) {
|
|
44
|
-
this.originalValue = this.value;
|
|
45
44
|
for (const query of exports.MediaMatchers.keys()) {
|
|
46
45
|
const matcher = window.matchMedia(query);
|
|
47
46
|
const attr = Object.values(this.element.attributes).find(v => v.name ===
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-attribute.js","sourceRoot":"","sources":["../src/media-attribute.ts"],"names":[],"mappings":";;;AAAA,2CAAwC;AAExC;;;GAGG;AACU,QAAA,aAAa,GAAG,IAAI,GAAG,CAAC;IACnC,CAAC,+BAA+B,EAAE,IAAI,CAAC;IACvC,CAAC,sDAAsD,EAAE,IAAI,CAAC;IAC9D,CAAC,uDAAuD,EAAE,IAAI,CAAC;IAC/D,CAAC,wDAAwD,EAAE,IAAI,CAAC;IAChE,CAAC,wDAAwD,EAAE,IAAI,CAAC;IAChE,CAAC,+BAA+B,EAAE,OAAO,CAAC;IAC1C,CAAC,gCAAgC,EAAE,OAAO,CAAC;IAC3C,CAAC,gCAAgC,EAAE,OAAO,CAAC;IAC3C,CAAC,+BAA+B,EAAE,OAAO,CAAC;IAC1C,CAAC,+BAA+B,EAAE,OAAO,CAAC;IAC1C,CAAC,gCAAgC,EAAE,OAAO,CAAC;IAC3C,CAAC,gCAAgC,EAAE,OAAO,CAAC;CAC5C,CAAC,CAAC;AAUU,QAAA,WAAW,GAAG,CAAC,GAAG,qBAAa,CAAC,MAAM,EAAE,CAAC,CAAC;AAE1C,QAAA,yBAAyB,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC;IAC7D,GAAG,mBAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,QAAQ,IAAI,UAAU,EAAE,CAAC;IAC7D,QAAQ;CACT,CAAC;AAEF,MAAsB,mBAAuB,SAAQ,qBAAY;IAAjE;;
|
|
1
|
+
{"version":3,"file":"media-attribute.js","sourceRoot":"","sources":["../src/media-attribute.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/media-attribute.ts
CHANGED
|
@@ -18,13 +18,13 @@ export const MediaMatchers = new Map([
|
|
|
18
18
|
['screen and (min-width: 1280px)', 'gt-md'],
|
|
19
19
|
['screen and (min-width: 1920px)', 'gt-lg']
|
|
20
20
|
]);
|
|
21
|
-
|
|
22
|
-
export type
|
|
23
|
-
export type
|
|
21
|
+
|
|
22
|
+
export type MediaEvent = MediaQueryList | MediaQueryListEvent;
|
|
23
|
+
export type MediaQueryEvent = [MediaEvent, Attr];
|
|
24
24
|
|
|
25
25
|
export interface OnUpdateMediaQuery {
|
|
26
|
-
OnEnterMediaQuery(tuple:
|
|
27
|
-
OnExitMediaQuery(tuple:
|
|
26
|
+
OnEnterMediaQuery(tuple: MediaQueryEvent): void;
|
|
27
|
+
OnExitMediaQuery(tuple: MediaQueryEvent): void;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
export const Breakpoints = [...MediaMatchers.values()];
|
|
@@ -36,9 +36,6 @@ export const createFiltersFromSelector = (selector: string) => [
|
|
|
36
36
|
|
|
37
37
|
export abstract class MediaQueryAttribute<T> extends Attribute<T>
|
|
38
38
|
implements OnUpdateMediaQuery {
|
|
39
|
-
prevValue: string;
|
|
40
|
-
originalValue: string;
|
|
41
|
-
|
|
42
39
|
private matchers: Map<MediaQueryList, MediaQueryList> = new Map();
|
|
43
40
|
private cachedAttributes: Map<string, Attr> = new Map();
|
|
44
41
|
|
|
@@ -51,12 +48,11 @@ export abstract class MediaQueryAttribute<T> extends Attribute<T>
|
|
|
51
48
|
if (event.matches && attribute) {
|
|
52
49
|
return this.OnEnterMediaQuery([event, attribute]);
|
|
53
50
|
}
|
|
54
|
-
return this.OnExitMediaQuery([event,
|
|
51
|
+
return this.OnExitMediaQuery([event, attribute]);
|
|
55
52
|
};
|
|
56
53
|
|
|
57
54
|
OnInit() {
|
|
58
55
|
if (this.OnEnterMediaQuery || this.OnExitMediaQuery) {
|
|
59
|
-
this.originalValue = this.value;
|
|
60
56
|
for (const query of MediaMatchers.keys()) {
|
|
61
57
|
const matcher = window.matchMedia(query);
|
|
62
58
|
|
|
@@ -87,6 +83,6 @@ export abstract class MediaQueryAttribute<T> extends Attribute<T>
|
|
|
87
83
|
this.matchers.clear();
|
|
88
84
|
}
|
|
89
85
|
|
|
90
|
-
abstract OnEnterMediaQuery(tuple:
|
|
91
|
-
abstract OnExitMediaQuery(tuple:
|
|
86
|
+
abstract OnEnterMediaQuery(tuple: MediaQueryEvent): void;
|
|
87
|
+
abstract OnExitMediaQuery(tuple: MediaQueryEvent): void;
|
|
92
88
|
}
|