@epa-wg/custom-element 0.0.18 → 0.0.20
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 +32 -7
- package/bin/xslDtd2Ide.mjs +1 -1
- package/custom-element.js +203 -59
- package/demo/a.html +55 -15
- package/demo/data-slices.html +185 -0
- package/demo/demo.css +1 -0
- package/demo/dom-merge.html +2 -2
- package/demo/external-template.html +1 -0
- package/demo/http-request.html +39 -10
- package/demo/local-storage.html +108 -3
- package/demo/location-element.html +14 -9
- package/demo/parameters.html +18 -0
- package/demo/s.xml +93 -1
- package/demo/s.xslt +12 -10
- package/demo/ss.html +50 -30
- package/demo/z.html +62 -48
- package/http-request.js +55 -26
- package/ide/customData-dce.json +25 -2
- package/ide/web-types-dce.json +16 -3
- package/ide/web-types-xsl.json +1 -1
- package/index.html +2 -1
- package/local-storage.js +47 -10
- package/location-element.js +7 -7
- package/package.json +1 -1
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
5
|
+
<title>Data slices - Declarative Custom Element implementation demo</title>
|
|
6
|
+
<link rel="icon" href="./wc-square.svg"/>
|
|
7
|
+
|
|
8
|
+
<script type="module" src="../http-request.js"></script>
|
|
9
|
+
<script type="module" src="../input-text.js"></script>
|
|
10
|
+
<script type="module" src="../custom-element.js"></script>
|
|
11
|
+
<style>
|
|
12
|
+
@import "./demo.css";
|
|
13
|
+
</style>
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
|
|
17
|
+
<nav>
|
|
18
|
+
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
19
|
+
<h3>Data slices propagation by events.</h3>
|
|
20
|
+
</nav>
|
|
21
|
+
|
|
22
|
+
<html-demo-element legend="A. slice initialization, change on event"
|
|
23
|
+
description="initial value should be 0; + and - should change the number in input field">
|
|
24
|
+
<template>
|
|
25
|
+
<custom-element>
|
|
26
|
+
<template>
|
|
27
|
+
<button slice="clickcount"
|
|
28
|
+
slice-event="click"
|
|
29
|
+
slice-value="//clickcount + 1" >
|
|
30
|
+
+
|
|
31
|
+
</button>
|
|
32
|
+
<button slice="clickcount"
|
|
33
|
+
slice-event="click"
|
|
34
|
+
slice-value="//clickcount - 1" >
|
|
35
|
+
-
|
|
36
|
+
</button>
|
|
37
|
+
<input slice="clickcount" type="number" value="{//clickcount ?? 0}" />
|
|
38
|
+
{//clickcount}
|
|
39
|
+
</template>
|
|
40
|
+
</custom-element>
|
|
41
|
+
</template>
|
|
42
|
+
</html-demo-element>
|
|
43
|
+
|
|
44
|
+
<html-demo-element legend="B. slice event data."
|
|
45
|
+
description="move the mouse over TEXTAREA and click to see slice and slice event changed">
|
|
46
|
+
<template>
|
|
47
|
+
<custom-element>
|
|
48
|
+
<template>
|
|
49
|
+
<textarea slice="s" slice-value="concat('x:', //@pageX)"
|
|
50
|
+
slice-event="mousemove click"
|
|
51
|
+
style="width:16rem;height:16rem;box-shadow: inset {//@offsetX}px {//@offsetY}px gold;" ></textarea><br/>
|
|
52
|
+
//slice/s : {//slice/s} <br/>
|
|
53
|
+
//slice/s/event/@offsetY: {//slice/s/event/@offsetY} <br/>
|
|
54
|
+
event type:{//slice/s/event/@type}
|
|
55
|
+
</template>
|
|
56
|
+
</custom-element>
|
|
57
|
+
</template>
|
|
58
|
+
</html-demo-element>
|
|
59
|
+
|
|
60
|
+
<html-demo-element legend="1. slice change on event. 1:1 slice⮂value"
|
|
61
|
+
description="initial value blank; type and unfocus to see slice changed">
|
|
62
|
+
<template>
|
|
63
|
+
|
|
64
|
+
<custom-element>
|
|
65
|
+
<input slice="typed" /> //slice/typed : {//slice/typed}
|
|
66
|
+
</custom-element>
|
|
67
|
+
</template>
|
|
68
|
+
</html-demo-element>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<html-demo-element legend="2. initial slice value, slice change on event. slice⮂value, w/ initial"
|
|
72
|
+
description="initial value from input; type and unfocus to see slice changed">
|
|
73
|
+
<template>
|
|
74
|
+
<custom-element>
|
|
75
|
+
<input slice="s" value="{//s ?? 'B'}" /> //slice/s : {//slice/s}
|
|
76
|
+
</custom-element>
|
|
77
|
+
</template>
|
|
78
|
+
</html-demo-element>
|
|
79
|
+
|
|
80
|
+
<html-demo-element legend="3. initial slice value, slice change on event. slice⮂value, w/ initial"
|
|
81
|
+
description="initial value from input; type to see slice changed">
|
|
82
|
+
<template>
|
|
83
|
+
<custom-element>
|
|
84
|
+
<input slice="s" value="{//s ?? 'B'}" slice-event="input"/> //slice/s : {//slice/s}
|
|
85
|
+
</custom-element>
|
|
86
|
+
</template>
|
|
87
|
+
</html-demo-element>
|
|
88
|
+
|
|
89
|
+
<html-demo-element legend="4. initial slice value from attribute, slice change on event."
|
|
90
|
+
description="initial value from input; type to see slice changed">
|
|
91
|
+
<template>
|
|
92
|
+
<custom-element tag="dce-1">
|
|
93
|
+
<template>
|
|
94
|
+
<attribute name="a" >😁</attribute>
|
|
95
|
+
<input slice="s" value="{//s ?? $a}" slice-event="keyup" />
|
|
96
|
+
attribute 'a' : {$a}
|
|
97
|
+
//slice/s : {//slice/s}
|
|
98
|
+
</template>
|
|
99
|
+
</custom-element>
|
|
100
|
+
<dce-1></dce-1>
|
|
101
|
+
<dce-1 a="🤗"></dce-1>
|
|
102
|
+
</template>
|
|
103
|
+
</html-demo-element>
|
|
104
|
+
|
|
105
|
+
<html-demo-element legend="5. initial slice value from attribute, slice change on event."
|
|
106
|
+
description="initial value from input as 'xB'; type and unfocus to see slice changed">
|
|
107
|
+
<template>
|
|
108
|
+
<custom-element>
|
|
109
|
+
<template>
|
|
110
|
+
<input slice="s" value="{substring(//s, 2) ?? 'B'}" slice-value="concat('x', @value )" />
|
|
111
|
+
//slice/s : {//slice/s}
|
|
112
|
+
</template>
|
|
113
|
+
</custom-element>
|
|
114
|
+
</template>
|
|
115
|
+
</html-demo-element>
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
<html-demo-element legend="6. initial slice value from input, button ignored till change on click."
|
|
119
|
+
description="initial value from input as 'anonymous'; on button click change to 'broccoli'">
|
|
120
|
+
<template>
|
|
121
|
+
<custom-element>
|
|
122
|
+
<template>
|
|
123
|
+
<input slice="nickname" value="anonymous" />
|
|
124
|
+
<button slice="nickname" slice-value="'broccoli'" slice-event="click">🥦</button>
|
|
125
|
+
{//nickname}
|
|
126
|
+
</template>
|
|
127
|
+
</custom-element>
|
|
128
|
+
</template>
|
|
129
|
+
</html-demo-element>
|
|
130
|
+
|
|
131
|
+
<html-demo-element legend="7. initial slice value from SLICE element, button ignored till change on click."
|
|
132
|
+
description="synthetic SLICE element serves as initial value holder">
|
|
133
|
+
<template>
|
|
134
|
+
<custom-element>
|
|
135
|
+
<template>
|
|
136
|
+
<button slice="clickcount" slice-event="click tap" slice-value="//clickcount + 1">
|
|
137
|
+
<slice slice="clickcount" value="0" ></slice>
|
|
138
|
+
click/tap
|
|
139
|
+
</button>
|
|
140
|
+
//clickcount : {//clickcount}
|
|
141
|
+
</template>
|
|
142
|
+
</custom-element>
|
|
143
|
+
</template>
|
|
144
|
+
</html-demo-element>
|
|
145
|
+
|
|
146
|
+
<html-demo-element legend="8. multiple slices by SLICE element, button ignored till change on click."
|
|
147
|
+
description="synthetic SLICE elements serve as initial value holder">
|
|
148
|
+
<template>
|
|
149
|
+
<custom-element>
|
|
150
|
+
<template>
|
|
151
|
+
<button>
|
|
152
|
+
<slice slice="clicked" value="{0}" ></slice>
|
|
153
|
+
<slice slice="focused" value="{0}" ></slice>
|
|
154
|
+
<slice slice-event="click tap" slice="clicked" slice-value="//clicked+1" ></slice>
|
|
155
|
+
<slice slice-event="focus" slice="focused" slice-value="1" ></slice>
|
|
156
|
+
<slice slice-event="blur" slice="focused" slice-value="0" ></slice>
|
|
157
|
+
click/tap, focus/blur
|
|
158
|
+
</button> <br/>
|
|
159
|
+
//clicked : {//clicked} <br/>
|
|
160
|
+
//focused : {//focused}
|
|
161
|
+
</template>
|
|
162
|
+
</custom-element>
|
|
163
|
+
</template>
|
|
164
|
+
</html-demo-element>
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
<html-demo-element legend="9. slice in attribute"
|
|
168
|
+
description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
|
|
169
|
+
<template>
|
|
170
|
+
<custom-element tag="emotional-element">
|
|
171
|
+
<template>
|
|
172
|
+
<attribute name="emotion" select="//emotion ?? '😃'"></attribute>
|
|
173
|
+
<input slice="/datadom/attributes/emotion"/>
|
|
174
|
+
Type and unfocus to update emotion attribute: {emotion}
|
|
175
|
+
</template>
|
|
176
|
+
</custom-element>
|
|
177
|
+
<emotional-element emotion=":)"></emotional-element>
|
|
178
|
+
<emotional-element></emotional-element>
|
|
179
|
+
</template>
|
|
180
|
+
</html-demo-element>
|
|
181
|
+
|
|
182
|
+
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
|
183
|
+
|
|
184
|
+
</body>
|
|
185
|
+
</html>
|
package/demo/demo.css
CHANGED
|
@@ -6,6 +6,7 @@ body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
|
|
|
6
6
|
body>*{flex: auto;}
|
|
7
7
|
nav{ flex-direction: column;}
|
|
8
8
|
custom-element+*,
|
|
9
|
+
custom-element+*+*,
|
|
9
10
|
custom-element:not([tag]),
|
|
10
11
|
dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
|
|
11
12
|
dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash
|
package/demo/dom-merge.html
CHANGED
|
@@ -94,9 +94,9 @@
|
|
|
94
94
|
<form>
|
|
95
95
|
<label>
|
|
96
96
|
<input type="text"
|
|
97
|
-
value="Type time update"
|
|
97
|
+
value="{//txt ?? 'Type time update'}"
|
|
98
98
|
slice="txt"
|
|
99
|
-
slice-
|
|
99
|
+
slice-event="init input"/>
|
|
100
100
|
|
|
101
101
|
<span> Character count:
|
|
102
102
|
<b> {string-length(//slice/txt)} </b>
|
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
<html-demo-element legend="4. external XSLT file"
|
|
79
79
|
description="This external templates generated the tree for DCE data set"
|
|
80
80
|
>
|
|
81
|
+
<a href="tree.xsl">tree.xsl</a>
|
|
81
82
|
<template>
|
|
82
83
|
<custom-element tag="dce-external-4" src="tree.xsl" >
|
|
83
84
|
<template><i>loading from XSLT ...</i></template>
|
package/demo/http-request.html
CHANGED
|
@@ -31,12 +31,40 @@
|
|
|
31
31
|
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
32
32
|
</nav>
|
|
33
33
|
|
|
34
|
+
|
|
35
|
+
<html-demo-element legend="0. url from text to http-request "
|
|
36
|
+
description="read data from arbitrary URL">
|
|
37
|
+
<template>
|
|
38
|
+
<custom-element>
|
|
39
|
+
<template>
|
|
40
|
+
|
|
41
|
+
<button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
|
|
42
|
+
<input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
|
|
43
|
+
<button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
|
|
44
|
+
<http-request
|
|
45
|
+
url="{//fetch-url}"
|
|
46
|
+
slice="request_slice"
|
|
47
|
+
type="text"
|
|
48
|
+
mode="cors"
|
|
49
|
+
></http-request>
|
|
50
|
+
<code>//fetch-url</code> from <code>{//fetch-url}</code><br/>
|
|
51
|
+
<for-each select="//results">
|
|
52
|
+
<var>
|
|
53
|
+
*{@name}
|
|
54
|
+
</var>
|
|
55
|
+
</for-each>
|
|
56
|
+
</template>
|
|
57
|
+
</custom-element>
|
|
58
|
+
</template>
|
|
59
|
+
</html-demo-element>
|
|
60
|
+
|
|
34
61
|
<html-demo-element legend="1. http-request simplest"
|
|
35
62
|
description="load the list of pokemons">
|
|
36
63
|
<p>Should display 6 image buttons with pokemon name </p>
|
|
37
64
|
<template>
|
|
38
65
|
<custom-element>
|
|
39
66
|
<template><!-- wrapping into template to prevent images loading within DCE declaration -->
|
|
67
|
+
<p>Pokemon buttons from API</p>
|
|
40
68
|
<http-request
|
|
41
69
|
url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
|
|
42
70
|
slice="page"
|
|
@@ -45,7 +73,7 @@
|
|
|
45
73
|
></http-request>
|
|
46
74
|
<variable name="slides-url"
|
|
47
75
|
>https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
|
|
48
|
-
<for-each select="//
|
|
76
|
+
<for-each select="//results">
|
|
49
77
|
<variable name="pokeid"
|
|
50
78
|
select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
|
|
51
79
|
></variable>
|
|
@@ -67,6 +95,7 @@
|
|
|
67
95
|
<custom-element url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6">
|
|
68
96
|
<template> <!-- IMPORTANT! to wrap DCE payload into template to avoid
|
|
69
97
|
http-request initializing out of instance -->
|
|
98
|
+
<attribute name="url"></attribute>
|
|
70
99
|
<http-request
|
|
71
100
|
url="{url}"
|
|
72
101
|
slice="request_slice"
|
|
@@ -79,15 +108,15 @@
|
|
|
79
108
|
|
|
80
109
|
<h3>Samples</h3>
|
|
81
110
|
<table>
|
|
82
|
-
<tr><th> //slice/request_slice/request/@mode </th>
|
|
83
|
-
<td>{ //slice/request_slice/request/@mode }</td></tr>
|
|
84
|
-
<tr><th> //slice/request_slice/response/headers/@content-type </th>
|
|
85
|
-
<td>{ //slice/request_slice/response/headers/@content-type }</td></tr>
|
|
86
|
-
<tr><th> //slice/request_slice/response/@status </th>
|
|
87
|
-
<td>{ //slice/request_slice/response/@status }</td></tr>
|
|
111
|
+
<tr><th> //slice/request_slice/value/request/@mode </th>
|
|
112
|
+
<td>{ //slice/request_slice/value/request/@mode }</td></tr>
|
|
113
|
+
<tr><th> //slice/request_slice/value/response/headers/@content-type </th>
|
|
114
|
+
<td>{ //slice/request_slice/value/response/headers/@content-type }</td></tr>
|
|
115
|
+
<tr><th> //slice/request_slice/value/response/@status </th>
|
|
116
|
+
<td>{ //slice/request_slice/value/response/@status }</td></tr>
|
|
88
117
|
</table>
|
|
89
|
-
<apply-templates mode="display" select="//slice/request_slice/*"></apply-templates>
|
|
90
|
-
<template mode="display" match="*">
|
|
118
|
+
<apply-templates mode="display" select="//slice/request_slice/value/*"></apply-templates>
|
|
119
|
+
<xsl:template mode="display" match="*">
|
|
91
120
|
<fieldset>
|
|
92
121
|
<legend> {local-name(.)} </legend>
|
|
93
122
|
<ul>
|
|
@@ -101,7 +130,7 @@
|
|
|
101
130
|
</ul>
|
|
102
131
|
<apply-templates mode="display" select="*"></apply-templates>
|
|
103
132
|
</fieldset>
|
|
104
|
-
</template>
|
|
133
|
+
</xsl:template>
|
|
105
134
|
</template>
|
|
106
135
|
</custom-element>
|
|
107
136
|
</template>
|
package/demo/local-storage.html
CHANGED
|
@@ -16,14 +16,119 @@
|
|
|
16
16
|
td,th{text-align: right; }
|
|
17
17
|
caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
|
|
18
18
|
</style>
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
window.JsonSample = {a:1,b:'B'};
|
|
22
|
+
</script>
|
|
19
23
|
</head>
|
|
20
24
|
<body>
|
|
21
25
|
|
|
22
26
|
<nav>
|
|
23
27
|
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
24
28
|
</nav>
|
|
29
|
+
<main>
|
|
30
|
+
<code>local-storage</code> allows to read and write its value to the key in <code>localStorage</code>.
|
|
31
|
+
The <code>type</code> attribute allows to place the validation constrains to the value: when the value does not
|
|
32
|
+
match the expected type, it would not be assigned, keeping empty <code>value</code> instead.
|
|
33
|
+
</main>
|
|
34
|
+
<html-demo-element legend="0. read localStorage text value"
|
|
35
|
+
description="click should set text-key slice via localStorage change.">
|
|
36
|
+
<template>
|
|
37
|
+
<custom-element>
|
|
38
|
+
<template>
|
|
39
|
+
<local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
|
|
40
|
+
<button onclick="localStorage.setItem('textKey','text value')">text value</button>
|
|
41
|
+
<button onclick="localStorage.setItem('textKey','another value')">another value</button>
|
|
42
|
+
//text-key: <code>{//text-key}</code>
|
|
43
|
+
</template>
|
|
44
|
+
</custom-element>
|
|
45
|
+
</template>
|
|
46
|
+
</html-demo-element>
|
|
47
|
+
|
|
48
|
+
<html-demo-element legend="1. always override "
|
|
49
|
+
description="value in localStorage[] should be always reset to ABC. click should set text-key slice via localStorage change.">
|
|
50
|
+
<template>
|
|
51
|
+
<custom-element>
|
|
52
|
+
<template>
|
|
53
|
+
<!-- always reset -->
|
|
54
|
+
<local-storage key="overrideKey" slice="override-key" type="text" value="ABC"></local-storage>
|
|
55
|
+
<button onclick="localStorage.setItem('overrideKey','text value')">text value</button>
|
|
56
|
+
<button onclick="localStorage.removeItem('attrKey')">clear key</button>
|
|
57
|
+
//override-key: <code>{//override-key}</code>
|
|
58
|
+
</template>
|
|
59
|
+
</custom-element>
|
|
60
|
+
</template>
|
|
61
|
+
</html-demo-element>
|
|
62
|
+
|
|
63
|
+
<html-demo-element legend="2. from storage with default "
|
|
64
|
+
description="default overridden by button, refresh should preserve updated value">
|
|
65
|
+
<template>
|
|
66
|
+
<custom-element>
|
|
67
|
+
<template>
|
|
68
|
+
<!-- initially set value to DEF and update by button. On reload the value picked from localStorage -->
|
|
69
|
+
<local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF'"></local-storage>
|
|
70
|
+
<button onclick="localStorage.clear()">clear localStorage</button>
|
|
71
|
+
<button onclick="localStorage.removeItem('attr2Key')">clear key</button>
|
|
72
|
+
<button onclick="localStorage.setItem('attr2Key','text value')">updated value</button>
|
|
73
|
+
//attr2-key: <code>{//attr2-key}</code>
|
|
74
|
+
</template>
|
|
75
|
+
</custom-element>
|
|
76
|
+
</template>
|
|
77
|
+
</html-demo-element>
|
|
78
|
+
|
|
79
|
+
<html-demo-element legend="3. localStorage type"
|
|
80
|
+
description="type validation happy path. Invalid for type value in storage would be treated as null">
|
|
81
|
+
<template>
|
|
82
|
+
<custom-element>
|
|
83
|
+
<template>
|
|
84
|
+
<local-storage key="dateKey" slice="date-key" type="date" live="live"></local-storage>
|
|
85
|
+
<local-storage key="timeKey" slice="time-key" type="time" live="live"></local-storage>
|
|
86
|
+
<local-storage key="localDateTimeKey" slice="local-date-time" type="datetime-local" live="live"></local-storage>
|
|
87
|
+
<local-storage key="numberKey" slice="number-key" type="number" live="live"></local-storage>
|
|
88
|
+
<local-storage key="jsonKey" slice="json-key" type="json" live="live"></local-storage>
|
|
89
|
+
<input id="typesinput" placeholder="set value" /><button onclick="
|
|
90
|
+
'dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
|
|
91
|
+
.map( k=> localStorage.setItem(k, typesinput.value) )
|
|
92
|
+
"> set to all</button><br/>
|
|
93
|
+
<hr/>
|
|
94
|
+
date-key:
|
|
95
|
+
<button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')" >2024-04-21T03:58:42.131Z </button>
|
|
96
|
+
<button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())" >now </button>
|
|
97
|
+
<button onclick="localStorage.setItem('dateKey', 'ABC' )" >date ABC - invalid </button>
|
|
98
|
+
<code>{//date-key }</code><br/>
|
|
99
|
+
time-key:
|
|
100
|
+
<button onclick="localStorage.setItem('timeKey', '13:30')" >13:30 </button>
|
|
101
|
+
<code>{//time-key }</code><br/>
|
|
102
|
+
local-date-time:
|
|
103
|
+
<button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')" >21977-04-01T14:00:30 - local </button>
|
|
104
|
+
<code>{//local-date-time}</code><br/>
|
|
105
|
+
number-key:
|
|
106
|
+
<button onclick="localStorage.setItem('numberKey', '2024' )" >2024 - number </button>
|
|
107
|
+
<button onclick="localStorage.setItem('numberKey', '24' )" >24 - number </button>
|
|
108
|
+
<button onclick="localStorage.setItem('numberKey', '1.23456e+5' )" >1.23456e+5 </button>
|
|
109
|
+
<button onclick="localStorage.setItem('numberKey', '0001' )" >0001 </button>
|
|
110
|
+
<button onclick="localStorage.setItem('numberKey', '000' )" >000 </button>
|
|
111
|
+
<button onclick="localStorage.setItem('numberKey', '0' )" >0 </button>
|
|
112
|
+
<button onclick="localStorage.setItem('numberKey', 'ABC' )" >ABC - invalid, NaN </button>
|
|
113
|
+
<code>{//number-key }</code> <br/>
|
|
114
|
+
<fieldset>
|
|
115
|
+
<legend>json-key: </legend>
|
|
116
|
+
|
|
117
|
+
<button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))" >'ABC' - string </button>
|
|
118
|
+
<button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))" >12.345 - number </button>
|
|
119
|
+
<button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )" >a:1,b:'B' -json </button>
|
|
120
|
+
<button onclick="localStorage.setItem('jsonKey', 'ABC' )" >ABC - invalid </button><br/>
|
|
121
|
+
json-key:<code><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
|
|
122
|
+
</fieldset>
|
|
123
|
+
<xsl:template mode="json" match="*|@*">
|
|
124
|
+
<div>{name()} : {.}</div>
|
|
125
|
+
</xsl:template>
|
|
126
|
+
</template>
|
|
127
|
+
</custom-element>
|
|
128
|
+
</template>
|
|
129
|
+
</html-demo-element>
|
|
25
130
|
|
|
26
|
-
<html-demo-element legend="
|
|
131
|
+
<html-demo-element legend="3. localStorage simplest"
|
|
27
132
|
description="local-storage read only during initial and only render, does not track the changes.">
|
|
28
133
|
<p>Has to produce 12🍒</p>
|
|
29
134
|
<template>
|
|
@@ -45,7 +150,7 @@
|
|
|
45
150
|
<local-storage key="basket" slice="basket" live type="json"></local-storage>
|
|
46
151
|
<xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml" >
|
|
47
152
|
<xhtml:tbody>
|
|
48
|
-
<for-each select="//basket/@*">
|
|
153
|
+
<for-each select="//basket/value/@*">
|
|
49
154
|
<xhtml:tr>
|
|
50
155
|
<xhtml:th> {name()} </xhtml:th>
|
|
51
156
|
<xhtml:td> {.} </xhtml:td>
|
|
@@ -55,7 +160,7 @@
|
|
|
55
160
|
<xhtml:tfoot>
|
|
56
161
|
<xhtml:tr>
|
|
57
162
|
<xhtml:td><slot>🤔</slot></xhtml:td>
|
|
58
|
-
<xhtml:th> {sum(//slice/basket/@*)} </xhtml:th>
|
|
163
|
+
<xhtml:th> {sum(//slice/basket/value/@*)} </xhtml:th>
|
|
59
164
|
</xhtml:tr>
|
|
60
165
|
</xhtml:tfoot>
|
|
61
166
|
</xhtml:table>
|
|
@@ -51,19 +51,24 @@
|
|
|
51
51
|
<location-element slice="window-url" live></location-element>
|
|
52
52
|
|
|
53
53
|
<xhtml:table>
|
|
54
|
-
|
|
55
|
-
<
|
|
54
|
+
<xhtml:tbody>
|
|
55
|
+
<xhtml:tr>
|
|
56
|
+
<xhtml:th><h3> URL properties </h3></xhtml:th>
|
|
57
|
+
<xhtml:td>{count(//value/@*)}</xhtml:td>
|
|
58
|
+
</xhtml:tr>
|
|
59
|
+
<apply-templates mode="attrs" select="//value/@*"></apply-templates>
|
|
60
|
+
</xhtml:tbody>
|
|
56
61
|
</xhtml:table>
|
|
57
62
|
<xhtml:table>
|
|
58
63
|
<tr><th><h3> URL parameters </h3></th></tr>
|
|
59
|
-
<apply-templates mode="attrs" select="//
|
|
64
|
+
<apply-templates mode="attrs" select="//params/*/*"></apply-templates>
|
|
60
65
|
</xhtml:table>
|
|
61
|
-
<template mode="attrs" match="*|@*">
|
|
66
|
+
<xsl:template mode="attrs" match="*|@*">
|
|
62
67
|
<xhtml:tr>
|
|
63
68
|
<xhtml:th>{name()}</xhtml:th>
|
|
64
69
|
<xhtml:td>{.}</xhtml:td>
|
|
65
70
|
</xhtml:tr>
|
|
66
|
-
</template>
|
|
71
|
+
</xsl:template>
|
|
67
72
|
</template>
|
|
68
73
|
</custom-element>
|
|
69
74
|
<dce-2>?</dce-2>
|
|
@@ -84,7 +89,7 @@
|
|
|
84
89
|
<xhtml:table>
|
|
85
90
|
<xhtml:tbody>
|
|
86
91
|
<xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
|
|
87
|
-
<for-each select="//slice/window-url/@*">
|
|
92
|
+
<for-each select="//slice/window-url/value/@*">
|
|
88
93
|
<xhtml:tr>
|
|
89
94
|
<xhtml:th>{name()}</xhtml:th>
|
|
90
95
|
<xhtml:td>{.}</xhtml:td>
|
|
@@ -93,7 +98,7 @@
|
|
|
93
98
|
</xhtml:tbody>
|
|
94
99
|
<xhtml:tbody>
|
|
95
100
|
<xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
|
|
96
|
-
<for-each select="//slice/window-url/params/*">
|
|
101
|
+
<for-each select="//slice/window-url/value/params/*">
|
|
97
102
|
<xhtml:tr>
|
|
98
103
|
<xhtml:th>{name()}</xhtml:th>
|
|
99
104
|
<xhtml:td>{.}</xhtml:td>
|
|
@@ -121,7 +126,7 @@
|
|
|
121
126
|
<xhtml:table>
|
|
122
127
|
<xhtml:tbody>
|
|
123
128
|
<xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
|
|
124
|
-
<for-each select="//slice/src-url/@*">
|
|
129
|
+
<for-each select="//slice/src-url/value/@*">
|
|
125
130
|
<xhtml:tr>
|
|
126
131
|
<xhtml:th>{name()}</xhtml:th>
|
|
127
132
|
<xhtml:td>{.}</xhtml:td>
|
|
@@ -130,7 +135,7 @@
|
|
|
130
135
|
</xhtml:tbody>
|
|
131
136
|
<xhtml:tbody>
|
|
132
137
|
<xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
|
|
133
|
-
<for-each select="//slice/src-url/params/*">
|
|
138
|
+
<for-each select="//slice/src-url/value/params/*">
|
|
134
139
|
<xhtml:tr>
|
|
135
140
|
<xhtml:th>{name()}</xhtml:th>
|
|
136
141
|
<xhtml:td>{.}</xhtml:td>
|
package/demo/parameters.html
CHANGED
|
@@ -44,6 +44,24 @@ params needed to declare DCE attributes and track the attributes changes. It als
|
|
|
44
44
|
</template>
|
|
45
45
|
</html-demo-element>
|
|
46
46
|
|
|
47
|
+
<html-demo-element legend="slice propagates attribute" description="
|
|
48
|
+
when slice value points to attribute, it would be populated on slice change
|
|
49
|
+
">
|
|
50
|
+
Type in the input field to see the variable $title change. <br/>
|
|
51
|
+
Hover the mouse to see the title attribute text popup.<br/>
|
|
52
|
+
Inspect DCE node in dev tools to see `title` attribute updated while typing.
|
|
53
|
+
|
|
54
|
+
<template>
|
|
55
|
+
<custom-element>
|
|
56
|
+
<template>
|
|
57
|
+
<attribute name="title" select="//title ?? '😃'" ></attribute>
|
|
58
|
+
<input slice="/datadom/attributes/title" slice-event="keyup"/>
|
|
59
|
+
title attribute: {$title}
|
|
60
|
+
</template>
|
|
61
|
+
</custom-element>
|
|
62
|
+
</template>
|
|
63
|
+
</html-demo-element>
|
|
64
|
+
|
|
47
65
|
|
|
48
66
|
|
|
49
67
|
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
package/demo/s.xml
CHANGED
|
@@ -1 +1,93 @@
|
|
|
1
|
-
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<datadom>
|
|
3
|
+
<payload>
|
|
4
|
+
<span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
|
|
5
|
+
<button xmlns="http://www.w3.org/1999/xhtml" slice="url-string"
|
|
6
|
+
slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click" slot="">
|
|
7
|
+
⬇️https://pokeapi.co/api/v2/pokemon?limit=6
|
|
8
|
+
</button>
|
|
9
|
+
<span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
|
|
10
|
+
<input xmlns="http://www.w3.org/1999/xhtml" slice="url-string" value="{ //url-string ?? '' }" style="width:100%"
|
|
11
|
+
slot=""/>
|
|
12
|
+
<span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
|
|
13
|
+
<button xmlns="http://www.w3.org/1999/xhtml" slice="fetch-url" slice-event="click" slice-value="//url-string"
|
|
14
|
+
slot="">GET
|
|
15
|
+
</button>
|
|
16
|
+
<span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
|
|
17
|
+
<http-request xmlns="http://www.w3.org/1999/xhtml" url="{//fetch-url}" slice="request_slice" type="text"
|
|
18
|
+
mode="cors" slot=""></http-request>
|
|
19
|
+
<span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
|
|
20
|
+
<code xmlns="http://www.w3.org/1999/xhtml" slot="">//fetch-url</code>
|
|
21
|
+
<span xmlns="http://www.w3.org/1999/xhtml" slot="">from</span>
|
|
22
|
+
<code xmlns="http://www.w3.org/1999/xhtml" slot="">{//fetch-url}</code>
|
|
23
|
+
<span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
|
|
24
|
+
<xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//slice/request_slice/value/*" slot="">
|
|
25
|
+
<ul>
|
|
26
|
+
<var data-testid="request-section">
|
|
27
|
+
<xsl:value-of select="name(.)"></xsl:value-of>
|
|
28
|
+
</var>
|
|
29
|
+
<xsl:for-each select="@*">
|
|
30
|
+
<div>
|
|
31
|
+
<var data-testid="section-attribute">@
|
|
32
|
+
<xsl:value-of select="local-name(.)"></xsl:value-of>
|
|
33
|
+
</var>
|
|
34
|
+
=
|
|
35
|
+
<code>
|
|
36
|
+
<xsl:value-of select="."></xsl:value-of>
|
|
37
|
+
</code>
|
|
38
|
+
</div>
|
|
39
|
+
</xsl:for-each>
|
|
40
|
+
</ul>
|
|
41
|
+
</xsl:for-each>
|
|
42
|
+
<span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
|
|
43
|
+
</payload>
|
|
44
|
+
<attributes>
|
|
45
|
+
<tag>dce-5dc8d4a0-d545-4498-9de5-eec25c2b232f</tag>
|
|
46
|
+
</attributes>
|
|
47
|
+
<dataset/>
|
|
48
|
+
<slice>
|
|
49
|
+
<url-string xmlns="" slice="url-string" value="" style="width:100%" data-dce-id="2"
|
|
50
|
+
slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">
|
|
51
|
+
<event isTrusted="true" pointerId="1" width="1" height="1" pressure="0" tiltX="0" tiltY="0" azimuthAngle="0"
|
|
52
|
+
altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0" pointerType="mouse"
|
|
53
|
+
isPrimary="false" screenX="94" screenY="186" clientX="94" clientY="99" ctrlKey="false"
|
|
54
|
+
shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="94" pageY="99" x="94"
|
|
55
|
+
y="99" offsetX="60" offsetY="6" movementX="0" movementY="0" layerX="94" layerY="99" detail="1"
|
|
56
|
+
which="1" type="click" eventPhase="0" bubbles="true" cancelable="true" defaultPrevented="false"
|
|
57
|
+
composed="true" timeStamp="5596.5" returnValue="true" cancelBubble="false" NONE="0"
|
|
58
|
+
CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
|
|
59
|
+
<relatedTarget/>
|
|
60
|
+
<fromElement/>
|
|
61
|
+
<toElement/>
|
|
62
|
+
<sourceCapabilities firesTouchEvents="false"/>
|
|
63
|
+
<currentTarget/>
|
|
64
|
+
</event>
|
|
65
|
+
https://pokeapi.co/api/v2/pokemon?limit=6
|
|
66
|
+
</url-string>
|
|
67
|
+
<fetch-url xmlns="" slice="fetch-url" slice-event="click" slice-value="//url-string" data-dce-id="4" value="">
|
|
68
|
+
<event isTrusted="true" pointerId="1" width="1" height="1" pressure="0" tiltX="0" tiltY="0" azimuthAngle="0"
|
|
69
|
+
altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0" pointerType="mouse"
|
|
70
|
+
isPrimary="false" screenX="56" screenY="232" clientX="56" clientY="145" ctrlKey="false"
|
|
71
|
+
shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="56" pageY="145" x="56"
|
|
72
|
+
y="145" offsetX="23" offsetY="8" movementX="0" movementY="0" layerX="56" layerY="145" detail="1"
|
|
73
|
+
which="1" type="click" eventPhase="0" bubbles="true" cancelable="true" defaultPrevented="false"
|
|
74
|
+
composed="true" timeStamp="6699.100000023842" returnValue="true" cancelBubble="false" NONE="0"
|
|
75
|
+
CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
|
|
76
|
+
<relatedTarget/>
|
|
77
|
+
<fromElement/>
|
|
78
|
+
<toElement/>
|
|
79
|
+
<sourceCapabilities firesTouchEvents="false"/>
|
|
80
|
+
<currentTarget/>
|
|
81
|
+
</event>
|
|
82
|
+
https://pokeapi.co/api/v2/pokemon?limit=6
|
|
83
|
+
</fetch-url>
|
|
84
|
+
<request_slice xmlns="" url="" slice="request_slice" type="text" mode="cors" data-dce-id="5">
|
|
85
|
+
<event type="init"/>
|
|
86
|
+
<value>
|
|
87
|
+
<request xmlns="" url="" type="text" mode="cors" data-dce-id="5">
|
|
88
|
+
<headers/>
|
|
89
|
+
</request>
|
|
90
|
+
</value>
|
|
91
|
+
</request_slice>
|
|
92
|
+
</slice>
|
|
93
|
+
</datadom>
|