diff options
author | Hsieh Chin Fan <pham@topo.tw> | 2024-09-15 18:10:30 +0800 |
---|---|---|
committer | Hsieh Chin Fan <pham@topo.tw> | 2024-09-15 18:10:30 +0800 |
commit | eb468ad16b0bf94eb37ecfdd2949adf73922b7dd (patch) | |
tree | def7c4b6402d57784ac9f8f7262901b49f90aafc /src | |
parent | 2b42596d8416042d0014cf3603be7e28ede1faa8 (diff) |
feat: Add arg or callback for each map rendered
Diffstat (limited to 'src')
-rw-r--r-- | src/dumbymap.mjs | 88 |
1 files changed, 46 insertions, 42 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 47c629c..72e864e 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
@@ -138,7 +138,7 @@ export const markdown2HTML = (container, mdContent) => { | |||
138 | //}}} | 138 | //}}} |
139 | } | 139 | } |
140 | // FIXME Don't use hard-coded CSS selector | 140 | // FIXME Don't use hard-coded CSS selector |
141 | export const generateMaps = async (container) => { | 141 | export const generateMaps = async (container, callback) => { |
142 | // LeaderLine {{{ | 142 | // LeaderLine {{{ |
143 | 143 | ||
144 | // Get anchors with "geo:" scheme | 144 | // Get anchors with "geo:" scheme |
@@ -250,51 +250,55 @@ export const generateMaps = async (container) => { | |||
250 | // Render each code block with "language-map" class | 250 | // Render each code block with "language-map" class |
251 | const render = renderWith(config => ({ width: "100%", ...config })) | 251 | const render = renderWith(config => ({ width: "100%", ...config })) |
252 | const renderTargets = Array.from(container.querySelectorAll('pre:has(.language-map)')) | 252 | const renderTargets = Array.from(container.querySelectorAll('pre:has(.language-map)')) |
253 | const renderAllTargets = renderTargets.map(async (target) => { | 253 | .map(async (target) => { |
254 | // Get text in code block starts with '```map' | 254 | // Get text in code block starts with '```map' |
255 | const configText = target.querySelector('.language-map') | 255 | const configText = target.querySelector('.language-map') |
256 | .textContent | 256 | .textContent |
257 | // BE CAREFUL!!! 0xa0 char is "non-breaking spaces" in HTML text content | 257 | // BE CAREFUL!!! 0xa0 char is "non-breaking spaces" in HTML text content |
258 | // replace it by normal space | 258 | // replace it by normal space |
259 | .replace(/\u00A0/g, '\u0020') | 259 | .replace(/\u00A0/g, '\u0020') |
260 | 260 | ||
261 | let configList = [] | 261 | let configList = [] |
262 | try { | 262 | try { |
263 | configList = parseConfigsFromYaml(configText).map(assignMapId) | 263 | configList = parseConfigsFromYaml(configText).map(assignMapId) |
264 | } catch (_) { | 264 | } catch (_) { |
265 | console.warn('Fail to parse yaml config for element', target) | 265 | console.warn('Fail to parse yaml config for element', target) |
266 | } | 266 | } |
267 | 267 | ||
268 | // Render maps | 268 | // Render maps |
269 | return render(target, configList) | 269 | return render(target, configList) |
270 | .then(results => { | 270 | .then(results => { |
271 | results.forEach((mapByConfig) => { | 271 | results.forEach((mapByConfig) => { |
272 | if (mapByConfig.status === 'fulfilled') { | 272 | if (mapByConfig.status === 'fulfilled') { |
273 | afterEachMapLoaded(mapByConfig.value) | 273 | afterEachMapLoaded(mapByConfig.value) |
274 | return mapByConfig.value | 274 | return mapByConfig.value |
275 | } else { | 275 | } else { |
276 | console.error('Fail to render target element', mapByConfig.reason) | 276 | console.error('Fail to render target element', mapByConfig.reason) |
277 | } | 277 | } |
278 | }) | ||
278 | }) | 279 | }) |
279 | }) | ||
280 | }) | ||
281 | const renderInfo = await Promise.all(renderAllTargets).then(() => 'Finish Rendering') | ||
282 | const maps = htmlHolder.querySelectorAll('.map-container') ?? [] | ||
283 | Array.from(maps) | ||
284 | .forEach(ele => { | ||
285 | const markers = geoLinks | ||
286 | .filter(link => !link.targets || link.targets.include(ele.id)) | ||
287 | .map(link => ({ | ||
288 | xy: link.xy, | ||
289 | title: link.url.pathname | ||
290 | })) | ||
291 | ele?.renderer?.addMarkers(markers) | ||
292 | }) | 280 | }) |
293 | 281 | ||
294 | htmlHolder.querySelectorAll('.marker') | 282 | const renderAllTargets = Promise.all(renderTargets) |
295 | .forEach(marker => htmlHolder.anchors.push(marker)) | 283 | renderAllTargets.then(() => { |
284 | console.info('Finish Rendering') | ||
285 | |||
286 | const maps = htmlHolder.querySelectorAll('.map-container') ?? [] | ||
287 | Array.from(maps) | ||
288 | .forEach(ele => { | ||
289 | callback(ele) | ||
290 | const markers = geoLinks | ||
291 | .filter(link => !link.targets || link.targets.include(ele.id)) | ||
292 | .map(link => ({ | ||
293 | xy: link.xy, | ||
294 | title: link.url.pathname | ||
295 | })) | ||
296 | ele?.renderer?.addMarkers(markers) | ||
297 | }) | ||
296 | 298 | ||
297 | console.info(renderInfo) | 299 | htmlHolder.querySelectorAll('.marker') |
300 | .forEach(marker => htmlHolder.anchors.push(marker)) | ||
301 | }) | ||
298 | 302 | ||
299 | //}}} | 303 | //}}} |
300 | // Draggable Blocks{{{ | 304 | // Draggable Blocks{{{ |
@@ -407,5 +411,5 @@ export const generateMaps = async (container) => { | |||
407 | onRemove(htmlHolder, () => layoutObserver.disconnect()) | 411 | onRemove(htmlHolder, () => layoutObserver.disconnect()) |
408 | //}}} | 412 | //}}} |
409 | //}}} | 413 | //}}} |
410 | return container | 414 | return renderAllTargets |
411 | } | 415 | } |