Skip to content

Commit a53729a

Browse files
author
Andrew Marcuse
committed
Minor enhancements
1 parent 6ea96df commit a53729a

File tree

3 files changed

+124
-24
lines changed

3 files changed

+124
-24
lines changed

‎src/asciify.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,17 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
5858
<form class="mt-6 flex flex-col gap-4" action="#" method="post" onsubmit="return false;">
5959
<label class="form-control w-full">
6060
<div class="label">
61+
<span class="label-text">Load from file</span>
62+
</div>
63+
<input id="input-file" type="file" class="file-input file-input-bordered w-full" />
64+
</label>
65+
66+
<label class="form-control w-full">
67+
<div class="label w-full items-center">
6168
<span class="label-text">Input text</span>
69+
<button id="clear-button" type="button" class="btn btn-sm ml-auto">
70+
Clear
71+
</button>
6272
</div>
6373
<textarea id="input-text" class="textarea textarea-bordered min-h-40 w-full" placeholder="Paste or type text here"></textarea>
6474
</label>
@@ -83,6 +93,8 @@ const inputText = document.querySelector<HTMLTextAreaElement>('#input-text')
8393
const outputText = document.querySelector<HTMLTextAreaElement>('#output-text')
8494
const copyButton = document.querySelector<HTMLButtonElement>('#copy-button')
8595
const demoButton = document.querySelector<HTMLButtonElement>('#demo-button')
96+
const clearButton = document.querySelector<HTMLButtonElement>('#clear-button')
97+
const inputFile = document.querySelector<HTMLInputElement>('#input-file')
8698

