diff options
| author | Hsieh Chin Fan <pham@topo.tw> | 2024-09-25 02:05:20 +0800 |
|---|---|---|
| committer | Hsieh Chin Fan <pham@topo.tw> | 2024-09-26 19:40:48 +0800 |
| commit | 7cc27dada3d68d54ad71d81ba56d0360cb1cdb68 (patch) | |
| tree | 53c3d617b50bb515f5b64be90fa6c05790c09ad7 | |
| parent | c51da12b17e26f7802bc9ba39f7e7089cbeb0cbe (diff) | |
feat: add menu item for adding Geo-Link
| -rw-r--r-- | src/editor.mjs | 51 |
1 files changed, 50 insertions, 1 deletions
diff --git a/src/editor.mjs b/src/editor.mjs index ab5db42..32929ea 100644 --- a/src/editor.mjs +++ b/src/editor.mjs | |||
| @@ -1,6 +1,6 @@ | |||
| 1 | /*global EasyMDE*/ | 1 | /*global EasyMDE*/ |
| 2 | /*eslint no-undef: "error"*/ | 2 | /*eslint no-undef: "error"*/ |
| 3 | import { markdown2HTML, generateMaps } from './dumbymap' | 3 | import { markdown2HTML, generateMaps, createGeoLink } from './dumbymap' |
| 4 | import { defaultAliases, parseConfigsFromYaml } from 'mapclay' | 4 | import { defaultAliases, parseConfigsFromYaml } from 'mapclay' |
| 5 | import { Suggestion } from './MenuItem' | 5 | import { Suggestion } from './MenuItem' |
| 6 | 6 | ||
| @@ -575,5 +575,54 @@ layoutObserver.observe(HtmlContainer, { | |||
| 575 | attributeOldValue: true | 575 | attributeOldValue: true |
| 576 | }); | 576 | }); |
| 577 | // }}} | 577 | // }}} |
| 578 | // ContextMenu {{{ | ||
| 579 | const addGeoLinkbyRange = (range) => { | ||
| 580 | const content = range.toString() | ||
| 581 | const match = content.match(/(^\D*[\d\.]+)\D+([\d\.]+)\D*$/) | ||
| 582 | // TODO add more suggestion | ||
| 583 | if (!match) return false | ||
| 584 | |||
| 585 | const [x, y] = match.slice(1) | ||
| 586 | const anchor = document.createElement('a') | ||
| 587 | anchor.textContent = content | ||
| 588 | // FIXME apply WGS84 | ||
| 589 | anchor.href = `geo:${y},${x}?xy=${x},${y}` | ||
| 590 | |||
| 591 | if (createGeoLink(anchor)) { | ||
| 592 | range.deleteContents() | ||
| 593 | range.insertNode(anchor) | ||
| 594 | } | ||
| 595 | |||
| 596 | } | ||
| 597 | document.oncontextmenu = (e) => { | ||
| 598 | const selection = document.getSelection() | ||
| 599 | const range = selection.getRangeAt(0) | ||
| 600 | if (!cm.hasFocus() && selection) { | ||
| 601 | e.preventDefault() | ||
| 602 | menu.innerHTML = '' | ||
| 603 | menu.style.cssText = `display: block; left: ${e.clientX + 10}px; top: ${e.clientY + 5}px; width: 100px; height: 100px;` | ||
| 604 | menu.innerHTML = '<div style="cursor: pointer;">Create Geo-Link</div>' | ||
| 605 | menu.firstChild.onclick = () => { | ||
| 606 | // menu.style.display = 'none' | ||
| 607 | addGeoLinkbyRange(range) | ||
| 608 | } | ||
| 609 | } | ||
| 610 | } | ||
| 611 | |||
| 612 | const actionOutsideMenu = (e) => { | ||
| 613 | if (menu.style.display === 'none' || cm.hasFocus()) return | ||
| 614 | const rect = menu.getBoundingClientRect() | ||
| 615 | if (e.clientX < rect.left | ||
| 616 | || e.clientX > rect.left + rect.width | ||
| 617 | || e.clientY < rect.top | ||
| 618 | || e.clientY > rect.top + rect.height | ||
| 619 | ) { | ||
| 620 | menu.style.display = 'none' | ||
| 621 | } | ||
| 622 | } | ||
| 623 | |||
| 624 | document.addEventListener('click', actionOutsideMenu) | ||
| 625 | |||
| 626 | // }}} | ||
| 578 | 627 | ||
| 579 | // vim: sw=2 ts=2 foldmethod=marker foldmarker={{{,}}} | 628 | // vim: sw=2 ts=2 foldmethod=marker foldmarker={{{,}}} |