@epa-wg/custom-element 0.0.11 → 0.0.13
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/inspectionProfiles/Project_Default.xml +22 -7
- package/.idea/misc.xml +4 -5
- package/.vs/VSWorkspaceState.json +8 -0
- package/.vs/custom-element/FileContentIndex/1487e471-3751-47bc-a499-d78eda924eda.vsidx +0 -0
- package/.vs/custom-element/v17/.wsuo +0 -0
- package/.vs/slnx.sqlite +0 -0
- package/README.md +71 -19
- package/custom-element.js +241 -66
- package/demo/a.html +25 -11
- package/demo/confused.svg +36 -36
- package/demo/dom-merge.html +124 -0
- package/demo/embed-1.html +2 -2
- package/demo/external-template.html +9 -7
- package/demo/hex-grid-dce.html +183 -0
- package/demo/hex-grid-transform.png +0 -0
- package/demo/hex-grid.html +66 -0
- package/demo/html-template.html +125 -12
- package/demo/html-template.xhtml +44 -44
- package/demo/html-template.xml +44 -44
- package/demo/http-request.html +44 -57
- package/demo/local-storage.html +23 -18
- package/demo/location-element.html +59 -58
- package/demo/s.xml +1 -0
- package/demo/s.xslt +159 -0
- package/demo/scoped-css.html +170 -0
- package/demo/ss.html +32 -0
- package/demo/table.xml +24 -24
- package/demo/table.xsl +292 -292
- package/demo/template.xsl +45 -45
- package/demo/tree.xml +24 -24
- package/demo/tree.xsl +32 -32
- package/demo/xhtml-template.xhtml +44 -44
- package/demo/z.html +42 -0
- package/demo/z.xml +60 -0
- package/http-request.js +28 -37
- package/index.html +23 -19
- package/input-text.js +17 -0
- package/local-storage.js +28 -35
- package/location-element.js +15 -16
- package/package.json +1 -1
- package/0/a.html +0 -19
- package/0/a.xml +0 -10
- package/0/a.xsl +0 -66
- package/0/a1.xsl +0 -38
- package/0/ab.xsl +0 -23
- package/0/az.xml +0 -30
- package/0/b.html +0 -90
package/demo/a.html
CHANGED
|
@@ -1,24 +1,38 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
|
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">
|
|
3
4
|
<head>
|
|
4
5
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
5
6
|
<title>custom-element Declarative Custom Element implementation demo</title>
|
|
6
|
-
<link rel="icon" href="
|
|
7
|
+
<link rel="icon" href="./wc-square.svg" />
|
|
8
|
+
<script type="module" src="../location-element.js"></script>
|
|
7
9
|
<script type="module" src="../custom-element.js"></script>
|
|
10
|
+
|
|
8
11
|
<style>
|
|
9
|
-
@import "demo
|
|
10
|
-
|
|
12
|
+
@import "./demo.css";
|
|
13
|
+
|
|
14
|
+
button{ background: forestgreen; }
|
|
15
|
+
table{ min-width: 16rem; }
|
|
16
|
+
td{ border-bottom: 1px solid silver; }
|
|
17
|
+
tfoot td{ border-bottom: none; }
|
|
18
|
+
td,th{text-align: right; }
|
|
19
|
+
caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
|
|
11
20
|
</style>
|
|
12
21
|
</head>
|
|
13
22
|
<body>
|
|
14
23
|
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
24
|
+
<custom-element >
|
|
25
|
+
<local-storage key="basket" slice="basket"></local-storage>
|
|
26
|
+
<html:table>
|
|
27
|
+
<xsl:for-each select="//slice/basket/@*">
|
|
28
|
+
<html:tr>
|
|
29
|
+
<html:th> {name()} </html:th>
|
|
30
|
+
<html:td> {.} </html:td>
|
|
31
|
+
</html:tr>
|
|
32
|
+
</xsl:for-each>
|
|
33
|
+
</html:table>
|
|
34
|
+
count:<xsl:value-of select="count(//slice/basket/@*)"/>
|
|
35
|
+
</custom-element>
|
|
22
36
|
|
|
23
37
|
</body>
|
|
24
38
|
</html>
|
package/demo/confused.svg
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
|
|
3
|
-
<defs>
|
|
4
|
-
<linearGradient id="d">
|
|
5
|
-
<stop offset="0"/>
|
|
6
|
-
<stop offset=".5"/>
|
|
7
|
-
<stop offset=".80000001" stop-opacity=".46666667"/>
|
|
8
|
-
<stop offset="1" stop-opacity="0"/>
|
|
9
|
-
</linearGradient>
|
|
10
|
-
<linearGradient id="a">
|
|
11
|
-
<stop offset="0" stop-color="#fb0"/>
|
|
12
|
-
<stop offset=".5" stop-color="#e29d00"/>
|
|
13
|
-
<stop offset="1" stop-color="#fb0"/>
|
|
14
|
-
</linearGradient>
|
|
15
|
-
<linearGradient id="c">
|
|
16
|
-
<stop offset="0"/>
|
|
17
|
-
<stop offset="1" stop-opacity="0"/>
|
|
18
|
-
</linearGradient>
|
|
19
|
-
<linearGradient id="b">
|
|
20
|
-
<stop offset="0" stop-color="#ffc"/>
|
|
21
|
-
<stop offset=".5" stop-color="#fff965"/>
|
|
22
|
-
<stop offset="1" stop-color="#fc3"/>
|
|
23
|
-
</linearGradient>
|
|
24
|
-
<linearGradient xlink:href="#a" id="i" x1="8.0350637" x2="42.788235" y1="32.372219" y2="32.372219" gradientUnits="userSpaceOnUse" spreadMethod="pad"/>
|
|
25
|
-
<radialGradient xlink:href="#b" id="f" cx="17.986637" cy="16.545853" r="23.978155" fx="17.986637" fy="16.545853" gradientUnits="userSpaceOnUse"/>
|
|
26
|
-
<radialGradient xlink:href="#c" id="e" cx="53.309223" cy="94.956306" r="63.252911" fx="53.309223" fy="94.956306" gradientTransform="matrix(1 0 0 .34935 0 61.7838)" gradientUnits="userSpaceOnUse"/>
|
|
27
|
-
<radialGradient xlink:href="#d" id="g" cx="18.71347" cy="21.759708" r="1.8644418" fx="18.71347" fy="21.759708" gradientTransform="matrix(1 0 0 1.77778 0 -16.92422)" gradientUnits="userSpaceOnUse"/>
|
|
28
|
-
</defs>
|
|
29
|
-
<path fill="url(#e)" d="M116.56213 94.956306a63.252911 22.097088 0 1 1-126.5058174 0 63.252911 22.097088 0 1 1 126.5058174 0z" opacity=".53200001" transform="matrix(.3162 0 0 .33941 6.936944 8.132618)"/>
|
|
30
|
-
<path fill="url(#f)" stroke="#fb0" stroke-width="1.43869453" d="M47.094418 23.83131a23.478155 23.478155 0 1 1-46.9563107 0 23.478155 23.478155 0 1 1 46.9563107 0z" transform="translate(4.30185 4.122792) scale(.83409)"/>
|
|
31
|
-
<path id="h" fill="#fff" fill-opacity="1" fill-rule="nonzero" stroke="#fc0" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M21.682767 18.5142a3.9360437 6.9743929 0 1 1-7.872088 0 3.9360437 6.9743929 0 1 1 7.872088 0z" opacity="1" transform="matrix(1.01507 0 0 1.00354 -.0090285 .916405)"/>
|
|
32
|
-
<path id="j" fill="url(#g)" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M20.577912 21.759708a1.8644418 3.314563 0 1 1-3.728883 0 1.8644418 3.314563 0 1 1 3.728883 0z" opacity="1" transform="translate(-.138107 .535104)"/>
|
|
33
|
-
<use xlink:href="#h" width="48" height="48" transform="translate(12.50001 -4.4e-7)"/>
|
|
34
|
-
<path fill="none" stroke="url(#i)" stroke-linecap="round" stroke-width="1.97319973" d="M9.0216636 35.899178c4.7689724-7.457767 10.9544424-9.489956 17.3095664-3.728884 5.404329 4.899155 11.190398 4.350365 15.470406-.656007"/>
|
|
35
|
-
<path fill="none" stroke="#e2ac00" stroke-linecap="round" stroke-width="1.17813516" d="M15.504748 34.21319c3.012147-3.243177 6.693658.87012 6.693658.87012" opacity=".8"/>
|
|
36
|
-
<use xlink:href="#j" width="48" height="48" transform="translate(10.78418 -5)"/>
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
|
|
3
|
+
<defs>
|
|
4
|
+
<linearGradient id="d">
|
|
5
|
+
<stop offset="0"/>
|
|
6
|
+
<stop offset=".5"/>
|
|
7
|
+
<stop offset=".80000001" stop-opacity=".46666667"/>
|
|
8
|
+
<stop offset="1" stop-opacity="0"/>
|
|
9
|
+
</linearGradient>
|
|
10
|
+
<linearGradient id="a">
|
|
11
|
+
<stop offset="0" stop-color="#fb0"/>
|
|
12
|
+
<stop offset=".5" stop-color="#e29d00"/>
|
|
13
|
+
<stop offset="1" stop-color="#fb0"/>
|
|
14
|
+
</linearGradient>
|
|
15
|
+
<linearGradient id="c">
|
|
16
|
+
<stop offset="0"/>
|
|
17
|
+
<stop offset="1" stop-opacity="0"/>
|
|
18
|
+
</linearGradient>
|
|
19
|
+
<linearGradient id="b">
|
|
20
|
+
<stop offset="0" stop-color="#ffc"/>
|
|
21
|
+
<stop offset=".5" stop-color="#fff965"/>
|
|
22
|
+
<stop offset="1" stop-color="#fc3"/>
|
|
23
|
+
</linearGradient>
|
|
24
|
+
<linearGradient xlink:href="#a" id="i" x1="8.0350637" x2="42.788235" y1="32.372219" y2="32.372219" gradientUnits="userSpaceOnUse" spreadMethod="pad"/>
|
|
25
|
+
<radialGradient xlink:href="#b" id="f" cx="17.986637" cy="16.545853" r="23.978155" fx="17.986637" fy="16.545853" gradientUnits="userSpaceOnUse"/>
|
|
26
|
+
<radialGradient xlink:href="#c" id="e" cx="53.309223" cy="94.956306" r="63.252911" fx="53.309223" fy="94.956306" gradientTransform="matrix(1 0 0 .34935 0 61.7838)" gradientUnits="userSpaceOnUse"/>
|
|
27
|
+
<radialGradient xlink:href="#d" id="g" cx="18.71347" cy="21.759708" r="1.8644418" fx="18.71347" fy="21.759708" gradientTransform="matrix(1 0 0 1.77778 0 -16.92422)" gradientUnits="userSpaceOnUse"/>
|
|
28
|
+
</defs>
|
|
29
|
+
<path fill="url(#e)" d="M116.56213 94.956306a63.252911 22.097088 0 1 1-126.5058174 0 63.252911 22.097088 0 1 1 126.5058174 0z" opacity=".53200001" transform="matrix(.3162 0 0 .33941 6.936944 8.132618)"/>
|
|
30
|
+
<path fill="url(#f)" stroke="#fb0" stroke-width="1.43869453" d="M47.094418 23.83131a23.478155 23.478155 0 1 1-46.9563107 0 23.478155 23.478155 0 1 1 46.9563107 0z" transform="translate(4.30185 4.122792) scale(.83409)"/>
|
|
31
|
+
<path id="h" fill="#fff" fill-opacity="1" fill-rule="nonzero" stroke="#fc0" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M21.682767 18.5142a3.9360437 6.9743929 0 1 1-7.872088 0 3.9360437 6.9743929 0 1 1 7.872088 0z" opacity="1" transform="matrix(1.01507 0 0 1.00354 -.0090285 .916405)"/>
|
|
32
|
+
<path id="j" fill="url(#g)" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M20.577912 21.759708a1.8644418 3.314563 0 1 1-3.728883 0 1.8644418 3.314563 0 1 1 3.728883 0z" opacity="1" transform="translate(-.138107 .535104)"/>
|
|
33
|
+
<use xlink:href="#h" width="48" height="48" transform="translate(12.50001 -4.4e-7)"/>
|
|
34
|
+
<path fill="none" stroke="url(#i)" stroke-linecap="round" stroke-width="1.97319973" d="M9.0216636 35.899178c4.7689724-7.457767 10.9544424-9.489956 17.3095664-3.728884 5.404329 4.899155 11.190398 4.350365 15.470406-.656007"/>
|
|
35
|
+
<path fill="none" stroke="#e2ac00" stroke-linecap="round" stroke-width="1.17813516" d="M15.504748 34.21319c3.012147-3.243177 6.693658.87012 6.693658.87012" opacity=".8"/>
|
|
36
|
+
<use xlink:href="#j" width="48" height="48" transform="translate(10.78418 -5)"/>
|
|
37
37
|
</svg>
|
|
@@ -0,0 +1,124 @@
|
|
|
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
|
+
|
|
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
|
+
|
|
14
|
+
button {
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
align-items: center;
|
|
18
|
+
flex: auto;
|
|
19
|
+
box-shadow: inset silver 0 0 1rem;
|
|
20
|
+
min-width: 12rem;
|
|
21
|
+
padding: 1rem;
|
|
22
|
+
color: coral;
|
|
23
|
+
text-shadow: 1px 1px silver;
|
|
24
|
+
font-weight: bolder;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
button img {
|
|
28
|
+
max-height: 10vw;
|
|
29
|
+
min-height: 4rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
table {
|
|
33
|
+
min-width: 16rem;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
td {
|
|
37
|
+
border-bottom: 1px solid silver;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
tfoot td {
|
|
41
|
+
border-bottom: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
td, th {
|
|
45
|
+
text-align: right;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
caption {
|
|
49
|
+
padding: 1rem;
|
|
50
|
+
font-weight: bolder;
|
|
51
|
+
font-family: sans-serif;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
code {
|
|
55
|
+
text-align: right;
|
|
56
|
+
min-width: 3rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
svg {
|
|
60
|
+
max-height: 3rem;
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
|
|
66
|
+
<nav>
|
|
67
|
+
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
68
|
+
<h3>DOM merge. DCE dynamic update with focus preservation.</h3>
|
|
69
|
+
</nav>
|
|
70
|
+
|
|
71
|
+
<html-demo-element legend="1. Word count in textarea"
|
|
72
|
+
description="Counter update happens on change event(focus change).
|
|
73
|
+
The update should not interfere with the input">
|
|
74
|
+
<template>
|
|
75
|
+
<custom-element>
|
|
76
|
+
<form>
|
|
77
|
+
<label>
|
|
78
|
+
<textarea slice="text-container" >Hello world!</textarea>
|
|
79
|
+
<span> Word count:
|
|
80
|
+
{string-length(//slice/text-container/text())}
|
|
81
|
+
</span>
|
|
82
|
+
</label>
|
|
83
|
+
</form>
|
|
84
|
+
</custom-element>
|
|
85
|
+
</template>
|
|
86
|
+
</html-demo-element>
|
|
87
|
+
<hr/>
|
|
88
|
+
|
|
89
|
+
<html-demo-element legend="2. Word count in HTML input field"
|
|
90
|
+
description="Counter update happens on keyup event.
|
|
91
|
+
The update should not interfere with the input">
|
|
92
|
+
<template>
|
|
93
|
+
<custom-element>
|
|
94
|
+
<form>
|
|
95
|
+
<label>
|
|
96
|
+
<input type="text"
|
|
97
|
+
value="Type time update"
|
|
98
|
+
slice="txt"
|
|
99
|
+
slice-update="keyup"/>
|
|
100
|
+
|
|
101
|
+
<span> Character count:
|
|
102
|
+
<b> {string-length(//slice/txt)} </b>
|
|
103
|
+
</span>
|
|
104
|
+
<span> Word count:
|
|
105
|
+
<b> {string-length(normalize-space(//slice/txt)) -
|
|
106
|
+
string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1} </b>
|
|
107
|
+
<!-- The expression first normalizes the string by removing leading and trailing whitespace and
|
|
108
|
+
collapsing internal whitespace into a single space. It then subtracts the length of the string
|
|
109
|
+
with all spaces removed from the length of the original string,
|
|
110
|
+
and adds 1 to account for the last word.
|
|
111
|
+
-->
|
|
112
|
+
</span>
|
|
113
|
+
|
|
114
|
+
</label>
|
|
115
|
+
<p><b>txt</b> slice:</p> <blockquote> {//slice/txt} </blockquote>
|
|
116
|
+
</form>
|
|
117
|
+
</custom-element>
|
|
118
|
+
</template>
|
|
119
|
+
</html-demo-element>
|
|
120
|
+
|
|
121
|
+
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
|
122
|
+
|
|
123
|
+
</body>
|
|
124
|
+
</html>
|
package/demo/embed-1.html
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<h4>embed-1.html</h4>
|
|
2
|
-
<custom-element tag="dce-embed-1" hidden>🖖</custom-element>
|
|
1
|
+
<h4>embed-1.html</h4>
|
|
2
|
+
<custom-element tag="dce-embed-1" hidden>🖖</custom-element>
|
|
3
3
|
<dce-embed-1>?</dce-embed-1>
|
|
@@ -75,7 +75,9 @@
|
|
|
75
75
|
</template>
|
|
76
76
|
</html-demo-element>
|
|
77
77
|
|
|
78
|
-
<html-demo-element legend="4. external XSLT file"
|
|
78
|
+
<html-demo-element legend="4. external XSLT file"
|
|
79
|
+
description="This external templates generated the tree for DCE data set"
|
|
80
|
+
>
|
|
79
81
|
<template>
|
|
80
82
|
<custom-element tag="dce-external-4" src="tree.xsl" >
|
|
81
83
|
<template><i>loading from XSLT ...</i></template>
|
|
@@ -87,7 +89,7 @@
|
|
|
87
89
|
</template>
|
|
88
90
|
</html-demo-element>
|
|
89
91
|
|
|
90
|
-
<html-demo-element legend="5. external HTML template" description="Should render 👋👌, svg">
|
|
92
|
+
<html-demo-element legend="5. external HTML template" description="Should render 👋👌, svg, formula">
|
|
91
93
|
<template>
|
|
92
94
|
<custom-element tag="dce-external-5" src="html-template.html" >
|
|
93
95
|
<template><i>loading from HTML file ...</i></template>
|
|
@@ -99,17 +101,17 @@
|
|
|
99
101
|
</template>
|
|
100
102
|
</html-demo-element>
|
|
101
103
|
|
|
102
|
-
<html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg,
|
|
104
|
+
<html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, formula">
|
|
103
105
|
<a href="html-template.html">html-template.html</a>
|
|
104
106
|
<template>
|
|
105
107
|
<custom-element src="html-template.html#wave" >
|
|
106
|
-
<template><i>loading from
|
|
108
|
+
<template><i>loading HTML from templates file ...</i></template>
|
|
107
109
|
</custom-element>
|
|
108
110
|
<custom-element src="html-template.html#dwc-logo" >
|
|
109
|
-
<template><i>loading from
|
|
111
|
+
<template><i>loading SVG from templates file ...</i></template>
|
|
110
112
|
</custom-element>
|
|
111
|
-
<custom-element src="html-template.html#
|
|
112
|
-
<template><i>loading from HTML
|
|
113
|
+
<custom-element src="html-template.html#sophomores-dream" >
|
|
114
|
+
<template><i>loading MathML from HTML file ...</i></template>
|
|
113
115
|
</custom-element>
|
|
114
116
|
</template>
|
|
115
117
|
</html-demo-element>
|
|
@@ -0,0 +1,183 @@
|
|
|
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
|
+
<script type="module" src="../custom-element.js"></script>
|
|
6
|
+
|
|
7
|
+
<style>
|
|
8
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
|
|
9
|
+
button{ font-family: 'Roboto', sans-serif; color: darkcyan;}
|
|
10
|
+
body{ background-color: #DDE2F1;}
|
|
11
|
+
</style>
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
|
|
15
|
+
<custom-element tag="hex-grid">
|
|
16
|
+
<template id="hex-grid-template">
|
|
17
|
+
<style>
|
|
18
|
+
section{ filter: drop-shadow(0px 2px 3px rgba(50, 50, 0, 0.5)) }
|
|
19
|
+
:root {
|
|
20
|
+
--hex-grid-size: 8rem;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
nav {
|
|
24
|
+
--hex-grid-size: 8rem;
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-wrap: wrap;
|
|
27
|
+
flex-direction: row;
|
|
28
|
+
justify-content: left;
|
|
29
|
+
margin-right: calc(var(--hex-grid-size)/2);
|
|
30
|
+
padding-bottom: calc(var(--hex-grid-size,8rem));
|
|
31
|
+
gap: 0.1rem;
|
|
32
|
+
section{
|
|
33
|
+
width: var(--hex-grid-size);
|
|
34
|
+
height: calc(1.53 *var(--hex-grid-size))
|
|
35
|
+
}
|
|
36
|
+
button {
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: column; align-items: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
border: none;
|
|
41
|
+
width: var(--hex-grid-size,8rem);
|
|
42
|
+
min-width: var(--hex-grid-size,8rem);
|
|
43
|
+
height: var(--hex-grid-size,8rem);
|
|
44
|
+
padding: calc( var(--hex-grid-size,8rem)/8);
|
|
45
|
+
clip-path: polygon(50% 0, 100% 25%,100% 75%, 50% 100%, 0 75%, 0 25%);
|
|
46
|
+
&:hover,&:focus,&.focus{
|
|
47
|
+
transform: scale3d(0.9,0.9,0.9) ;
|
|
48
|
+
background-color: mediumaquamarine;
|
|
49
|
+
color: white;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
img{ height: calc( var(--hex-grid-size,8rem)/2);}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
section:nth-child(even){
|
|
57
|
+
width:0;
|
|
58
|
+
}
|
|
59
|
+
section:nth-child(even){
|
|
60
|
+
position: relative;
|
|
61
|
+
top: 50%;
|
|
62
|
+
button{
|
|
63
|
+
position: absolute;
|
|
64
|
+
|
|
65
|
+
top: calc(0.77*var(--hex-grid-size));
|
|
66
|
+
right: calc( -1* var(--hex-grid-size,8rem)/2);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
</style>
|
|
71
|
+
<nav>
|
|
72
|
+
<xsl:for-each select="/datadom/payload/xhtml:*">
|
|
73
|
+
<xsl:if test="local-name(.) = 'style'">
|
|
74
|
+
<xsl:copy-of select="." />
|
|
75
|
+
</xsl:if>
|
|
76
|
+
<!-- sanitize blank spans -->
|
|
77
|
+
<xsl:if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
|
|
78
|
+
<section>
|
|
79
|
+
<button class="action">
|
|
80
|
+
{@alt}
|
|
81
|
+
<xsl:copy-of select="."/>
|
|
82
|
+
</button>
|
|
83
|
+
</section>
|
|
84
|
+
</xsl:if>
|
|
85
|
+
</xsl:for-each>
|
|
86
|
+
</nav>
|
|
87
|
+
</template>
|
|
88
|
+
</custom-element>
|
|
89
|
+
|
|
90
|
+
<!--<hex-grid>-->
|
|
91
|
+
<!-- <img src="wc-square.svg" alt="web component"/>-->
|
|
92
|
+
<!-- <img src="wc-square.svg" alt="123"/>-->
|
|
93
|
+
<!-- <span>Hey!</span>-->
|
|
94
|
+
<!--</hex-grid>-->
|
|
95
|
+
<hex-grid class="grid2x">
|
|
96
|
+
<img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
|
|
97
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
|
|
98
|
+
<img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
|
|
99
|
+
<img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
|
|
100
|
+
<img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
|
|
101
|
+
<img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
|
|
102
|
+
<img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
|
|
103
|
+
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
|
|
104
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
|
|
105
|
+
<img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
|
|
106
|
+
<img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
|
|
107
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
|
|
108
|
+
<img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
|
|
109
|
+
<img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
|
|
110
|
+
<img src="https://global.discourse-cdn.com/standard17/uploads/threejs/original/2X/b/be2f75f72751c11cbe1593c69a99a52900bf12cb.svg" alt="ThreeJS" href="https://threejs.org/"/>
|
|
111
|
+
<img src="https://www.blazejs.org/logo/icon.png" alt="BlazeJS"/>
|
|
112
|
+
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/tailwindcss.webp" alt="Tailwind CSS"/>
|
|
113
|
+
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/flowbite.webp" alt="Flowbite"/>
|
|
114
|
+
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
|
|
115
|
+
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
|
|
116
|
+
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor" href="https://www.meteor.com/"/>
|
|
117
|
+
<img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
|
|
118
|
+
<img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
|
|
119
|
+
<img src="https://mithril.js.org/logo.svg" alt="Mithril.js" href="https://mithril.js.org/"/>
|
|
120
|
+
<img src="https://seeklogo.com/images/M/materialize-logo-0FCAD8A6F8-seeklogo.com.png" alt="Materialize"/>
|
|
121
|
+
<img src="https://seeklogo.com/images/P/preact-logo-64E4BF9ABC-seeklogo.com.png" alt="Preact"/>
|
|
122
|
+
<img src="https://seeklogo.com/images/D/dojo-logo-E24E2CA700-seeklogo.com.png" alt="Dojo"/>
|
|
123
|
+
<img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js"/>
|
|
124
|
+
<img src="https://d3js.org/logo.svg" alt="D3.js"/>
|
|
125
|
+
<img src="https://lodash.com/assets/img/lodash.svg" alt="Lodash"/>
|
|
126
|
+
<img src="https://www.chartjs.org/img/chartjs-logo.svg" alt="Chart.JS" href="https://www.chartjs.org/"/>
|
|
127
|
+
<img src="https://glimmerjs.com/images/favicon.png" alt="Glimmer" href="https://glimmerjs.com/"/>
|
|
128
|
+
<img src="https://sarcadass.github.io/granim.js/favicon.ico" alt="Granim.js" href="https://sarcadass.github.io/granim.js/"/>
|
|
129
|
+
<img src="https://leafletjs.com/docs/images/favicon.ico" alt="leaflet.js" href="https://leafletjs.com/"/>
|
|
130
|
+
<img src="https://animejs.com/documentation/assets/img/favicon.png" alt="Anime.JS"/>
|
|
131
|
+
<img src="https://www.algolia.com/algoliaweb-static-favicons/light-mode/apple-touch-icon.png" alt="Algolia"/>
|
|
132
|
+
<img src="https://momentjs.com/static/img/moment-favicon.png" alt="Moment" href="https://momentjs.com"/>
|
|
133
|
+
<img src="https://omniscientjs.github.io/assets/favicon.ico" alt="Omniscient" href="https://omniscientjs.github.io"/>
|
|
134
|
+
<img src="https://aurelia.io/styles/images/aurelia-icon.svg" alt="Aurelia" href="https://aurelia.io"/>
|
|
135
|
+
<img src="https://emberjs.com/favicons/icon.svg" alt="EmberJS" href="https://emberjs.com"/>
|
|
136
|
+
<img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
|
|
137
|
+
<img src="https://webix.com/assets/favicons/favicon-96x96.png" alt="Webix" href="https://webix.com/"/>
|
|
138
|
+
<img src="https://images.ctfassets.net/vkdbses00qqt/3Id5VwofmvaFbjuSumaOmM/592c2d2e523187bd054a16b358d5a7ec/framework.svg" alt="Gatsby" href="https://www.gatsbyjs.com/"/>
|
|
139
|
+
</hex-grid>
|
|
140
|
+
|
|
141
|
+
<custom-element tag="hex-row">
|
|
142
|
+
<template>
|
|
143
|
+
<style>
|
|
144
|
+
hex-grid {
|
|
145
|
+
nav {
|
|
146
|
+
--hex-grid-size:6rem;
|
|
147
|
+
display: inline-flex;
|
|
148
|
+
padding-bottom: 0;
|
|
149
|
+
margin-right: 0;
|
|
150
|
+
section{ margin-right: 0.2rem; height: var(--hex-grid-size);}
|
|
151
|
+
button:has([selected]){ background-color: #2d4554; color: burlywood; }
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
</style>
|
|
155
|
+
<xsl:for-each select="/datadom/payload/xhtml:*">
|
|
156
|
+
<!-- sanitize blank spans -->
|
|
157
|
+
<xsl:if test="local-name(.) != 'span' or normalize-space(.) != ''">
|
|
158
|
+
<hex-grid>
|
|
159
|
+
<xsl:copy-of select="."/>
|
|
160
|
+
</hex-grid>
|
|
161
|
+
</xsl:if>
|
|
162
|
+
</xsl:for-each>
|
|
163
|
+
</template>
|
|
164
|
+
</custom-element>
|
|
165
|
+
<hex-row class="grid2x">
|
|
166
|
+
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
|
|
167
|
+
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
|
|
168
|
+
<img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor"/>
|
|
169
|
+
<img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery" selected/>
|
|
170
|
+
<img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
|
|
171
|
+
<img src="https://mithril.js.org/logo.svg" alt="Mithril.js"/>
|
|
172
|
+
<img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js" href="https://backbonejs.org/"/>
|
|
173
|
+
<img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
|
|
174
|
+
</hex-row>
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
<style>
|
|
179
|
+
.grid2x{--hex-grid-size:16rem; margin-top: 8rem; }
|
|
180
|
+
</style>
|
|
181
|
+
|
|
182
|
+
</body>
|
|
183
|
+
</html>
|
|
Binary file
|
|
@@ -0,0 +1,66 @@
|
|
|
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
|
+
<link rel="icon" href="./wc-square.svg"/>
|
|
6
|
+
<script type="module" src="../custom-element.js"></script>
|
|
7
|
+
<style>
|
|
8
|
+
html
|
|
9
|
+
{ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
|
|
10
|
+
font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased;
|
|
11
|
+
}
|
|
12
|
+
#grid1 nav {
|
|
13
|
+
transform: perspective(15cm) rotateX(5deg) rotateY(40deg) translateX(20rem) translateY(6rem);
|
|
14
|
+
}
|
|
15
|
+
#grid2 nav {
|
|
16
|
+
transform: perspective(15cm) rotateX(5deg) rotateY(50deg) translateX(20rem) translateY(10rem);
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
|
|
22
|
+
<nav>
|
|
23
|
+
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
24
|
+
<h3>Example of DCE HTML as a library.</h3>
|
|
25
|
+
</nav>
|
|
26
|
+
<p>The template and its own responsive layout behavior demo resides in
|
|
27
|
+
<a href="hex-grid-dce.html">hex-grid-dce.html</a> file.</p>
|
|
28
|
+
<custom-element src="hex-grid-dce.html#hex-grid-template" tag="hex-grid" >
|
|
29
|
+
<template><i>loading hex-grid template from HTML lib file ...</i></template>
|
|
30
|
+
</custom-element>
|
|
31
|
+
|
|
32
|
+
<hex-grid id="grid1">
|
|
33
|
+
<template>
|
|
34
|
+
<style>
|
|
35
|
+
nav{
|
|
36
|
+
--hex-grid-size:5rem;
|
|
37
|
+
button dce-text{ position: absolute; top: 3rem; text-shadow: 0 0 3px white, 0 0 6px blue; }
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
40
|
+
<img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
|
|
41
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
|
|
42
|
+
<img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
|
|
43
|
+
<img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
|
|
44
|
+
<img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
|
|
45
|
+
</template>
|
|
46
|
+
</hex-grid>
|
|
47
|
+
<hex-grid id="grid2">
|
|
48
|
+
<template>
|
|
49
|
+
<img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
|
|
50
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
|
|
51
|
+
<img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
|
|
52
|
+
<img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
|
|
53
|
+
<img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
|
|
54
|
+
<img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
|
|
55
|
+
<img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
|
|
56
|
+
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
|
|
57
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
|
|
58
|
+
<img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
|
|
59
|
+
<img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
|
|
60
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
|
|
61
|
+
<img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
|
|
62
|
+
<img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
|
|
63
|
+
</template>
|
|
64
|
+
</hex-grid>
|
|
65
|
+
</body>
|
|
66
|
+
</html>
|