pseudo-dom 0.9.0 → 0.10.0
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 +765 -2
- package/browser/pseudo-dom.js +755 -427
- package/browser/pseudo-dom.min.js +1 -1
- package/dist/factories/createDataset.d.ts +10 -10
- package/dist/factories/createDataset.js +78 -78
- package/dist/factories/createStyleDeclaration.d.ts +30 -30
- package/dist/factories/createStyleDeclaration.js +64 -64
- package/dist/interfaces/PseudoCSSStyleDeclaration.d.ts +14 -14
- package/dist/interfaces/PseudoCSSStyleDeclaration.js +5 -5
- package/dist/interfaces/PseudoElement.d.ts +765 -702
- package/dist/interfaces/PseudoHTMLElement.d.ts +33 -33
- package/dist/interfaces/PseudoShadowRoot.d.ts +12 -3
- package/dist/services/CSSStyleDeclarationService.d.ts +73 -73
- package/dist/services/CSSStyleDeclarationService.js +156 -156
- package/dist/services/ElementService.d.ts +361 -191
- package/dist/services/ElementService.js +717 -426
- package/dist/services/ElementService.min.js +1 -1
- package/dist/services/HTMLElementService.d.ts +87 -87
- package/dist/services/HTMLElementService.js +202 -202
- package/dist/services/NodeService.d.ts +305 -297
- package/dist/services/NodeService.js +732 -721
- package/dist/services/NodeService.min.js +1 -1
- package/dist/services/ShadowRootService.d.ts +16 -4
- package/dist/services/ShadowRootService.js +24 -9
- package/dist/services/ShadowRootService.min.js +1 -1
- package/package.json +1 -1
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file Substitute for the DOM HTMLElement Class.
|
|
3
|
-
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
4
|
-
* @version 1.0.0
|
|
5
|
-
*/
|
|
6
|
-
import { PseudoElement } from './PseudoElement';
|
|
7
|
-
import { PseudoCSSStyleDeclaration } from './PseudoCSSStyleDeclaration';
|
|
8
|
-
/**
|
|
9
|
-
* Simulate the behaviour of the HTMLElement Class when there is no DOM available.
|
|
10
|
-
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
11
|
-
* @class
|
|
12
|
-
* @augments PseudoElement
|
|
13
|
-
* @property {boolean} hidden - State of whether element is visible
|
|
14
|
-
* @property {number} offsetHeight - The height of the element as offset by the parent element
|
|
15
|
-
* @property {number} offsetLeft - The position of the left side of the element based on the parent element
|
|
16
|
-
* @property {PseudoHTMLElement} offsetParent - A reference to the closest positioned parent element
|
|
17
|
-
* @property {number} offsetTop - The position of the top side of the element based on the parent element
|
|
18
|
-
* @property {number} offsetWidth - The width of the element as offset by the parent element
|
|
19
|
-
* @property {string} title - The title attribute which affects the text visible on hover
|
|
20
|
-
*/
|
|
21
|
-
export interface PseudoHTMLElement extends PseudoElement {
|
|
22
|
-
/**
|
|
23
|
-
* The element's inline styles, live and settable per property (style.color = 'red') as well as through the real
|
|
24
|
-
* CSSStyleDeclaration methods (getPropertyValue, setProperty, removeProperty, cssText).
|
|
25
|
-
*/
|
|
26
|
-
get style(): PseudoCSSStyleDeclaration;
|
|
27
|
-
/**
|
|
28
|
-
* The element's data-* attributes, live, under their camelCase names (data-foo-bar <-> dataset.fooBar).
|
|
29
|
-
*/
|
|
30
|
-
get dataset(): {
|
|
31
|
-
[key: string]: string;
|
|
32
|
-
};
|
|
33
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* @file Substitute for the DOM HTMLElement Class.
|
|
3
|
+
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
4
|
+
* @version 1.0.0
|
|
5
|
+
*/
|
|
6
|
+
import { PseudoElement } from './PseudoElement';
|
|
7
|
+
import { PseudoCSSStyleDeclaration } from './PseudoCSSStyleDeclaration';
|
|
8
|
+
/**
|
|
9
|
+
* Simulate the behaviour of the HTMLElement Class when there is no DOM available.
|
|
10
|
+
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
11
|
+
* @class
|
|
12
|
+
* @augments PseudoElement
|
|
13
|
+
* @property {boolean} hidden - State of whether element is visible
|
|
14
|
+
* @property {number} offsetHeight - The height of the element as offset by the parent element
|
|
15
|
+
* @property {number} offsetLeft - The position of the left side of the element based on the parent element
|
|
16
|
+
* @property {PseudoHTMLElement} offsetParent - A reference to the closest positioned parent element
|
|
17
|
+
* @property {number} offsetTop - The position of the top side of the element based on the parent element
|
|
18
|
+
* @property {number} offsetWidth - The width of the element as offset by the parent element
|
|
19
|
+
* @property {string} title - The title attribute which affects the text visible on hover
|
|
20
|
+
*/
|
|
21
|
+
export interface PseudoHTMLElement extends PseudoElement {
|
|
22
|
+
/**
|
|
23
|
+
* The element's inline styles, live and settable per property (style.color = 'red') as well as through the real
|
|
24
|
+
* CSSStyleDeclaration methods (getPropertyValue, setProperty, removeProperty, cssText).
|
|
25
|
+
*/
|
|
26
|
+
get style(): PseudoCSSStyleDeclaration;
|
|
27
|
+
/**
|
|
28
|
+
* The element's data-* attributes, live, under their camelCase names (data-foo-bar <-> dataset.fooBar).
|
|
29
|
+
*/
|
|
30
|
+
get dataset(): {
|
|
31
|
+
[key: string]: string;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
-
import { PseudoDocumentFragment } from './PseudoDocumentFragment';
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { PseudoDocumentFragment } from './PseudoDocumentFragment';
|
|
2
|
+
import { PseudoElement } from './PseudoElement';
|
|
3
|
+
export interface PseudoShadowRoot extends PseudoDocumentFragment {
|
|
4
|
+
/**
|
|
5
|
+
* The element this shadow root is attached to.
|
|
6
|
+
*/
|
|
7
|
+
get host(): PseudoElement;
|
|
8
|
+
/**
|
|
9
|
+
* 'open' (reachable via element.shadowRoot) or 'closed' (not).
|
|
10
|
+
*/
|
|
11
|
+
get mode(): string;
|
|
12
|
+
}
|
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file Substitute for the DOM CSSStyleDeclaration Class (the object behind Element.style).
|
|
3
|
-
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
4
|
-
* @version 1.0.0
|
|
5
|
-
*/
|
|
6
|
-
/**
|
|
7
|
-
* Simulate the behaviour of the CSSStyleDeclaration Class when there is no DOM available: an ordered map of CSS
|
|
8
|
-
* property/value pairs, parsed from and serialized back to a cssText string. Values are stored and returned as
|
|
9
|
-
* given, with no unit conversion, shorthand expansion or validation - this is a data structure, not a real CSS
|
|
10
|
-
* engine. Named property access (declaration.backgroundColor, camelCase) is added on top of this by
|
|
11
|
-
* createStyleDeclaration, which wraps an instance of this class in a Proxy.
|
|
12
|
-
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
13
|
-
* @class
|
|
14
|
-
*/
|
|
15
|
-
export declare class CSSStyleDeclarationService {
|
|
16
|
-
private readonly properties;
|
|
17
|
-
/**
|
|
18
|
-
* @param {string} [cssText=''] Initial declarations, as CSS text ("color: red; font-size: 12px;")
|
|
19
|
-
* @constructor
|
|
20
|
-
*/
|
|
21
|
-
constructor(cssText?: string);
|
|
22
|
-
/**
|
|
23
|
-
* How many properties are currently set.
|
|
24
|
-
* @returns {number}
|
|
25
|
-
*/
|
|
26
|
-
get length(): number;
|
|
27
|
-
/**
|
|
28
|
-
* The name of the property at the given index, in the order it was set, or '' when there is none (matches the
|
|
29
|
-
* DOM's CSSStyleDeclaration, which is array-like).
|
|
30
|
-
* @param {number} index
|
|
31
|
-
* @returns {string}
|
|
32
|
-
*/
|
|
33
|
-
item(index: number): string;
|
|
34
|
-
/**
|
|
35
|
-
* The value of the given property, or '' when it is not set.
|
|
36
|
-
* @param {string} property A CSS property name (kebab-case, e.g. "background-color")
|
|
37
|
-
* @returns {string}
|
|
38
|
-
*/
|
|
39
|
-
getPropertyValue(property: string): string;
|
|
40
|
-
/**
|
|
41
|
-
* "important" when the property was set with !important, otherwise ''.
|
|
42
|
-
* @param {string} property A CSS property name (kebab-case)
|
|
43
|
-
* @returns {string}
|
|
44
|
-
*/
|
|
45
|
-
getPropertyPriority(property: string): string;
|
|
46
|
-
/**
|
|
47
|
-
* Set a property's value (and optionally its priority). An empty, null or undefined value removes the property
|
|
48
|
-
* instead, like the DOM.
|
|
49
|
-
* @param {string} property A CSS property name (kebab-case)
|
|
50
|
-
* @param {string} value The value, or '' to remove the property
|
|
51
|
-
* @param {string} [priority=''] "important" to mark it !important
|
|
52
|
-
* @returns {undefined}
|
|
53
|
-
*/
|
|
54
|
-
setProperty(property: string, value: string, priority?: string): void;
|
|
55
|
-
/**
|
|
56
|
-
* Remove a property, returning the value it had (or '' when it was not set).
|
|
57
|
-
* @param {string} property A CSS property name (kebab-case)
|
|
58
|
-
* @returns {string}
|
|
59
|
-
*/
|
|
60
|
-
removeProperty(property: string): string;
|
|
61
|
-
/**
|
|
62
|
-
* All the declarations as one CSS text string.
|
|
63
|
-
* @returns {string}
|
|
64
|
-
*/
|
|
65
|
-
get cssText(): string;
|
|
66
|
-
/**
|
|
67
|
-
* Replace every declaration by parsing a CSS text string ("color: red; font-size: 12px !important;").
|
|
68
|
-
* @param {string} cssText
|
|
69
|
-
* @returns {undefined}
|
|
70
|
-
*/
|
|
71
|
-
set cssText(cssText: string);
|
|
72
|
-
}
|
|
73
|
-
export default CSSStyleDeclarationService;
|
|
1
|
+
/**
|
|
2
|
+
* @file Substitute for the DOM CSSStyleDeclaration Class (the object behind Element.style).
|
|
3
|
+
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
4
|
+
* @version 1.0.0
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Simulate the behaviour of the CSSStyleDeclaration Class when there is no DOM available: an ordered map of CSS
|
|
8
|
+
* property/value pairs, parsed from and serialized back to a cssText string. Values are stored and returned as
|
|
9
|
+
* given, with no unit conversion, shorthand expansion or validation - this is a data structure, not a real CSS
|
|
10
|
+
* engine. Named property access (declaration.backgroundColor, camelCase) is added on top of this by
|
|
11
|
+
* createStyleDeclaration, which wraps an instance of this class in a Proxy.
|
|
12
|
+
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
13
|
+
* @class
|
|
14
|
+
*/
|
|
15
|
+
export declare class CSSStyleDeclarationService {
|
|
16
|
+
private readonly properties;
|
|
17
|
+
/**
|
|
18
|
+
* @param {string} [cssText=''] Initial declarations, as CSS text ("color: red; font-size: 12px;")
|
|
19
|
+
* @constructor
|
|
20
|
+
*/
|
|
21
|
+
constructor(cssText?: string);
|
|
22
|
+
/**
|
|
23
|
+
* How many properties are currently set.
|
|
24
|
+
* @returns {number}
|
|
25
|
+
*/
|
|
26
|
+
get length(): number;
|
|
27
|
+
/**
|
|
28
|
+
* The name of the property at the given index, in the order it was set, or '' when there is none (matches the
|
|
29
|
+
* DOM's CSSStyleDeclaration, which is array-like).
|
|
30
|
+
* @param {number} index
|
|
31
|
+
* @returns {string}
|
|
32
|
+
*/
|
|
33
|
+
item(index: number): string;
|
|
34
|
+
/**
|
|
35
|
+
* The value of the given property, or '' when it is not set.
|
|
36
|
+
* @param {string} property A CSS property name (kebab-case, e.g. "background-color")
|
|
37
|
+
* @returns {string}
|
|
38
|
+
*/
|
|
39
|
+
getPropertyValue(property: string): string;
|
|
40
|
+
/**
|
|
41
|
+
* "important" when the property was set with !important, otherwise ''.
|
|
42
|
+
* @param {string} property A CSS property name (kebab-case)
|
|
43
|
+
* @returns {string}
|
|
44
|
+
*/
|
|
45
|
+
getPropertyPriority(property: string): string;
|
|
46
|
+
/**
|
|
47
|
+
* Set a property's value (and optionally its priority). An empty, null or undefined value removes the property
|
|
48
|
+
* instead, like the DOM.
|
|
49
|
+
* @param {string} property A CSS property name (kebab-case)
|
|
50
|
+
* @param {string} value The value, or '' to remove the property
|
|
51
|
+
* @param {string} [priority=''] "important" to mark it !important
|
|
52
|
+
* @returns {undefined}
|
|
53
|
+
*/
|
|
54
|
+
setProperty(property: string, value: string, priority?: string): void;
|
|
55
|
+
/**
|
|
56
|
+
* Remove a property, returning the value it had (or '' when it was not set).
|
|
57
|
+
* @param {string} property A CSS property name (kebab-case)
|
|
58
|
+
* @returns {string}
|
|
59
|
+
*/
|
|
60
|
+
removeProperty(property: string): string;
|
|
61
|
+
/**
|
|
62
|
+
* All the declarations as one CSS text string.
|
|
63
|
+
* @returns {string}
|
|
64
|
+
*/
|
|
65
|
+
get cssText(): string;
|
|
66
|
+
/**
|
|
67
|
+
* Replace every declaration by parsing a CSS text string ("color: red; font-size: 12px !important;").
|
|
68
|
+
* @param {string} cssText
|
|
69
|
+
* @returns {undefined}
|
|
70
|
+
*/
|
|
71
|
+
set cssText(cssText: string);
|
|
72
|
+
}
|
|
73
|
+
export default CSSStyleDeclarationService;
|
|
@@ -1,156 +1,156 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @file Substitute for the DOM CSSStyleDeclaration Class (the object behind Element.style).
|
|
5
|
-
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
6
|
-
* @version 1.0.0
|
|
7
|
-
*/
|
|
8
|
-
require('core-js/modules/esnext.iterator.constructor.js')
|
|
9
|
-
require('core-js/modules/esnext.iterator.for-each.js')
|
|
10
|
-
require('core-js/modules/esnext.iterator.map.js')
|
|
11
|
-
require('core-js/modules/esnext.map.delete-all.js')
|
|
12
|
-
require('core-js/modules/esnext.map.every.js')
|
|
13
|
-
require('core-js/modules/esnext.map.filter.js')
|
|
14
|
-
require('core-js/modules/esnext.map.find.js')
|
|
15
|
-
require('core-js/modules/esnext.map.find-key.js')
|
|
16
|
-
require('core-js/modules/esnext.map.includes.js')
|
|
17
|
-
require('core-js/modules/esnext.map.key-of.js')
|
|
18
|
-
require('core-js/modules/esnext.map.map-keys.js')
|
|
19
|
-
require('core-js/modules/esnext.map.map-values.js')
|
|
20
|
-
require('core-js/modules/esnext.map.merge.js')
|
|
21
|
-
require('core-js/modules/esnext.map.reduce.js')
|
|
22
|
-
require('core-js/modules/esnext.map.some.js')
|
|
23
|
-
require('core-js/modules/esnext.map.update.js')
|
|
24
|
-
Object.defineProperty(exports, '__esModule', {
|
|
25
|
-
value: true
|
|
26
|
-
})
|
|
27
|
-
exports.CSSStyleDeclarationService = void 0
|
|
28
|
-
/**
|
|
29
|
-
* Simulate the behaviour of the CSSStyleDeclaration Class when there is no DOM available: an ordered map of CSS
|
|
30
|
-
* property/value pairs, parsed from and serialized back to a cssText string. Values are stored and returned as
|
|
31
|
-
* given, with no unit conversion, shorthand expansion or validation - this is a data structure, not a real CSS
|
|
32
|
-
* engine. Named property access (declaration.backgroundColor, camelCase) is added on top of this by
|
|
33
|
-
* createStyleDeclaration, which wraps an instance of this class in a Proxy.
|
|
34
|
-
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
35
|
-
* @class
|
|
36
|
-
*/
|
|
37
|
-
class CSSStyleDeclarationService {
|
|
38
|
-
/**
|
|
39
|
-
* @param {string} [cssText=''] Initial declarations, as CSS text ("color: red; font-size: 12px;")
|
|
40
|
-
* @constructor
|
|
41
|
-
*/
|
|
42
|
-
constructor (cssText = '') {
|
|
43
|
-
this.properties = new Map()
|
|
44
|
-
this.cssText = cssText
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* How many properties are currently set.
|
|
49
|
-
* @returns {number}
|
|
50
|
-
*/
|
|
51
|
-
get length () {
|
|
52
|
-
return this.properties.size
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* The name of the property at the given index, in the order it was set, or '' when there is none (matches the
|
|
57
|
-
* DOM's CSSStyleDeclaration, which is array-like).
|
|
58
|
-
* @param {number} index
|
|
59
|
-
* @returns {string}
|
|
60
|
-
*/
|
|
61
|
-
item (index) {
|
|
62
|
-
return Array.from(this.properties.keys())[index] || ''
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* The value of the given property, or '' when it is not set.
|
|
67
|
-
* @param {string} property A CSS property name (kebab-case, e.g. "background-color")
|
|
68
|
-
* @returns {string}
|
|
69
|
-
*/
|
|
70
|
-
getPropertyValue (property) {
|
|
71
|
-
const entry = this.properties.get(property)
|
|
72
|
-
return entry ? entry.value : ''
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* "important" when the property was set with !important, otherwise ''.
|
|
77
|
-
* @param {string} property A CSS property name (kebab-case)
|
|
78
|
-
* @returns {string}
|
|
79
|
-
*/
|
|
80
|
-
getPropertyPriority (property) {
|
|
81
|
-
const entry = this.properties.get(property)
|
|
82
|
-
return entry ? entry.priority : ''
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Set a property's value (and optionally its priority). An empty, null or undefined value removes the property
|
|
87
|
-
* instead, like the DOM.
|
|
88
|
-
* @param {string} property A CSS property name (kebab-case)
|
|
89
|
-
* @param {string} value The value, or '' to remove the property
|
|
90
|
-
* @param {string} [priority=''] "important" to mark it !important
|
|
91
|
-
* @returns {undefined}
|
|
92
|
-
*/
|
|
93
|
-
setProperty (property, value, priority = '') {
|
|
94
|
-
if (value === '' || value === null || typeof value === 'undefined') {
|
|
95
|
-
this.removeProperty(property)
|
|
96
|
-
return
|
|
97
|
-
}
|
|
98
|
-
this.properties.set(property, {
|
|
99
|
-
value: String(value),
|
|
100
|
-
priority
|
|
101
|
-
})
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* Remove a property, returning the value it had (or '' when it was not set).
|
|
106
|
-
* @param {string} property A CSS property name (kebab-case)
|
|
107
|
-
* @returns {string}
|
|
108
|
-
*/
|
|
109
|
-
removeProperty (property) {
|
|
110
|
-
const value = this.getPropertyValue(property)
|
|
111
|
-
this.properties.delete(property)
|
|
112
|
-
return value
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
/**
|
|
116
|
-
* All the declarations as one CSS text string.
|
|
117
|
-
* @returns {string}
|
|
118
|
-
*/
|
|
119
|
-
get cssText () {
|
|
120
|
-
return Array.from(this.properties.entries()).map(([property, {
|
|
121
|
-
value,
|
|
122
|
-
priority
|
|
123
|
-
}]) => `${property}: ${value}${priority ? ` !${priority}` : ''};`).join(' ')
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* Replace every declaration by parsing a CSS text string ("color: red; font-size: 12px !important;").
|
|
128
|
-
* @param {string} cssText
|
|
129
|
-
* @returns {undefined}
|
|
130
|
-
*/
|
|
131
|
-
set cssText (cssText) {
|
|
132
|
-
this.properties.clear()
|
|
133
|
-
String(cssText || '').split(';').forEach(declaration => {
|
|
134
|
-
const colon = declaration.indexOf(':')
|
|
135
|
-
if (colon < 0) {
|
|
136
|
-
return
|
|
137
|
-
}
|
|
138
|
-
const property = declaration.slice(0, colon).trim()
|
|
139
|
-
let value = declaration.slice(colon + 1).trim()
|
|
140
|
-
let priority = ''
|
|
141
|
-
const important = value.match(/!\s*important\s*$/i)
|
|
142
|
-
if (important && typeof important.index === 'number') {
|
|
143
|
-
priority = 'important'
|
|
144
|
-
value = value.slice(0, important.index).trim()
|
|
145
|
-
}
|
|
146
|
-
if (property && value) {
|
|
147
|
-
this.properties.set(property, {
|
|
148
|
-
value,
|
|
149
|
-
priority
|
|
150
|
-
})
|
|
151
|
-
}
|
|
152
|
-
})
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
exports.CSSStyleDeclarationService = CSSStyleDeclarationService
|
|
156
|
-
exports.default = CSSStyleDeclarationService
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file Substitute for the DOM CSSStyleDeclaration Class (the object behind Element.style).
|
|
5
|
+
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
6
|
+
* @version 1.0.0
|
|
7
|
+
*/
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js')
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js')
|
|
10
|
+
require('core-js/modules/esnext.iterator.map.js')
|
|
11
|
+
require('core-js/modules/esnext.map.delete-all.js')
|
|
12
|
+
require('core-js/modules/esnext.map.every.js')
|
|
13
|
+
require('core-js/modules/esnext.map.filter.js')
|
|
14
|
+
require('core-js/modules/esnext.map.find.js')
|
|
15
|
+
require('core-js/modules/esnext.map.find-key.js')
|
|
16
|
+
require('core-js/modules/esnext.map.includes.js')
|
|
17
|
+
require('core-js/modules/esnext.map.key-of.js')
|
|
18
|
+
require('core-js/modules/esnext.map.map-keys.js')
|
|
19
|
+
require('core-js/modules/esnext.map.map-values.js')
|
|
20
|
+
require('core-js/modules/esnext.map.merge.js')
|
|
21
|
+
require('core-js/modules/esnext.map.reduce.js')
|
|
22
|
+
require('core-js/modules/esnext.map.some.js')
|
|
23
|
+
require('core-js/modules/esnext.map.update.js')
|
|
24
|
+
Object.defineProperty(exports, '__esModule', {
|
|
25
|
+
value: true
|
|
26
|
+
})
|
|
27
|
+
exports.CSSStyleDeclarationService = void 0
|
|
28
|
+
/**
|
|
29
|
+
* Simulate the behaviour of the CSSStyleDeclaration Class when there is no DOM available: an ordered map of CSS
|
|
30
|
+
* property/value pairs, parsed from and serialized back to a cssText string. Values are stored and returned as
|
|
31
|
+
* given, with no unit conversion, shorthand expansion or validation - this is a data structure, not a real CSS
|
|
32
|
+
* engine. Named property access (declaration.backgroundColor, camelCase) is added on top of this by
|
|
33
|
+
* createStyleDeclaration, which wraps an instance of this class in a Proxy.
|
|
34
|
+
* @author Joshua Heagle <joshuaheagle@gmail.com>
|
|
35
|
+
* @class
|
|
36
|
+
*/
|
|
37
|
+
class CSSStyleDeclarationService {
|
|
38
|
+
/**
|
|
39
|
+
* @param {string} [cssText=''] Initial declarations, as CSS text ("color: red; font-size: 12px;")
|
|
40
|
+
* @constructor
|
|
41
|
+
*/
|
|
42
|
+
constructor (cssText = '') {
|
|
43
|
+
this.properties = new Map()
|
|
44
|
+
this.cssText = cssText
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* How many properties are currently set.
|
|
49
|
+
* @returns {number}
|
|
50
|
+
*/
|
|
51
|
+
get length () {
|
|
52
|
+
return this.properties.size
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* The name of the property at the given index, in the order it was set, or '' when there is none (matches the
|
|
57
|
+
* DOM's CSSStyleDeclaration, which is array-like).
|
|
58
|
+
* @param {number} index
|
|
59
|
+
* @returns {string}
|
|
60
|
+
*/
|
|
61
|
+
item (index) {
|
|
62
|
+
return Array.from(this.properties.keys())[index] || ''
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* The value of the given property, or '' when it is not set.
|
|
67
|
+
* @param {string} property A CSS property name (kebab-case, e.g. "background-color")
|
|
68
|
+
* @returns {string}
|
|
69
|
+
*/
|
|
70
|
+
getPropertyValue (property) {
|
|
71
|
+
const entry = this.properties.get(property)
|
|
72
|
+
return entry ? entry.value : ''
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* "important" when the property was set with !important, otherwise ''.
|
|
77
|
+
* @param {string} property A CSS property name (kebab-case)
|
|
78
|
+
* @returns {string}
|
|
79
|
+
*/
|
|
80
|
+
getPropertyPriority (property) {
|
|
81
|
+
const entry = this.properties.get(property)
|
|
82
|
+
return entry ? entry.priority : ''
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Set a property's value (and optionally its priority). An empty, null or undefined value removes the property
|
|
87
|
+
* instead, like the DOM.
|
|
88
|
+
* @param {string} property A CSS property name (kebab-case)
|
|
89
|
+
* @param {string} value The value, or '' to remove the property
|
|
90
|
+
* @param {string} [priority=''] "important" to mark it !important
|
|
91
|
+
* @returns {undefined}
|
|
92
|
+
*/
|
|
93
|
+
setProperty (property, value, priority = '') {
|
|
94
|
+
if (value === '' || value === null || typeof value === 'undefined') {
|
|
95
|
+
this.removeProperty(property)
|
|
96
|
+
return
|
|
97
|
+
}
|
|
98
|
+
this.properties.set(property, {
|
|
99
|
+
value: String(value),
|
|
100
|
+
priority
|
|
101
|
+
})
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Remove a property, returning the value it had (or '' when it was not set).
|
|
106
|
+
* @param {string} property A CSS property name (kebab-case)
|
|
107
|
+
* @returns {string}
|
|
108
|
+
*/
|
|
109
|
+
removeProperty (property) {
|
|
110
|
+
const value = this.getPropertyValue(property)
|
|
111
|
+
this.properties.delete(property)
|
|
112
|
+
return value
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* All the declarations as one CSS text string.
|
|
117
|
+
* @returns {string}
|
|
118
|
+
*/
|
|
119
|
+
get cssText () {
|
|
120
|
+
return Array.from(this.properties.entries()).map(([property, {
|
|
121
|
+
value,
|
|
122
|
+
priority
|
|
123
|
+
}]) => `${property}: ${value}${priority ? ` !${priority}` : ''};`).join(' ')
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Replace every declaration by parsing a CSS text string ("color: red; font-size: 12px !important;").
|
|
128
|
+
* @param {string} cssText
|
|
129
|
+
* @returns {undefined}
|
|
130
|
+
*/
|
|
131
|
+
set cssText (cssText) {
|
|
132
|
+
this.properties.clear()
|
|
133
|
+
String(cssText || '').split(';').forEach(declaration => {
|
|
134
|
+
const colon = declaration.indexOf(':')
|
|
135
|
+
if (colon < 0) {
|
|
136
|
+
return
|
|
137
|
+
}
|
|
138
|
+
const property = declaration.slice(0, colon).trim()
|
|
139
|
+
let value = declaration.slice(colon + 1).trim()
|
|
140
|
+
let priority = ''
|
|
141
|
+
const important = value.match(/!\s*important\s*$/i)
|
|
142
|
+
if (important && typeof important.index === 'number') {
|
|
143
|
+
priority = 'important'
|
|
144
|
+
value = value.slice(0, important.index).trim()
|
|
145
|
+
}
|
|
146
|
+
if (property && value) {
|
|
147
|
+
this.properties.set(property, {
|
|
148
|
+
value,
|
|
149
|
+
priority
|
|
150
|
+
})
|
|
151
|
+
}
|
|
152
|
+
})
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
exports.CSSStyleDeclarationService = CSSStyleDeclarationService
|
|
156
|
+
exports.default = CSSStyleDeclarationService
|