@epa-wg/custom-element 0.0.17 → 0.0.19
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/.idea/codeStyles/codeStyleConfig.xml +5 -0
- package/.vscode/settings.json +25 -0
- package/README.md +49 -18
- package/bin/xslDtd2Ide.mjs +160 -0
- package/custom-element.d.ts +1 -1
- package/custom-element.js +220 -59
- package/demo/a.html +44 -10
- package/demo/data-slices.html +185 -0
- package/demo/demo.css +1 -0
- package/demo/dom-merge.html +1 -1
- package/demo/external-template.html +1 -0
- package/demo/hex-grid-dce.html +13 -13
- package/demo/http-request.html +19 -17
- package/demo/local-storage.html +3 -3
- package/demo/location-element.html +16 -11
- package/demo/parameters.html +21 -3
- package/demo/s.xml +6 -1
- package/demo/s.xslt +8 -10
- package/demo/z.html +61 -49
- package/http-request.js +2 -1
- package/ide/IDE.md +31 -0
- package/ide/customData-dce.json +112 -0
- package/ide/customData-xsl.json +1018 -0
- package/{web-types.json → ide/web-types-dce.json} +42 -1
- package/ide/web-types-xsl.json +867 -0
- package/index.html +7 -5
- package/package.json +4 -2
- package/request.html +2 -2
|
@@ -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
|
@@ -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/hex-grid-dce.html
CHANGED
|
@@ -69,20 +69,20 @@
|
|
|
69
69
|
}
|
|
70
70
|
</style>
|
|
71
71
|
<nav>
|
|
72
|
-
<
|
|
73
|
-
<
|
|
74
|
-
<
|
|
75
|
-
</
|
|
72
|
+
<for-each select="/datadom/payload/xhtml:*">
|
|
73
|
+
<if test="local-name(.) = 'style'">
|
|
74
|
+
<copy-of select="." />
|
|
75
|
+
</if>
|
|
76
76
|
<!-- sanitize blank spans -->
|
|
77
|
-
<
|
|
77
|
+
<if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
|
|
78
78
|
<section>
|
|
79
79
|
<button class="action">
|
|
80
80
|
{@alt}
|
|
81
|
-
<
|
|
81
|
+
<copy-of select="."/>
|
|
82
82
|
</button>
|
|
83
83
|
</section>
|
|
84
|
-
</
|
|
85
|
-
</
|
|
84
|
+
</if>
|
|
85
|
+
</for-each>
|
|
86
86
|
</nav>
|
|
87
87
|
</template>
|
|
88
88
|
</custom-element>
|
|
@@ -152,14 +152,14 @@
|
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
154
|
</style>
|
|
155
|
-
<
|
|
155
|
+
<for-each select="/datadom/payload/xhtml:*">
|
|
156
156
|
<!-- sanitize blank spans -->
|
|
157
|
-
<
|
|
157
|
+
<if test="local-name(.) != 'span' or normalize-space(.) != ''">
|
|
158
158
|
<hex-grid>
|
|
159
|
-
<
|
|
159
|
+
<copy-of select="."/>
|
|
160
160
|
</hex-grid>
|
|
161
|
-
</
|
|
162
|
-
</
|
|
161
|
+
</if>
|
|
162
|
+
</for-each>
|
|
163
163
|
</template>
|
|
164
164
|
</custom-element>
|
|
165
165
|
<hex-row class="grid2x">
|
package/demo/http-request.html
CHANGED
|
@@ -37,24 +37,25 @@
|
|
|
37
37
|
<template>
|
|
38
38
|
<custom-element>
|
|
39
39
|
<template><!-- wrapping into template to prevent images loading within DCE declaration -->
|
|
40
|
+
<p>Pokemon buttons from API</p>
|
|
40
41
|
<http-request
|
|
41
42
|
url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
|
|
42
43
|
slice="page"
|
|
43
44
|
method="GET"
|
|
44
45
|
header-accept="application/json"
|
|
45
46
|
></http-request>
|
|
46
|
-
<
|
|
47
|
-
>https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</
|
|
48
|
-
<
|
|
49
|
-
<
|
|
47
|
+
<variable name="slides-url"
|
|
48
|
+
>https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
|
|
49
|
+
<for-each select="//results">
|
|
50
|
+
<variable name="pokeid"
|
|
50
51
|
select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
|
|
51
|
-
></
|
|
52
|
+
></variable>
|
|
52
53
|
<button>
|
|
53
54
|
<img src="{$slides-url}/{$pokeid}.svg"
|
|
54
55
|
alt="{@name}"/>
|
|
55
56
|
{@name}
|
|
56
57
|
</button>
|
|
57
|
-
</
|
|
58
|
+
</for-each>
|
|
58
59
|
</template>
|
|
59
60
|
</custom-element>
|
|
60
61
|
</template>
|
|
@@ -67,6 +68,7 @@
|
|
|
67
68
|
<custom-element url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6">
|
|
68
69
|
<template> <!-- IMPORTANT! to wrap DCE payload into template to avoid
|
|
69
70
|
http-request initializing out of instance -->
|
|
71
|
+
<attribute name="url"></attribute>
|
|
70
72
|
<http-request
|
|
71
73
|
url="{url}"
|
|
72
74
|
slice="request_slice"
|
|
@@ -79,27 +81,27 @@
|
|
|
79
81
|
|
|
80
82
|
<h3>Samples</h3>
|
|
81
83
|
<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>
|
|
84
|
+
<tr><th> //slice/request_slice/value/request/@mode </th>
|
|
85
|
+
<td>{ //slice/request_slice/value/request/@mode }</td></tr>
|
|
86
|
+
<tr><th> //slice/request_slice/value/response/headers/@content-type </th>
|
|
87
|
+
<td>{ //slice/request_slice/value/response/headers/@content-type }</td></tr>
|
|
88
|
+
<tr><th> //slice/request_slice/value/response/@status </th>
|
|
89
|
+
<td>{ //slice/request_slice/value/response/@status }</td></tr>
|
|
88
90
|
</table>
|
|
89
|
-
<
|
|
91
|
+
<apply-templates mode="display" select="//slice/request_slice/value/*"></apply-templates>
|
|
90
92
|
<xsl:template mode="display" match="*">
|
|
91
93
|
<fieldset>
|
|
92
94
|
<legend> {local-name(.)} </legend>
|
|
93
95
|
<ul>
|
|
94
|
-
<
|
|
96
|
+
<for-each select="@*">
|
|
95
97
|
<li>
|
|
96
98
|
<var data-testid="section-attribute">@{local-name(.)}</var>
|
|
97
99
|
=
|
|
98
|
-
<code><
|
|
100
|
+
<code><value-of select='.'/></code>
|
|
99
101
|
</li>
|
|
100
|
-
</
|
|
102
|
+
</for-each>
|
|
101
103
|
</ul>
|
|
102
|
-
<
|
|
104
|
+
<apply-templates mode="display" select="*"></apply-templates>
|
|
103
105
|
</fieldset>
|
|
104
106
|
</xsl:template>
|
|
105
107
|
</template>
|
package/demo/local-storage.html
CHANGED
|
@@ -45,17 +45,17 @@
|
|
|
45
45
|
<local-storage key="basket" slice="basket" live type="json"></local-storage>
|
|
46
46
|
<xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml" >
|
|
47
47
|
<xhtml:tbody>
|
|
48
|
-
<
|
|
48
|
+
<for-each select="//basket/value/@*">
|
|
49
49
|
<xhtml:tr>
|
|
50
50
|
<xhtml:th> {name()} </xhtml:th>
|
|
51
51
|
<xhtml:td> {.} </xhtml:td>
|
|
52
52
|
</xhtml:tr>
|
|
53
|
-
</
|
|
53
|
+
</for-each>
|
|
54
54
|
</xhtml:tbody>
|
|
55
55
|
<xhtml:tfoot>
|
|
56
56
|
<xhtml:tr>
|
|
57
57
|
<xhtml:td><slot>🤔</slot></xhtml:td>
|
|
58
|
-
<xhtml:th> {sum(//slice/basket/@*)} </xhtml:th>
|
|
58
|
+
<xhtml:th> {sum(//slice/basket/value/@*)} </xhtml:th>
|
|
59
59
|
</xhtml:tr>
|
|
60
60
|
</xhtml:tfoot>
|
|
61
61
|
</xhtml:table>
|
|
@@ -51,12 +51,17 @@
|
|
|
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
|
-
<
|
|
64
|
+
<apply-templates mode="attrs" select="//params/*/*"></apply-templates>
|
|
60
65
|
</xhtml:table>
|
|
61
66
|
<xsl:template mode="attrs" match="*|@*">
|
|
62
67
|
<xhtml:tr>
|
|
@@ -84,21 +89,21 @@
|
|
|
84
89
|
<xhtml:table>
|
|
85
90
|
<xhtml:tbody>
|
|
86
91
|
<xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
|
|
87
|
-
<
|
|
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>
|
|
91
96
|
</xhtml:tr>
|
|
92
|
-
</
|
|
97
|
+
</for-each>
|
|
93
98
|
</xhtml:tbody>
|
|
94
99
|
<xhtml:tbody>
|
|
95
100
|
<xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
|
|
96
|
-
<
|
|
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>
|
|
100
105
|
</xhtml:tr>
|
|
101
|
-
</
|
|
106
|
+
</for-each>
|
|
102
107
|
</xhtml:tbody>
|
|
103
108
|
</xhtml:table>
|
|
104
109
|
</template>
|
|
@@ -121,21 +126,21 @@
|
|
|
121
126
|
<xhtml:table>
|
|
122
127
|
<xhtml:tbody>
|
|
123
128
|
<xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
|
|
124
|
-
<
|
|
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>
|
|
128
133
|
</xhtml:tr>
|
|
129
|
-
</
|
|
134
|
+
</for-each>
|
|
130
135
|
</xhtml:tbody>
|
|
131
136
|
<xhtml:tbody>
|
|
132
137
|
<xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
|
|
133
|
-
<
|
|
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>
|
|
137
142
|
</xhtml:tr>
|
|
138
|
-
</
|
|
143
|
+
</for-each>
|
|
139
144
|
</xhtml:tbody>
|
|
140
145
|
</xhtml:table>
|
|
141
146
|
</template>
|
package/demo/parameters.html
CHANGED
|
@@ -27,9 +27,9 @@ params needed to declare DCE attributes and track the attributes changes. It als
|
|
|
27
27
|
">
|
|
28
28
|
<template>
|
|
29
29
|
<custom-element tag="dce-link" hidden>
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
<
|
|
30
|
+
<attribute name="p1" >default_P1 </attribute>
|
|
31
|
+
<attribute name="p2" select="'always_p2'" ></attribute>
|
|
32
|
+
<attribute name="p3" select="//p3 ?? 'def_P3' " ></attribute>
|
|
33
33
|
p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
|
|
34
34
|
</custom-element>
|
|
35
35
|
<dce-link id="dce1" ></dce-link>
|
|
@@ -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,6 @@
|
|
|
1
|
-
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<datadom><payload><span xmlns="http://www.w3.org/1999/xhtml" slot=""> </span><button xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" slice-event="click" slice-value="//clickcount + 1" slot="">
|
|
3
|
+
+
|
|
4
|
+
</button><span xmlns="http://www.w3.org/1999/xhtml" slot=""> </span><button xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" slice-event="click" slice-value="//clickcount - 1" slot="">
|
|
5
|
+
-
|
|
6
|
+
</button><span xmlns="http://www.w3.org/1999/xhtml" slot=""> </span><input xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" type="number" value="{//clickcount ?? 0}" slot="" /><span xmlns="http://www.w3.org/1999/xhtml" slot=""> {//clickcount} </span></payload><attributes><tag>dce-72e0d208-b3b4-4b0a-8798-a094beaf5fe1</tag></attributes><dataset/><slice><clickcount xmlns="" slice="clickcount" type="number" value="" data-dce-id="2" slice-event="click" slice-value="//clickcount + 1"><event isTrusted="true" pointerId="1" width="1" height="1" pressure="0" tiltX="0" tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0" pointerType="mouse" isPrimary="false" screenX="19" screenY="99" clientX="19" clientY="12" ctrlKey="false" shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="19" pageY="12" x="19" y="12" offsetX="10" offsetY="0" movementX="0" movementY="0" layerX="19" layerY="12" detail="1" which="1" type="click" eventPhase="0" bubbles="true" cancelable="true" defaultPrevented="false" composed="true" timeStamp="5460750.8000000715" returnValue="true" cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3"><relatedTarget/><fromElement/><toElement/><sourceCapabilities firesTouchEvents="false"/><currentTarget/></event>46</clickcount></slice></datadom>
|
package/demo/s.xslt
CHANGED
|
@@ -6,15 +6,13 @@
|
|
|
6
6
|
<xsl:otherwise><xsl:value-of select="def"/></xsl:otherwise>
|
|
7
7
|
</xsl:choose>
|
|
8
8
|
<xsl:value-of select="."/></xsl:template>
|
|
9
|
-
<xsl:template mode="payload" match="attributes"><
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
p1:<xsl:value-of select="$p1"/> </dce-text><br xmlns="" data-dce-id="3"/><dce-text xmlns="" data-dce-id="4"> p2: <xsl:value-of select="$p2"/> </dce-text><br xmlns="" data-dce-id="5"/><dce-text xmlns="" data-dce-id="6"> p3: <xsl:value-of select="$p3"/>
|
|
17
|
-
</dce-text></dce-root></xsl:template>
|
|
9
|
+
<xsl:template mode="payload" match="attributes"><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><button xmlns="" slice="clickcount" slice-event="click" slice-value="//clickcount + 1" data-dce-id="2">
|
|
10
|
+
+
|
|
11
|
+
</button><button xmlns="" slice="clickcount" slice-event="click" slice-value="//clickcount - 1" data-dce-id="3">
|
|
12
|
+
-
|
|
13
|
+
</button><input xmlns="" slice="clickcount" type="number" value="{concat( //clickcount , substring( 0 , (1+string-length( 0 )) * string-length( //clickcount ) ) )}" data-dce-id="4"/><dce-text xmlns="" data-dce-id="5">
|
|
14
|
+
<xsl:value-of select="//clickcount"/>
|
|
15
|
+
</dce-text></dce-root></xsl:template>
|
|
18
16
|
<xsl:template match="/">
|
|
19
17
|
<xsl:apply-templates mode="payload" select="/datadom/attributes"/>
|
|
20
18
|
</xsl:template>
|
|
@@ -23,7 +21,7 @@
|
|
|
23
21
|
<xsl:param name="defaultvalue"/>
|
|
24
22
|
<xsl:choose>
|
|
25
23
|
<xsl:when test="//payload/*[@slot=$slotname]">
|
|
26
|
-
|
|
24
|
+
<xsl:copy-of select="//payload/*[@slot=$slotname]"/>
|
|
27
25
|
</xsl:when>
|
|
28
26
|
<xsl:otherwise>
|
|
29
27
|
<xsl:copy-of select="$defaultvalue"/>
|
package/demo/z.html
CHANGED
|
@@ -1,50 +1,62 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
<dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
|
|
2
|
+
xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
|
|
3
|
+
<location-element xmlns="" slice="window-url" live="" data-dce-id="2"></location-element>
|
|
4
|
+
<table xmlns="" data-dce-id="3">
|
|
5
|
+
<tbody data-dce-id="0-1">
|
|
6
|
+
<tr data-dce-id="4">
|
|
7
|
+
<th data-dce-id="5"><h3 data-dce-id="6"> URL properties </h3></th>
|
|
8
|
+
<td data-dce-id="7">9</td>
|
|
9
|
+
</tr>
|
|
10
|
+
<tr data-dce-id="10">
|
|
11
|
+
<th data-dce-id="11">href</th>
|
|
12
|
+
<td data-dce-id="12">http://localhost:63342/custom-element/demo/a.html?_ijt=dmv0p4go000q47lg48i5im92f7&_ij_reload=RELOAD_ON_SAVE</td>
|
|
13
|
+
</tr>
|
|
14
|
+
<tr data-dce-id="10-1">
|
|
15
|
+
<th data-dce-id="11">origin</th>
|
|
16
|
+
<td data-dce-id="12">http://localhost:63342</td>
|
|
17
|
+
</tr>
|
|
18
|
+
<tr data-dce-id="10-2">
|
|
19
|
+
<th data-dce-id="11">protocol</th>
|
|
20
|
+
<td data-dce-id="12">http:</td>
|
|
21
|
+
</tr>
|
|
22
|
+
<tr data-dce-id="10-3">
|
|
23
|
+
<th data-dce-id="11">host</th>
|
|
24
|
+
<td data-dce-id="12">localhost:63342</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<tr data-dce-id="10-4">
|
|
27
|
+
<th data-dce-id="11">hostname</th>
|
|
28
|
+
<td data-dce-id="12">localhost</td>
|
|
29
|
+
</tr>
|
|
30
|
+
<tr data-dce-id="10-5">
|
|
31
|
+
<th data-dce-id="11">port</th>
|
|
32
|
+
<td data-dce-id="12">63342</td>
|
|
33
|
+
</tr>
|
|
34
|
+
<tr data-dce-id="10-6">
|
|
35
|
+
<th data-dce-id="11">pathname</th>
|
|
36
|
+
<td data-dce-id="12">/custom-element/demo/a.html</td>
|
|
37
|
+
</tr>
|
|
38
|
+
<tr data-dce-id="10-7">
|
|
39
|
+
<th data-dce-id="11">search</th>
|
|
40
|
+
<td data-dce-id="12">?_ijt=dmv0p4go000q47lg48i5im92f7&_ij_reload=RELOAD_ON_SAVE</td>
|
|
41
|
+
</tr>
|
|
42
|
+
<tr data-dce-id="10-8">
|
|
43
|
+
<th data-dce-id="11">hash</th>
|
|
44
|
+
<td data-dce-id="12"></td>
|
|
45
|
+
</tr>
|
|
46
|
+
</tbody>
|
|
47
|
+
</table>
|
|
48
|
+
<h3 data-dce-id="9"> URL parameters </h3>
|
|
49
|
+
<table xmlns="" data-dce-id="8">
|
|
7
50
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
min-width: 12rem;
|
|
21
|
-
padding: 1rem;
|
|
22
|
-
color: coral;
|
|
23
|
-
text-shadow: 1px 1px silver;
|
|
24
|
-
font-weight: bolder;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
caption {
|
|
28
|
-
padding: 1rem;
|
|
29
|
-
font-weight: bolder;
|
|
30
|
-
font-family: sans-serif;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
code {
|
|
34
|
-
text-align: right;
|
|
35
|
-
min-width: 3rem;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
</style>
|
|
39
|
-
</head>
|
|
40
|
-
<body>
|
|
41
|
-
|
|
42
|
-
<custom-element src="html-template.xhtml#embedded-xsl">
|
|
43
|
-
<template>whole XSLT is embedded into HTML body</template>
|
|
44
|
-
</custom-element>
|
|
45
|
-
<!--<custom-element src="html-template.html#none">-->
|
|
46
|
-
<!-- <template><i>element with id=none is missing in template</i></template>-->
|
|
47
|
-
<!--</custom-element>-->
|
|
48
|
-
|
|
49
|
-
</body>
|
|
50
|
-
</html>
|
|
51
|
+
<tbody data-dce-id="0-1">
|
|
52
|
+
<tr data-dce-id="10">
|
|
53
|
+
<th data-dce-id="11">_ijt</th>
|
|
54
|
+
<td data-dce-id="12">dmv0p4go000q47lg48i5im92f7</td>
|
|
55
|
+
</tr>
|
|
56
|
+
<tr data-dce-id="10-1">
|
|
57
|
+
<th data-dce-id="11">_ij_reload</th>
|
|
58
|
+
<td data-dce-id="12">RELOAD_ON_SAVE</td>
|
|
59
|
+
</tr>
|
|
60
|
+
</tbody>
|
|
61
|
+
</table>
|
|
62
|
+
</dce-root>
|