-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
258 lines (220 loc) · 32.1 KB
/
index.html
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
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="dom.js library demo page">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎈</text></svg>"/>
<title>dom.js</title>
<style>
:root {
--background-color: #45216a;
--code-background: #222;
--accent-color: #02796b;
--brand-color: #ea8b00;
--text-color: #fafafa;
--text-muted: #ddd;
--box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
html { }
@font-face {
font-family: 'Agbalumo'; font-display: swap;
src: url(data:font/woff2;base64,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) format('woff2');
}
* { font-family: "Agbalumo" } code, code * { font-family: monospace }
h1 { font-size: 2.5em; margin-top: -0.5em; margin-bottom: 0; }
h2, h3, h4 { color: var(--text-muted); margin: 0; }
h2, small { font-size: 0.75em; }
h1 span { color: var(--accent-color); font-size: 1.3em; }
button { cursor: pointer; } h1,h2 { pointer-events: none; }
img.logo { padding-top: 18px; width: 24px; }
a { color: var(--text-color); &:hover { color: var(--brand-color); }}
header, footer { text-align: center; }
body {
max-width: 740px; font-size: clamp(6px, 2vw, 14px); margin: auto;
background: var(--background-color); color: var(--text-color);
padding: 1em;
pre {
overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap;
&&::-webkit-scrollbar { display: none; }
}
code {
.hlst { color: #71f4ad; } .hlfn { color: #be81ff; }
.hlcode { color: #eeeeee; } .hlcomm { color: #888888; }
.hlkey { color: #f67bb5; } .hlattr { color: #3ad0fc; }
background: var(--code-background); border-radius: 6px;
padding: 0.5em 0.75em; margin: 0.3em; line-height: 2.5;
}
}
section {
max-width: 90%; width: fit-content;
margin: 3em auto; line-height: 1.5;
header {
line-height: 1.5; text-align: center; padding-bottom: 2em;
h3, h4 { margin: 0; } h3 { font-size: 2em; color: var(--text); }
h4 { font-size: 1em; color: var(--text-muted); margin-top: 0.5em; }
}
}
section.squares {
width: 100%; max-width: initial; text-align: center;
button {
display: inline-flex; width: 40%; margin: 0.1em;
height: 3em; font-size: 2em; border-radius: 8px;
line-height: 1; align-content: center; align-items: center;
justify-content: center; transition: background 0.1s linear;
box-shadow: var(--box-shadow); color: var(--text-color);
}
}
.snippet {
display: block;
width: -webkit-fill-available;
color: var(--text-color);
padding: 2em 4em 0.75em 4em;
font-size: 1em; margin: 2em; line-height: 1;
position: relative; user-select: text; text-align: left;
background: var(--code-background); box-shadow: var(--box-shadow);
transition: transform 0.05s linear; border-radius: 8px;
pre { width: 100%; }
pre, code {
white-space: pre-line; padding: 0; line-height: 1;
}
code .line { line-height: 1; white-space: pre; }
.buttons { position: absolute; top: 1em; left: 1em; display: block;
div {
width: 0.75em; height: 0.75em; display: inline-block;
border-radius: 50%; margin-right: 0.25em;
&:nth-of-type(1) { background: #ff5f56; } &:nth-of-type(2) {
background: #ffbd2d;} &:nth-of-type(3) {background: #26c940;
}}}
&.oneliner {
width: -webkit-fill-available; margin: 0; line-height: 0;
padding: clamp(12px, 0vw, 28px) clamp(12px, 1.25vw, 60px);
font-size: clamp(5px, 0.8em, 16px);
pre { width: 100%; white-space: nowrap; margin: 0; padding: 0; }
code { margin: 0; padding: 0; }
}
}
</style>
</head>
<body>
<header>
<a href="/~https://github.com/nicholaswmin/dom">
<img class="logo" alt="go to project repository" src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OC44NTQgMEMyMS44MzkgMCAwIDIyIDAgNDkuMjE3YzAgMjEuNzU2IDEzLjk5MyA0MC4xNzIgMzMuNDA1IDQ2LjY5IDIuNDI3LjQ5IDMuMzE2LTEuMDU5IDMuMzE2LTIuMzYyIDAtMS4xNDEtLjA4LTUuMDUyLS4wOC05LjEyNy0xMy41OSAyLjkzNC0xNi40Mi01Ljg2Ny0xNi40Mi01Ljg2Ny0yLjE4NC01LjcwNC01LjQyLTcuMTctNS40Mi03LjE3LTQuNDQ4LTMuMDE1LjMyNC0zLjAxNS4zMjQtMy4wMTUgNC45MzQuMzI2IDcuNTIzIDUuMDUyIDcuNTIzIDUuMDUyIDQuMzY3IDcuNDk2IDExLjQwNCA1LjM3OCAxNC4yMzUgNC4wNzQuNDA0LTMuMTc4IDEuNjk5LTUuMzc4IDMuMDc0LTYuNi0xMC44MzktMS4xNDEtMjIuMjQzLTUuMzc4LTIyLjI0My0yNC4yODMgMC01LjM3OCAxLjk0LTkuNzc4IDUuMDE0LTEzLjItLjQ4NS0xLjIyMi0yLjE4NC02LjI3NS40ODYtMTMuMDM4IDAgMCA0LjEyNS0xLjMwNCAxMy40MjYgNS4wNTJhNDYuOTcgNDYuOTcgMCAwIDEgMTIuMjE0LTEuNjNjNC4xMjUgMCA4LjMzLjU3MSAxMi4yMTMgMS42MyA5LjMwMi02LjM1NiAxMy40MjctNS4wNTIgMTMuNDI3LTUuMDUyIDIuNjcgNi43NjMuOTcgMTEuODE2LjQ4NSAxMy4wMzggMy4xNTUgMy40MjIgNS4wMTUgNy44MjIgNS4wMTUgMTMuMiAwIDE4LjkwNS0xMS40MDQgMjMuMDYtMjIuMzI0IDI0LjI4MyAxLjc4IDEuNTQ4IDMuMzE2IDQuNDgxIDMuMzE2IDkuMTI2IDAgNi42LS4wOCAxMS44OTctLjA4IDEzLjUyNiAwIDEuMzA0Ljg5IDIuODUzIDMuMzE2IDIuMzY0IDE5LjQxMi02LjUyIDMzLjQwNS0yNC45MzUgMzMuNDA1LTQ2LjY5MUM5Ny43MDcgMjIgNzUuNzg4IDAgNDguODU0IDB6IiBmaWxsPSIjZmZmIi8+PC9zdmc+'/>
</a>
<h1>dom<span>.</span>js</h1>
<h2>concise DOM in ~ 400 bytes</h2>
</header>
<main>
<section>
consise selectors:
<code> $.$(<span class="hlst">'.foo'</span>)
</code> & <code>$.$$(<span class="hlst">'.bar'</span>)</code><br>
consise event handlers: <code><span class="hlfn">on<span class="hlcode">(</span><span class="hlst">'click'</span><span class="hlcode">)</span></span></code> & <code><span class="hlfn">off<span class="hlcode">(</span><span class="hlst">'click'</span><span class="hlcode">)</span></span></code><br>
a css set method: <code><span class="hlfn">on<span class="hlcode">(</span><span class="hlst">'click'</span><span class="hlcode">)</span></span></code> & <code><span class="hlfn">off<span class="hlcode">(</span><span class="hlst">'click'</span><span class="hlcode">)</span></span></code><br>
method chaining: <code><span class="hlfn">.on<span></span><span class="hlcode">(</span><span class="hlst">'click'</span><span class="hlcode">, fn</span><span class="hlcode">)</span><span class="hlfn">.css</span><span class="hlcode">({ color:</span> <span class="hlst">'red'</span> <span class="hlcode">})</span></</span></code><br>
</section>
<section class="squares">
<button style="background:var(--accent-color);">click</button>
<button style="background:var(--brand-color);">me</button>
</section>
<button class="snippet">
<div class="buttons">
<div></div>
<div></div>
<div></div>
</div>
<pre>
<code>
<div class="line"><span class="hlfn">$.$$</span>(<span class="hlst">'.square'</span>)</div>
<div class="line"><span class="hlfn"> .</span><span class="hlfn">on</span>(<span class="hlst">'click'</span>, <span <span class="hlkey">function</span> (<span class="hlcode">e</span>) {</div>
<div class="line"><span class="hlcomm"> // switch styles on each click</span></div>
<div class="line"><span class="hlkey"> this</span>.<span class="hlfn">css</span>({ <span class="hlst">background</span>: <span class="hlfn">color</span>() })</div>
<div class="line"><span class="hlcomm"><br> // access HTMLelement using: this.$</span></div>
<div class="line"><span <span class="hlkey"> this</span>.<span class="hlcode">$</span>.<span class="hlcode">textContent</span> = +<span <span class="hlkey">this</span>.<span class="hlcode">$</span>.<span class="hlcode">textContent</span> + <span class="hlst">1</span></div>
<div class="line"><span class="hlcomm"><br> // after 10 clicks emove all `click` listeners</span></div>
<div class="line"><span <span class="hlkey"> if</span> (+<span <span class="hlkey">this</span>.<span class="hlcode">$</span>.<span class="hlcode">textContent</span> === <span class="hlst">10</span>)</div>
<div class="line"><span <span class="hlkey"> this</span>.<span class="hlfn">off</span>(<span class="hlst">'click'</span>)</div>
<div class="line"> })</div>
<div class="line"> .<span class="hlfn">css</span>({ <span class="hlst">cursor</span>: <span class="hlst">'pointer'</span> })</div>
<div class="line"> .<span class="hlfn">on</span>(<span class="hlst">'mouseover'</span>, <span <span class="hlkey">function</span> (<span class="hlcode">e</span>) {</div>
<div class="line"> <span <span class="hlkey"> console</span>.<span class="hlfn">log</span>(<span class="hlst">'mouseover'</span>)</div>
<div class="line"> }) <span class="hlcomm">// ... etc</span></div>
</code>
</pre>
</button>
<section>
<header>
<h3>install</h3>
<h4> via CDN - or grab the raw
<a href="https://raw.githubusercontent.com/nicholaswmin/dom/refs/heads/main/dom.js">source</a>
</h4>
</header>
<button class="snippet oneliner">
<dialog id="pop" delay="1000" popover>
<p>copied to clipboard!</p>
</dialog>
<style>
dialog[popover] {
color: var(--accent-color); background: none; font-size: 1.25em;
border: 0; &::backdrop { background-color: rgba(0,0,0,0.8) }
}
</style>
<pre>
<code>
<span class="hlkey">
<div class="line"><span class="hlcode"><</span>script <span class="hlattr">type</span><span class="hlcode">=</span><span class="hlst">"module"<span class="hlcode"></span><span class="hlattr"> src</span><span class="hlcode">=</span><span class="hlst">"https://cdn.jsdelivr.net/gh/nicholaswmin/dom@main/dom.js"<span class="hlcode">></span><span class="hlkey"><span class="hlcode"></</span>script<span class="hlcode">></span></div>
</span>
</code>
</pre>
</button>
</section>
</main>
<footer>
<a
style="color:var(--brand-color);"
href="/~https://github.com/nicholaswmin/dom">
read the docs
</a>
<br>
<small>
<a href="/~https://github.com/nicholaswmin">@nicholaswmin</a>
|
<a href="https://spdx.org/licenses/ISC.html">ISC license</a>
</small>
</footer>
</body>
<script type="module">
import './dom.js'
// usage example
const flats = ['#00796B', '#f53b57', '#F57F17', '#ff3f34', '#ff5252']
const color = () => flats[Math.floor(Math.random() * flats.length)]
$.$$('.squares button').on('click', function(e) {
const content = isNaN(this.$.textContent) ? 1 : +this.$.textContent
this.css({ background: color() })
this.$.textContent = content + 1
if (+this.$.textContent >= 10)
this.off('click')
})
.css({ cursor: 'pointer' })
.on('mouseover', function(e) {
console.log('mouseover')
})
// copy to clipboard on `<code>` click
window.addEventListener('load', e => {
Array.from(document.querySelectorAll('button.snippet'))
.forEach(el => el.addEventListener('click', async e => {
if (e.view?.getSelection?.().toString().length > 5) return
const codeelem = e.currentTarget.querySelector('pre')
const tcontent = codeelem.textContent.replace(/^ +/g, '')
const distance = tcontent.split(' ').findIndex(v => v !== '\n' && !!v)
const guttered = tcontent.split(' '.repeat(distance))
const dedented = guttered.join('').trim().replace(/^ +/g, '')
await navigator.clipboard.writeText(dedented)
clearTimeout(window.popenTimer); window.pop.showPopover();
window.popenTimer = setTimeout(window.pop.hidePopover.bind(pop),
+window.pop?.getAttribute('delay') || 2000
)
}))
})
</script>
</html>