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
|
// This is a widely abused helper function that creates a DOM element, attaches it as the
// last child of 'parent' and possibly gives it a class
export function mk(parent: HTMLElement, type: keyof HTMLElementTagNameMap, _class?: string): HTMLElement {
var el = document.createElement(type);
parent.appendChild(el);
if (_class)
el.classList.add(_class);
return el;
}
export function path_combine(a, b) {
const last_char = a.slice(-1);
if (last_char == "/")
return a + b;
else
return a + "/" + b;
}
// Create a checkbocx with a label.
// togglefn will be called when its value changes with an argument that's either true/false
export function mkcheckbox(parent, label, togglefn): HTMLElement {
var hdiv = mkhdiv(parent);
var write_checkbox: HTMLInputElement = mk(hdiv, 'input') as any;
write_checkbox.type = 'checkbox';
var write_checkbox_label = mk(hdiv, 'label');
write_checkbox_label.innerText = label;
write_checkbox_label.onclick = (_e) => { write_checkbox.click(); }
write_checkbox_label.classList.add('noselect');
write_checkbox.onchange = (_e) => {
togglefn(write_checkbox.checked);
};
return hdiv;
}
// Crate a horizontal div
export function mkhdiv(parent: HTMLElement): HTMLDivElement {
var hdiv = mk(parent, 'div') as HTMLDivElement;
hdiv.style.display = "flex";
hdiv.style.alignItems = "center";
hdiv.style.padding = "0.3rem";
hdiv.style.gap = "0.3rem";
return hdiv;
}
// It's honestly really sad that we need this
// We have an image viewer, but we load the uploaded via the XMLHttpRequest API, which gives us an array buffer
// We need to base64 encode the image data so we can feed it into the <img src="...">
// and the standart base64 encode API is shit
// https://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de
export function base64ArrayBuffer(arrayBuffer) {
var base64 = ''
var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
var bytes = new Uint8Array(arrayBuffer)
var byteLength = bytes.byteLength
var byteRemainder = byteLength % 3
var mainLength = byteLength - byteRemainder
var a, b, c, d
var chunk
// Main loop deals with bytes in chunks of 3
for (var i = 0; i < mainLength; i = i + 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]
// Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12 // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6 // 4032 = (2^6 - 1) << 6
d = chunk & 63 // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
}
// Deal with the remaining bytes and padding
if (byteRemainder == 1) {
chunk = bytes[mainLength]
a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4 // 3 = 2^2 - 1
base64 += encodings[a] + encodings[b] + '=='
} else if (byteRemainder == 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]
a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
b = (chunk & 1008) >> 4 // 1008 = (2^6 - 1) << 4
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2 // 15 = 2^4 - 1
base64 += encodings[a] + encodings[b] + encodings[c] + '='
}
return base64
}
|