diff options
Diffstat (limited to 'src/dumbymap.mjs')
-rw-r--r-- | src/dumbymap.mjs | 44 |
1 files changed, 22 insertions, 22 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 1da5bb6..b02e783 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
@@ -17,7 +17,7 @@ const geoLinkSelector = 'a[href^="geo:"]' | |||
17 | const layouts = [ | 17 | const layouts = [ |
18 | new Layout({ name: 'normal' }), | 18 | new Layout({ name: 'normal' }), |
19 | new SideBySide({ name: 'side-by-side' }), | 19 | new SideBySide({ name: 'side-by-side' }), |
20 | new Overlay({ name: 'overlay' }) | 20 | new Overlay({ name: 'overlay' }), |
21 | ] | 21 | ] |
22 | const mapCache = {} | 22 | const mapCache = {} |
23 | 23 | ||
@@ -37,12 +37,12 @@ export const markdown2HTML = (container, mdContent) => { | |||
37 | const md = MarkdownIt({ | 37 | const md = MarkdownIt({ |
38 | html: true, | 38 | html: true, |
39 | breaks: true, | 39 | breaks: true, |
40 | linkify: true | 40 | linkify: true, |
41 | }) | 41 | }) |
42 | .use(MarkdownItAnchor, { | 42 | .use(MarkdownItAnchor, { |
43 | permalink: MarkdownItAnchor.permalink.linkInsideHeader({ | 43 | permalink: MarkdownItAnchor.permalink.linkInsideHeader({ |
44 | placement: 'before' | 44 | placement: 'before', |
45 | }) | 45 | }), |
46 | }) | 46 | }) |
47 | .use(MarkdownItFootnote) | 47 | .use(MarkdownItFootnote) |
48 | .use(MarkdownItFrontMatter) | 48 | .use(MarkdownItFrontMatter) |
@@ -58,11 +58,11 @@ export const markdown2HTML = (container, mdContent) => { | |||
58 | match.text = `${x}${sep} ${y}` | 58 | match.text = `${x}${sep} ${y}` |
59 | match.index += match.text.indexOf(x) + 1 | 59 | match.index += match.text.indexOf(x) + 1 |
60 | return match | 60 | return match |
61 | } | 61 | }, |
62 | } | 62 | } |
63 | const patterns = ['[', '(', '📍', '\uFF08', '@', 'geo:', 'twd'] | 63 | const patterns = ['[', '(', '📍', '\uFF08', '@', 'geo:', 'twd'] |
64 | patterns.forEach(prefix => | 64 | patterns.forEach(prefix => |
65 | md.linkify.add(prefix, coordinateValue) | 65 | md.linkify.add(prefix, coordinateValue), |
66 | ) | 66 | ) |
67 | 67 | ||
68 | // FIXME A better way to generate blocks | 68 | // FIXME A better way to generate blocks |
@@ -133,7 +133,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
133 | ...utils, | 133 | ...utils, |
134 | renderedMaps: () => | 134 | renderedMaps: () => |
135 | Array.from( | 135 | Array.from( |
136 | container.querySelectorAll('.mapclay[data-render=fulfilled]') | 136 | container.querySelectorAll('.mapclay[data-render=fulfilled]'), |
137 | ).sort((a, b) => a.style.order > b.style.order), | 137 | ).sort((a, b) => a.style.order > b.style.order), |
138 | setContextMenu: (menuCallback) => { | 138 | setContextMenu: (menuCallback) => { |
139 | const originalCallback = container.oncontextmenu | 139 | const originalCallback = container.oncontextmenu |
@@ -145,8 +145,8 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
145 | } | 145 | } |
146 | }, | 146 | }, |
147 | focusNextMap: throttle(utils.focusNextMap, utils.focusDelay), | 147 | focusNextMap: throttle(utils.focusNextMap, utils.focusDelay), |
148 | switchToNextLayout: throttle(utils.switchToNextLayout, 300) | 148 | switchToNextLayout: throttle(utils.switchToNextLayout, 300), |
149 | } | 149 | }, |
150 | } | 150 | } |
151 | Object.entries(dumbymap.utils).forEach(([util, func]) => { | 151 | Object.entries(dumbymap.utils).forEach(([util, func]) => { |
152 | dumbymap.utils[util] = func.bind(dumbymap) | 152 | dumbymap.utils[util] = func.bind(dumbymap) |
@@ -155,7 +155,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
155 | // LeaderLine {{{ | 155 | // LeaderLine {{{ |
156 | 156 | ||
157 | Array.from(container.querySelectorAll(docLinkSelector)).filter( | 157 | Array.from(container.querySelectorAll(docLinkSelector)).filter( |
158 | utils.createDocLink | 158 | utils.createDocLink, |
159 | ) | 159 | ) |
160 | 160 | ||
161 | // Add GeoLinks | 161 | // Add GeoLinks |
@@ -177,7 +177,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
177 | showcase.checkVisibility({ | 177 | showcase.checkVisibility({ |
178 | contentVisibilityAuto: true, | 178 | contentVisibilityAuto: true, |
179 | opacityProperty: true, | 179 | opacityProperty: true, |
180 | visibilityProperty: true | 180 | visibilityProperty: true, |
181 | }) | 181 | }) |
182 | 182 | ||
183 | if (focus) { | 183 | if (focus) { |
@@ -217,12 +217,12 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
217 | // Resume rect from Semantic HTML to Showcase, with animation | 217 | // Resume rect from Semantic HTML to Showcase, with animation |
218 | animateRectTransition(target, placeholder.getBoundingClientRect(), { | 218 | animateRectTransition(target, placeholder.getBoundingClientRect(), { |
219 | duration: 300, | 219 | duration: 300, |
220 | resume: true | 220 | resume: true, |
221 | }) | 221 | }) |
222 | } else if (showcase.contains(target)) { | 222 | } else if (showcase.contains(target)) { |
223 | // Check placeholder is inside Semantic HTML | 223 | // Check placeholder is inside Semantic HTML |
224 | const placeholder = htmlHolder.querySelector( | 224 | const placeholder = htmlHolder.querySelector( |
225 | `[data-placeholder="${target.id}"]` | 225 | `[data-placeholder="${target.id}"]`, |
226 | ) | 226 | ) |
227 | if (!placeholder) { throw Error(`Cannot find placeholder for map "${target.id}"`) } | 227 | if (!placeholder) { throw Error(`Cannot find placeholder for map "${target.id}"`) } |
228 | 228 | ||
@@ -234,7 +234,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
234 | 234 | ||
235 | // animation from Showcase to placeholder | 235 | // animation from Showcase to placeholder |
236 | animateRectTransition(target, placeholder.getBoundingClientRect(), { | 236 | animateRectTransition(target, placeholder.getBoundingClientRect(), { |
237 | duration: 300 | 237 | duration: 300, |
238 | }).finished.finally(afterAnimation) | 238 | }).finished.finally(afterAnimation) |
239 | } | 239 | } |
240 | }) | 240 | }) |
@@ -277,7 +277,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
277 | attributes: true, | 277 | attributes: true, |
278 | attributeFilter: ['data-layout'], | 278 | attributeFilter: ['data-layout'], |
279 | attributeOldValue: true, | 279 | attributeOldValue: true, |
280 | characterDataOldValue: true | 280 | characterDataOldValue: true, |
281 | }) | 281 | }) |
282 | 282 | ||
283 | onRemove(htmlHolder, () => layoutObserver.disconnect()) | 283 | onRemove(htmlHolder, () => layoutObserver.disconnect()) |
@@ -303,7 +303,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
303 | observer.observe(mapElement, { | 303 | observer.observe(mapElement, { |
304 | attributes: true, | 304 | attributes: true, |
305 | attributeFilter: ['class'], | 305 | attributeFilter: ['class'], |
306 | attributeOldValue: true | 306 | attributeOldValue: true, |
307 | }) | 307 | }) |
308 | onRemove(dumbymap.htmlHolder, () => { | 308 | onRemove(dumbymap.htmlHolder, () => { |
309 | observer.disconnect() | 309 | observer.disconnect() |
@@ -329,7 +329,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
329 | 329 | ||
330 | // Render each code block with "language-map" class | 330 | // Render each code block with "language-map" class |
331 | const elementsWithMapConfig = Array.from( | 331 | const elementsWithMapConfig = Array.from( |
332 | container.querySelectorAll(mapBlockSelector) ?? [] | 332 | container.querySelectorAll(mapBlockSelector) ?? [], |
333 | ) | 333 | ) |
334 | /** | 334 | /** |
335 | * updateAttributeByStep. | 335 | * updateAttributeByStep. |
@@ -338,7 +338,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
338 | */ | 338 | */ |
339 | const updateAttributeByStep = ({ results, target, steps }) => { | 339 | const updateAttributeByStep = ({ results, target, steps }) => { |
340 | let passNum = results.filter( | 340 | let passNum = results.filter( |
341 | r => r.type === 'render' && r.state.match(/success|skip/) | 341 | r => r.type === 'render' && r.state.match(/success|skip/), |
342 | ).length | 342 | ).length |
343 | const total = steps.length | 343 | const total = steps.length |
344 | passNum += `/${total}` | 344 | passNum += `/${total}` |
@@ -367,9 +367,9 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
367 | ...config, | 367 | ...config, |
368 | aliases: { | 368 | aliases: { |
369 | ...defaultAliases, | 369 | ...defaultAliases, |
370 | ...(config.aliases ?? {}) | 370 | ...(config.aliases ?? {}), |
371 | }, | 371 | }, |
372 | stepCallback: updateAttributeByStep | 372 | stepCallback: updateAttributeByStep, |
373 | }) | 373 | }) |
374 | const render = renderWith(configConverter) | 374 | const render = renderWith(configConverter) |
375 | let order = 0 | 375 | let order = 0 |
@@ -422,7 +422,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
422 | } | 422 | } |
423 | }) | 423 | }) |
424 | }, | 424 | }, |
425 | delay ?? 1000 | 425 | delay ?? 1000, |
426 | ) | 426 | ) |
427 | onRemove(htmlHolder, () => { | 427 | onRemove(htmlHolder, () => { |
428 | clearTimeout(timer) | 428 | clearTimeout(timer) |
@@ -497,7 +497,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => { | |||
497 | } | 497 | } |
498 | document.addEventListener('click', actionOutsideMenu) | 498 | document.addEventListener('click', actionOutsideMenu) |
499 | onRemove(htmlHolder, () => | 499 | onRemove(htmlHolder, () => |
500 | document.removeEventListener('click', actionOutsideMenu) | 500 | document.removeEventListener('click', actionOutsideMenu), |
501 | ) | 501 | ) |
502 | // }}} | 502 | // }}} |
503 | return Object.seal(dumbymap) | 503 | return Object.seal(dumbymap) |