@epa-wg/custom-element 0.0.25 → 0.0.27
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 +3 -3
- package/bin/xslDtd2Ide.mjs +1 -1
- package/custom-element.js +103 -33
- package/demo/a.svg +27 -0
- package/demo/confused.svg +1 -0
- package/demo/demo.css +11 -8
- package/demo/embed-1.html +1 -2
- package/demo/external-template.html +122 -62
- package/demo/lib-dir/Smiley.svg +24 -0
- package/demo/lib-dir/embed-lib.html +34 -0
- package/demo/module-url.html +215 -0
- package/demo/npm-versions-demo.html +118 -0
- package/demo/npm-versions.html +94 -0
- package/demo/s.xml +3 -36
- package/demo/s.xslt +55 -96
- package/demo/set-url.html +1 -1
- package/demo/z.html +32 -61
- package/demo/z.js +9 -0
- package/demo/z1.html +34 -0
- package/ide/customData-dce.json +215 -181
- package/ide/web-types-dce.json +184 -159
- package/ide/web-types-xsl.json +1 -1
- package/index.html +21 -3
- package/local-storage.js +19 -14
- package/module-url.js +34 -0
- package/package.json +1 -1
- package/request.html +0 -53
package/demo/s.xslt
CHANGED
|
@@ -1,97 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<xsl:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<xsl:
|
|
14
|
-
</xsl:template>
|
|
15
|
-
<xsl:template
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
</label>
|
|
57
|
-
<label data-dce-id="22">
|
|
58
|
-
<input type="radio" name="method" value="location.assign" data-dce-id="23"/>
|
|
59
|
-
<dce-text data-dce-id="24">location.assign</dce-text>
|
|
60
|
-
</label>
|
|
61
|
-
<label data-dce-id="25">
|
|
62
|
-
<input type="radio" name="method" value="location.hash" data-dce-id="26"/>
|
|
63
|
-
<dce-text data-dce-id="27">location.hash</dce-text>
|
|
64
|
-
</label>
|
|
65
|
-
<label data-dce-id="28">
|
|
66
|
-
<input type="radio" name="method" value="history.pushState" data-dce-id="29"/>
|
|
67
|
-
<dce-text data-dce-id="30">history.pushState</dce-text>
|
|
68
|
-
</label>
|
|
69
|
-
<label data-dce-id="31">
|
|
70
|
-
<input type="radio" name="method" value="history.replaceState" data-dce-id="32"/>
|
|
71
|
-
<dce-text data-dce-id="33">history.replaceState</dce-text>
|
|
72
|
-
</label>
|
|
73
|
-
</fieldset>
|
|
74
|
-
</dce-root>
|
|
75
|
-
</xsl:template>
|
|
76
|
-
<xsl:template match="/">
|
|
77
|
-
<xsl:apply-templates mode="payload" select="/datadom/attributes"/>
|
|
78
|
-
</xsl:template>
|
|
79
|
-
<xsl:template name="slot">
|
|
80
|
-
<xsl:param name="slotname"/>
|
|
81
|
-
<xsl:param name="defaultvalue"/>
|
|
82
|
-
<xsl:choose>
|
|
83
|
-
<xsl:when test="//payload/*[@slot=$slotname]">
|
|
84
|
-
<xsl:copy-of select="//payload/*[@slot=$slotname]"/>
|
|
85
|
-
</xsl:when>
|
|
86
|
-
<xsl:otherwise>
|
|
87
|
-
<xsl:copy-of select="$defaultvalue"/>
|
|
88
|
-
</xsl:otherwise>
|
|
89
|
-
</xsl:choose>
|
|
90
|
-
</xsl:template>
|
|
91
|
-
<xsl:variable name="js-injected-body">
|
|
92
|
-
<xsl:call-template name="slot">
|
|
93
|
-
<xsl:with-param name="slotname" select="''"/>
|
|
94
|
-
<xsl:with-param name="defaultvalue"/>
|
|
95
|
-
</xsl:call-template>
|
|
96
|
-
</xsl:variable>
|
|
1
|
+
<?xml version='1.0' encoding='UTF-8'?>
|
|
2
|
+
<xsl:stylesheet version="1.0"
|
|
3
|
+
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
|
4
|
+
xmlns:xhtml="http://www.w3.org/1999/xhtml"
|
|
5
|
+
>
|
|
6
|
+
<xsl:output method="xml"/>
|
|
7
|
+
<xsl:template match="/">
|
|
8
|
+
<dce-root >
|
|
9
|
+
<xsl:apply-templates select="*"/>
|
|
10
|
+
</dce-root>
|
|
11
|
+
</xsl:template>
|
|
12
|
+
<xsl:template match="*[name()='template']">
|
|
13
|
+
<xsl:apply-templates mode="sanitize" select="*|text()"/>
|
|
14
|
+
</xsl:template>
|
|
15
|
+
<xsl:template match="*">
|
|
16
|
+
<xsl:apply-templates mode="sanitize" select="*|text()"/>
|
|
17
|
+
</xsl:template>
|
|
18
|
+
<xsl:template match="*[name()='svg']|*[name()='math']">
|
|
19
|
+
<xsl:apply-templates mode="sanitize" select="."/>
|
|
20
|
+
</xsl:template>
|
|
21
|
+
<xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]">
|
|
22
|
+
<xsl:copy>
|
|
23
|
+
<xsl:apply-templates mode="sanitize" select="@*"/>
|
|
24
|
+
<xsl:value-of select="text()"></xsl:value-of>
|
|
25
|
+
</xsl:copy>
|
|
26
|
+
</xsl:template>
|
|
27
|
+
<xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]">
|
|
28
|
+
<xsl:element name="{local-name()}">
|
|
29
|
+
<xsl:apply-templates mode="sanitize" select="@*"/>
|
|
30
|
+
<xsl:value-of select="text()"></xsl:value-of>
|
|
31
|
+
</xsl:element>
|
|
32
|
+
</xsl:template>
|
|
33
|
+
<xsl:template mode="sanitize" match="*|@*">
|
|
34
|
+
<xsl:copy>
|
|
35
|
+
<xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
|
|
36
|
+
</xsl:copy>
|
|
37
|
+
</xsl:template>
|
|
38
|
+
<xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
|
|
39
|
+
<xsl:template mode="sanitize" match="text()">
|
|
40
|
+
<dce-text>
|
|
41
|
+
<xsl:copy/>
|
|
42
|
+
</dce-text>
|
|
43
|
+
</xsl:template>
|
|
44
|
+
<xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
|
|
45
|
+
<dce-text>
|
|
46
|
+
<xsl:copy>
|
|
47
|
+
<xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
|
|
48
|
+
</xsl:copy>
|
|
49
|
+
</dce-text>
|
|
50
|
+
</xsl:template>
|
|
51
|
+
<xsl:template mode="sanitize" match="xhtml:*">
|
|
52
|
+
<xsl:element name="{local-name()}">
|
|
53
|
+
<xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
|
|
54
|
+
</xsl:element>
|
|
55
|
+
</xsl:template>
|
|
97
56
|
</xsl:stylesheet>
|
package/demo/set-url.html
CHANGED
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
30
30
|
</nav>
|
|
31
31
|
<main>
|
|
32
|
-
<h3>How to set the page URL by location-element
|
|
32
|
+
<h3>How to set the page URL by <code>location-element</code>?</h3>
|
|
33
33
|
Answer: by defining following attributes:
|
|
34
34
|
<ol>
|
|
35
35
|
<li><code>method</code> to one of values provided bellow</li>
|
package/demo/z.html
CHANGED
|
@@ -1,62 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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">
|
|
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>DOM merge - Declarative Custom Element implementation demo</title>
|
|
6
|
+
<link rel="icon" href="./wc-square.svg"/>
|
|
7
|
+
<script type="importmap">
|
|
8
|
+
{
|
|
9
|
+
"imports": {
|
|
10
|
+
"@epa-wg/custom-element/": "../",
|
|
11
|
+
"@epa-wg/custom-element-dist/": "../"
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
</script>
|
|
15
|
+
<script type="module" src="../http-request.js"></script>
|
|
16
|
+
<script type="module" src="../location-element.js"></script>
|
|
17
|
+
<script type="module" src="../custom-element.js"></script>
|
|
18
|
+
<style>
|
|
19
|
+
@import "./demo.css";
|
|
20
|
+
dt{ font-weight: bold}
|
|
21
|
+
dd{ padding: 0;}
|
|
22
|
+
h1,h3{ margin: 0;}
|
|
23
|
+
nav{ gap:0; }
|
|
24
|
+
</style>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
50
27
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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>
|
|
28
|
+
<custom-element src="./html-template.html#dwc-logo">
|
|
29
|
+
<template><i>loading SVG from templates file ...</i></template>
|
|
30
|
+
</custom-element>
|
|
31
|
+
|
|
32
|
+
</body>
|
|
33
|
+
</html>
|
package/demo/z.js
ADDED
package/demo/z1.html
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
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>DOM merge - Declarative Custom Element implementation demo</title>
|
|
6
|
+
<link rel="icon" href="./wc-square.svg"/>
|
|
7
|
+
<script type="importmap">
|
|
8
|
+
{
|
|
9
|
+
"imports": {
|
|
10
|
+
"@epa-wg/custom-element/": "../",
|
|
11
|
+
"@epa-wg/custom-element-dist/": "../"
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
</script>
|
|
15
|
+
<script type="module" src="../http-request.js"></script>
|
|
16
|
+
<script type="module" src="../location-element.js"></script>
|
|
17
|
+
<script type="module" src="../custom-element.js"></script>
|
|
18
|
+
<style>
|
|
19
|
+
@import "./demo.css";
|
|
20
|
+
dt{ font-weight: bold}
|
|
21
|
+
dd{ padding: 0;}
|
|
22
|
+
h1,h3{ margin: 0;}
|
|
23
|
+
nav{ gap:0; }
|
|
24
|
+
</style>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html`">set in page URL</button>
|
|
28
|
+
|
|
29
|
+
<custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version"
|
|
30
|
+
package-name="@epa-wg/custom-element-dist"
|
|
31
|
+
></custom-element>
|
|
32
|
+
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|