@epa-wg/custom-element 0.0.20 → 0.0.22
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/.editorconfig +11 -0
- package/README.md +29 -29
- package/bin/xslDtd2Ide.mjs +1 -1
- package/custom-element.d.ts +5 -0
- package/custom-element.js +113 -79
- package/custom-element1-1.js +763 -0
- package/custom-element1.js +763 -0
- package/demo/a.html +36 -49
- package/demo/b.html +13 -0
- package/demo/data-slices.html +32 -1
- package/demo/dom-merge.html +0 -1
- package/demo/form.html +193 -0
- package/demo/http-request.html +5 -5
- package/demo/local-storage.html +4 -4
- package/demo/location-element.html +6 -6
- package/demo/s.xml +13 -87
- package/demo/s.xslt +37 -16
- package/demo/s1.xslt +60 -0
- package/demo/scoped-css.html +0 -1
- package/demo/ss.html +57 -52
- package/http-request.js +14 -6
- package/ide/customData-dce.json +14 -1
- package/ide/web-types-dce.json +7 -2
- package/ide/web-types-xsl.json +2 -2
- package/index.html +1 -0
- package/index.js +7 -0
- package/local-storage.js +2 -2
- package/location-element.js +40 -15
- package/package.json +3 -3
- package/input-text.js +0 -17
package/demo/a.html
CHANGED
|
@@ -1,73 +1,60 @@
|
|
|
1
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
|
-
xmlns:html="http://www.w3.org/1999/xhtml">
|
|
2
|
+
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
|
4
3
|
<head>
|
|
5
4
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
6
|
-
<title>
|
|
5
|
+
<title>Data slices - Declarative Custom Element implementation demo</title>
|
|
7
6
|
<link rel="icon" href="./wc-square.svg"/>
|
|
7
|
+
|
|
8
8
|
<script type="module" src="../http-request.js"></script>
|
|
9
|
-
<script type="module" src="../local-storage.js"></script>
|
|
10
9
|
<script type="module" src="../custom-element.js"></script>
|
|
11
|
-
|
|
12
10
|
<style>
|
|
13
11
|
@import "./demo.css";
|
|
14
12
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
table {
|
|
20
|
-
min-width: 16rem;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
td {
|
|
24
|
-
border-bottom: 1px solid silver;
|
|
13
|
+
label {
|
|
14
|
+
display: flex;
|
|
25
15
|
}
|
|
26
16
|
|
|
27
|
-
|
|
28
|
-
|
|
17
|
+
label:has(input[type="text"],input[type="password"],input:not([type]) ) {
|
|
18
|
+
flex-direction: column;
|
|
29
19
|
}
|
|
30
20
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
caption {
|
|
36
|
-
padding: 1rem;
|
|
37
|
-
font-weight: bolder;
|
|
38
|
-
font-family: sans-serif;
|
|
21
|
+
nav {
|
|
22
|
+
max-width: 32em;
|
|
39
23
|
}
|
|
40
24
|
</style>
|
|
25
|
+
<!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
|
|
26
|
+
todo: apply setCustomValidity( warningStr )
|
|
27
|
+
-->
|
|
28
|
+
|
|
41
29
|
</head>
|
|
42
30
|
<body>
|
|
43
31
|
|
|
44
|
-
|
|
32
|
+
<fieldset>
|
|
33
|
+
<legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
|
|
34
|
+
style="color:red">red</i> in 1st instance
|
|
35
|
+
</legend>
|
|
36
|
+
<custom-element tag="dce-3">
|
|
45
37
|
<template>
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
|
|
50
|
-
<http-request
|
|
51
|
-
url="{//fetch-url}"
|
|
52
|
-
slice="request_slice"
|
|
53
|
-
type="text"
|
|
54
|
-
mode="cors"
|
|
55
|
-
></http-request>
|
|
56
|
-
//fetch-url : <code>{//fetch-url}</code>
|
|
57
|
-
<!-- <for-each select="//slice/request_slice/value/*">-->
|
|
58
|
-
<!-- <ul>-->
|
|
59
|
-
<!-- <var data-testid="request-section"><value-of select='name(.)'/></var>-->
|
|
60
|
-
<!-- <for-each select="@*">-->
|
|
61
|
-
<!-- <div>-->
|
|
62
|
-
<!-- <var data-testid="section-attribute">@<value-of select='local-name(.)'/></var>-->
|
|
63
|
-
<!-- =-->
|
|
64
|
-
<!-- <code><value-of select='.'/></code>-->
|
|
65
|
-
<!-- </div>-->
|
|
66
|
-
<!-- </for-each>-->
|
|
67
|
-
<!-- </ul>-->
|
|
68
|
-
<!-- </for-each>-->
|
|
38
|
+
<u>
|
|
39
|
+
<slot>is green</slot>
|
|
40
|
+
</u>
|
|
69
41
|
</template>
|
|
42
|
+
<style>dce-3 {
|
|
43
|
+
color: green
|
|
44
|
+
}</style>
|
|
70
45
|
</custom-element>
|
|
46
|
+
<u>should be</u> <i style="color:red">red</i>:
|
|
47
|
+
<dce-3 id="dce32">
|
|
48
|
+
<template>
|
|
49
|
+
<style> color:red; </style>
|
|
50
|
+
<u>red</u>
|
|
51
|
+
</template>
|
|
52
|
+
</dce-3> <br/>
|
|
53
|
+
should be GREEN:
|
|
54
|
+
<dce-3 id="dce31">green</dce-3>
|
|
55
|
+
</fieldset>
|
|
56
|
+
|
|
57
|
+
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
|
71
58
|
|
|
72
59
|
</body>
|
|
73
60
|
</html>
|
package/demo/b.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<dce-root data-dce-id="1" xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
|
|
3
|
+
xmlns:xhtml="http://www.w3.org/1999/xhtml"><u data-dce-id="2" xmlns="">
|
|
4
|
+
<dce-text data-dce-id="3">
|
|
5
|
+
<xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
|
|
6
|
+
<xhtml:style xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="" title="ABC">
|
|
7
|
+
dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }
|
|
8
|
+
</xhtml:style>
|
|
9
|
+
<xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
|
|
10
|
+
<xhtml:u xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="">red</xhtml:u>
|
|
11
|
+
<xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
|
|
12
|
+
</dce-text>
|
|
13
|
+
</u></dce-root>
|
package/demo/data-slices.html
CHANGED
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
<link rel="icon" href="./wc-square.svg"/>
|
|
7
7
|
|
|
8
8
|
<script type="module" src="../http-request.js"></script>
|
|
9
|
-
<script type="module" src="../input-text.js"></script>
|
|
10
9
|
<script type="module" src="../custom-element.js"></script>
|
|
11
10
|
<style>
|
|
12
11
|
@import "./demo.css";
|
|
@@ -179,6 +178,38 @@
|
|
|
179
178
|
</template>
|
|
180
179
|
</html-demo-element>
|
|
181
180
|
|
|
181
|
+
|
|
182
|
+
<html-demo-element legend="10. multiple slices by same field"
|
|
183
|
+
description="same element value sets s1 and s2 slice">
|
|
184
|
+
<template>
|
|
185
|
+
<custom-element>
|
|
186
|
+
<template>
|
|
187
|
+
<input slice="s1|s2"
|
|
188
|
+
slice-event="input"
|
|
189
|
+
data-testid="f1"
|
|
190
|
+
/><br/>
|
|
191
|
+
Type to update s1 and s2 slices <br/>
|
|
192
|
+
slice <code>s1: {//slice/s1}</code><br/>
|
|
193
|
+
slice <code>s2: {//slice/s2}</code><br/>
|
|
194
|
+
</template>
|
|
195
|
+
</custom-element>
|
|
196
|
+
</template>
|
|
197
|
+
</html-demo-element>
|
|
198
|
+
|
|
199
|
+
<html-demo-element legend="11. slices and attribute"
|
|
200
|
+
description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
|
|
201
|
+
<template>
|
|
202
|
+
<custom-element>
|
|
203
|
+
<template>
|
|
204
|
+
<attribute name="emotion">😃</attribute>
|
|
205
|
+
<input slice="/datadom/attributes/emotion | s1"/>
|
|
206
|
+
Type and unfocus to update emotion attribute: {emotion}
|
|
207
|
+
and slice: {//slice/s1}
|
|
208
|
+
</template>
|
|
209
|
+
</custom-element>
|
|
210
|
+
</template>
|
|
211
|
+
</html-demo-element>
|
|
212
|
+
|
|
182
213
|
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
|
183
214
|
|
|
184
215
|
</body>
|
package/demo/dom-merge.html
CHANGED
package/demo/form.html
ADDED
|
@@ -0,0 +1,193 @@
|
|
|
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>Forms - Declarative Custom Element implementation demo</title>
|
|
6
|
+
<link rel="icon" href="./wc-square.svg"/>
|
|
7
|
+
|
|
8
|
+
<script type="module" src="../local-storage.js"></script>
|
|
9
|
+
<script type="module" src="../custom-element.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
@import "./demo.css";
|
|
12
|
+
label{ display: flex; }
|
|
13
|
+
label:has(input[type="text"],input[type="password"],input:not([type]) ){flex-direction: column;}
|
|
14
|
+
nav{ max-width: 32em; }
|
|
15
|
+
</style>
|
|
16
|
+
<!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
|
|
17
|
+
todo: apply setCustomValidity( warningStr )
|
|
18
|
+
-->
|
|
19
|
+
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
|
|
23
|
+
<nav>
|
|
24
|
+
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
25
|
+
<h3>Forms handling.</h3>
|
|
26
|
+
<ul>
|
|
27
|
+
<li> The form triggers re-render on <code>change</code> event before submit</li>
|
|
28
|
+
<li> <code>disabled</code> form attribute is added when validation is not passed </li>
|
|
29
|
+
<li> Form action triggered on submit changing the hash in URL </li>
|
|
30
|
+
<li> URL hash hides the <var>signin</var> form from DOM and shown <var>signout</var> form </li>
|
|
31
|
+
<li> signout action reverse visibility of signin and signout </li>
|
|
32
|
+
<li> "remember" checkbox triggers <code>local-storage</code> with value set from <var>form-data/remember</var> slice </li>
|
|
33
|
+
<li> "username" initial value taken from <code>local-storage</code> <var>usernane</var> slice </li>
|
|
34
|
+
<li> <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form Validation - MDN</a> </li>
|
|
35
|
+
</ul>
|
|
36
|
+
</nav>
|
|
37
|
+
|
|
38
|
+
<html-demo-element legend="1. Simple validation"
|
|
39
|
+
description="custom-validity boolean value prevents submission, username length switches Next to 'Sign In' button ">
|
|
40
|
+
<ol>
|
|
41
|
+
<li> Click Next, observe the warning </li>
|
|
42
|
+
<li> Fill input with 10+ characters </li>
|
|
43
|
+
<li> Click Next, the password and "Sign In" button should appear </li>
|
|
44
|
+
</ol>
|
|
45
|
+
<template>
|
|
46
|
+
<custom-element>
|
|
47
|
+
<template>
|
|
48
|
+
<form slice="signin-form"
|
|
49
|
+
custom-validity="
|
|
50
|
+
string-length(/datadom/slice/signin-form/form-data/username) > 10
|
|
51
|
+
and string-length(//form-data/password) > 3 "
|
|
52
|
+
>
|
|
53
|
+
<label> Email
|
|
54
|
+
<input name="username" autocomplete="username" placeholder="Email, phone, or username" required="">
|
|
55
|
+
</label>
|
|
56
|
+
<variable name="showpassword" select="string-length(//form-data/username) > 10 "></variable>
|
|
57
|
+
<if test="not($showpassword)">
|
|
58
|
+
<button slice="confirm" slice-event="click" slice-value="'password'">Next</button>
|
|
59
|
+
</if>
|
|
60
|
+
<if test="$showpassword">
|
|
61
|
+
<label>Enter password: <input name="password" type="password" required> </label>
|
|
62
|
+
<button>Sign In</button>
|
|
63
|
+
</if>
|
|
64
|
+
username {//username}
|
|
65
|
+
</form>
|
|
66
|
+
</template>
|
|
67
|
+
</custom-element>
|
|
68
|
+
</template>
|
|
69
|
+
</html-demo-element>
|
|
70
|
+
|
|
71
|
+
<html-demo-element legend="2. Form life cycle demo"
|
|
72
|
+
description="form-data in the form slice is the source of truth" >
|
|
73
|
+
|
|
74
|
+
<template>
|
|
75
|
+
<custom-element>
|
|
76
|
+
<template>
|
|
77
|
+
<form slice="signin-form"
|
|
78
|
+
custom-validity="
|
|
79
|
+
string-length(/datadom/slice/signin-form/form-data/username) > 9
|
|
80
|
+
and ( ( //confirm-by = 'sms' )
|
|
81
|
+
or ( //confirm-by = 'email' )
|
|
82
|
+
or ( //confirm-by = 'password' and string-length(//form-data/password) > 3 )
|
|
83
|
+
)
|
|
84
|
+
"
|
|
85
|
+
>
|
|
86
|
+
<!-- form validity should be based on form-data -->
|
|
87
|
+
<variable name="warn">
|
|
88
|
+
<if test="string-length(//username-slice) < 9 ">
|
|
89
|
+
Should be 10 or more symbols.
|
|
90
|
+
<!-- updated by slice on input event -->
|
|
91
|
+
</if>
|
|
92
|
+
<if test="//form-data/confirm-by = 'sms'">
|
|
93
|
+
Message and Data Rates may apply.
|
|
94
|
+
<!-- updated by form change by radio select -->
|
|
95
|
+
</if>
|
|
96
|
+
</variable>
|
|
97
|
+
<label> Enter your email, phone, or user name
|
|
98
|
+
<input name="username" autocomplete="username"
|
|
99
|
+
placeholder="Email, phone, or username"
|
|
100
|
+
custom-validity="( string-length(//username-slice) > 9 ) ?? 'should be 10+ symbols'"
|
|
101
|
+
slice-event="input"
|
|
102
|
+
slice="username-slice"
|
|
103
|
+
required
|
|
104
|
+
/>
|
|
105
|
+
</label>
|
|
106
|
+
<var> {$warn} </var>
|
|
107
|
+
<fieldset>
|
|
108
|
+
<legend>Confirm by</legend>
|
|
109
|
+
<label><input type="radio" name="confirm-by" value="email" /> email </label>
|
|
110
|
+
<label><input type="radio" name="confirm-by" value="sms" /> text to phone </label>
|
|
111
|
+
<label><input type="radio" name="confirm-by" value="password" /> password </label>
|
|
112
|
+
<if test="/datadom/slice/signin-form/form-data/confirm-by = 'password'">
|
|
113
|
+
<label>Enter password: <input type="password" NAME="password"
|
|
114
|
+
custom-validity="( string-length(//form-data/password) > 3 ) ?? 'password is too short'"
|
|
115
|
+
/></label>
|
|
116
|
+
</if>
|
|
117
|
+
<if test="not(//confirm-by)">
|
|
118
|
+
Please select the auth method
|
|
119
|
+
</if>
|
|
120
|
+
</fieldset>
|
|
121
|
+
<section>
|
|
122
|
+
<button>Sign In</button>
|
|
123
|
+
</section>
|
|
124
|
+
</form>
|
|
125
|
+
//username-slice {//username-slice}<br/>
|
|
126
|
+
//username {//username}<br/>
|
|
127
|
+
//confirm-by {//confirm-by}<br/>
|
|
128
|
+
//password {//password}
|
|
129
|
+
</template>
|
|
130
|
+
</custom-element>
|
|
131
|
+
</template>
|
|
132
|
+
</html-demo-element>
|
|
133
|
+
|
|
134
|
+
<html-demo-element legend="3. read system validity message"
|
|
135
|
+
description="validationMessage propagated into slice as 'validation-message' attribute ">
|
|
136
|
+
<ol>
|
|
137
|
+
<li> type in input field</li>
|
|
138
|
+
<li> delete input field content</li>
|
|
139
|
+
<li> observe the warning in string bellow input</li>
|
|
140
|
+
<li> Click Next observe the system warning in dropdown and in string bellow input</li>
|
|
141
|
+
</ol>
|
|
142
|
+
<template>
|
|
143
|
+
<custom-element>
|
|
144
|
+
<template>
|
|
145
|
+
<form slice="email-form">
|
|
146
|
+
<label> Email
|
|
147
|
+
<input slice="username" slice-event="input" placeholder="non-empty" required>
|
|
148
|
+
</label>
|
|
149
|
+
<if test="//username/@validation-message">
|
|
150
|
+
<var>{//username/@validation-message}</var>
|
|
151
|
+
</if>
|
|
152
|
+
<button>Next</button>
|
|
153
|
+
<p>{//email-form/@validation-message}</p>
|
|
154
|
+
</form>
|
|
155
|
+
</template>
|
|
156
|
+
</custom-element>
|
|
157
|
+
</template>
|
|
158
|
+
</html-demo-element>
|
|
159
|
+
|
|
160
|
+
<html-demo-element legend="4. form validity message"
|
|
161
|
+
description="@validation-message propagated into form slice and ">
|
|
162
|
+
<ol>
|
|
163
|
+
<li> type up to 3 chars in input field </li>
|
|
164
|
+
<li> observe the slice value change </li>
|
|
165
|
+
<li> click next </li>
|
|
166
|
+
<li> observe the warning bellow the button </li>
|
|
167
|
+
</ol>
|
|
168
|
+
<template>
|
|
169
|
+
<custom-element>
|
|
170
|
+
<template>
|
|
171
|
+
<form slice="email-form"
|
|
172
|
+
custom-validity=" string-length(//slice/username) > 3 ??
|
|
173
|
+
concat('should be more than 3 characters, now is ',string-length(//slice/username) ) "
|
|
174
|
+
>
|
|
175
|
+
<label> Email
|
|
176
|
+
<input name="email" slice="username" slice-event="input" placeholder="non-empty" required />
|
|
177
|
+
</label>
|
|
178
|
+
<if test="//username/@validation-message">
|
|
179
|
+
<var>{//username/@validation-message}</var>
|
|
180
|
+
</if>
|
|
181
|
+
<button>Next</button>
|
|
182
|
+
<p>//email-form/@validation-message: {//email-form/@validation-message} </p>
|
|
183
|
+
<p>//slice/username: {//slice/username} </p>
|
|
184
|
+
</form>
|
|
185
|
+
</template>
|
|
186
|
+
</custom-element>
|
|
187
|
+
</template>
|
|
188
|
+
</html-demo-element>
|
|
189
|
+
|
|
190
|
+
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
|
191
|
+
|
|
192
|
+
</body>
|
|
193
|
+
</html>
|
package/demo/http-request.html
CHANGED
|
@@ -38,7 +38,9 @@
|
|
|
38
38
|
<custom-element>
|
|
39
39
|
<template>
|
|
40
40
|
|
|
41
|
+
<button slice="url-string" slice-value="''" slice-event="click">⬇️set blank</button>
|
|
41
42
|
<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>
|
|
43
|
+
<button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=3'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=3</button>
|
|
42
44
|
<input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
|
|
43
45
|
<button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
|
|
44
46
|
<http-request
|
|
@@ -48,11 +50,9 @@
|
|
|
48
50
|
mode="cors"
|
|
49
51
|
></http-request>
|
|
50
52
|
<code>//fetch-url</code> from <code>{//fetch-url}</code><br/>
|
|
51
|
-
<for-each select="//results">
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
</var>
|
|
55
|
-
</for-each>
|
|
53
|
+
<ul><for-each select="//results">
|
|
54
|
+
<li>{@name}</li>
|
|
55
|
+
</for-each></ul>
|
|
56
56
|
</template>
|
|
57
57
|
</custom-element>
|
|
58
58
|
</template>
|
package/demo/local-storage.html
CHANGED
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
<custom-element>
|
|
52
52
|
<template>
|
|
53
53
|
<!-- always reset -->
|
|
54
|
-
<local-storage
|
|
55
|
-
<button onclick="localStorage.setItem('overrideKey','text value')">text value</button>
|
|
56
|
-
<button onclick="localStorage.removeItem('
|
|
57
|
-
//override-key: <code>{//override-key}</code>
|
|
54
|
+
<local-storage slice="override-key" key="overrideKey" type="text" value="ABC"></local-storage>
|
|
55
|
+
<button onclick="localStorage.setItem( 'overrideKey','text value')">text value</button>
|
|
56
|
+
<button onclick="localStorage.removeItem('overrideKey' )">clear key</button>
|
|
57
|
+
//override-key: <code>{ //override-key }</code>
|
|
58
58
|
</template>
|
|
59
59
|
</custom-element>
|
|
60
60
|
</template>
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
<input name="p2" value="def"/>
|
|
31
31
|
<input type="submit" value="params"/>
|
|
32
32
|
</form>
|
|
33
|
-
<button onclick="history.pushState( {},'', 'location.html?pushstate')"
|
|
33
|
+
<button onclick="history.pushState( {},'', 'location-element.html?pushstate')"
|
|
34
34
|
>history.pushState</button>
|
|
35
|
-
<button onclick="history.replaceState( {},'', 'location.html?replaceState#dce1')"
|
|
35
|
+
<button onclick="history.replaceState( {},'', 'location-element.html?replaceState#dce1')"
|
|
36
36
|
>history.replaceState</button>
|
|
37
37
|
|
|
38
38
|
</template>
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
</html-demo-element>
|
|
114
114
|
|
|
115
115
|
|
|
116
|
-
<html-demo-element legend="3. External URL as
|
|
116
|
+
<html-demo-element legend="3. External URL as HREF attribute"
|
|
117
117
|
description="url parsed and populated into slice."
|
|
118
118
|
id="dce3">
|
|
119
119
|
<p>Has to produce URL properties</p>
|
|
@@ -121,12 +121,12 @@
|
|
|
121
121
|
<custom-element tag="dce-3" hidden>
|
|
122
122
|
<template>
|
|
123
123
|
|
|
124
|
-
<location-element slice="
|
|
124
|
+
<location-element slice="href-url" href="https://my.example?a=1&b=2#3"></location-element>
|
|
125
125
|
|
|
126
126
|
<xhtml:table>
|
|
127
127
|
<xhtml:tbody>
|
|
128
128
|
<xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
|
|
129
|
-
<for-each select="//slice/
|
|
129
|
+
<for-each select="//slice/href-url/value/@*">
|
|
130
130
|
<xhtml:tr>
|
|
131
131
|
<xhtml:th>{name()}</xhtml:th>
|
|
132
132
|
<xhtml:td>{.}</xhtml:td>
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
</xhtml:tbody>
|
|
136
136
|
<xhtml:tbody>
|
|
137
137
|
<xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
|
|
138
|
-
<for-each select="//slice/
|
|
138
|
+
<for-each select="//slice/href-url/value/params/*">
|
|
139
139
|
<xhtml:tr>
|
|
140
140
|
<xhtml:th>{name()}</xhtml:th>
|
|
141
141
|
<xhtml:td>{.}</xhtml:td>
|
package/demo/s.xml
CHANGED
|
@@ -1,93 +1,19 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<datadom
|
|
2
|
+
<datadom xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
|
|
3
|
+
xmlns:dce="urn:schemas-epa-wg:dce">
|
|
3
4
|
<payload>
|
|
4
|
-
<span
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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>
|
|
5
|
+
<xhtml:span slot=""></xhtml:span>
|
|
6
|
+
<xhtml:style slot="" title="ABC">dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }</xhtml:style>
|
|
7
|
+
<xhtml:span slot=""></xhtml:span>
|
|
8
|
+
<xhtml:u slot="">red</xhtml:u>
|
|
9
|
+
<xhtml:span slot=""></xhtml:span>
|
|
43
10
|
</payload>
|
|
44
11
|
<attributes>
|
|
45
|
-
<
|
|
12
|
+
<id>dce32</id>
|
|
13
|
+
<data-dce-style>54f96d52-ce70-435d-83c4-b421357d9a17</data-dce-style>
|
|
46
14
|
</attributes>
|
|
47
|
-
<dataset
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
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>
|
|
15
|
+
<dataset>
|
|
16
|
+
<dceStyle>54f96d52-ce70-435d-83c4-b421357d9a17</dceStyle>
|
|
17
|
+
</dataset>
|
|
18
|
+
<slice/>
|
|
93
19
|
</datadom>
|