aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/MenuItem.mjs
blob: 2f9aff46166ca98d03a5f39c099082e6f2a0ae15 (plain)
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
import { createGeoLink } from "./dumbymap";

export function nextMap() {
  const element = document.createElement("div");
  element.className = "menu-item";
  element.innerHTML = 'Next Map <span class="info">(Tab)</span>';
  element.onclick = () => this.utils.focusNextMap();

  return element;
}

export function nextBlock() {
  const element = document.createElement("div");
  element.className = "menu-item";
  element.innerHTML = 'Next Block <span class="info">(n)</span>';
  element.onclick = () => this.utils.focusNextBlock();

  return element;
}

export function nextLayout() {
  const element = document.createElement("div");
  element.className = "menu-item";
  element.innerHTML = 'Next Layout <span class="info">(x)</span>';
  element.onclick = () => this.utils.switchToNextLayout();

  return element;
}

export class GeoLink {
  constructor({ range }) {
    this.range = range;
  }

  createElement = () => {
    const element = document.createElement("div");
    element.className = "menu-item";
    element.innerText = "Add GeoLink";
    element.onclick = this.addGeoLinkbyRange;

    return element;
  };

  addGeoLinkbyRange = () => {
    const range = this.range;
    const content = range.toString();
    // FIXME Apply geolink only on matching sub-range
    const match = content.match(/(^\D*[\d.]+)\D+([\d.]+)\D*$/);
    if (!match) return false;

    const [x, y] = match.slice(1);
    const anchor = document.createElement("a");
    anchor.textContent = content;
    // FIXME apply WGS84
    anchor.href = `geo:${y},${x}?xy=${x},${y}`;

    if (createGeoLink(anchor)) {
      range.deleteContents();
      range.insertNode(anchor);
    }
  };
}
export class Suggestion {
  constructor({ text, replace }) {
    this.text = text;
    this.replace = replace;
  }

  createElement(codemirror) {
    const option = document.createElement("div");
    if (this.text.startsWith("<")) {
      option.innerHTML = this.text;
    } else {
      option.innerText = this.text;
    }
    option.classList.add("container__suggestion");
    option.onmouseover = () => {
      Array.from(option.parentElement?.children ?? []).forEach(s =>
        s.classList.remove("focus"),
      );
      option.classList.add("focus");
    };
    option.onmouseout = () => {
      option.classList.remove("focus");
    };
    option.onclick = () => {
      const anchor = codemirror.getCursor();
      codemirror.setSelection(anchor, { ...anchor, ch: 0 });
      codemirror.replaceSelection(this.replace);
      codemirror.focus();
      const newAnchor = { ...anchor, ch: this.replace.length };
      codemirror.setCursor(newAnchor);
    };

    return option;
  }
}