diff options
Diffstat (limited to 'src/MenuItem.mjs')
-rw-r--r-- | src/MenuItem.mjs | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs index fe0bd99..864bc05 100644 --- a/src/MenuItem.mjs +++ b/src/MenuItem.mjs | |||
@@ -1,6 +1,16 @@ | |||
1 | import { shiftByWindow } from './utils.mjs' | 1 | import { shiftByWindow } from './utils.mjs' |
2 | 2 | ||
3 | /** | ||
4 | * Item. Basic Element for menu item | ||
5 | * | ||
6 | * @extends {window.HTMLDivElement} | ||
7 | */ | ||
3 | export class Item extends window.HTMLDivElement { | 8 | export class Item extends window.HTMLDivElement { |
9 | /** | ||
10 | * constructor. | ||
11 | * | ||
12 | * @param {} | ||
13 | */ | ||
4 | constructor ({ text, innerHTML, onclick, style, className, onmouseover }) { | 14 | constructor ({ text, innerHTML, onclick, style, className, onmouseover }) { |
5 | super() | 15 | super() |
6 | this.innerHTML = innerHTML ?? text | 16 | this.innerHTML = innerHTML ?? text |
@@ -18,7 +28,17 @@ export class Item extends window.HTMLDivElement { | |||
18 | } | 28 | } |
19 | window.customElements.define('menu-item', Item, { extends: 'div' }) | 29 | window.customElements.define('menu-item', Item, { extends: 'div' }) |
20 | 30 | ||
31 | /** | ||
32 | * Folder. Basic Element for menu item, it generate submenu on hover | ||
33 | * | ||
34 | * @extends {window.HTMLDivElement} | ||
35 | */ | ||
21 | export class Folder extends window.HTMLDivElement { | 36 | export class Folder extends window.HTMLDivElement { |
37 | /** | ||
38 | * constructor. | ||
39 | * | ||
40 | * @param {} | ||
41 | */ | ||
22 | constructor ({ text, innerHTML, items }) { | 42 | constructor ({ text, innerHTML, items }) { |
23 | super() | 43 | super() |
24 | this.innerHTML = innerHTML ?? text | 44 | this.innerHTML = innerHTML ?? text |
@@ -44,6 +64,11 @@ export class Folder extends window.HTMLDivElement { | |||
44 | } | 64 | } |
45 | window.customElements.define('menu-folder', Folder, { extends: 'div' }) | 65 | window.customElements.define('menu-folder', Folder, { extends: 'div' }) |
46 | 66 | ||
67 | /** | ||
68 | * pickMapItem. | ||
69 | * | ||
70 | * @param {Function[]} options.utils | ||
71 | */ | ||
47 | export const pickMapItem = ({ utils }) => | 72 | export const pickMapItem = ({ utils }) => |
48 | new Folder({ | 73 | new Folder({ |
49 | innerHTML: '<span>Maps<span><span class="info">(Tab)</span>', | 74 | innerHTML: '<span>Maps<span><span class="info">(Tab)</span>', |
@@ -59,6 +84,12 @@ export const pickMapItem = ({ utils }) => | |||
59 | ) | 84 | ) |
60 | }) | 85 | }) |
61 | 86 | ||
87 | /** | ||
88 | * pickBlockItem. | ||
89 | * | ||
90 | * @param {HTMLElement[]} options.blocks | ||
91 | * @param {Function[]} options.utils | ||
92 | */ | ||
62 | export const pickBlockItem = ({ blocks, utils }) => | 93 | export const pickBlockItem = ({ blocks, utils }) => |
63 | new Folder({ | 94 | new Folder({ |
64 | innerHTML: '<span>Blocks<span><span class="info">(n/p)</span>', | 95 | innerHTML: '<span>Blocks<span><span class="info">(n/p)</span>', |
@@ -92,6 +123,12 @@ export const pickBlockItem = ({ blocks, utils }) => | |||
92 | ) | 123 | ) |
93 | }) | 124 | }) |
94 | 125 | ||
126 | /** | ||
127 | * pickLayoutItem. | ||
128 | * | ||
129 | * @param {HTEMElement} options.container | ||
130 | * @param {String[]} options.layouts | ||
131 | */ | ||
95 | export const pickLayoutItem = ({ container, layouts }) => | 132 | export const pickLayoutItem = ({ container, layouts }) => |
96 | new Folder({ | 133 | new Folder({ |
97 | innerHTML: '<span>Layouts<span><span class="info">(x)</span>', | 134 | innerHTML: '<span>Layouts<span><span class="info">(x)</span>', |
@@ -115,6 +152,12 @@ export const pickLayoutItem = ({ container, layouts }) => | |||
115 | ] | 152 | ] |
116 | }) | 153 | }) |
117 | 154 | ||
155 | /** | ||
156 | * addGeoLink. | ||
157 | * | ||
158 | * @param {Function[]} options.utils | ||
159 | * @param {Range} range | ||
160 | */ | ||
118 | export const addGeoLink = ({ utils }, range) => | 161 | export const addGeoLink = ({ utils }, range) => |
119 | new Item({ | 162 | new Item({ |
120 | text: 'Add GeoLink', | 163 | text: 'Add GeoLink', |
@@ -138,7 +181,17 @@ export const addGeoLink = ({ utils }, range) => | |||
138 | } | 181 | } |
139 | }) | 182 | }) |
140 | 183 | ||
184 | /** | ||
185 | * Suggestion. Menu Item for editor suggestion | ||
186 | * | ||
187 | * @extends {Item} | ||
188 | */ | ||
141 | export class Suggestion extends Item { | 189 | export class Suggestion extends Item { |
190 | /** | ||
191 | * constructor. | ||
192 | * | ||
193 | * @param {} | ||
194 | */ | ||
142 | constructor ({ text, replace, cm }) { | 195 | constructor ({ text, replace, cm }) { |
143 | super({ text }) | 196 | super({ text }) |
144 | this.replace = replace | 197 | this.replace = replace |
@@ -165,6 +218,13 @@ export class Suggestion extends Item { | |||
165 | } | 218 | } |
166 | window.customElements.define('menu-item-suggestion', Suggestion, { extends: 'div' }) | 219 | window.customElements.define('menu-item-suggestion', Suggestion, { extends: 'div' }) |
167 | 220 | ||
221 | /** | ||
222 | * renderResults. return a menu item for reporting render results | ||
223 | * | ||
224 | * @param {Object} options.modal -- Ojbect of plain-modal | ||
225 | * @param {HTMLElement} options.modalContent | ||
226 | * @param {HTMLElement} map -- Rendered map element | ||
227 | */ | ||
168 | export const renderResults = ({ modal, modalContent }, map) => | 228 | export const renderResults = ({ modal, modalContent }, map) => |
169 | new Item({ | 229 | new Item({ |
170 | text: 'Render Results', | 230 | text: 'Render Results', |
@@ -215,6 +275,13 @@ export const renderResults = ({ modal, modalContent }, map) => | |||
215 | } | 275 | } |
216 | }) | 276 | }) |
217 | 277 | ||
278 | /** | ||
279 | * printObject. Generate <details> in parent element based on Ojbect properties | ||
280 | * | ||
281 | * @param {Object} obj | ||
282 | * @param {HTMLElement} parentElement | ||
283 | * @param {String} name | ||
284 | */ | ||
218 | function printObject (obj, parentElement, name = null) { | 285 | function printObject (obj, parentElement, name = null) { |
219 | // Create <details> and <summary> inside | 286 | // Create <details> and <summary> inside |
220 | const detailsEle = document.createElement('details') | 287 | const detailsEle = document.createElement('details') |
@@ -255,12 +322,22 @@ function printObject (obj, parentElement, name = null) { | |||
255 | } | 322 | } |
256 | } | 323 | } |
257 | 324 | ||
325 | /** | ||
326 | * toggleBlockFocus. Menu Item for toggling focus on a block | ||
327 | * | ||
328 | * @param {HTMLElement} block | ||
329 | */ | ||
258 | export const toggleBlockFocus = block => | 330 | export const toggleBlockFocus = block => |
259 | new Item({ | 331 | new Item({ |
260 | text: 'Toggle Focus', | 332 | text: 'Toggle Focus', |
261 | onclick: () => block.classList.toggle('focus') | 333 | onclick: () => block.classList.toggle('focus') |
262 | }) | 334 | }) |
263 | 335 | ||
336 | /** | ||
337 | * toggleMapFocus. Menu Item for toggling focus on a map | ||
338 | * | ||
339 | * @param {HTMLElement} map | ||
340 | */ | ||
264 | export const toggleMapFocus = map => | 341 | export const toggleMapFocus = map => |
265 | new Item({ | 342 | new Item({ |
266 | text: 'Toggle Focus', | 343 | text: 'Toggle Focus', |