diff options
author | Hsieh Chin Fan <pham@topo.tw> | 2024-10-04 13:38:08 +0800 |
---|---|---|
committer | Hsieh Chin Fan <pham@topo.tw> | 2024-10-04 15:11:28 +0800 |
commit | dbd3b03ec842c446488135853ed380f5a75adb27 (patch) | |
tree | 00fa406566361a308808add3cdc445ed892e81ec /src/editor.mjs | |
parent | ec23491d3a39f9f9201449f14a536b7540a8c281 (diff) |
docs: add jsdoc
Diffstat (limited to 'src/editor.mjs')
-rw-r--r-- | src/editor.mjs | 83 |
1 files changed, 73 insertions, 10 deletions
diff --git a/src/editor.mjs b/src/editor.mjs index 36f0fdc..e9ee84a 100644 --- a/src/editor.mjs +++ b/src/editor.mjs | |||
@@ -23,6 +23,9 @@ new window.MutationObserver(() => { | |||
23 | attributeFilter: ['data-mode'], | 23 | attributeFilter: ['data-mode'], |
24 | attributeOldValue: true | 24 | attributeOldValue: true |
25 | }) | 25 | }) |
26 | /** | ||
27 | * toggle editing mode | ||
28 | */ | ||
26 | const toggleEditing = () => { | 29 | const toggleEditing = () => { |
27 | const mode = context.getAttribute('data-mode') | 30 | const mode = context.getAttribute('data-mode') |
28 | context.setAttribute('data-mode', mode === 'editing' ? '' : 'editing') | 31 | context.setAttribute('data-mode', mode === 'editing' ? '' : 'editing') |
@@ -128,6 +131,11 @@ const editor = new EasyMDE({ | |||
128 | 131 | ||
129 | const cm = editor.codemirror | 132 | const cm = editor.codemirror |
130 | 133 | ||
134 | /** | ||
135 | * get state of website from hash string | ||
136 | * | ||
137 | * @param {String} hash | ||
138 | */ | ||
131 | const getStateFromHash = hash => { | 139 | const getStateFromHash = hash => { |
132 | const hashValue = hash.substring(1) | 140 | const hashValue = hash.substring(1) |
133 | const stateString = decodeURIComponent(hashValue) | 141 | const stateString = decodeURIComponent(hashValue) |
@@ -138,6 +146,11 @@ const getStateFromHash = hash => { | |||
138 | } | 146 | } |
139 | } | 147 | } |
140 | 148 | ||
149 | /** | ||
150 | * get editor content from hash string | ||
151 | * | ||
152 | * @param {} hash | ||
153 | */ | ||
141 | const getContentFromHash = hash => { | 154 | const getContentFromHash = hash => { |
142 | const state = getStateFromHash(hash) | 155 | const state = getStateFromHash(hash) |
143 | return state.content | 156 | return state.content |
@@ -154,7 +167,13 @@ if (contentFromHash) { | |||
154 | } | 167 | } |
155 | // }}} | 168 | // }}} |
156 | // Set up logic about editor content {{{ | 169 | // Set up logic about editor content {{{ |
157 | const afterMapRendered = _ => { | 170 | /** |
171 | * afterMapRendered. Callback of map rendered | ||
172 | * | ||
173 | * @param {HTEMLElement} map | ||
174 | */ | ||
175 | const afterMapRendered = map => { | ||
176 | console.info(map) | ||
158 | // mapHolder.oncontextmenu = (event) => { | 177 | // mapHolder.oncontextmenu = (event) => { |
159 | // event.preventDefault() | 178 | // event.preventDefault() |
160 | // const lonLat = mapHolder.renderer.unproject([event.x, event.y]) | 179 | // const lonLat = mapHolder.renderer.unproject([event.x, event.y]) |
@@ -164,7 +183,9 @@ const afterMapRendered = _ => { | |||
164 | markdown2HTML(HtmlContainer, editor.value()) | 183 | markdown2HTML(HtmlContainer, editor.value()) |
165 | dumbymap = generateMaps(HtmlContainer, afterMapRendered) | 184 | dumbymap = generateMaps(HtmlContainer, afterMapRendered) |
166 | 185 | ||
167 | // Quick hack to style lines inside code block | 186 | /** |
187 | * addClassToCodeLines. Quick hack to style lines inside code block | ||
188 | */ | ||
168 | const addClassToCodeLines = () => { | 189 | const addClassToCodeLines = () => { |
169 | const lines = cm.getLineHandle(0).parent.lines | 190 | const lines = cm.getLineHandle(0).parent.lines |
170 | let insideCodeBlock = false | 191 | let insideCodeBlock = false |
@@ -180,6 +201,11 @@ const addClassToCodeLines = () => { | |||
180 | } | 201 | } |
181 | addClassToCodeLines() | 202 | addClassToCodeLines() |
182 | 203 | ||
204 | /** | ||
205 | * completeForCodeBlock. | ||
206 | * | ||
207 | * @param {Object} change -- codemirror change object | ||
208 | */ | ||
183 | const completeForCodeBlock = change => { | 209 | const completeForCodeBlock = change => { |
184 | const line = change.to.line | 210 | const line = change.to.line |
185 | if (change.origin === '+input') { | 211 | if (change.origin === '+input') { |
@@ -234,6 +260,9 @@ const completeForCodeBlock = change => { | |||
234 | // } | 260 | // } |
235 | // })() | 261 | // })() |
236 | 262 | ||
263 | /** | ||
264 | * update content of HTML about Dumbymap | ||
265 | */ | ||
237 | const updateDumbyMap = () => { | 266 | const updateDumbyMap = () => { |
238 | markdown2HTML(HtmlContainer, editor.value()) | 267 | markdown2HTML(HtmlContainer, editor.value()) |
239 | // TODO Test if generate maps intantly is OK with map cache | 268 | // TODO Test if generate maps intantly is OK with map cache |
@@ -309,7 +338,11 @@ fetch(defaultApply) | |||
309 | }) | 338 | }) |
310 | .catch(err => console.warn(`Fail to get aliases from ${defaultApply}`, err)) | 339 | .catch(err => console.warn(`Fail to get aliases from ${defaultApply}`, err)) |
311 | // }}} | 340 | // }}} |
312 | // FUNCTION: Check if current token is inside code block {{{ | 341 | /** |
342 | * insideCodeblockForMap. Check if current token is inside code block {{{ | ||
343 | * | ||
344 | * @param {} anchor | ||
345 | */ | ||
313 | const insideCodeblockForMap = anchor => { | 346 | const insideCodeblockForMap = anchor => { |
314 | const token = cm.getTokenAt(anchor) | 347 | const token = cm.getTokenAt(anchor) |
315 | const insideCodeBlock = | 348 | const insideCodeBlock = |
@@ -330,7 +363,11 @@ const insideCodeblockForMap = anchor => { | |||
330 | return false | 363 | return false |
331 | } | 364 | } |
332 | // }}} | 365 | // }}} |
333 | // FUNCTION: Get Renderer by cursor position in code block {{{ | 366 | /** |
367 | * getLineWithRenderer. Get Renderer by cursor position in code block {{{ | ||
368 | * | ||
369 | * @param {Object} anchor -- Codemirror Anchor Object | ||
370 | */ | ||
334 | const getLineWithRenderer = anchor => { | 371 | const getLineWithRenderer = anchor => { |
335 | const currentLine = anchor.line | 372 | const currentLine = anchor.line |
336 | if (!cm.getLine) return null | 373 | if (!cm.getLine) return null |
@@ -365,7 +402,12 @@ const getLineWithRenderer = anchor => { | |||
365 | return null | 402 | return null |
366 | } | 403 | } |
367 | // }}} | 404 | // }}} |
368 | // FUNCTION: Return suggestions for valid options {{{ | 405 | /** |
406 | * getSuggestionsForOptions. Return suggestions for valid options {{{ | ||
407 | * | ||
408 | * @param {Boolean} optionTyped | ||
409 | * @param {Object[]} validOptions | ||
410 | */ | ||
369 | const getSuggestionsForOptions = (optionTyped, validOptions) => { | 411 | const getSuggestionsForOptions = (optionTyped, validOptions) => { |
370 | let suggestOptions = [] | 412 | let suggestOptions = [] |
371 | 413 | ||
@@ -389,7 +431,11 @@ const getSuggestionsForOptions = (optionTyped, validOptions) => { | |||
389 | ) | 431 | ) |
390 | } | 432 | } |
391 | // }}} | 433 | // }}} |
392 | // FUNCTION: Return suggestion for example of option value {{{ | 434 | /** |
435 | * getSuggestionFromMapOption. Return suggestion for example of option value {{{ | ||
436 | * | ||
437 | * @param {Object} option | ||
438 | */ | ||
393 | const getSuggestionFromMapOption = option => { | 439 | const getSuggestionFromMapOption = option => { |
394 | if (!option.example) return null | 440 | if (!option.example) return null |
395 | 441 | ||
@@ -404,7 +450,11 @@ const getSuggestionFromMapOption = option => { | |||
404 | }) | 450 | }) |
405 | } | 451 | } |
406 | // }}} | 452 | // }}} |
407 | // FUNCTION: Return suggestions from aliases {{{ | 453 | /** |
454 | * getSuggestionsFromAliases. Return suggestions from aliases {{{ | ||
455 | * | ||
456 | * @param {Object} option | ||
457 | */ | ||
408 | const getSuggestionsFromAliases = option => | 458 | const getSuggestionsFromAliases = option => |
409 | Object.entries(aliasesForMapOptions[option.valueOf()] ?? {})?.map(record => { | 459 | Object.entries(aliasesForMapOptions[option.valueOf()] ?? {})?.map(record => { |
410 | const [alias, value] = record | 460 | const [alias, value] = record |
@@ -416,7 +466,11 @@ const getSuggestionsFromAliases = option => | |||
416 | }) | 466 | }) |
417 | }) ?? [] | 467 | }) ?? [] |
418 | // }}} | 468 | // }}} |
419 | // FUCNTION: Handler for map codeblock {{{ | 469 | /** |
470 | * handleTypingInCodeBlock. Handler for map codeblock {{{ | ||
471 | * | ||
472 | * @param {Object} anchor -- Codemirror Anchor Object | ||
473 | */ | ||
420 | const handleTypingInCodeBlock = anchor => { | 474 | const handleTypingInCodeBlock = anchor => { |
421 | const text = cm.getLine(anchor.line) | 475 | const text = cm.getLine(anchor.line) |
422 | if (text.match(/^\s\+$/) && text.length % 2 !== 0) { | 476 | if (text.match(/^\s\+$/) && text.length % 2 !== 0) { |
@@ -429,7 +483,11 @@ const handleTypingInCodeBlock = anchor => { | |||
429 | } | 483 | } |
430 | } | 484 | } |
431 | // }}} | 485 | // }}} |
432 | // FUNCTION: get suggestions by current input {{{ | 486 | /** |
487 | * getSuggestions. Get suggestions by current input {{{ | ||
488 | * | ||
489 | * @param {Object} anchor -- Codemirror Anchor Object | ||
490 | */ | ||
433 | const getSuggestions = anchor => { | 491 | const getSuggestions = anchor => { |
434 | const text = cm.getLine(anchor.line) | 492 | const text = cm.getLine(anchor.line) |
435 | 493 | ||
@@ -543,7 +601,12 @@ const getSuggestions = anchor => { | |||
543 | return [] | 601 | return [] |
544 | } | 602 | } |
545 | // }}} | 603 | // }}} |
546 | // {{{ FUNCTION: Show element about suggestions | 604 | /** |
605 | * addSuggestions. Show element about suggestions {{{ | ||
606 | * | ||
607 | * @param {Object} anchor -- Codemirror Anchor Object | ||
608 | * @param {Suggestion[]} suggestions | ||
609 | */ | ||
547 | const addSuggestions = (anchor, suggestions) => { | 610 | const addSuggestions = (anchor, suggestions) => { |
548 | if (suggestions.length === 0) { | 611 | if (suggestions.length === 0) { |
549 | menu.style.display = 'none' | 612 | menu.style.display = 'none' |