8799
type AnyAsciiFn = (value: string) => string
88100
let anyAsciiPromise: Promise<AnyAsciiFn> | undefined
@@ -107,7 +119,28 @@ const updateOutput = async () => {
107119
inputText?.addEventListener('input', () => {
108120
void updateOutput()
109121
})
122+
123+
inputFile?.addEventListener('change', async () => {
124+
if (!inputText) {
125+
return
126+
}
127+
128+
const [file] = inputFile.files ?? []
129+
if (!file) {
130+
return
131+
}
132+
133+
try {
134+
inputText.value = await file.text()
135+
inputText.focus()
136+
void updateOutput()
137+
} finally {
138+
inputFile.value = ''
139+
}
140+
})
141+
110142
void updateOutput()
143+
inputText?.focus()
111144

112145
demoButton?.addEventListener('click', () => {
113146
if (!inputText) {
@@ -135,3 +168,34 @@ copyButton?.addEventListener('click', async () => {
135168
copyButton.textContent = 'Copy to clipboard'
136169
}, 1500)
137170
})
171+
172+
clearButton?.addEventListener('click', () => {
173+
if (!inputText) {
174+
return
175+
}
176+
177+
inputText.value = ''
178+
inputText.focus()
179+
void updateOutput()
180+
})
181+
182+
document.addEventListener('keydown', (event) => {
183+
if (event.key !== 'Escape' || !inputText) {
184+
return
185+
}
186+
187+
const activeElement = document.activeElement
188+
if (
189+
activeElement instanceof HTMLElement &&
190+
activeElement !== inputText &&
191+
(activeElement.tagName === 'INPUT' ||
192+
activeElement.tagName === 'TEXTAREA' ||
193+
activeElement.isContentEditable)
194+
) {
195+
return
196+
}
197+
198+
inputText.value = ''
199+
inputText.focus()
200+
void updateOutput()
201+
})

‎src/main.ts‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,33 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
99
1010
<div class="hero rounded-box border border-base-300 bg-base-100 shadow-sm">
1111
<div class="hero-content flex-col py-10 w-full items-start">
12-
<div class="flex flex-row items-center">
13-
<a href="/asciify.html" class="btn btn-primary">Asciify</a>
14-
<div class="ps-2">convert text to plain ASCII</div>
12+
<div class="flex w-full items-center gap-3">
13+
<a href="/asciify.html" class="btn btn-primary w-40">Asciify</a>
14+
<div>convert text to plain ASCII</div>
1515
</div>
16-
<div class="flex flex-row items-center">
17-
<a href="/bytecount.html" class="btn btn-primary">Byte Count</a>
18-
<div class="ps-2">count which bytes are in a file</div>
16+
<div class="flex w-full items-center gap-3">
17+
<a href="/bytecount.html" class="btn btn-primary w-40">Byte Count</a>
18+
<div>count which bytes are in a file</div>
1919
</div>
20-
<div class="flex flex-row items-center">
21-
<a href="/haikunator.html" class="btn btn-primary">Haikunator</a>
22-
<div class="ps-2">generate random Heroku-style names</div>
20+
<div class="flex w-full items-center gap-3">
21+
<a href="/haikunator.html" class="btn btn-primary w-40">Haikunator</a>
22+
<div>generate random Heroku-style names</div>
2323
</div>
24-
<div class="flex flex-row items-center">
25-
<a href="/runecount.html" class="btn btn-primary">Rune Count</a>
26-
<div class="ps-2">count which characters are in a file</div>
24+
<div class="flex w-full items-center gap-3">
25+
<a href="/runecount.html" class="btn btn-primary w-40">Rune Count</a>
26+
<div>count which characters are in a file</div>
2727
</div>
28-
<div class="flex flex-row items-center">
29-
<a href="/strings.html" class="btn btn-primary">Strings</a>
30-
<div class="ps-2">extract readable strings from a binary file</div>
28+
<div class="flex w-full items-center gap-3">
29+
<a href="/strings.html" class="btn btn-primary w-40">Strings</a>
30+
<div>extract readable strings from a binary file</div>
3131
</div>
32-
<div class="flex flex-row items-center">
33-
<a href="/upside-down.html" class="btn btn-primary">Upside Down</a>
34-
<div class="ps-2">flip text upside down</div>
32+
<div class="flex w-full items-center gap-3">
33+
<a href="/upside-down.html" class="btn btn-primary w-40">Upside Down</a>
34+
<div>flip text upside down</div>
3535
</div>
36-
<div class="flex flex-row items-center">
37-
<a href="/urlencode.html" class="btn btn-primary">URL Encode</a>
38-
<div class="ps-2">encode and decode URL-escaped text</div>
36+
<div class="flex w-full items-center gap-3">
37+
<a href="/urlencode.html" class="btn btn-primary w-40">URL Encode</a>
38+
<div>encode and decode URL-escaped text</div>
3939
</div>
4040
</div>
4141
</div>
@@ -58,8 +58,8 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
5858
5959
<article class="card border border-base-300 bg-base-100 shadow-sm">
6060
<div class="card-body">
61-
<h2 class="card-title">More useful stuff</h2>
62-
<p class="text-base-content/70">Other things I've made</p>
61+
<h2 class="card-title">More more more!</h2>
62+
<p class="text-base-content/70">Other useful things I've made</p>
6363
<div class="mt-2 flex flex-wrap gap-2">
6464
<a href="https://www.fileformat.info/" class="btn btn-sm">File Formats</a>
6565
<a href="https://resolve.rs/" class="btn btn-sm">Networking</a>

‎src/upside-down.ts‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,11 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
8282
8383
<form class="mt-6 flex flex-col gap-4" action="#" method="post" onsubmit="return false;">
8484
<label class="form-control w-full">
85-
<div class="label">
85+
<div class="label w-full items-center">
8686
<span class="label-text">Input text</span>
87+
<button id="clear-button" type="button" class="btn btn-sm ml-auto">
88+
Clear
89+
</button>
8790
</div>
8891
<textarea id="input-text" class="textarea textarea-bordered min-h-40 w-full" placeholder="Paste or type text here"></textarea>
8992
</label>
@@ -108,6 +111,7 @@ const inputText = document.querySelector<HTMLTextAreaElement>('#input-text')
108111
const outputText = document.querySelector<HTMLTextAreaElement>('#output-text')
109112
const copyButton = document.querySelector<HTMLButtonElement>('#copy-button')
110113
const demoButton = document.querySelector<HTMLButtonElement>('#demo-button')
114+
const clearButton = document.querySelector<HTMLButtonElement>('#clear-button')
111115

112116
const extractFortuneRaw = (payload: unknown): string | null => {
113117
if (!payload || typeof payload !== 'object') {
@@ -177,6 +181,7 @@ const updateOutput = () => {
177181

178182
inputText?.addEventListener('input', updateOutput)
179183
updateOutput()
184+
inputText?.focus()
180185

181186
demoButton?.addEventListener('click', async () => {
182187
if (!inputText) {
@@ -217,3 +222,34 @@ copyButton?.addEventListener('click', async () => {
217222
copyButton.textContent = 'Copy to clipboard'
218223
}, 1500)
219224
})
225+
226+
clearButton?.addEventListener('click', () => {
227+
if (!inputText) {
228+
return
229+
}
230+
231+
inputText.value = ''
232+
inputText.focus()
233+
updateOutput()
234+
})
235+
236+
document.addEventListener('keydown', (event) => {
237+
if (event.key !== 'Escape' || !inputText) {
238+
return
239+
}
240+
241+
const activeElement = document.activeElement
242+
if (
243+
activeElement instanceof HTMLElement &&
244+
activeElement !== inputText &&
245+
(activeElement.tagName === 'INPUT' ||
246+
activeElement.tagName === 'TEXTAREA' ||
247+
activeElement.isContentEditable)
248+
) {
249+
return
250+
}
251+
252+
inputText.value = ''
253+
inputText.focus()
254+
updateOutput()
255+
})

0 commit comments

Comments
 (0)