@rhtml/modifiers 0.0.88 → 0.0.89

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.
Files changed (5) hide show
  1. package/dist/modifiers.d.ts +11 -3
  2. package/dist/modifiers.js +46 -26
  3. package/dist/modifiers.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/modifiers.ts +52 -26
package/dist/modifiers.d.ts CHANGED
@@ -1,9 +1,17 @@
1
1
  export declare type FxLayout = 'row' | 'column' | 'row-reverse' | 'column-reverse';
2
2
  export declare type MainAxis = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
3
3
  export declare type CrossAxis = 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' | 'baseline';
4
+ export declare enum Attributes {
5
+ FxLayout = "fxLayout",
6
+ FxFlex = "fxFlex",
7
+ FxFlexFill = "fxFlexFill",
8
+ FxLayoutAlign = "fxLayoutAlign",
9
+ FxLayoutGap = "fxLayoutGap"
10
+ }
4
11
  export declare const isAttribute: (attr: string) => boolean | string;
5
- export declare const setFxLayoutAlign: (element: HTMLElement) => (fxLayoutAlign?: string) => void;
12
+ export declare const setFxLayoutAlign: (element: HTMLElement) => void;
6
13
  export declare const setChildrensFlexFill: (div: HTMLElement) => void;
7
- export declare const setChildrensFlex: (div: HTMLElement) => (fxFlex: string) => void;
8
- export declare const setFxLayout: (element: HTMLElement) => (fxLayout?: string) => void;
14
+ export declare const setChildrensFlex: (div: HTMLElement) => void;
15
+ export declare const subscribeToAttributeChanges: (name: string) => (fn: (element: HTMLElement) => void) => (element: HTMLElement) => void;
16
+ export declare const setFxLayout: (element: HTMLElement) => void;
9
17
  export declare const recursion: (div: HTMLElement) => void;
package/dist/modifiers.js CHANGED
@@ -1,61 +1,81 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.recursion = exports.setFxLayout = exports.setChildrensFlex = exports.setChildrensFlexFill = exports.setFxLayoutAlign = exports.isAttribute = void 0;
3
+ exports.recursion = exports.setFxLayout = exports.subscribeToAttributeChanges = exports.setChildrensFlex = exports.setChildrensFlexFill = exports.setFxLayoutAlign = exports.isAttribute = exports.Attributes = void 0;
4
+ var Attributes;
5
+ (function (Attributes) {
6
+ Attributes["FxLayout"] = "fxLayout";
7
+ Attributes["FxFlex"] = "fxFlex";
8
+ Attributes["FxFlexFill"] = "fxFlexFill";
9
+ Attributes["FxLayoutAlign"] = "fxLayoutAlign";
10
+ Attributes["FxLayoutGap"] = "fxLayoutGap";
11
+ })(Attributes = exports.Attributes || (exports.Attributes = {}));
4
12
  /* TODO we need to update to typescript 4 */
5
13
  // export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
6
14
  exports.isAttribute = (attr) => typeof attr === 'string' && (attr || attr === '');
7
15
  exports.setFxLayoutAlign = (element) => {
8
- return (fxLayoutAlign = '') => {
16
+ const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
17
+ if (exports.isAttribute(fxLayoutAlign)) {
9
18
  const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
10
19
  element.style['place-content'] = `${crossAxis} ${mainAxis}`;
11
20
  element.style['align-items'] = crossAxis;
12
- element.style['display'] = 'flex';
13
- };
21
+ }
22
+ element.style['display'] = 'flex';
14
23
  };
15
24
  exports.setChildrensFlexFill = (div) => {
16
- div.style['margin'] = '0';
17
- div.style['width'] = '100%';
18
- div.style['height'] = '100%';
19
- div.style['min-width'] = '100%';
20
- div.style['min-height '] = '100%';
25
+ const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
26
+ if (exports.isAttribute(fxFlexFill)) {
27
+ div.style['margin'] = '0';
28
+ div.style['width'] = '100%';
29
+ div.style['height'] = '100%';
30
+ div.style['min-width'] = '100%';
31
+ div.style['min-height '] = '100%';
32
+ }
21
33
  };
22
34
  exports.setChildrensFlex = (div) => {
23
- return (fxFlex) => {
35
+ const fxFlex = div.getAttribute(Attributes.FxFlex);
36
+ if (exports.isAttribute(fxFlex)) {
24
37
  div.style['flex'] = '1 1 100%';
25
38
  div.style['box-sizing'] = 'border-box';
26
39
  if (fxFlex) {
27
40
  div.style['max-width'] = fxFlex;
28
41
  }
29
- };
42
+ }
43
+ };
44
+ exports.subscribeToAttributeChanges = (name) => (fn) => (element) => {
45
+ fn(element);
46
+ return new MutationObserver(() => fn(element)).observe(element, {
47
+ attributeFilter: [name.toLocaleLowerCase()],
48
+ attributes: true
49
+ });
30
50
  };
