diff options
-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={{{,}}} |