@epa-wg/custom-element 0.0.9 → 0.0.11
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/.gitignore +6 -2
- package/.idea/inspectionProfiles/Project_Default.xml +26 -0
- package/0/a.html +19 -0
- package/0/a.xml +10 -0
- package/0/a.xsl +66 -0
- package/0/a1.xsl +38 -0
- package/0/ab.xsl +23 -0
- package/0/az.xml +30 -0
- package/0/b.html +90 -0
- package/README.md +33 -5
- package/custom-element.js +184 -70
- package/demo/a.html +24 -0
- package/demo/confused.svg +37 -0
- package/demo/demo.css +3 -1
- package/demo/embed-1.html +3 -0
- package/demo/external-template.html +176 -0
- package/demo/html-template.html +13 -0
- package/demo/html-template.xhtml +45 -0
- package/demo/html-template.xml +45 -0
- package/demo/http-request.html +3 -0
- package/demo/local-storage.html +3 -0
- package/demo/location-element.html +149 -0
- package/demo/logo.png +0 -0
- package/demo/table.xml +25 -0
- package/demo/table.xsl +293 -0
- package/demo/template.xsl +46 -0
- package/demo/tree.xml +25 -0
- package/demo/tree.xsl +33 -0
- package/demo/wc-square.svg +1 -1
- package/demo/xhtml-template.xhtml +45 -0
- package/http-request.js +4 -2
- package/index.html +29 -22
- package/location-element.js +63 -0
- package/package.json +1 -1
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8"/>
|
|
5
|
+
<title>template based on HTML file</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<b id="wave">👋</b>
|
|
9
|
+
<b id="ok">👌</b>
|
|
10
|
+
<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
|
|
11
|
+
<xsl:stylesheet
|
|
12
|
+
id="embedded-xsl"
|
|
13
|
+
version="1.0"
|
|
14
|
+
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
|
15
|
+
<xsl:output
|
|
16
|
+
method="html"
|
|
17
|
+
omit-xml-declaration="yes"
|
|
18
|
+
standalone="yes"
|
|
19
|
+
indent="yes"
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<xsl:template match="/">
|
|
23
|
+
<xsl:apply-templates select="*"/>
|
|
24
|
+
</xsl:template>
|
|
25
|
+
<xsl:template match="*">
|
|
26
|
+
<details style="padding:0 1rem" open="open">
|
|
27
|
+
<summary>
|
|
28
|
+
<b style="color:green"><xsl:value-of select="name()"/></b>
|
|
29
|
+
<xsl:apply-templates select="@*"/>
|
|
30
|
+
</summary>
|
|
31
|
+
<xsl:value-of select="./text()"/>
|
|
32
|
+
<xsl:apply-templates select="*"/>
|
|
33
|
+
</details>
|
|
34
|
+
</xsl:template>
|
|
35
|
+
<xsl:template match="@*">
|
|
36
|
+
<code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
|
|
37
|
+
</xsl:template>
|
|
38
|
+
<xsl:template match="text()">
|
|
39
|
+
<p>
|
|
40
|
+
<xsl:value-of select="."/>
|
|
41
|
+
</p>
|
|
42
|
+
</xsl:template>
|
|
43
|
+
</xsl:stylesheet>
|
|
44
|
+
</body>
|
|
45
|
+
</html>
|
package/demo/http-request.html
CHANGED
package/demo/local-storage.html
CHANGED
|
@@ -19,6 +19,9 @@
|
|
|
19
19
|
</head>
|
|
20
20
|
<body>
|
|
21
21
|
|
|
22
|
+
<nav>
|
|
23
|
+
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
24
|
+
</nav>
|
|
22
25
|
|
|
23
26
|
<html-demo-element legend="1. localStorage simplest"
|
|
24
27
|
description="local-storage read only during initial and only render, does not track the changes.">
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
5
|
+
<title>custom-element Declarative Custom Element implementation demo</title>
|
|
6
|
+
<link rel="icon" href="./wc-square.svg" />
|
|
7
|
+
<script type="module" src="../location-element.js"></script>
|
|
8
|
+
<script type="module" src="../custom-element.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
@import "./demo.css";
|
|
11
|
+
|
|
12
|
+
button{ background: forestgreen; }
|
|
13
|
+
table{ min-width: 16rem; }
|
|
14
|
+
td{ border-bottom: 1px solid silver; }
|
|
15
|
+
tfoot td{ border-bottom: none; }
|
|
16
|
+
td,th{text-align: right; }
|
|
17
|
+
caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<nav>
|
|
22
|
+
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
23
|
+
</nav>
|
|
24
|
+
<html-demo-element legend="Change window URL">
|
|
25
|
+
<template>
|
|
26
|
+
<a href="#dce2">#dce2</a>
|
|
27
|
+
<form >
|
|
28
|
+
<input name="p1" value="abc"/>
|
|
29
|
+
<input name="p2" value="def"/>
|
|
30
|
+
<input type="submit" value="params"/>
|
|
31
|
+
</form>
|
|
32
|
+
<button onclick="history.pushState( {},'', 'location.html?pushstate')"
|
|
33
|
+
>history.pushState</button>
|
|
34
|
+
<button onclick="history.replaceState( {},'', 'location.html?replaceState#dce1')"
|
|
35
|
+
>history.replaceState</button>
|
|
36
|
+
|
|
37
|
+
</template>
|
|
38
|
+
</html-demo-element>
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
<html-demo-element legend="2. window.location live update"
|
|
42
|
+
description="In the page beginning change the window URL via link or by history change"
|
|
43
|
+
id="dce2"
|
|
44
|
+
>
|
|
45
|
+
<p>Has to produce URL properties</p>
|
|
46
|
+
<template>
|
|
47
|
+
<custom-element tag="dce-2" hidden>
|
|
48
|
+
<template>
|
|
49
|
+
|
|
50
|
+
<location-element slice="window-url" live></location-element>
|
|
51
|
+
|
|
52
|
+
<html:table>
|
|
53
|
+
<xsl:for-each select="//slice/window-url/@*">
|
|
54
|
+
<html:tr>
|
|
55
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
56
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
57
|
+
</html:tr>
|
|
58
|
+
</xsl:for-each>
|
|
59
|
+
<html:tr>
|
|
60
|
+
<html:th><u>params</u></html:th>
|
|
61
|
+
<html:th></html:th>
|
|
62
|
+
</html:tr>
|
|
63
|
+
<xsl:for-each select="//slice/window-url/params/*">
|
|
64
|
+
<html:tr>
|
|
65
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
66
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
67
|
+
</html:tr>
|
|
68
|
+
</xsl:for-each>
|
|
69
|
+
</html:table>
|
|
70
|
+
</template>
|
|
71
|
+
</custom-element>
|
|
72
|
+
<dce-2>?</dce-2>
|
|
73
|
+
</template>
|
|
74
|
+
</html-demo-element>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
<html-demo-element legend="1. window.location simplest"
|
|
78
|
+
description="location read only during initial and only render, does not track the changes."
|
|
79
|
+
id="dce1">
|
|
80
|
+
<p>Has to produce URL properties</p>
|
|
81
|
+
<template>
|
|
82
|
+
<custom-element tag="dce-1" hidden>
|
|
83
|
+
<template>
|
|
84
|
+
|
|
85
|
+
<location-element slice="window-url"></location-element>
|
|
86
|
+
|
|
87
|
+
<html:table>
|
|
88
|
+
<xsl:for-each select="//slice/window-url/@*">
|
|
89
|
+
<html:tr>
|
|
90
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
91
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
92
|
+
</html:tr>
|
|
93
|
+
</xsl:for-each>
|
|
94
|
+
<html:tr>
|
|
95
|
+
<html:th><u>params</u></html:th>
|
|
96
|
+
<html:th></html:th>
|
|
97
|
+
</html:tr>
|
|
98
|
+
<xsl:for-each select="//slice/window-url/params/*">
|
|
99
|
+
<html:tr>
|
|
100
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
101
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
102
|
+
</html:tr>
|
|
103
|
+
</xsl:for-each>
|
|
104
|
+
</html:table>
|
|
105
|
+
</template>
|
|
106
|
+
</custom-element>
|
|
107
|
+
<dce-1>?</dce-1>
|
|
108
|
+
</template>
|
|
109
|
+
</html-demo-element>
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
<html-demo-element legend="3. External URL as SRC attribute"
|
|
113
|
+
description="url parsed and populated into slice."
|
|
114
|
+
id="dce3">
|
|
115
|
+
<p>Has to produce URL properties</p>
|
|
116
|
+
<template>
|
|
117
|
+
<custom-element tag="dce-3" hidden>
|
|
118
|
+
<template>
|
|
119
|
+
|
|
120
|
+
<location-element slice="src-url" src="https://my.example?a=1&b=2#3"></location-element>
|
|
121
|
+
|
|
122
|
+
<html:table>
|
|
123
|
+
<xsl:for-each select="//slice/src-url/@*">
|
|
124
|
+
<html:tr>
|
|
125
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
126
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
127
|
+
</html:tr>
|
|
128
|
+
</xsl:for-each>
|
|
129
|
+
<html:tr>
|
|
130
|
+
<html:th><u>params</u></html:th>
|
|
131
|
+
<html:th></html:th>
|
|
132
|
+
</html:tr>
|
|
133
|
+
<xsl:for-each select="//slice/src-url/params/*">
|
|
134
|
+
<html:tr>
|
|
135
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
136
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
137
|
+
</html:tr>
|
|
138
|
+
</xsl:for-each>
|
|
139
|
+
</html:table>
|
|
140
|
+
</template>
|
|
141
|
+
</custom-element>
|
|
142
|
+
<dce-3>?</dce-3>
|
|
143
|
+
</template>
|
|
144
|
+
</html-demo-element>
|
|
145
|
+
|
|
146
|
+
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
|
147
|
+
|
|
148
|
+
</body>
|
|
149
|
+
</html>
|
package/demo/logo.png
ADDED
|
Binary file
|
package/demo/table.xml
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<?xml-stylesheet type="text/xsl" href="table.xsl"?>
|
|
3
|
+
<div xmlns="http://www.w3.org/1999/xhtml">
|
|
4
|
+
<payload>
|
|
5
|
+
<span slot=""></span>
|
|
6
|
+
<p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
|
|
7
|
+
the seed grows in size as the Pokémon does.
|
|
8
|
+
</p>
|
|
9
|
+
<span slot=""></span>
|
|
10
|
+
<ul slot="">
|
|
11
|
+
<li pokemon-id="2">ivysaur</li>
|
|
12
|
+
<li pokemon-id="3">venusaur</li>
|
|
13
|
+
</ul>
|
|
14
|
+
<span slot=""></span>
|
|
15
|
+
</payload>
|
|
16
|
+
<attributes>
|
|
17
|
+
<title>bulbasaur</title>
|
|
18
|
+
<data-smile>👼</data-smile>
|
|
19
|
+
<pokemon-id>1</pokemon-id>
|
|
20
|
+
</attributes>
|
|
21
|
+
<dataset>
|
|
22
|
+
<smile>👼</smile>
|
|
23
|
+
</dataset>
|
|
24
|
+
<slice></slice>
|
|
25
|
+
</div>
|
package/demo/table.xsl
ADDED
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<xsl:stylesheet version="1.0"
|
|
3
|
+
xmlns="http://www.w3.org/1999/xhtml"
|
|
4
|
+
xmlns:xhtml="http://www.w3.org/1999/xhtml"
|
|
5
|
+
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
|
6
|
+
xmlns:func="http://exslt.org/functions"
|
|
7
|
+
xmlns:my="my://own.uri"
|
|
8
|
+
xmlns:xv="http://xmlaspect.org/XmlView"
|
|
9
|
+
xmlns:exslt="http://exslt.org/common"
|
|
10
|
+
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
|
|
11
|
+
exclude-result-prefixes="xhtml exslt msxsl"
|
|
12
|
+
extension-element-prefixes="func"
|
|
13
|
+
>
|
|
14
|
+
<xsl:output
|
|
15
|
+
method="html"
|
|
16
|
+
omit-xml-declaration="yes"
|
|
17
|
+
standalone="yes"
|
|
18
|
+
indent="yes"
|
|
19
|
+
/>
|
|
20
|
+
<!--
|
|
21
|
+
let processor = new XSLTProcessor(); // starts the XSL processor
|
|
22
|
+
processor.setParameter(null, "baseUrl", new URL('./', import.meta.url).pathname);
|
|
23
|
+
-->
|
|
24
|
+
<xsl:param name="url" />
|
|
25
|
+
<xsl:param name="baseUrl" select="substring-before(substring-after(/processing-instruction('xml-stylesheet'),'href="'),'table.xsl"')" />
|
|
26
|
+
<xsl:param name="sort" />
|
|
27
|
+
<!-- select = "exslt:node-set($x) IE compatibility -->
|
|
28
|
+
<msxsl:script language="JScript" implements-prefix="exslt">
|
|
29
|
+
<![CDATA[
|
|
30
|
+
var dd = eval("this['node-set'] = function (x) { return x; }");
|
|
31
|
+
]]>
|
|
32
|
+
</msxsl:script>
|
|
33
|
+
|
|
34
|
+
<xsl:variable name="sorts" select="//xsl:sort" />
|
|
35
|
+
|
|
36
|
+
<func:function name="my:count-elements">
|
|
37
|
+
<func:result select="count(//*)" />
|
|
38
|
+
</func:function>
|
|
39
|
+
|
|
40
|
+
<xsl:template match="/">
|
|
41
|
+
<style>
|
|
42
|
+
body{padding:0;margin:0;}
|
|
43
|
+
table {border-collapse:collapse; width:100%; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
|
|
44
|
+
caption{ text-align:left; }
|
|
45
|
+
th {background-image: linear-gradient(to bottom, #0F1FFF 0%, #AAAACC 100%); font-size:large;}
|
|
46
|
+
tr:nth-child(even) {background-image: linear-gradient(to bottom, rgba(9, 16, 11, 0.2) 0%, rgba(90, 164, 110, 0.1) 100%);}
|
|
47
|
+
tr:nth-child(odd) {background: rgba(255,255,255,0.2);}
|
|
48
|
+
td{font-size:small;border-bottom: none;border-top: none;}
|
|
49
|
+
th a{ color: #FFFF80; text-decoration:none; display:block;}
|
|
50
|
+
th a span{float:left;}
|
|
51
|
+
div>label, div>var{ margin-right:0.5em;}
|
|
52
|
+
|
|
53
|
+
fieldset{border-radius: 1em;border-bottom: none;border-left: none;}
|
|
54
|
+
|
|
55
|
+
/* collapse and select UI */
|
|
56
|
+
fieldset legend label{ cursor:pointer;}
|
|
57
|
+
input[type='checkbox']{ display:none;}
|
|
58
|
+
|
|
59
|
+
input[type='checkbox']:checked+fieldset{ border:2px solid red; }
|
|
60
|
+
input[type='checkbox']:checked+input+fieldset div,
|
|
61
|
+
input[type='checkbox']:checked+input+fieldset legend label.collapse i,
|
|
62
|
+
input[type='checkbox']:checked+fieldset .select i,
|
|
63
|
+
input[type='checkbox']+fieldset .collapse b,
|
|
64
|
+
input[type='checkbox']+fieldset .select b
|
|
65
|
+
{display:none; }
|
|
66
|
+
|
|
67
|
+
input[type='checkbox']:checked+input+fieldset .collapse b,
|
|
68
|
+
input[type='checkbox']+input:checked+fieldset .select b
|
|
69
|
+
{ display:inline;}
|
|
70
|
+
|
|
71
|
+
legend label{ text-shadow: -1px -1px 1px #fff, -1px 0px 1px #fff, 0px -1px 1px #fff, 1px 1px 1px #999, 0px 1px 1px #999, 1px 0px 1px #999, 1px 1px 5px #113;}
|
|
72
|
+
legend label b, legend label i{ margin-right: 0.5em; }
|
|
73
|
+
</style>
|
|
74
|
+
<xsl:variable name="sortedData">
|
|
75
|
+
<xsl:call-template name="StartSort">
|
|
76
|
+
<xsl:with-param name="data" select="*" />
|
|
77
|
+
</xsl:call-template>
|
|
78
|
+
</xsl:variable>
|
|
79
|
+
<div class="XmlViewRendered">
|
|
80
|
+
<xsl:apply-templates select="exslt:node-set($sortedData)" mode="DisplayAs"/>
|
|
81
|
+
</div>
|
|
82
|
+
</xsl:template>
|
|
83
|
+
<xsl:template match="/" priority="-20" name="BodyOnly">
|
|
84
|
+
<xsl:variable name="sortedData">
|
|
85
|
+
<xsl:call-template name="StartSort">
|
|
86
|
+
<xsl:with-param name="data" select="*" />
|
|
87
|
+
</xsl:call-template>
|
|
88
|
+
</xsl:variable>
|
|
89
|
+
<xsl:apply-templates select="exslt:node-set($sortedData)" mode="DisplayAs"/>
|
|
90
|
+
</xsl:template>
|
|
91
|
+
|
|
92
|
+
<xsl:template name="StartSort">
|
|
93
|
+
<xsl:param name="data"/>
|
|
94
|
+
<xsl:param name="sortNode"/>
|
|
95
|
+
<xsl:apply-templates mode="SortData" select="$data">
|
|
96
|
+
<xsl:with-param name="sortNode" select="$sortNode" />
|
|
97
|
+
</xsl:apply-templates>
|
|
98
|
+
</xsl:template>
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
<xsl:template mode="SortData" match="*[*]" name="SortDataDefault">
|
|
103
|
+
<xsl:copy>
|
|
104
|
+
<xsl:copy-of select="@*"/>
|
|
105
|
+
<xsl:apply-templates mode="SortData" select="*">
|
|
106
|
+
<xsl:sort data-type="text" order="ascending" select="@stub-will-be-replaced"/>
|
|
107
|
+
</xsl:apply-templates>
|
|
108
|
+
</xsl:copy>
|
|
109
|
+
</xsl:template>
|
|
110
|
+
|
|
111
|
+
<xsl:template mode="SortData" match="*[not(*)]">
|
|
112
|
+
<xsl:copy><xsl:copy-of select="@*"/><xsl:value-of select="."/></xsl:copy>
|
|
113
|
+
</xsl:template>
|
|
114
|
+
|
|
115
|
+
<!-- skip XmlView injected data from sorting results -->
|
|
116
|
+
<xsl:template mode="SortData" match="*[@priority='100']" priority="300"></xsl:template>
|
|
117
|
+
<xsl:template mode="DisplayAsTable" match="*[@priority='100']" priority="300"></xsl:template>
|
|
118
|
+
|
|
119
|
+
<xsl:template mode="DisplayAs" match="*" ><!-- distinct tags, match to 1st -->
|
|
120
|
+
<xsl:variable name="tagName" select="name()" />
|
|
121
|
+
<xsl:choose>
|
|
122
|
+
<xsl:when test="count( ../*[name()=$tagName]) != 1">
|
|
123
|
+
<xsl:apply-templates select="." mode="DisplayAsTable" />
|
|
124
|
+
</xsl:when>
|
|
125
|
+
<xsl:otherwise>
|
|
126
|
+
<xsl:apply-templates select="." mode="DisplayAsTree" />
|
|
127
|
+
</xsl:otherwise>
|
|
128
|
+
</xsl:choose>
|
|
129
|
+
</xsl:template>
|
|
130
|
+
<xsl:template mode="DisplayAs" match="@*" >
|
|
131
|
+
<b><xsl:value-of select="name()"/></b>=<var><xsl:value-of select="."/></var>
|
|
132
|
+
</xsl:template>
|
|
133
|
+
<xsl:template mode="DisplayAsTree" match="*[not(*)]" priority="20">
|
|
134
|
+
<div><label><xsl:value-of select="name()"/></label>
|
|
135
|
+
<xsl:apply-templates select="@*" mode="DisplayAs"/>
|
|
136
|
+
<var><xsl:value-of select="."/></var>
|
|
137
|
+
</div>
|
|
138
|
+
</xsl:template>
|
|
139
|
+
|
|
140
|
+
<xsl:template mode="DisplayAsTree" match="*" >
|
|
141
|
+
<xsl:variable name="xPath"><xsl:apply-templates mode="xpath" select="."/></xsl:variable>
|
|
142
|
+
<input type="checkbox" id="collapse{$xPath}" class="collapseControl"/>
|
|
143
|
+
<input type="checkbox" id="select{$xPath}"/>
|
|
144
|
+
<fieldset>
|
|
145
|
+
<legend><label for="collapse{$xPath}" class="collapse"><b>▶</b><i>▼</i></label> <label for="select{$xPath}" class="select"><b>✔</b><i>✓</i></label> <xsl:value-of select="name()"/></legend>
|
|
146
|
+
<div>
|
|
147
|
+
<xsl:apply-templates select="." mode="DisplayContent"/>
|
|
148
|
+
</div>
|
|
149
|
+
</fieldset>
|
|
150
|
+
</xsl:template>
|
|
151
|
+
<xsl:template mode="DisplayContent" match="*">
|
|
152
|
+
<xsl:for-each select="@*|*">
|
|
153
|
+
<xsl:variable name="tagName" select="name()"/>
|
|
154
|
+
|
|
155
|
+
<xsl:if test="not(preceding-sibling::*[name()=$tagName])">
|
|
156
|
+
<xsl:apply-templates select="." mode="DisplayAs"/>
|
|
157
|
+
</xsl:if>
|
|
158
|
+
</xsl:for-each>
|
|
159
|
+
<xsl:if test="normalize-space(text()) != '' ">
|
|
160
|
+
<p><xsl:value-of select="text()"/></p>
|
|
161
|
+
</xsl:if>
|
|
162
|
+
</xsl:template>
|
|
163
|
+
|
|
164
|
+
<xsl:template match="*" mode="DisplayAsTable" >
|
|
165
|
+
<xsl:param name="childName" select="name()"/>
|
|
166
|
+
<xsl:variable name="ZZheaders" select="@*|*" /> <!-- first child attributes and its children -->
|
|
167
|
+
<!-- TODO union of unique child names as not all rows have same children set. When sorting the missing attributes changing number of columns -->
|
|
168
|
+
<xsl:variable name="collection" select=".."/>
|
|
169
|
+
<xsl:variable name="collectionPath"><xsl:apply-templates mode="xpath" select=".."></xsl:apply-templates></xsl:variable>
|
|
170
|
+
|
|
171
|
+
<xsl:variable name="hAll">
|
|
172
|
+
<xsl:for-each select="*|@*">
|
|
173
|
+
<xsl:variable name="p" select="name()"/>
|
|
174
|
+
<xsl:choose>
|
|
175
|
+
<xsl:when test="count(.|../@*)=count(../@*)"><xsl:element name="{$p}"><xsl:attribute name="xv" ><xsl:value-of select="$p" /></xsl:attribute></xsl:element></xsl:when>
|
|
176
|
+
<xsl:when test="count( preceding-sibling::*[name()=$p]) != 0"></xsl:when>
|
|
177
|
+
<xsl:otherwise><xsl:copy/></xsl:otherwise>
|
|
178
|
+
</xsl:choose>
|
|
179
|
+
</xsl:for-each>
|
|
180
|
+
</xsl:variable>
|
|
181
|
+
<xsl:variable name="headers" select="exslt:node-set($hAll)/*" />
|
|
182
|
+
<table border="1">
|
|
183
|
+
<caption><!-- todo collapsible -->
|
|
184
|
+
<var>
|
|
185
|
+
<xsl:attribute name="title"><xsl:value-of select="$collectionPath"/>/<xsl:value-of select="$childName"/></xsl:attribute>
|
|
186
|
+
<xsl:value-of select="$childName"/>
|
|
187
|
+
</var>
|
|
188
|
+
</caption>
|
|
189
|
+
<thead>
|
|
190
|
+
<tr>
|
|
191
|
+
<xsl:for-each select="$headers">
|
|
192
|
+
<xsl:variable name="p" ><xsl:if test="name(.)=@xv">@</xsl:if><xsl:value-of select="local-name()"/></xsl:variable>
|
|
193
|
+
<xsl:variable name="fullPath" ><xsl:value-of select="$collectionPath"/>/<xsl:value-of select="$p"/></xsl:variable>
|
|
194
|
+
<xsl:variable name ="direction" >
|
|
195
|
+
<xsl:for-each select="$sorts">
|
|
196
|
+
<xsl:if test="@select=$p">
|
|
197
|
+
<xsl:choose>
|
|
198
|
+
<xsl:when test="@order='ascending'">▲</xsl:when>
|
|
199
|
+
<xsl:when test="@order='descending'">▼</xsl:when>
|
|
200
|
+
<xsl:otherwise>◊</xsl:otherwise>
|
|
201
|
+
</xsl:choose>
|
|
202
|
+
</xsl:if>
|
|
203
|
+
</xsl:for-each>
|
|
204
|
+
</xsl:variable>
|
|
205
|
+
<xsl:variable name ="order" >
|
|
206
|
+
<xsl:for-each select="$sorts">
|
|
207
|
+
<xsl:if test="@select=$p">
|
|
208
|
+
<xsl:value-of select="count(preceding-sibling::xsl:sort) "/>
|
|
209
|
+
</xsl:if>
|
|
210
|
+
</xsl:for-each>
|
|
211
|
+
</xsl:variable>
|
|
212
|
+
|
|
213
|
+
<th><a href="#"
|
|
214
|
+
title="{$p}"
|
|
215
|
+
xv:sortpath="{$p}"
|
|
216
|
+
><span><xsl:value-of select="$direction"/> <sub><xsl:value-of select="$order"/> </sub></span>
|
|
217
|
+
|
|
218
|
+
<xsl:value-of select="local-name()"/>
|
|
219
|
+
</a>
|
|
220
|
+
</th>
|
|
221
|
+
</xsl:for-each>
|
|
222
|
+
</tr>
|
|
223
|
+
</thead>
|
|
224
|
+
<tbody>
|
|
225
|
+
<xsl:for-each select="../*[name()=$childName]">
|
|
226
|
+
<xsl:variable name="rowNode" select="." />
|
|
227
|
+
<tr>
|
|
228
|
+
<xsl:for-each select="$headers">
|
|
229
|
+
<xsl:variable name="key" select="name()" />
|
|
230
|
+
<td>
|
|
231
|
+
<!-- xsl:attribute name="title"><xsl:apply-templates mode="xpath" select="."></xsl:apply-templates></xsl:attribute -->
|
|
232
|
+
|
|
233
|
+
<xsl:choose>
|
|
234
|
+
<xsl:when test="count( $rowNode/*[name()=$key]) > 1">
|
|
235
|
+
<xsl:apply-templates select="$rowNode/*[name()=$key][1]" mode="DisplayAsTable" />
|
|
236
|
+
</xsl:when>
|
|
237
|
+
<xsl:otherwise>
|
|
238
|
+
<xsl:apply-templates mode="DisplayContent" select="$rowNode/*[name()=$key]|$rowNode/@*[name()=$key]" />
|
|
239
|
+
</xsl:otherwise>
|
|
240
|
+
</xsl:choose>
|
|
241
|
+
|
|
242
|
+
</td>
|
|
243
|
+
</xsl:for-each>
|
|
244
|
+
</tr>
|
|
245
|
+
</xsl:for-each>
|
|
246
|
+
</tbody>
|
|
247
|
+
</table>
|
|
248
|
+
</xsl:template>
|
|
249
|
+
|
|
250
|
+
<!-- XmlAspect/XOR/XPath/Dom2XPath.xsl -->
|
|
251
|
+
<!-- Root -->
|
|
252
|
+
<xsl:template match="/" mode="xpath">
|
|
253
|
+
<xsl:text>/</xsl:text>
|
|
254
|
+
</xsl:template>
|
|
255
|
+
|
|
256
|
+
<!-- Element -->
|
|
257
|
+
<xsl:template match="*" mode="xpath">
|
|
258
|
+
<!-- Process ancestors first -->
|
|
259
|
+
<xsl:apply-templates select=".." mode="xpath"/>
|
|
260
|
+
|
|
261
|
+
<!-- Output / if not already output by the root node -->
|
|
262
|
+
<xsl:if test="../..">/</xsl:if>
|
|
263
|
+
|
|
264
|
+
<!-- Output the name of the element -->
|
|
265
|
+
<xsl:value-of select="name()"/>
|
|
266
|
+
|
|
267
|
+
<!-- Add the element's position to pinpoint the element exactly -->
|
|
268
|
+
<xsl:if test="count(../*[name() = name(current())]) > 1">
|
|
269
|
+
<xsl:text>[</xsl:text>
|
|
270
|
+
<xsl:value-of
|
|
271
|
+
select="count(preceding-sibling::*[name() = name(current())]) +1"/>
|
|
272
|
+
<xsl:text>]</xsl:text>
|
|
273
|
+
</xsl:if>
|
|
274
|
+
|
|
275
|
+
<!-- Add 'name' predicate as a hint of which element -->
|
|
276
|
+
<xsl:if test="@name">
|
|
277
|
+
<xsl:text/>[@name="<xsl:value-of select="@name"/>"]<xsl:text/>
|
|
278
|
+
</xsl:if>
|
|
279
|
+
</xsl:template>
|
|
280
|
+
|
|
281
|
+
<!-- Attribute -->
|
|
282
|
+
<xsl:template match="@*" mode="xpath">
|
|
283
|
+
<!-- Process ancestors first -->
|
|
284
|
+
<xsl:apply-templates select=".." mode="xpath"/>
|
|
285
|
+
|
|
286
|
+
<!-- Output the name of the attribute -->
|
|
287
|
+
<xsl:text/>/@<xsl:value-of select="name()"/>
|
|
288
|
+
|
|
289
|
+
<!-- Output the attribute's value as a predicate -->
|
|
290
|
+
<xsl:text/>[.="<xsl:value-of select="."/>"]<xsl:text/>
|
|
291
|
+
</xsl:template>
|
|
292
|
+
|
|
293
|
+
</xsl:stylesheet>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
|
|
3
|
+
<xsl:output method="html"/>
|
|
4
|
+
|
|
5
|
+
<xsl:template match="/">
|
|
6
|
+
<xsl:apply-templates select="//attributes"/>
|
|
7
|
+
</xsl:template>
|
|
8
|
+
<xsl:template match="attributes">
|
|
9
|
+
<h3 xmlns="http://www.w3.org/1999/xhtml">
|
|
10
|
+
<xsl:value-of select="title"></xsl:value-of>
|
|
11
|
+
</h3> <!-- title is an attribute in instance
|
|
12
|
+
mapped into /*/attributes/title -->
|
|
13
|
+
<xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//smile"> <!-- data-smile DCE instance attribute,
|
|
14
|
+
mapped into /*/dataset/smile
|
|
15
|
+
used in condition -->
|
|
16
|
+
<!-- data-smile DCE instance attribute, used as HTML -->
|
|
17
|
+
<div>Smile as:
|
|
18
|
+
<xsl:value-of select="//smile"></xsl:value-of>
|
|
19
|
+
</div>
|
|
20
|
+
</xsl:if>
|
|
21
|
+
<!-- image would not be visible in sandbox, see live demo -->
|
|
22
|
+
<img xmlns="http://www.w3.org/1999/xhtml"
|
|
23
|
+
src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
|
|
24
|
+
alt="{title} image"/>
|
|
25
|
+
<!-- image-src and title are DCE instance attributes,
|
|
26
|
+
mapped into /*/attributes/
|
|
27
|
+
used within output attribute via curly brackets -->
|
|
28
|
+
|
|
29
|
+
<!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
|
|
30
|
+
<p xmlns="http://www.w3.org/1999/xhtml">
|
|
31
|
+
<xsl:value-of select="//*[@slot="description"]"/>
|
|
32
|
+
</p>
|
|
33
|
+
<xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//*[@pokemon-id]">
|
|
34
|
+
<!-- loop over payload elements with `pokemon-id` attribute -->
|
|
35
|
+
<button>
|
|
36
|
+
<img height="32"
|
|
37
|
+
src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
|
|
38
|
+
alt="{text()}"/>
|
|
39
|
+
<br/>
|
|
40
|
+
<xsl:value-of select="text()">
|
|
41
|
+
</xsl:value-of>
|
|
42
|
+
</button>
|
|
43
|
+
|
|
44
|
+
</xsl:for-each>
|
|
45
|
+
</xsl:template>
|
|
46
|
+
</xsl:stylesheet>
|
package/demo/tree.xml
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<?xml-stylesheet type="text/xsl" href="tree.xsl"?>
|
|
3
|
+
<div xmlns="http://www.w3.org/1999/xhtml">
|
|
4
|
+
<payload>
|
|
5
|
+
<span slot=""></span>
|
|
6
|
+
<p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
|
|
7
|
+
the seed grows in size as the Pokémon does.
|
|
8
|
+
</p>
|
|
9
|
+
<span slot=""></span>
|
|
10
|
+
<ul slot="">
|
|
11
|
+
<li pokemon-id="2">ivysaur</li>
|
|
12
|
+
<li pokemon-id="3">venusaur</li>
|
|
13
|
+
</ul>
|
|
14
|
+
<span slot=""></span>
|
|
15
|
+
</payload>
|
|
16
|
+
<attributes>
|
|
17
|
+
<title>bulbasaur</title>
|
|
18
|
+
<data-smile>👼</data-smile>
|
|
19
|
+
<pokemon-id>1</pokemon-id>
|
|
20
|
+
</attributes>
|
|
21
|
+
<dataset>
|
|
22
|
+
<smile>👼</smile>
|
|
23
|
+
</dataset>
|
|
24
|
+
<slice></slice>
|
|
25
|
+
</div>
|
package/demo/tree.xsl
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<xsl:stylesheet version="1.0"
|
|
2
|
+
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
|
3
|
+
<xsl:output
|
|
4
|
+
method="html"
|
|
5
|
+
omit-xml-declaration="yes"
|
|
6
|
+
standalone="yes"
|
|
7
|
+
indent="yes"
|
|
8
|
+
/>
|
|
9
|
+
|
|
10
|
+
<xsl:template match="/">
|
|
11
|
+
<xsl:apply-templates select="*"/>
|
|
12
|
+
</xsl:template>
|
|
13
|
+
<xsl:template match="*">
|
|
14
|
+
<details style="padding:0 1rem" open="open">
|
|
15
|
+
<summary>
|
|
16
|
+
<b style="color:green"><xsl:value-of select="name()"/></b>
|
|
17
|
+
<xsl:apply-templates select="@*"/>
|
|
18
|
+
</summary>
|
|
19
|
+
<xsl:value-of select="./text()"/>
|
|
20
|
+
<xsl:apply-templates select="*"/>
|
|
21
|
+
</details>
|
|
22
|
+
</xsl:template>
|
|
23
|
+
<xsl:template match="@*">
|
|
24
|
+
<code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
|
|
25
|
+
</xsl:template>
|
|
26
|
+
<xsl:template match="text()">
|
|
27
|
+
<p>
|
|
28
|
+
<xsl:value-of select="."/>
|
|
29
|
+
</p>
|
|
30
|
+
</xsl:template>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
</xsl:stylesheet>
|