Skip to content

Commit 2201235

Browse files
author
Andrew Marcuse
committed
Character set detection
1 parent 6c6e73a commit 2201235

File tree

10 files changed

+371
-25
lines changed

10 files changed

+371
-25
lines changed

‎chardet.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Character Set Detection</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/chardet.ts"></script>
12+
</body>
13+
</html>

‎package-lock.json‎

Lines changed: 43 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
},
1919
"dependencies": {
2020
"any-ascii": "^0.3.3",
21-
"haikunator": "^2.1.2"
21+
"chardet": "^2.1.1",
22+
"encoding-japanese": "^2.2.0",
23+
"haikunator": "^2.1.2",
24+
"jschardet": "^3.1.4"
2225
}
2326
}

‎runecount.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Runecount</title>
7+
<title>Character Count</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎src/bytecount.ts‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
1414
1515
<section class="rounded-box border border-base-300 bg-base-100 p-8 shadow-sm">
1616
<h1 class="text-3xl font-bold">Byte Count</h1>
17-
<p class="mt-3 text-base-content/70">Choose a file and start counting bytes.</p>
17+
<p class="mt-3 text-base-content/70">Choose a file to start counting bytes.</p>
1818
1919
<form id="bytecount-form" class="mt-6 flex flex-col gap-4" action="#" method="post">
2020
<label class="form-control w-full">
@@ -25,14 +25,13 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
2525
</label>
2626
2727
<div id="form-error" class="alert alert-error hidden" role="alert" aria-live="polite"></div>
28-
29-
<div>
30-
<button id="start-button" type="submit" class="btn btn-primary">Start</button>
31-
</div>
3228
</form>
3329
3430
<section id="results" class="mt-8 hidden">
35-
<h2 class="text-xl font-semibold">Byte Counts</h2>
31+
<div class="flex items-center gap-3">
32+
<h2 class="text-xl font-semibold">Byte Counts</h2>
33+
<button id="clear-results-button" type="button" class="btn btn-sm ml-auto">Clear</button>
34+
</div>
3635
<p id="results-summary" class="mt-2 text-base-content/70"></p>
3736
3837
<div class="mt-4 overflow-x-auto">
@@ -56,13 +55,12 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
5655
</main>
5756
`
5857

59-
const form = document.querySelector<HTMLFormElement>('#bytecount-form')
6058
const fileInput = document.querySelector<HTMLInputElement>('#input-file')
6159
const formError = document.querySelector<HTMLDivElement>('#form-error')
62-
const startButton = document.querySelector<HTMLButtonElement>('#start-button')
6360
const resultsSection = document.querySelector<HTMLElement>('#results')
6461
const resultsSummary = document.querySelector<HTMLParagraphElement>('#results-summary')
6562
const resultsBody = document.querySelector<HTMLTableSectionElement>('#results-body')
63+
const clearResultsButton = document.querySelector<HTMLButtonElement>('#clear-results-button')
6664
let errorTimeoutId: number | undefined
6765

6866
const hideError = () => {
@@ -178,9 +176,19 @@ const renderByteCountTable = (byteCounts: Map<number, ByteStats>, totalBytes: nu
178176
resultsSection.classList.remove('hidden')
179177
}
180178

181-
form?.addEventListener('submit', async (event) => {
182-
event.preventDefault()
179+
clearResultsButton?.addEventListener('click', () => {
180+
if (resultsBody) {
181+
resultsBody.innerHTML = ''
182+
}
183+
184+
if (resultsSummary) {
185+
resultsSummary.textContent = ''
186+
}
187+
188+
resultsSection?.classList.add('hidden')
189+
})
183190

191+
fileInput?.addEventListener('change', async () => {
184192
const selectedFile = fileInput?.files?.[0]
185193

186194
if (!selectedFile) {
@@ -195,9 +203,8 @@ form?.addEventListener('submit', async (event) => {
195203

196204
hideError()
197205

198-
if (startButton) {
199-
startButton.disabled = true
200-
startButton.textContent = 'Counting...'
206+
if (fileInput) {
207+
fileInput.disabled = true
201208
}
202209

203210
try {
@@ -206,9 +213,9 @@ form?.addEventListener('submit', async (event) => {
206213
} catch {
207214
showError('Unable to read the selected file.')
208215
} finally {
209-
if (startButton) {
210-
startButton.disabled = false
211-
startButton.textContent = 'Start'
216+
if (fileInput) {
217+
fileInput.disabled = false
218+
fileInput.value = ''
212219
}
213220
}
214221
})

0 commit comments

Comments
 (0)