diff options
author | Hsieh Chin Fan <pham@topo.tw> | 2024-09-21 11:19:58 +0800 |
---|---|---|
committer | Hsieh Chin Fan <pham@topo.tw> | 2024-09-21 17:08:05 +0800 |
commit | bdf723a126a0d435233c1b4a1e3c00110bc9ea94 (patch) | |
tree | 52dec6fc2aeea4030c9b27616b24d3aa9b1cda61 /src/dumbymap.mjs | |
parent | 598c982baeddc787b348492667687508f83bcad0 (diff) |
feat: add throttle for next map by Showcase display
Diffstat (limited to 'src/dumbymap.mjs')
-rw-r--r-- | src/dumbymap.mjs | 9 |
1 files changed, 5 insertions, 4 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index e24d130..4eb6bdf 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
@@ -308,9 +308,7 @@ export const generateMaps = async (container, callback) => { | |||
308 | }, 300) | 308 | }, 300) |
309 | 309 | ||
310 | // TODO Use UI to switch layouts | 310 | // TODO Use UI to switch layouts |
311 | // Focus to next map with throttle | 311 | const focusNextMap = (reverse = false) => { |
312 | |||
313 | const focusNextMap = throttle((reverse = false) => { | ||
314 | // Decide how many candidates could be focused | 312 | // Decide how many candidates could be focused |
315 | const selector = '.map-container, [data-placeholder]' | 313 | const selector = '.map-container, [data-placeholder]' |
316 | const candidates = Array.from(htmlHolder.querySelectorAll(selector)) | 314 | const candidates = Array.from(htmlHolder.querySelectorAll(selector)) |
@@ -331,13 +329,16 @@ export const generateMaps = async (container, callback) => { | |||
331 | : 0 | 329 | : 0 |
332 | const nextFocus = candidates.at(nextIndex) | 330 | const nextFocus = candidates.at(nextIndex) |
333 | nextFocus.setAttribute('data-focus', "true") | 331 | nextFocus.setAttribute('data-focus', "true") |
334 | }, 300) | 332 | } |
333 | const focusDelay = () => getComputedStyle(showcase).display === 'none' ? 50 : 300 | ||
334 | const focusNextMapWithThrottle = throttle(focusNextMap, focusDelay) | ||
335 | 335 | ||
336 | const originalKeyDown = document.onkeydown | 336 | const originalKeyDown = document.onkeydown |
337 | document.onkeydown = (e) => { | 337 | document.onkeydown = (e) => { |
338 | const event = originalKeyDown(e) | 338 | const event = originalKeyDown(e) |
339 | if (!event) return | 339 | if (!event) return |
340 | 340 | ||
341 | // Switch to next layout | ||
341 | if (event.key === 'x' && container.querySelector('.map-container')) { | 342 | if (event.key === 'x' && container.querySelector('.map-container')) { |
342 | e.preventDefault() | 343 | e.preventDefault() |
343 | switchToNextLayout() | 344 | switchToNextLayout() |