Skip to content

Commit 45c88c0

Browse files
sidewaysssidewayss
committed
package.json build works + apps/common.css
It needs some streamlining... dist/apps work but need more testing.
1 parent c3e8451 commit 45c88c0

14 files changed

Lines changed: 385 additions & 486 deletions

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ If you bundle your templates into one file, then each `<template>` must have the
5757
<template id="input-num">...</template>
5858
```
5959

60+
NOTE: If you are using import options and getting an error about an element/tag already being registered, you might need to add the same import options to your JavaScript `import` statements, so that they match your HTML `<script>` imports. The browser can import these as two separate files. This happens sometimes for reasons unknown to me.
61+
6062
### Managing Template Files
6163
There are built-in template files in the `templates/` directory. They serve two purposes:
6264
- As examples and/or starting points for you to design your templates.

‎alt/babel.config.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"plugins": [
3+
["private-to-public", { "minify":true, "aToZ":true }],
4+
"@babel/plugin-transform-nullish-coalescing-operator",
5+
"@babel/plugin-transform-optional-chaining"
6+
],
7+
"comments":false,
8+
"assumptions": {
9+
"noDocumentAll":true
10+
}
11+
}

‎alt/template-check.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<use id="default-box" href="#box" part="default" pointer-events="none"/>
2626
<use id="check-box" href="#box" part="check"/>
2727
</svg>
28-
<pre id="data-label" part="label"></pre>
28+
<pre id="label" part="label"></pre>
2929
</template>
3030
</body>
3131
</html>

‎apps/common.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
@font-face {
2+
font-family:"Roboto Mono";
3+
font-weight:400;
4+
src:url("/fonts/RobotoMono.ttf") format("truetype");
5+
}
6+
* {
7+
font-family:"Roboto Mono", monospace;
8+
font-size:1rem;
9+
color:#272727;
10+
}
11+
p {
12+
font-family:sans-serif;
13+
white-space:nowrap;
14+
margin-bottom:0;
15+
}
16+
p.header {
17+
font-weight:bold;
18+
margin-top:0;
19+
}
20+
button {
21+
width: 1rem;
22+
height: 1rem;
23+
padding:0;
24+
margin: 0 0.375rem 0.1875rem 0.75rem;
25+
border:none;
26+
background-image:url("clipboard.png");
27+
background-size:contain;
28+
background-repeat:no-repeat;
29+
}
30+
button:hover {
31+
background-image:url("clipboard-hover.png");
32+
}
33+
button:active {
34+
background-image:url("clipboard-active.png");
35+
}
36+
select {
37+
background-color:white;
38+
border-color:#0002;
39+
}
40+
select:disabled, .disabled {
41+
opacity:1;
42+
color:gray;
43+
background-color:transparent;
44+
}
45+
46+
.info { margin:0 0 0 0.25rem }
47+
.warning { color:#800; }
48+
.italic { font-style:italic }
49+
.copied {
50+
opacity:0;
51+
font-size:0.875rem;
52+
color:#777;
53+
padding-bottom:0.1875rem;
54+
margin-top:0;
55+
}
56+
.col {
57+
display:flex;
58+
flex-direction:column;
59+
}
60+
.row, div.row {
61+
display:flex;
62+
align-items:center;
63+
margin-top:0.125rem;
64+
}
65+
div.mt1-2 { margin-top: 0.5rem }
66+
div.mb3-16 { margin-bottom:0.1875rem }
67+
div.between { justify-content:space-between; }
68+
.chk-val { margin-top:0.25rem }
69+
.separator {
70+
color:#787;
71+
margin-bottom:0.5rem;
72+
}
73+
div.header {
74+
align-items:stretch;
75+
align-self: stretch;
76+
margin-right:0.125rem;
77+
}
78+
#html, #script, .html {
79+
font-family:monospace;
80+
padding:0.25rem 0.5rem;
81+
border:1px solid #000;
82+
background-color:#444;
83+
color:white;
84+
}

‎apps/input-num/index.css‎

Lines changed: 3 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
@font-face {
2-
font-family:"Roboto Mono";
3-
font-weight:400;
4-
src:url("/fonts/RobotoMono.ttf") format("truetype");
5-
}
61
@font-face { /* because user can select bold & italic for input-num */
72
font-family:"Roboto Mono";
83
font-weight:700;
@@ -20,93 +15,17 @@
2015
font-style:italic;
2116
src:url("/fonts/RobotoMono.ttf") format("truetype");
2217
}
23-
* {
24-
font-family:"Roboto Mono", monospace;
25-
font-size:1rem;
26-
color:#272727;
27-
}
2818
@media (height < 340px) {
2919
* { font-family:monospace; }
3020
}
3121
@media (hover:none) {
3222
input-num::part(buttons) { display:none }
3323
}
34-
p {
35-
font-family:sans-serif;
36-
white-space:nowrap;
37-
margin-bottom:0;
38-
}
39-
p.header {
40-
font-weight:bold;
41-
margin-top:0;
42-
}
43-
button {
44-
width: 1rem;
45-
height: 1rem;
46-
padding:0;
47-
margin: 0 0.375rem 0.1875rem 0.75rem;
48-
border:none;
49-
background-image:url("../clipboard.png");
50-
background-size:contain;
51-
background-repeat:no-repeat;
52-
}
53-
button:hover {
54-
background-image:url("../clipboard-hover.png");
55-
}
56-
button:active {
57-
background-image:url("../clipboard-active.png");
58-
}
59-
select {
60-
margin-left:0.25rem;
61-
background-color:white;
62-
border-color:#0002;
63-
}
64-
check-box { margin-right:1rem }
24+
select { margin-left: 0.25rem; }
25+
check-box { margin-right:1rem }
6526
#accounting,
66-
#keyboards { margin-right:0 } /* exceptions to check-box margin */
27+
#keyboards { margin-right:0 } /* exceptions to check-box margin */
6728

68-
select:disabled, .disabled {
69-
opacity:1;
70-
color:gray;
71-
background-color:transparent;
72-
}
73-
74-
.info { margin:0 0 0 0.25rem }
75-
.warning { color:#800; }
76-
.italic { font-style:italic }
77-
.copied {
78-
opacity:0;
79-
font-size:0.875rem;
80-
color:#777;
81-
padding-bottom:0.1875rem;
82-
margin-top:0;
83-
}
84-
.col {
85-
display:flex;
86-
flex-direction:column;
87-
}
88-
.row {
89-
display:flex;
90-
align-items:center;
91-
}
92-
div.row { margin-top:0.125rem; }
93-
div.mt1-2 { margin-top:0.5rem }
94-
div.mb3-16 { margin-bottom:0.1875rem }
95-
div.between {
96-
justify-content:space-between;
97-
}
98-
div.header {
99-
align-items:stretch;
100-
align-self: stretch;
101-
margin-right:0.125rem;
102-
}
10329
#max, #min, #step, #delay, #interval {
10430
text-align:right
105-
}
106-
#html, #script {
107-
font-family:monospace;
108-
padding:0.25rem 0.5rem;
109-
border:1px solid #000;
110-
background-color:#444;
111-
color:white;
11231
}

‎apps/input-num/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=overlays-content"/>
66
<link rel="stylesheet" href="/html-elements/css/input-num.css"/>
77
<link rel="stylesheet" href="/html-elements/css/multi-check.css"/>
8+
<link rel="stylesheet" href="../common.css"/>
89
<link rel="stylesheet" href="index.css"/>
910
<script type="module">
10-
import "../../elements.js?templateDir=/html-templates/";
11+
import "../../input-num.js?templateDir=/html-templates/";
12+
</script>
13+
<script type="module">
14+
import "../../multi-check.js?templateDir=/html-templates/";
1115
</script>
1216
<script src="index.js" type="module"></script>
1317
</head>

‎apps/multi-state/index.css‎

Lines changed: 1 addition & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,17 @@
1-
@font-face {
2-
font-family:"Roboto Mono";
3-
font-weight:400;
4-
src:url("/fonts/RobotoMono.ttf") format("truetype");
5-
}
6-
* {
7-
font-family:"Roboto Mono", monospace;
8-
font-size:1rem;
9-
color:#272727;
10-
}
111
label {
122
margin-right:0.25rem;
133
}
14-
p {
15-
font-family:sans-serif;
16-
white-space:nowrap;
17-
margin-bottom:0;
18-
}
19-
p.header {
20-
font-weight:bold;
21-
margin-top:0;
22-
}
234
span[id] { min-width:5ch }
24-
25-
button {
26-
width: 1rem;
27-
height: 1rem;
28-
padding:0;
29-
margin: 0 0.375rem 0.1875rem 0.75rem;
30-
border:none;
31-
background-image:url("../clipboard.png");
32-
background-size:contain;
33-
background-repeat:no-repeat;
34-
}
35-
button:hover {
36-
background-image:url("../clipboard-hover.png");
37-
}
38-
button:active {
39-
background-image:url("../clipboard-active.png");
40-
}
41-
select {
42-
background-color:white;
43-
border-color:#0002;
44-
}
45-
select:disabled, .disabled {
46-
opacity:1;
47-
color:gray;
48-
background-color:transparent;
49-
}
50-
51-
.info { margin:0 0 0 0.25rem }
52-
.warning { color:#800; }
53-
.italic { font-style:italic }
54-
.copied {
55-
opacity:0;
56-
font-size:0.875rem;
57-
color:#777;
58-
padding-bottom:0.1875rem;
59-
margin-top:0;
60-
}
61-
.col {
62-
display:flex;
63-
flex-direction:column;
64-
}
65-
.row {
66-
display:flex;
67-
align-items:center;
68-
margin-top:0.125rem;
69-
}
70-
.mt1-2 { margin-top:0.5rem }
71-
.mb3-16 { margin-bottom:0.1875rem }
72-
.between {
73-
justify-content:space-between;
74-
}
755
.chk-val { margin-top:0.25rem }
766
.separator {
777
color:#787;
788
margin-bottom:0.5rem;
799
}
8010
div.header {
81-
align-items:stretch;
82-
align-self: stretch;
83-
margin-top: 0.1875rem;
84-
margin-right:0.125rem;
11+
margin-top:0.1875rem;
8512
}
8613
.html { /* the only elements in this page that stretch */
8714
width:328px;
88-
font-family:monospace;
89-
padding:0.25rem 0.5rem;
90-
border:1px solid #000;
91-
background-color:#444;
92-
color:white;
9315
}
9416
@media (width < 360px) {
9517
.html { max-width:288px; }

‎apps/multi-state/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
<head>
44
<title>multi-state</title>
55
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=overlays-content"/>
6-
<link rel="stylesheet" href="index.css"/>
76
<link rel="stylesheet" href="/html-elements/css/multi-check.css"/>
87
<link rel="stylesheet" href="/html-elements/css/state-btn.css"/>
8+
<link rel="stylesheet" href="../common.css"/>
9+
<link rel="stylesheet" href="index.css"/>
910
<script type="module">
1011
import "../../multi-check.js?templateDir=/html-templates/";
1112
</script>

‎babel.config.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"plugins": [
3+
"@babel/plugin-transform-nullish-coalescing-operator",
4+
"@babel/plugin-transform-optional-chaining"
5+
],
6+
"comments":false,
7+
"assumptions": {
8+
"noDocumentAll":true
9+
}
10+
}

‎elements.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// This module exists to assist Rollup in bundling dist/html-elements.js
22
// If you want to use imports.meta then you cannot directly import this module
33
// It must be a bundle to support the import options: template and templateDir
4+
export {BaseElement} from "./base-element.js"; // BaseElement.promises and noAwait...
45

56
export * from "./multi-check.js"; // CheckBox, CheckTri
67
export * from "./state-btn.js"; // StateBtn

0 commit comments

Comments
 (0)