aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/MenuItem.mjs
diff options
context:
space:
mode:
Diffstat (limited to 'src/MenuItem.mjs')
-rw-r--r--src/MenuItem.mjs87
1 files changed, 35 insertions, 52 deletions
diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index b4d4650..1ab7d5f 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -1,6 +1,3 @@
1import { createGeoLink } from './dumbymap';
2import { scrollToBlock } from './dumbyUtils';
3
4class Item extends HTMLDivElement { 1class Item extends HTMLDivElement {
5 constructor({ text, innerHTML, onclick }) { 2 constructor({ text, innerHTML, onclick }) {
6 super(); 3 super();
@@ -35,10 +32,10 @@ class Folder extends HTMLDivElement {
35} 32}
36window.customElements.define('menu-folder', Folder, { extends: 'div' }); 33window.customElements.define('menu-folder', Folder, { extends: 'div' });
37 34
38export const pickMapItem = dumbymap => 35export const pickMapItem = ({ utils }) =>
39 new Folder({ 36 new Folder({
40 innerHTML: '<span>Maps<span><span class="info">(Tab)</span>', 37 innerHTML: '<span>Maps<span><span class="info">(Tab)</span>',
41 items: dumbymap.utils.renderedMaps().map( 38 items: utils.renderedMaps().map(
42 map => 39 map =>
43 new Item({ 40 new Item({
44 text: map.id, 41 text: map.id,
@@ -50,10 +47,10 @@ export const pickMapItem = dumbymap =>
50 ), 47 ),
51 }); 48 });
52 49
53export const pickBlockItem = dumbymap => 50export const pickBlockItem = ({ blocks, utils }) =>
54 new Folder({ 51 new Folder({
55 innerHTML: '<span>Blocks<span><span class="info">(n/p)</span>', 52 innerHTML: '<span>Blocks<span><span class="info">(n/p)</span>',
56 items: dumbymap.blocks.map( 53 items: blocks.map(
57 (block, index) => 54 (block, index) =>
58 new Item({ 55 new Item({
59 text: 56 text:
@@ -64,67 +61,54 @@ export const pickBlockItem = dumbymap =>
64 .concat(' ...'), 61 .concat(' ...'),
65 onclick: () => { 62 onclick: () => {
66 block.classList.add('focus'); 63 block.classList.add('focus');
67 scrollToBlock(block); 64 utils.scrollToBlock(block);
68 }, 65 },
69 }), 66 }),
70 ), 67 ),
71 }); 68 });
72 69
73export const pickLayoutItem = dumbymap => 70export const pickLayoutItem = ({ container, layouts }) =>
74 new Folder({ 71 new Folder({
75 innerHTML: '<span>Layouts<span><span class="info">(x)</span>', 72 innerHTML: '<span>Layouts<span><span class="info">(x)</span>',
76 items: [ 73 items: [
77 new Item({ 74 new Item({
78 text: 'EDIT', 75 text: 'EDIT',
79 onclick: () => 76 onclick: () =>
80 dumbymap.container 77 container.closest('[data-mode]').setAttribute('data-mode', 'editing'),
81 .closest('[data-mode]')
82 .setAttribute('data-mode', 'editing'),
83 }), 78 }),
84 ...dumbymap.layouts.map( 79 ...layouts.map(
85 layout => 80 layout =>
86 new Item({ 81 new Item({
87 text: layout.name, 82 text: layout.name,
88 onclick: () => 83 onclick: () => container.setAttribute('data-layout', layout.name),
89 dumbymap.container.setAttribute('data-layout', layout.name),
90 }), 84 }),
91 ), 85 ),
92 ], 86 ],
93 }); 87 });
94 88
95export class GeoLink { 89export const addGeoLink = ({ utils }, range) =>
96 constructor({ range }) { 90 new Item({
97 this.range = range; 91 text: 'Add GeoLink',
98 } 92 onclick: () => {
99 93 const content = range.toString();
100 createElement = () => { 94 // FIXME Apply geolink only on matching sub-range
101 const element = document.createElement('div'); 95 const match = content.match(/(^\D*[\d.]+)\D+([\d.]+)\D*$/);
102 element.className = 'menu-item'; 96 if (!match) return false;
103 element.innerText = 'Add GeoLink'; 97
104 element.onclick = this.addGeoLinkbyRange; 98 const [x, y] = match.slice(1);
105 99 const anchor = document.createElement('a');
106 return element; 100 anchor.textContent = content;
107 }; 101 // FIXME apply WGS84
108 102 anchor.href = `geo:${y},${x}?xy=${x},${y}`;
109 addGeoLinkbyRange = () => { 103
110 const range = this.range; 104 // FIXME
111 const content = range.toString(); 105 if (utils.createGeoLink(anchor)) {
112 // FIXME Apply geolink only on matching sub-range 106 range.deleteContents();
113 const match = content.match(/(^\D*[\d.]+)\D+([\d.]+)\D*$/); 107 range.insertNode(anchor);
114 if (!match) return false; 108 }
115 109 },
116 const [x, y] = match.slice(1); 110 });
117 const anchor = document.createElement('a');
118 anchor.textContent = content;
119 // FIXME apply WGS84
120 anchor.href = `geo:${y},${x}?xy=${x},${y}`;
121 111
122 if (createGeoLink(anchor)) {
123 range.deleteContents();
124 range.insertNode(anchor);
125 }
126 };
127}
128export class Suggestion { 112export class Suggestion {
129 constructor({ text, replace }) { 113 constructor({ text, replace }) {
130 this.text = text; 114 this.text = text;
@@ -161,11 +145,10 @@ export class Suggestion {
161 } 145 }
162} 146}
163 147
164export const renderResults = (dumbymap, map) => 148export const renderResults = ({ modal, modalContent }, map) =>
165 new Item({ 149 new Item({
166 text: 'Render Results', 150 text: 'Render Results',
167 onclick: e => { 151 onclick: () => {
168 const modal = dumbymap.modal;
169 modal.open(); 152 modal.open();
170 modal.overlayBlur = 3; 153 modal.overlayBlur = 3;
171 modal.closeByEscKey = false; 154 modal.closeByEscKey = false;
@@ -175,7 +158,7 @@ export const renderResults = (dumbymap, map) =>
175 map.renderer.results.forEach(result => 158 map.renderer.results.forEach(result =>
176 printObject( 159 printObject(
177 result, 160 result,
178 dumbymap.modalContent, 161 modalContent,
179 `${result.func.name} (${result.state})`, 162 `${result.func.name} (${result.state})`,
180 ), 163 ),
181 ); 164 );
@@ -195,7 +178,7 @@ function printObject(obj, parentElement, name) {
195 if (typeof value === 'object') { 178 if (typeof value === 'object') {
196 printObject(value, detailsEle, key); 179 printObject(value, detailsEle, key);
197 } else { 180 } else {
198 let valueString = 181 const valueString =
199 typeof value === 'function' 182 typeof value === 'function'
200 ? `<pre>${value}</pre>` 183 ? `<pre>${value}</pre>`
201 : value ?? typeof value; 184 : value ?? typeof value;