diff options
Diffstat (limited to 'src/dumbymap.mjs')
-rw-r--r-- | src/dumbymap.mjs | 26 |
1 files changed, 16 insertions, 10 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index dc22021..faa0621 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
@@ -153,7 +153,7 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
153 | const showcase = document.createElement('div'); | 153 | const showcase = document.createElement('div'); |
154 | container.appendChild(showcase); | 154 | container.appendChild(showcase); |
155 | showcase.classList.add('Showcase'); | 155 | showcase.classList.add('Showcase'); |
156 | const renderMaps = []; | 156 | const renderPromises = []; |
157 | 157 | ||
158 | const dumbymap = { | 158 | const dumbymap = { |
159 | layouts, | 159 | layouts, |
@@ -161,8 +161,11 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
161 | htmlHolder, | 161 | htmlHolder, |
162 | showcase, | 162 | showcase, |
163 | blocks, | 163 | blocks, |
164 | renderMaps: renderMaps, | ||
165 | utils: { | 164 | utils: { |
165 | renderedMaps: () => | ||
166 | Array.from( | ||
167 | container.querySelectorAll('.mapclay[data-render=fulfilled]'), | ||
168 | ), | ||
166 | focusNextMap: throttle(utils.focusNextMap, utils.focusDelay), | 169 | focusNextMap: throttle(utils.focusNextMap, utils.focusDelay), |
167 | switchToNextLayout: throttle(utils.switchToNextLayout, 300), | 170 | switchToNextLayout: throttle(utils.switchToNextLayout, 300), |
168 | focusNextBlock: utils.focusNextBlock, | 171 | focusNextBlock: utils.focusNextBlock, |
@@ -259,10 +262,6 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
259 | ); | 262 | ); |
260 | }; | 263 | }; |
261 | //}}} | 264 | //}}} |
262 | // Draggable Blocks {{{ | ||
263 | // Add draggable part for blocks | ||
264 | |||
265 | // }}} | ||
266 | // CSS observer {{{ | 265 | // CSS observer {{{ |
267 | // Focus Map {{{ | 266 | // Focus Map {{{ |
268 | // Set focusArea | 267 | // Set focusArea |
@@ -282,6 +281,13 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
282 | visibilityProperty: true, | 281 | visibilityProperty: true, |
283 | }); | 282 | }); |
284 | 283 | ||
284 | if (focus) { | ||
285 | dumbymap.utils | ||
286 | .renderedMaps() | ||
287 | .filter(map => map !== target) | ||
288 | .forEach(map => map.classList.remove('focus')); | ||
289 | } | ||
290 | |||
285 | if (shouldBeInShowcase) { | 291 | if (shouldBeInShowcase) { |
286 | if (showcase.contains(target)) return; | 292 | if (showcase.contains(target)) return; |
287 | 293 | ||
@@ -448,7 +454,7 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
448 | // FIXME HACK use MutationObserver for animation | 454 | // FIXME HACK use MutationObserver for animation |
449 | if (!target.animations) target.animations = Promise.resolve(); | 455 | if (!target.animations) target.animations = Promise.resolve(); |
450 | target.animations = target.animations.then(async () => { | 456 | target.animations = target.animations.then(async () => { |
451 | await new Promise(resolve => setTimeout(resolve, 150)); | 457 | await new Promise(resolve => setTimeout(resolve, 100)); |
452 | target.setAttribute('data-report', passNum); | 458 | target.setAttribute('data-report', passNum); |
453 | }); | 459 | }); |
454 | }; | 460 | }; |
@@ -505,9 +511,9 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
505 | // Render maps with delay | 511 | // Render maps with delay |
506 | const timer = setTimeout( | 512 | const timer = setTimeout( |
507 | () => | 513 | () => |
508 | render(target, configList).forEach(renderMap => { | 514 | render(target, configList).forEach(renderPromise => { |
509 | renderMaps.push(renderMap); | 515 | renderPromises.push(renderPromise); |
510 | renderMap.then(afterMapRendered); | 516 | renderPromise.then(afterMapRendered); |
511 | }), | 517 | }), |
512 | delay ?? 1000, | 518 | delay ?? 1000, |
513 | ); | 519 | ); |