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
|
(function () {
const btn = document.querySelector('#shortenButton');
const inpUrl = document.querySelector('#url');
const inpSlug = document.querySelector('#slug');
function uiError (message) {
btn.textContent = message;
btn.classList.add('error');
inpUrl.addEventListener('input', resetState);
inpSlug.addEventListener('input', resetState);
}
function shorten (e) {
if (!inpUrl.value) return;
const req = new XMLHttpRequest();
req.addEventListener('load', () => {
const reply = JSON.parse(req.responseText);
if (req.status != 201) {
console.error(req.status, reply.errorMessage);
uiError(reply.uiString || 'API Error');
return;
}
inpUrl.value = reply.data.shortUrl;
btn.removeEventListener('click', shorten);
btn.classList.remove('error');
btn.textContent = 'Copy';
btn.addEventListener('click', copyUrl);
inpUrl.addEventListener('input', resetState);
inpSlug.addEventListener('input', resetState);
inpUrl.focus();
inpUrl.select();
});
req.addEventListener('error', () => uiError('Connection Error'));
if (inpSlug.value)
req.open('PUT', '/'+encodeURIComponent(inpSlug.value));
else
req.open('POST', '/');
req.setRequestHeader('Content-Type', 'application/json');
req.send(JSON.stringify({url: encodeURI(inpUrl.value)}));
}
async function copyUrl(e) {
await navigator.clipboard.writeText(encodeURI(inpUrl.value));
btn.textContent = 'Copied!';
}
function resetState () {
inpUrl.removeEventListener('input', resetState);
inpSlug.removeEventListener('input', resetState);
btn.removeEventListener('click', copyUrl);
btn.classList.remove('error');
btn.textContent = 'Shorten URL';
btn.addEventListener('click', shorten);
}
btn.addEventListener('click', shorten);
})();
|
