diff options
author | Hsieh Chin Fan <pham@topo.tw> | 2024-09-28 17:47:52 +0800 |
---|---|---|
committer | Hsieh Chin Fan <pham@topo.tw> | 2024-09-28 17:47:52 +0800 |
commit | 933eba7dc3bdc979fefadd47388b20b8360e1d6b (patch) | |
tree | 9b88908d88a025aaaa1d70306afde8e49fedab27 /src/MenuItem.mjs | |
parent | 5a64dfc8bb8169e72b7c1164f18c6912e9e3576e (diff) |
style: prettier
Diffstat (limited to 'src/MenuItem.mjs')
-rw-r--r-- | src/MenuItem.mjs | 102 |
1 files changed, 51 insertions, 51 deletions
diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs index 85ab1a2..2f9aff4 100644 --- a/src/MenuItem.mjs +++ b/src/MenuItem.mjs | |||
@@ -1,97 +1,97 @@ | |||
1 | import { createGeoLink } from './dumbymap' | 1 | import { createGeoLink } from "./dumbymap"; |
2 | 2 | ||
3 | export function nextMap() { | 3 | export function nextMap() { |
4 | const element = document.createElement('div') | 4 | const element = document.createElement("div"); |
5 | element.className = 'menu-item' | 5 | element.className = "menu-item"; |
6 | element.innerHTML = 'Next Map <span class="info">(Tab)</span>' | 6 | element.innerHTML = 'Next Map <span class="info">(Tab)</span>'; |
7 | element.onclick = () => this.utils.focusNextMap() | 7 | element.onclick = () => this.utils.focusNextMap(); |
8 | 8 | ||
9 | return element | 9 | return element; |
10 | } | 10 | } |
11 | 11 | ||
12 | export function nextBlock() { | 12 | export function nextBlock() { |
13 | const element = document.createElement('div') | 13 | const element = document.createElement("div"); |
14 | element.className = 'menu-item' | 14 | element.className = "menu-item"; |
15 | element.innerHTML = 'Next Block <span class="info">(n)</span>' | 15 | element.innerHTML = 'Next Block <span class="info">(n)</span>'; |
16 | element.onclick = () => this.utils.focusNextBlock() | 16 | element.onclick = () => this.utils.focusNextBlock(); |
17 | 17 | ||
18 | return element | 18 | return element; |
19 | } | 19 | } |
20 | 20 | ||
21 | export function nextLayout() { | 21 | export function nextLayout() { |
22 | const element = document.createElement('div') | 22 | const element = document.createElement("div"); |
23 | element.className = 'menu-item' | 23 | element.className = "menu-item"; |
24 | element.innerHTML = 'Next Layout <span class="info">(x)</span>' | 24 | element.innerHTML = 'Next Layout <span class="info">(x)</span>'; |
25 | element.onclick = () => this.utils.switchToNextLayout() | 25 | element.onclick = () => this.utils.switchToNextLayout(); |
26 | 26 | ||
27 | return element | 27 | return element; |
28 | } | 28 | } |
29 | 29 | ||
30 | export class GeoLink { | 30 | export class GeoLink { |
31 | |||
32 | constructor({ range }) { | 31 | constructor({ range }) { |
33 | this.range = range | 32 | this.range = range; |
34 | } | 33 | } |
35 | 34 | ||
36 | createElement = () => { | 35 | createElement = () => { |
37 | const element = document.createElement('div') | 36 | const element = document.createElement("div"); |
38 | element.className = 'menu-item' | 37 | element.className = "menu-item"; |
39 | element.innerText = "Add GeoLink" | 38 | element.innerText = "Add GeoLink"; |
40 | element.onclick = this.addGeoLinkbyRange | 39 | element.onclick = this.addGeoLinkbyRange; |
41 | 40 | ||
42 | return element | 41 | return element; |
43 | } | 42 | }; |
44 | 43 | ||
45 | addGeoLinkbyRange = () => { | 44 | addGeoLinkbyRange = () => { |
46 | const range = this.range | 45 | const range = this.range; |
47 | const content = range.toString() | 46 | const content = range.toString(); |
48 | // FIXME Apply geolink only on matching sub-range | 47 | // FIXME Apply geolink only on matching sub-range |
49 | const match = content.match(/(^\D*[\d.]+)\D+([\d.]+)\D*$/) | 48 | const match = content.match(/(^\D*[\d.]+)\D+([\d.]+)\D*$/); |
50 | if (!match) return false | 49 | if (!match) return false; |
51 | 50 | ||
52 | const [x, y] = match.slice(1) | 51 | const [x, y] = match.slice(1); |
53 | const anchor = document.createElement('a') | 52 | const anchor = document.createElement("a"); |
54 | anchor.textContent = content | 53 | anchor.textContent = content; |
55 | // FIXME apply WGS84 | 54 | // FIXME apply WGS84 |
56 | anchor.href = `geo:${y},${x}?xy=${x},${y}` | 55 | anchor.href = `geo:${y},${x}?xy=${x},${y}`; |
57 | 56 | ||
58 | if (createGeoLink(anchor)) { | 57 | if (createGeoLink(anchor)) { |
59 | range.deleteContents() | 58 | range.deleteContents(); |
60 | range.insertNode(anchor) | 59 | range.insertNode(anchor); |
61 | } | 60 | } |
62 | } | 61 | }; |
63 | } | 62 | } |
64 | export class Suggestion { | 63 | export class Suggestion { |
65 | constructor({ text, replace }) { | 64 | constructor({ text, replace }) { |
66 | this.text = text | 65 | this.text = text; |
67 | this.replace = replace | 66 | this.replace = replace; |
68 | } | 67 | } |
69 | 68 | ||
70 | createElement(codemirror) { | 69 | createElement(codemirror) { |
71 | const option = document.createElement('div'); | 70 | const option = document.createElement("div"); |
72 | if (this.text.startsWith('<')) { | 71 | if (this.text.startsWith("<")) { |
73 | option.innerHTML = this.text; | 72 | option.innerHTML = this.text; |
74 | } else { | 73 | } else { |
75 | option.innerText = this.text; | 74 | option.innerText = this.text; |
76 | } | 75 | } |
77 | option.classList.add('container__suggestion'); | 76 | option.classList.add("container__suggestion"); |
78 | option.onmouseover = () => { | 77 | option.onmouseover = () => { |
79 | Array.from(option.parentElement?.children ?? []) | 78 | Array.from(option.parentElement?.children ?? []).forEach(s => |
80 | .forEach(s => s.classList.remove('focus')) | 79 | s.classList.remove("focus"), |
81 | option.classList.add('focus') | 80 | ); |
82 | } | 81 | option.classList.add("focus"); |
82 | }; | ||
83 | option.onmouseout = () => { | 83 | option.onmouseout = () => { |
84 | option.classList.remove('focus') | 84 | option.classList.remove("focus"); |
85 | } | 85 | }; |
86 | option.onclick = () => { | 86 | option.onclick = () => { |
87 | const anchor = codemirror.getCursor() | 87 | const anchor = codemirror.getCursor(); |
88 | codemirror.setSelection(anchor, { ...anchor, ch: 0 }) | 88 | codemirror.setSelection(anchor, { ...anchor, ch: 0 }); |
89 | codemirror.replaceSelection(this.replace) | 89 | codemirror.replaceSelection(this.replace); |
90 | codemirror.focus(); | 90 | codemirror.focus(); |
91 | const newAnchor = { ...anchor, ch: this.replace.length } | 91 | const newAnchor = { ...anchor, ch: this.replace.length }; |
92 | codemirror.setCursor(newAnchor); | 92 | codemirror.setCursor(newAnchor); |
93 | }; | 93 | }; |
94 | 94 | ||
95 | return option | 95 | return option; |
96 | } | 96 | } |
97 | } | 97 | } |