31
51
  exports.setFxLayout = (element) => {
32
- return (fxLayout = 'row') => {
33
- // element.style['flex-direction'] = fxLayout;
34
- const splitted = fxLayout.split(' ');
52
+ const layout = element.getAttribute(Attributes.FxLayout);
53
+ if (exports.isAttribute(layout)) {
54
+ const splitted = layout.split(' ');
35
55
  const [mainAxis, crossAxis] = splitted;
36
- element.style['box-sizing'] = 'flex';
37
- element.style['display'] = 'flex';
38
56
  element.style['flex-flow'] =
39
57
  splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis;
40
- };
58
+ element.style['box-sizing'] = 'flex';
59
+ element.style['display'] = 'flex';
60
+ }
41
61
  };
42
62
  exports.recursion = (div) => {
43
- const fxFlex = div.getAttribute('fxFlex');
44
- const fxFlexFill = div.getAttribute('fxFlexFill');
45
- const fxLayout = div.getAttribute('fxLayout');
46
- const fxLayoutAlign = div.getAttribute('fxLayoutAlign');
47
- const fxLayoutGap = div.getAttribute('fxLayoutGap');
63
+ const fxFlex = div.getAttribute(Attributes.FxFlex);
64
+ const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
65
+ const fxLayout = div.getAttribute(Attributes.FxLayout);
66
+ const fxLayoutAlign = div.getAttribute(Attributes.FxLayoutAlign);
67
+ const fxLayoutGap = div.getAttribute(Attributes.FxLayoutGap);
48
68
  if (exports.isAttribute(fxFlex)) {
49
- exports.setChildrensFlex(div)(fxFlex);
69
+ exports.subscribeToAttributeChanges(Attributes.FxFlex)(exports.setChildrensFlex)(div);
50
70
  }
51
71
  if (exports.isAttribute(fxFlexFill)) {
52
- exports.setChildrensFlexFill(div);
72
+ exports.subscribeToAttributeChanges(Attributes.FxFlexFill)(exports.setChildrensFlexFill)(div);
53
73
  }
54
74
  if (exports.isAttribute(fxLayout)) {
55
- exports.setFxLayout(div)(fxLayout);
75
+ exports.subscribeToAttributeChanges(Attributes.FxLayout)(exports.setFxLayout)(div);
56
76
  }
57
77
  if (exports.isAttribute(fxLayoutAlign)) {
58
- exports.setFxLayoutAlign(div)(fxLayoutAlign);
78
+ exports.subscribeToAttributeChanges(Attributes.FxLayoutAlign)(exports.setFxLayoutAlign)(div);
59
79
  }
60
80
  if (exports.isAttribute(fxLayoutGap)) {
61
81
  const divs = [...div.children];
package/dist/modifiers.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../src/modifiers.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../src/modifiers.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rhtml/modifiers",
3
- "version": "0.0.88",
3
+ "version": "0.0.89",
4
4
  "description": "Reactive HyperText Markup Language",
5
5
  "scripts": {
6
6
  "start": "npx parcel ./examples/index.html --out-dir build/examples",
package/src/modifiers.ts CHANGED
@@ -15,6 +15,14 @@ export type CrossAxis =
15
15
  | 'space-between'
16
16
  | 'space-around'
17
17
  | 'baseline';
18
+
19
+ export enum Attributes {
20
+ FxLayout = 'fxLayout',
21
+ FxFlex = 'fxFlex',
22
+ FxFlexFill = 'fxFlexFill',
23
+ FxLayoutAlign = 'fxLayoutAlign',
24
+ FxLayoutGap = 'fxLayoutGap'
25
+ }
18
26
  /* TODO we need to update to typescript 4 */
19
27
  // export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
20
28
 
@@ -22,66 +30,84 @@ export const isAttribute = (attr: string): boolean | string =>
22
30
  typeof attr === 'string' && (attr || attr === '');
23
31
 
24
32
  export const setFxLayoutAlign = (element: HTMLElement) => {
25
- return (fxLayoutAlign = ''): void => {
33
+ const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
34
+ if (isAttribute(fxLayoutAlign)) {
26
35
  const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
27
36
  element.style['place-content'] = `${crossAxis} ${mainAxis}`;
28
37
  element.style['align-items'] = crossAxis;
29
- element.style['display'] = 'flex';
30
- };
38
+ }
39
+ element.style['display'] = 'flex';
31
40
  };
32
41
 
33
42
  export const setChildrensFlexFill = (div: HTMLElement): void => {
34
- div.style['margin'] = '0';
35
- div.style['width'] = '100%';
36
- div.style['height'] = '100%';
37
- div.style['min-width'] = '100%';
38
- div.style['min-height '] = '100%';
43
+ const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
44
+ if (isAttribute(fxFlexFill)) {
45
+ div.style['margin'] = '0';
46
+ div.style['width'] = '100%';
47
+ div.style['height'] = '100%';
48
+ div.style['min-width'] = '100%';
49
+ div.style['min-height '] = '100%';
50
+ }
39
51
  };
40
52
 
41
53
  export const setChildrensFlex = (div: HTMLElement) => {
42
- return (fxFlex: string): void => {
54
+ const fxFlex = div.getAttribute(Attributes.FxFlex);
55
+ if (isAttribute(fxFlex)) {
43
56
  div.style['flex'] = '1 1 100%';
44
57
  div.style['box-sizing'] = 'border-box';
45
58
  if (fxFlex) {
46
59
  div.style['max-width'] = fxFlex;
47
60
  }
48
- };
61
+ }
62
+ };
63
+
64
+ export const subscribeToAttributeChanges = (name: string) => (
65
+ fn: (element: HTMLElement) => void
66
+ ) => (element: HTMLElement) => {
67
+ fn(element);
68
+ return new MutationObserver(() => fn(element)).observe(element, {
69
+ attributeFilter: [name.toLocaleLowerCase()],
70
+ attributes: true
71
+ });
49
72
  };
50
73
 
51
74
  export const setFxLayout = (element: HTMLElement) => {
52
- return (fxLayout = 'row'): void => {
53
- // element.style['flex-direction'] = fxLayout;
54
- const splitted = fxLayout.split(' ');
75
+ const layout = element.getAttribute(Attributes.FxLayout);
76
+ if (isAttribute(layout)) {
77
+ const splitted = layout.split(' ');
55
78
  const [mainAxis, crossAxis] = splitted;
56
-
57
- element.style['box-sizing'] = 'flex';
58
- element.style['display'] = 'flex';
59
79
  element.style['flex-flow'] =
60
80
  splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis;
61
- };
81
+ element.style['box-sizing'] = 'flex';
82
+ element.style['display'] = 'flex';
83
+ }
62
84
  };
63
85
 
64
86
  export const recursion = (div: HTMLElement): void => {
65
- const fxFlex = div.getAttribute('fxFlex');
66
- const fxFlexFill = div.getAttribute('fxFlexFill');
67
- const fxLayout = div.getAttribute('fxLayout');
68
- const fxLayoutAlign = div.getAttribute('fxLayoutAlign');
69
- const fxLayoutGap = div.getAttribute('fxLayoutGap');
87
+ const fxFlex = div.getAttribute(Attributes.FxFlex);
88
+ const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
89
+ const fxLayout = div.getAttribute(Attributes.FxLayout);
90
+ const fxLayoutAlign = div.getAttribute(Attributes.FxLayoutAlign);
91
+ const fxLayoutGap = div.getAttribute(Attributes.FxLayoutGap);
70
92
 
71
93
  if (isAttribute(fxFlex)) {
72
- setChildrensFlex(div)(fxFlex);
94
+ subscribeToAttributeChanges(Attributes.FxFlex)(setChildrensFlex)(div);
73
95
  }
74
96
 
75
97
  if (isAttribute(fxFlexFill)) {
76
- setChildrensFlexFill(div);
98
+ subscribeToAttributeChanges(Attributes.FxFlexFill)(setChildrensFlexFill)(
99
+ div
100
+ );
77
101
  }
78
102
 
79
103
  if (isAttribute(fxLayout)) {
80
- setFxLayout(div)(fxLayout);
104
+ subscribeToAttributeChanges(Attributes.FxLayout)(setFxLayout)(div);
81
105
  }
82
106
 
83
107
  if (isAttribute(fxLayoutAlign)) {
84
- setFxLayoutAlign(div)(fxLayoutAlign);
108
+ subscribeToAttributeChanges(Attributes.FxLayoutAlign)(setFxLayoutAlign)(
109
+ div
110
+ );
85
111
  }
86
112
 
87
113
  if (isAttribute(fxLayoutGap)) {