@cocreate/element-prototype 1.38.0 → 2.0.1
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/.github/FUNDING.yml +1 -1
- package/.github/workflows/automated.yml +18 -7
- package/CHANGELOG.md +453 -415
- package/CONTRIBUTING.md +6 -6
- package/CoCreate.config.js +2 -2
- package/README.md +69 -20
- package/demo/index.html +2 -2
- package/docs/index.html +4 -4
- package/package.json +7 -7
- package/src/getAttribute.js +44 -10
- package/src/getValue.js +48 -25
- package/src/index.js +168 -1
- package/src/setValue.js +44 -20
- package/test/getAttributeAst.test.mjs +104 -0
- package/test/value-handler.test.cjs +52 -7
package/CONTRIBUTING.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# Contributing to CoCreate-element-prototype
|
|
2
2
|
|
|
3
|
-
This project is work of [many contributors](https://github.com/
|
|
4
|
-
You're encouraged to submit [pull requests](https://github.com/
|
|
5
|
-
[propose features and discuss issues](https://github.com/
|
|
3
|
+
This project is work of [many contributors](https://github.com/CoCreateJS/element-prototype/graphs/contributors).
|
|
4
|
+
You're encouraged to submit [pull requests](https://github.com/CoCreateJS/element-prototype/pulls),
|
|
5
|
+
[propose features and discuss issues](https://github.com/CoCreateJS/element-prototype/issues).
|
|
6
6
|
|
|
7
7
|
In the examples below, substitute your Github username for `contributor` in URLs.
|
|
8
8
|
|
|
9
9
|
## Fork the Project
|
|
10
10
|
|
|
11
|
-
Fork the [project on Github](https://github.com/
|
|
11
|
+
Fork the [project on Github](https://github.com/CoCreateJS/element-prototype) and check out your copy.
|
|
12
12
|
|
|
13
13
|
```
|
|
14
14
|
git clone https://github.com/contributor/CoCreate-element-prototype.git
|
|
15
15
|
cd CoCreate-element-prototype
|
|
16
|
-
git remote add upstream https://
|
|
16
|
+
git remote add upstream https://github.com/CoCreateJS/element-prototype.git
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## Create a Topic Branch
|
|
@@ -75,7 +75,7 @@ git push origin my-feature-branch
|
|
|
75
75
|
|
|
76
76
|
## Make a Pull Request
|
|
77
77
|
|
|
78
|
-
Go to [https://github.com/
|
|
78
|
+
Go to [https://github.com/CoCreateJS/element-prototype](https://github.com/CoCreateJS/element-prototype) and select your feature branch.
|
|
79
79
|
Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
|
|
80
80
|
|
|
81
81
|
## Rebase
|
package/CoCreate.config.js
CHANGED
|
@@ -12,8 +12,8 @@ module.exports = {
|
|
|
12
12
|
"pathname": "/docs/element-prototype/index.html",
|
|
13
13
|
"src": "{{./docs/index.html}}",
|
|
14
14
|
"host": [
|
|
15
|
-
"
|
|
16
|
-
"general.
|
|
15
|
+
"CoCreateJS.com",
|
|
16
|
+
"general.CoCreateJS.com"
|
|
17
17
|
],
|
|
18
18
|
"directory": "element-prototype",
|
|
19
19
|
"content-type": "{{content-type}}",
|
package/README.md
CHANGED
|
@@ -1,19 +1,68 @@
|
|
|
1
1
|
# CoCreate-element-prototype
|
|
2
2
|
|
|
3
|
-
A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API. Take it for a spin in our [playground!](https://
|
|
3
|
+
A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API. Take it for a spin in our [playground!](https://CoCreateJS.com/docs/element-prototype)
|
|
4
4
|
|
|
5
|
-
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
|
|
13
|
+
|
|
14
|
+
## [Docs & Demo](https://CoCreateJS.com/docs/element-prototype)
|
|
15
|
+
|
|
16
|
+
For a complete guide and working demo refer to the [doumentation](https://CoCreateJS.com/docs/element-prototype)
|
|
17
|
+
|
|
18
|
+
## Generic element values
|
|
19
|
+
|
|
20
|
+
For generic elements, including contenteditable elements, `getValue()` and
|
|
21
|
+
`getValueAsync()` select the `value` attribute first, then the `.value` property
|
|
22
|
+
when it exists, and finally `innerHTML`. An empty attribute or property remains
|
|
23
|
+
an empty value; it does not fall through to rendered content.
|
|
24
|
+
|
|
25
|
+
Explicit DOM read types bypass both stored values: `get-value-type="text"` or
|
|
26
|
+
`"innerText"` reads visible text, `"textContent"` reads text content,
|
|
27
|
+
`"innerHTML"` reads inner markup, and `"outerHTML"`, `"element"`, or `"node"`
|
|
28
|
+
reads outer markup. `value-type` supplies the same options when a scoped
|
|
29
|
+
`get-value-type` is not specified. Conversion types such as `boolean` and `json`
|
|
30
|
+
retain the normal value precedence and convert the selected value afterward.
|
|
31
|
+
DOM reads still support `get-value-remove-query` filtering.
|
|
32
|
+
The prototype methods also accept an explicit type argument, such as
|
|
33
|
+
`element.getValue("textContent")` or `element.getValueAsync("innerHTML")`.
|
|
34
|
+
Programmatically claimed Editor hosts use property storage even before their
|
|
35
|
+
initial asynchronous read has finished.
|
|
36
|
+
|
|
37
|
+
Non-native elements marked with `component`, `editor`, or an enabled
|
|
38
|
+
`contenteditable` attribute
|
|
39
|
+
store incoming values on their own `.value` property after setter transformations
|
|
40
|
+
and conversion, then dispatch
|
|
41
|
+
the configured events. This branch does not write a `value` attribute or replace
|
|
42
|
+
DOM content directly. An existing property setter, such as Editor's source setter,
|
|
43
|
+
still runs when `.value` is assigned. Generic elements can retain structured
|
|
44
|
+
objects and arrays without JSON serialization. Inputs, textareas, and selects
|
|
45
|
+
follow their native field paths even with these marker attributes. Iframes use
|
|
46
|
+
their dedicated setter path when marked `editor`, while an
|
|
47
|
+
explicit `component` marker still opts an iframe into property storage;
|
|
48
|
+
checkbox, radio, select, password, and date handling therefore still applies.
|
|
49
|
+
`crdt="true"` no longer suppresses shared-setter native assignments; file inputs
|
|
50
|
+
remain excluded from ordinary value assignment.
|
|
51
|
+
|
|
52
|
+
The shared getters return these stored component/editor values directly without
|
|
53
|
+
consuming them. Before an editor has a `.value` property, its getter still uses
|
|
54
|
+
the existing element-specific or generic fallback to support initialization.
|
|
55
|
+
Component/editor/contenteditable reads bypass the generic precedence and transformations above,
|
|
56
|
+
as component storage did previously. Native field and iframe handling retain
|
|
57
|
+
their dedicated paths when this component/editor branch does not apply. Element
|
|
58
|
+
methods supplied by a component may bypass this shared handler. Editor preserves
|
|
59
|
+
these shared methods and consumes their input notifications. Setter-generated
|
|
60
|
+
`input` and `change` events include the replacement in `event.detail.value`,
|
|
61
|
+
alongside the existing `skip` flag; source-only notifications can omit the value.
|
|
62
|
+
This lets an iframe adapter receive a full reset's source without assigning
|
|
63
|
+
`src` or `srcdoc` itself. Before an iframe has a stored value, the shared getter
|
|
64
|
+
reads its `srcdoc` attribute or serializes its accessible current document.
|
|
65
|
+
No separate component value storage Map is used.
|
|
17
66
|
|
|
18
67
|
## Value transformations
|
|
19
68
|
|
|
@@ -56,11 +105,11 @@ when reading a value that was previously written.
|
|
|
56
105
|
## CDN
|
|
57
106
|
|
|
58
107
|
```html
|
|
59
|
-
<script src="https://cdn.
|
|
108
|
+
<script src="https://cdn.CoCreateJS.com/element-prototype/latest/CoCreate-element-prototype.min.js"></script>
|
|
60
109
|
```
|
|
61
110
|
|
|
62
111
|
```html
|
|
63
|
-
<script src="https://cdn.
|
|
112
|
+
<script src="https://cdn.CoCreateJS.com/element-prototype/latest/CoCreate-element-prototype.min.css"></script>
|
|
64
113
|
```
|
|
65
114
|
|
|
66
115
|
## NPM
|
|
@@ -88,13 +137,13 @@ $ yarn install @cocreate/element-prototype
|
|
|
88
137
|
|
|
89
138
|
# Announcements
|
|
90
139
|
|
|
91
|
-
All updates to this library are documented in our [CHANGELOG](https://github.com/
|
|
140
|
+
All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreateJS/element-prototype/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreateJS/element-prototype/releases). You may also subscribe to email for releases and breaking changes.
|
|
92
141
|
|
|
93
142
|
<a name="roadmap"></a>
|
|
94
143
|
|
|
95
144
|
# Roadmap
|
|
96
145
|
|
|
97
|
-
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/
|
|
146
|
+
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreateJS/element-prototype/issues) and [pull requests](https://github.com/CoCreateJS/element-prototype/pulls). We would love to hear your feedback.
|
|
98
147
|
|
|
99
148
|
<a name="about"></a>
|
|
100
149
|
|
|
@@ -102,7 +151,7 @@ If you are interested in the future direction of this project, please take a loo
|
|
|
102
151
|
|
|
103
152
|
CoCreate-element-prototype is guided and supported by the CoCreate Developer Experience Team.
|
|
104
153
|
|
|
105
|
-
Please Email the Developer Experience Team [here](mailto:develop@
|
|
154
|
+
Please Email the Developer Experience Team [here](mailto:develop@CoCreateJS.com) in case of any queries.
|
|
106
155
|
|
|
107
156
|
CoCreate-element-prototype is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
|
|
108
157
|
|
|
@@ -110,9 +159,9 @@ CoCreate-element-prototype is maintained and funded by CoCreate. The names and l
|
|
|
110
159
|
|
|
111
160
|
# How to Contribute
|
|
112
161
|
|
|
113
|
-
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/
|
|
162
|
+
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreateJS/element-prototype/blob/master/CONTRIBUTING.md) guide for details.
|
|
114
163
|
|
|
115
|
-
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/
|
|
164
|
+
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreateJS/element-prototype/issues) and [pull requests](https://github.com/CoCreateJS/element-prototype/pulls) or merely upvote or comment on existing issues or pull requests.
|
|
116
165
|
|
|
117
166
|
We appreciate your continued support, thank you!
|
|
118
167
|
|
|
@@ -122,9 +171,9 @@ We appreciate your continued support, thank you!
|
|
|
122
171
|
|
|
123
172
|
This software is dual-licensed under the GNU Affero General Public License version 3 (AGPLv3) and a commercial license.
|
|
124
173
|
|
|
125
|
-
- **Open Source Use**: For open-source projects and non-commercial use, this software is available under the AGPLv3. The AGPLv3 allows you to freely use, modify, and distribute this software, provided that all modifications and derivative works are also licensed under the AGPLv3. For the full license text, see the [LICENSE file](https://github.com/
|
|
174
|
+
- **Open Source Use**: For open-source projects and non-commercial use, this software is available under the AGPLv3. The AGPLv3 allows you to freely use, modify, and distribute this software, provided that all modifications and derivative works are also licensed under the AGPLv3. For the full license text, see the [LICENSE file](https://github.com/CoCreateJS/element-prototype/blob/master/LICENSE).
|
|
126
175
|
|
|
127
|
-
- **Commercial Use**: For-profit companies and individuals intending to use this software for commercial purposes must obtain a commercial license. The commercial license is available when you sign up for an API key on our [website](https://
|
|
176
|
+
- **Commercial Use**: For-profit companies and individuals intending to use this software for commercial purposes must obtain a commercial license. The commercial license is available when you sign up for an API key on our [website](https://CoCreateJS.com). This license permits proprietary use and modification of the software without the copyleft requirements of the AGPLv3. It is ideal for integrating this software into proprietary commercial products and applications.
|
|
128
177
|
|
|
129
178
|
If you have not purchased a commercial license and intend to use this software for commercial purposes, you are required to sign up for an API key on our website.
|
|
130
179
|
|
package/demo/index.html
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
</head>
|
|
15
15
|
|
|
16
16
|
<body>
|
|
17
|
-
<!--<script src="https://cdn.
|
|
18
|
-
<script src="https://
|
|
17
|
+
<!--<script src="https://cdn.CoCreateJS.com/element-prototype/latest/CoCreate-element-prototype.min.js"></script>-->
|
|
18
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
19
19
|
</body>
|
|
20
20
|
</html>
|
package/docs/index.html
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
rel="icon"
|
|
10
10
|
type="image/png"
|
|
11
11
|
sizes="32x32"
|
|
12
|
-
href="https://
|
|
12
|
+
href="https://CoCreateJS.com/images/favicon.ico" />
|
|
13
13
|
<meta
|
|
14
14
|
name="description"
|
|
15
15
|
content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
share-width="500"
|
|
37
37
|
share-media="https://via.placeholder.com/300/09f/fff.png">
|
|
38
38
|
<a
|
|
39
|
-
href="https://github.com/
|
|
39
|
+
href="https://github.com/CoCreateJS/CoCreate-element-prototype"
|
|
40
40
|
target="_blank"
|
|
41
41
|
class="margin-right:15px"
|
|
42
42
|
><i src="/assets/svg/github.svg"></i
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
<pre
|
|
83
83
|
class="margin-top:15px"><code class="language-javascript">npm install cocreate-element-prototype</code></pre>
|
|
84
84
|
<p class="padding:10px_0px">Or you can use cdn link:</p>
|
|
85
|
-
<pre><code class="language-javascript">https://cdn.
|
|
85
|
+
<pre><code class="language-javascript">https://cdn.CoCreateJS.com/js/CoCreate-element-prototype.min.js</code></pre>
|
|
86
86
|
|
|
87
87
|
<h2
|
|
88
88
|
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
|
|
@@ -229,6 +229,6 @@
|
|
|
229
229
|
</div>
|
|
230
230
|
|
|
231
231
|
<!--CoCreateJS-->
|
|
232
|
-
<script src="https://
|
|
232
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
233
233
|
</body>
|
|
234
234
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/element-prototype",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"element-prototype",
|
|
@@ -22,24 +22,24 @@
|
|
|
22
22
|
},
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "git+https://
|
|
25
|
+
"url": "git+https://github.com/CoCreateJS/element-prototype.git"
|
|
26
26
|
},
|
|
27
27
|
"author": "CoCreate LLC",
|
|
28
28
|
"license": "AGPL-3.0",
|
|
29
29
|
"bugs": {
|
|
30
|
-
"url": "https://github.com/
|
|
30
|
+
"url": "https://github.com/CoCreateJS/element-prototype/issues"
|
|
31
31
|
},
|
|
32
|
-
"homepage": "https://
|
|
32
|
+
"homepage": "https://CoCreateJS.com/docs/element-prototype",
|
|
33
33
|
"funding": {
|
|
34
34
|
"type": "GitHub Sponsors ❤",
|
|
35
|
-
"url": "https://github.com/sponsors/
|
|
35
|
+
"url": "https://github.com/sponsors/CoCreateJS"
|
|
36
36
|
},
|
|
37
37
|
"main": "./src/index.js",
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@cocreate/utils": "^
|
|
39
|
+
"@cocreate/utils": "^2.0.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@cocreate/webpack": "^
|
|
42
|
+
"@cocreate/webpack": "^2.0.0"
|
|
43
43
|
},
|
|
44
44
|
"allowScripts": {
|
|
45
45
|
"@cocreate/utils@1.42.2": true,
|
package/src/getAttribute.js
CHANGED
|
@@ -51,6 +51,20 @@ function updateAttributes(e) {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
function parseObjectValue(value) {
|
|
55
|
+
if (typeof value !== "string") return value;
|
|
56
|
+
|
|
57
|
+
const firstCharacter = value.trimStart()[0];
|
|
58
|
+
if (firstCharacter !== "{" && firstCharacter !== "[") return value;
|
|
59
|
+
|
|
60
|
+
try {
|
|
61
|
+
const parsed = JSON.parse(value);
|
|
62
|
+
return parsed !== null && typeof parsed === "object" ? parsed : value;
|
|
63
|
+
} catch {
|
|
64
|
+
return value;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
54
68
|
/**
|
|
55
69
|
* Custom getAttribute function that processes the attribute value synchronously
|
|
56
70
|
* @param {Element} element - The element from which to get the attribute
|
|
@@ -62,13 +76,23 @@ function getAttribute(element, name) {
|
|
|
62
76
|
throw new Error("First argument must be an Element");
|
|
63
77
|
}
|
|
64
78
|
|
|
65
|
-
const
|
|
66
|
-
if (
|
|
67
|
-
|
|
68
|
-
|
|
79
|
+
const rawValue = originalGetAttribute.call(element, name);
|
|
80
|
+
if (typeof rawValue !== "string") return rawValue;
|
|
81
|
+
// Preserve a whole literal for its next consumer without evaluating operators.
|
|
82
|
+
if (
|
|
83
|
+
rawValue.length >= 2 &&
|
|
84
|
+
rawValue.startsWith("`") &&
|
|
85
|
+
rawValue.indexOf("`", 1) === rawValue.length - 1
|
|
86
|
+
) return rawValue.slice(1, -1);
|
|
87
|
+
if (!rawValue.includes("$")) return rawValue;
|
|
88
|
+
const value = parseObjectValue(rawValue);
|
|
69
89
|
|
|
70
90
|
// Evaluate formulas or step paths synchronously via the unified AST Engine
|
|
71
|
-
return astSync({
|
|
91
|
+
return astSync({
|
|
92
|
+
executeAST: value,
|
|
93
|
+
node: element,
|
|
94
|
+
sandbox: { $this: element }
|
|
95
|
+
});
|
|
72
96
|
}
|
|
73
97
|
|
|
74
98
|
/**
|
|
@@ -82,13 +106,23 @@ async function getAttributeAsync(element, name) {
|
|
|
82
106
|
throw new Error("First argument must be an Element");
|
|
83
107
|
}
|
|
84
108
|
|
|
85
|
-
const
|
|
86
|
-
if (
|
|
87
|
-
|
|
88
|
-
|
|
109
|
+
const rawValue = originalGetAttribute.call(element, name);
|
|
110
|
+
if (typeof rawValue !== "string") return rawValue;
|
|
111
|
+
// Preserve a whole literal for its next consumer without evaluating operators.
|
|
112
|
+
if (
|
|
113
|
+
rawValue.length >= 2 &&
|
|
114
|
+
rawValue.startsWith("`") &&
|
|
115
|
+
rawValue.indexOf("`", 1) === rawValue.length - 1
|
|
116
|
+
) return rawValue.slice(1, -1);
|
|
117
|
+
if (!rawValue.includes("$")) return rawValue;
|
|
118
|
+
const value = parseObjectValue(rawValue);
|
|
89
119
|
|
|
90
120
|
// Evaluate async formulas, database lookups, or template blocks asynchronously
|
|
91
|
-
return await astAsync({
|
|
121
|
+
return await astAsync({
|
|
122
|
+
executeAST: value,
|
|
123
|
+
node: element,
|
|
124
|
+
sandbox: { $this: element }
|
|
125
|
+
});
|
|
92
126
|
}
|
|
93
127
|
|
|
94
128
|
// Override the native getAttribute method on the global Element prototype
|
package/src/getValue.js
CHANGED
|
@@ -19,20 +19,18 @@
|
|
|
19
19
|
import { astSync, astAsync } from "@cocreate/utils";
|
|
20
20
|
import { getValueAttribute, transformValue, parseJson, toBoolean, toArray } from "@cocreate/utils";
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
HTMLElement.prototype.getValue = function () {
|
|
25
|
-
return getValue(this);
|
|
22
|
+
HTMLElement.prototype.getValue = function (valueType) {
|
|
23
|
+
return getValue(this, valueType);
|
|
26
24
|
};
|
|
27
|
-
SVGElement.prototype.getValue = function () {
|
|
28
|
-
return getValue(this);
|
|
25
|
+
SVGElement.prototype.getValue = function (valueType) {
|
|
26
|
+
return getValue(this, valueType);
|
|
29
27
|
};
|
|
30
28
|
|
|
31
|
-
HTMLElement.prototype.getValueAsync = async function () {
|
|
32
|
-
return await getValueAsync(this);
|
|
29
|
+
HTMLElement.prototype.getValueAsync = async function (valueType) {
|
|
30
|
+
return await getValueAsync(this, valueType);
|
|
33
31
|
};
|
|
34
|
-
SVGElement.prototype.getValueAsync = async function () {
|
|
35
|
-
return await getValueAsync(this);
|
|
32
|
+
SVGElement.prototype.getValueAsync = async function (valueType) {
|
|
33
|
+
return await getValueAsync(this, valueType);
|
|
36
34
|
};
|
|
37
35
|
|
|
38
36
|
/**
|
|
@@ -54,13 +52,16 @@ const getValue = (element, valueType) => {
|
|
|
54
52
|
let value = element.value || readValueAttribute() || "";
|
|
55
53
|
|
|
56
54
|
if (
|
|
57
|
-
|
|
55
|
+
(!["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName) && (
|
|
56
|
+
element.hasAttribute("component") ||
|
|
57
|
+
((element.__cocreateEditor || element.hasAttribute("editor") ||
|
|
58
|
+
(element.hasAttribute("contenteditable") && element.getAttribute("contenteditable") !== "false")) &&
|
|
59
|
+
"value" in element)
|
|
60
|
+
)) ||
|
|
58
61
|
element.type === "file" ||
|
|
59
62
|
element.getAttribute("type") === "file"
|
|
60
63
|
) {
|
|
61
|
-
|
|
62
|
-
// storage.delete(element);
|
|
63
|
-
return value;
|
|
64
|
+
return element.value;
|
|
64
65
|
}
|
|
65
66
|
|
|
66
67
|
let prefix = getValueAttribute(element, "prefix", "get-value") || "";
|
|
@@ -130,7 +131,7 @@ const getValue = (element, valueType) => {
|
|
|
130
131
|
break;
|
|
131
132
|
|
|
132
133
|
case "IFRAME":
|
|
133
|
-
value = element
|
|
134
|
+
value = readFrame(element);
|
|
134
135
|
break;
|
|
135
136
|
|
|
136
137
|
case "IMG":
|
|
@@ -186,13 +187,16 @@ const getValueAsync = async (element, valueType) => {
|
|
|
186
187
|
let value = element.value || readValueAttribute() || "";
|
|
187
188
|
|
|
188
189
|
if (
|
|
189
|
-
|
|
190
|
+
(!["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName) && (
|
|
191
|
+
element.hasAttribute("component") ||
|
|
192
|
+
((element.__cocreateEditor || element.hasAttribute("editor") ||
|
|
193
|
+
(element.hasAttribute("contenteditable") && element.getAttribute("contenteditable") !== "false")) &&
|
|
194
|
+
"value" in element)
|
|
195
|
+
)) ||
|
|
190
196
|
element.type === "file" ||
|
|
191
197
|
element.getAttribute("type") === "file"
|
|
192
198
|
) {
|
|
193
|
-
|
|
194
|
-
storage.delete(element);
|
|
195
|
-
return value;
|
|
199
|
+
return element.value;
|
|
196
200
|
}
|
|
197
201
|
|
|
198
202
|
let prefix = getValueAttribute(element, "prefix", "get-value") || "";
|
|
@@ -263,7 +267,7 @@ const getValueAsync = async (element, valueType) => {
|
|
|
263
267
|
break;
|
|
264
268
|
|
|
265
269
|
case "IFRAME":
|
|
266
|
-
value = element
|
|
270
|
+
value = readFrame(element);
|
|
267
271
|
break;
|
|
268
272
|
|
|
269
273
|
default:
|
|
@@ -559,11 +563,30 @@ const handleSelectedValues = (element, values, prefix, suffix) => {
|
|
|
559
563
|
/**
|
|
560
564
|
* Retrieves a value from a standard element.
|
|
561
565
|
*/
|
|
566
|
+
const readFrame = (element) => {
|
|
567
|
+
if ("value" in element) return element.value;
|
|
568
|
+
if (element.hasAttribute("srcdoc")) return element.srcdoc;
|
|
569
|
+
const doc = element.contentDocument;
|
|
570
|
+
const declaration = doc.doctype
|
|
571
|
+
? new element.ownerDocument.defaultView.XMLSerializer().serializeToString(doc.doctype)
|
|
572
|
+
: "";
|
|
573
|
+
return declaration + doc.documentElement.outerHTML;
|
|
574
|
+
};
|
|
575
|
+
|
|
562
576
|
const handleElement = (element, valueType, evaluateValue) => {
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
577
|
+
const readDOM = [
|
|
578
|
+
"text", "innerText", "textContent", "innerHTML", "outerHTML", "element", "node"
|
|
579
|
+
].includes(valueType);
|
|
580
|
+
|
|
581
|
+
// Explicit DOM reads bypass stored values. Conversion types retain the
|
|
582
|
+
// normal attribute -> property -> DOM precedence, including empty values.
|
|
583
|
+
if (!readDOM) {
|
|
584
|
+
if (element.hasAttribute("value")) {
|
|
585
|
+
return evaluateValue
|
|
586
|
+
? element.getAttribute("value")
|
|
587
|
+
: element.attributes.getNamedItem("value")?.value;
|
|
588
|
+
}
|
|
589
|
+
if ("value" in element) return element.value;
|
|
567
590
|
}
|
|
568
591
|
|
|
569
592
|
let targetElement = element;
|
|
@@ -591,4 +614,4 @@ const handleElement = (element, valueType, evaluateValue) => {
|
|
|
591
614
|
}
|
|
592
615
|
};
|
|
593
616
|
|
|
594
|
-
export { getValue, getValueAsync
|
|
617
|
+
export { getValue, getValueAsync };
|
package/src/index.js
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
// Commercial Licensing Information:
|
|
19
19
|
// For commercial use of this software without the copyleft provisions of the AGPLv3,
|
|
20
20
|
// you must obtain a commercial license from CoCreate LLC.
|
|
21
|
-
// For details, visit <https://
|
|
21
|
+
// For details, visit <https://CoCreateJS.com/licenses/> or contact us at sales@CoCreateJS.com.
|
|
22
22
|
|
|
23
23
|
import { getAttribute } from "./getAttribute.js";
|
|
24
24
|
import { setValue } from "./setValue.js";
|
|
@@ -26,8 +26,175 @@ import { getValue } from "./getValue.js";
|
|
|
26
26
|
import { queryElements } from "./queryElements.js";
|
|
27
27
|
|
|
28
28
|
export default {
|
|
29
|
+
/**
|
|
30
|
+
*
|
|
31
|
+
* @public
|
|
32
|
+
* @environment client
|
|
33
|
+
*/
|
|
29
34
|
getAttribute,
|
|
35
|
+
/**
|
|
36
|
+
*
|
|
37
|
+
* @public
|
|
38
|
+
* @environment client
|
|
39
|
+
*/
|
|
30
40
|
getValue,
|
|
41
|
+
/**
|
|
42
|
+
*
|
|
43
|
+
* @public
|
|
44
|
+
* @environment client
|
|
45
|
+
*/
|
|
31
46
|
setValue,
|
|
47
|
+
/**
|
|
48
|
+
*
|
|
49
|
+
* @public
|
|
50
|
+
* @environment client
|
|
51
|
+
*/
|
|
32
52
|
queryElements
|
|
33
53
|
};
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
*
|
|
57
|
+
* @name array
|
|
58
|
+
* @kind attribute
|
|
59
|
+
* @environment client
|
|
60
|
+
*/
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
*
|
|
64
|
+
* @name component
|
|
65
|
+
* @kind attribute
|
|
66
|
+
* @environment client
|
|
67
|
+
*/
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
*
|
|
71
|
+
* @name contenteditable
|
|
72
|
+
* @kind attribute
|
|
73
|
+
* @environment client
|
|
74
|
+
*/
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
*
|
|
78
|
+
* @name editor
|
|
79
|
+
* @kind attribute
|
|
80
|
+
* @environment client
|
|
81
|
+
*/
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
*
|
|
85
|
+
* @name key
|
|
86
|
+
* @kind attribute
|
|
87
|
+
* @environment client
|
|
88
|
+
*/
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
*
|
|
92
|
+
* @name locale
|
|
93
|
+
* @kind attribute
|
|
94
|
+
* @environment client
|
|
95
|
+
*/
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
*
|
|
99
|
+
* @name multiple
|
|
100
|
+
* @kind attribute
|
|
101
|
+
* @environment client
|
|
102
|
+
*/
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
*
|
|
106
|
+
* @name now
|
|
107
|
+
* @kind attribute
|
|
108
|
+
* @environment client
|
|
109
|
+
*/
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
*
|
|
113
|
+
* @name object
|
|
114
|
+
* @kind attribute
|
|
115
|
+
* @environment client
|
|
116
|
+
*/
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
*
|
|
120
|
+
* @name set-value-prefix
|
|
121
|
+
* @kind attribute
|
|
122
|
+
* @environment client
|
|
123
|
+
*/
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
*
|
|
127
|
+
* @name set-value-suffix
|
|
128
|
+
* @kind attribute
|
|
129
|
+
* @environment client
|
|
130
|
+
*/
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
*
|
|
134
|
+
* @name src
|
|
135
|
+
* @kind attribute
|
|
136
|
+
* @environment client
|
|
137
|
+
*/
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
*
|
|
141
|
+
* @name srcdoc
|
|
142
|
+
* @kind attribute
|
|
143
|
+
* @environment client
|
|
144
|
+
*/
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
*
|
|
148
|
+
* @name state_id
|
|
149
|
+
* @kind attribute
|
|
150
|
+
* @environment client
|
|
151
|
+
*/
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
*
|
|
155
|
+
* @name time-ago-limit
|
|
156
|
+
* @kind attribute
|
|
157
|
+
* @environment client
|
|
158
|
+
*/
|
|
159
|
+
|
|
160
|
+
/**
|
|
161
|
+
*
|
|
162
|
+
* @name time-to-units
|
|
163
|
+
* @kind attribute
|
|
164
|
+
* @environment client
|
|
165
|
+
*/
|
|
166
|
+
|
|
167
|
+
/**
|
|
168
|
+
*
|
|
169
|
+
* @name type
|
|
170
|
+
* @kind attribute
|
|
171
|
+
* @environment client
|
|
172
|
+
*/
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
*
|
|
176
|
+
* @name use-utc
|
|
177
|
+
* @kind attribute
|
|
178
|
+
* @environment client
|
|
179
|
+
*/
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
*
|
|
183
|
+
* @name value
|
|
184
|
+
* @kind attribute
|
|
185
|
+
* @environment client
|
|
186
|
+
*/
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
*
|
|
190
|
+
* @name week-start-day
|
|
191
|
+
* @kind attribute
|
|
192
|
+
* @environment client
|
|
193
|
+
*/
|
|
194
|
+
|
|
195
|
+
/**
|
|
196
|
+
* A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.
|
|
197
|
+
*
|
|
198
|
+
* @module element-prototype
|
|
199
|
+
* @environment client
|
|
200
|
+
*/
|