aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/MenuItem.mjs
diff options
context:
space:
mode:
Diffstat (limited to 'src/MenuItem.mjs')
-rw-r--r--src/MenuItem.mjs77
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 @@
1import { shiftByWindow } from './utils.mjs' 1import { shiftByWindow } from './utils.mjs'
2 2
3/**
4 * Item. Basic Element for menu item
5 *
6 * @extends {window.HTMLDivElement}
7 */
3export class Item extends window.HTMLDivElement { 8export 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}
19window.customElements.define('menu-item', Item, { extends: 'div' }) 29window.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 */
21export class Folder extends window.HTMLDivElement { 36export 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}
45window.customElements.define('menu-folder', Folder, { extends: 'div' }) 65window.customElements.define('menu-folder', Folder, { extends: 'div' })
46 66
67/**
68 * pickMapItem.
69 *
70 * @param {Function[]} options.utils
71 */
47export const pickMapItem = ({ utils }) => 72export 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 */
62export const pickBlockItem = ({ blocks, utils }) => 93export 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 */
95export const pickLayoutItem = ({ container, layouts }) => 132export 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 */
118export const addGeoLink = ({ utils }, range) => 161export 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 */
141export class Suggestion extends Item { 189export 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}
166window.customElements.define('menu-item-suggestion', Suggestion, { extends: 'div' }) 219window.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 */
168export const renderResults = ({ modal, modalContent }, map) => 228export 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 */
218function printObject (obj, parentElement, name = null) { 285function 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 */
258export const toggleBlockFocus = block => 330export 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 */
264export const toggleMapFocus = map => 341export const toggleMapFocus = map =>
265 new Item({ 342 new Item({
266 text: 'Toggle Focus', 343 text: 'Toggle Focus',