diff --git a/app/client/ui/ExampleCard.ts b/app/client/ui/ExampleCard.ts index a6b8e09f..0f6d170a 100644 --- a/app/client/ui/ExampleCard.ts +++ b/app/client/ui/ExampleCard.ts @@ -7,6 +7,8 @@ import {icon} from 'app/client/ui2018/icons'; import {cssLink} from 'app/client/ui2018/links'; import {dom, Observable, styled} from 'grainjs'; +let prevCardClose: (() => void)|null = null; + // Open a popup with a card introducing this example, if the user hasn't dismissed it in the past. export function showExampleCard( example: IExampleInfo, appModel: AppModel, btnElem: HTMLElement, reopen: boolean = false @@ -31,6 +33,7 @@ export function showExampleCard( // Close the example card. function close() { + prevCardClose = null; collapseAndRemoveCard(cardElem, btnElem.getBoundingClientRect()); // If we fail to save this preference, it's probably not worth alerting the user about, // so just log to console. @@ -66,13 +69,21 @@ export function showExampleCard( if (reopen) { expandCard(cardElem, btnElem.getBoundingClientRect()); } + + prevCardClose?.(); + prevCardClose = () => disposeCard(cardElem); +} + +function disposeCard(cardElem: HTMLElement) { + dom.domDispose(cardElem); + cardElem.remove(); } // When closing the card, collapse it visually into the button that can open it again, to hint to // the user where to find that button. Remove the card after the animation. function collapseAndRemoveCard(card: HTMLElement, collapsedRect: DOMRect) { const watcher = new TransitionWatcher(card); - watcher.onDispose(() => card.remove()); + watcher.onDispose(() => disposeCard(card)); collapseCard(card, collapsedRect); }