|
1 | | -;(() => { |
2 | | - const instanceEl = document.querySelector('input[name="instance"]') |
3 | | - |
4 | | - function instanceUrl() { |
5 | | - const url = instanceEl.value |
6 | | - |
7 | | - return url.substr(-1) === "/" ? url : `${url}/` |
8 | | - } |
9 | | - |
10 | | - function onChangeInstanceUrl() { |
11 | | - const url = instanceUrl() |
12 | | - |
13 | | - Array.from(document.querySelectorAll(".instance")).forEach((el) => { |
14 | | - el.innerText = url |
15 | | - }) |
16 | | - } |
17 | | - |
18 | | - function onShowClick({ target }) { |
19 | | - target.href = [instanceUrl(), target.dataset.path].join("") |
20 | | - return false |
21 | | - } |
22 | | - |
23 | | - function onCopyClick({ target }) { |
24 | | - const href = [instanceUrl(), target.dataset.path].join("") |
25 | | - const el = document.createElement("span") |
26 | | - el.classList.add("js__copy-element") |
27 | | - el.innerText = href |
28 | | - |
29 | | - document.body.appendChild(el) |
30 | | - copyElementContents(el, target) |
31 | | - return false |
32 | | - } |
33 | | - |
34 | | - function copyElementContents(el, triggerEl) { |
35 | | - el.focus() |
36 | | - window.getSelection().selectAllChildren(el) |
37 | | - document.execCommand("copy") |
38 | | - |
39 | | - triggerEl.classList.add("copied") |
40 | | - window.setTimeout(() => { |
41 | | - el.blur() |
42 | | - el.remove() |
43 | | - triggerEl.classList.remove("copied") |
44 | | - triggerEl.blur() |
45 | | - }, 1000) |
46 | | - } |
47 | | - |
48 | | - // init |
49 | | - document.querySelector("#configs").addEventListener("click", (event) => { |
50 | | - if (event.target.dataset.bindClick === "show") { |
51 | | - return onShowClick(event) |
52 | | - } else if (event.target.dataset.bindClick === "copy") { |
53 | | - return onCopyClick(event) |
| 1 | +const App = { |
| 2 | + init() { |
| 3 | + this.instanceEl = document.querySelector('input[name="instance"]'); |
| 4 | + if (!this.instanceEl) return; |
| 5 | + |
| 6 | + this.configsEl = document.querySelector("#configs"); |
| 7 | + this.bindEvents(); |
| 8 | + this.updateInstanceUrl(); |
| 9 | + }, |
| 10 | + |
| 11 | + bindEvents() { |
| 12 | + this.configsEl.addEventListener("click", (event) => { |
| 13 | + const { bindClick } = event.target.dataset; |
| 14 | + if (bindClick === "show") { |
| 15 | + this.handleShowClick(event); |
| 16 | + } else if (bindClick === "copy") { |
| 17 | + this.handleCopyClick(event); |
| 18 | + } |
| 19 | + }); |
| 20 | + |
| 21 | + this.instanceEl.addEventListener("blur", this.updateInstanceUrl.bind(this)); |
| 22 | + }, |
| 23 | + |
| 24 | + getInstanceUrl() { |
| 25 | + const url = this.instanceEl.value; |
| 26 | + return url.endsWith("/") ? url : `${url}/`; |
| 27 | + }, |
| 28 | + |
| 29 | + updateInstanceUrl() { |
| 30 | + const url = this.getInstanceUrl(); |
| 31 | + document.querySelectorAll(".instance").forEach((el) => { |
| 32 | + if (el instanceof HTMLElement) { |
| 33 | + el.innerText = url; |
| 34 | + } |
| 35 | + }); |
| 36 | + }, |
| 37 | + |
| 38 | + handleShowClick(event) { |
| 39 | + const { target } = event; |
| 40 | + target.href = `${this.getInstanceUrl()}${target.dataset.path}`; |
| 41 | + }, |
| 42 | + |
| 43 | + async handleCopyClick(event) { |
| 44 | + const { target } = event; |
| 45 | + const href = `${this.getInstanceUrl()}${target.dataset.path}`; |
| 46 | + |
| 47 | + try { |
| 48 | + await navigator.clipboard.writeText(href); |
| 49 | + this.showCopiedState(target); |
| 50 | + } catch (err) { |
| 51 | + console.error("Failed to copy: ", err); |
54 | 52 | } |
55 | | - }) |
| 53 | + }, |
| 54 | + |
| 55 | + showCopiedState(triggerEl) { |
| 56 | + triggerEl.classList.add("copied"); |
| 57 | + setTimeout(() => { |
| 58 | + triggerEl.classList.remove("copied"); |
| 59 | + triggerEl.blur(); |
| 60 | + }, 1000); |
| 61 | + }, |
| 62 | +}; |
56 | 63 |
|
57 | | - instanceEl.addEventListener("blur", onChangeInstanceUrl) |
58 | | - onChangeInstanceUrl() |
59 | | -})() |
| 64 | +document.addEventListener("DOMContentLoaded", () => { |
| 65 | + App.init(); |
| 66 | +}); |
0 commit comments