blob: aa1112da6664fe6e86aeedafb519d8b5daea51bd (
plain) (
blame)
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
|
<script lang="ts">
import Spacer from '$lib/Layout/Spacer.svelte';
import { onMount } from 'svelte';
import JSZip from 'jszip';
let fileInput: HTMLInputElement | null = null;
const handleFileUpload = async () => {
if (!fileInput || !fileInput.files || fileInput.files.length === 0) return;
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = async (event) => {
const zip = await JSZip.loadAsync((event.target as FileReader).result as ArrayBuffer);
const newZip = new JSZip();
for (const relativePath in zip.files) {
const zipEntry = zip.files[relativePath];
if (zipEntry.dir) {
newZip.folder(relativePath);
} else if (relativePath.endsWith('.xhtml') || relativePath.endsWith('.html')) {
newZip.file(relativePath, applyBionicReadingToHTML(await zipEntry.async('text')));
} else {
newZip.file(relativePath, await zipEntry.async('arraybuffer'));
}
}
downloadEPUB(
await newZip.generateAsync({ type: 'blob' }),
`${file.name.split('.epub')[0]}_hayai.epub`
);
};
reader.readAsArrayBuffer(file);
};
const applyBionicReadingToHTML = (content: string) => {
const contentParser = new DOMParser().parseFromString(content, 'text/html');
for (const paragraph of contentParser.getElementsByTagName('p'))
paragraph.innerHTML = applyBionicReadingToString(paragraph.textContent ?? '');
return contentParser.documentElement.outerHTML;
};
const applyBionicReadingToString = (text: string) =>
text
.split(/\s+/)
.map((word) => {
if (/^\W+$/.test(word) || word.length <= 2) return word;
let boldLength;
if (word.length <= 4) {
boldLength = 2;
} else if (word.length <= 7) {
boldLength = 3;
} else if (word.length <= 10) {
boldLength = 4;
} else {
boldLength = Math.ceil(word.length * 0.5);
}
return `<strong>${word.slice(0, boldLength)}</strong>${word.slice(boldLength)}`;
})
.join(' ');
const downloadEPUB = (blob: Blob | MediaSource, fileName: string) => {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
};
onMount(() => (fileInput = document.getElementById('epub-file') as HTMLInputElement));
</script>
<div class="card">
{@html applyBionicReadingToString('Upload an EPUB; receive a "bionic" EPUB.')}
<br />
<small>
{@html applyBionicReadingToString(
"Bionic reading is a method of displaying text that aims to enhance readability and reading speed by guiding the reader's eyes using artificial fixation points."
)}
</small>
<Spacer />
{@html applyBionicReadingToString(
`After selecting an EPUB file, 早い will apply a bionic reading filter over any and all words, and return the newly created "bionic" EPUB file.`
)}
<Spacer />
<input type="file" id="epub-file" accept=".epub" onchange={handleFileUpload} />
</div>
|