Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Close previous example card in the rare cases when a second one might be triggered

Browse Source 
Test Plan: Added a test case

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2656
This commit is contained in:
Dmitry S 2020-11-09 21:36:03 -05:00
parent 4febd90758
commit 6d95418cc1
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/client/ui/ExampleCard.ts
View File

@ -7,6 +7,8 @@ import {icon} from 'app/client/ui2018/icons';
import {cssLink} from 'app/client/ui2018/links'; import {cssLink} from 'app/client/ui2018/links';
import {dom, Observable, styled} from 'grainjs'; 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. // Open a popup with a card introducing this example, if the user hasn't dismissed it in the past.
export function showExampleCard( export function showExampleCard(
example: IExampleInfo, appModel: AppModel, btnElem: HTMLElement, reopen: boolean = false example: IExampleInfo, appModel: AppModel, btnElem: HTMLElement, reopen: boolean = false
@ -31,6 +33,7 @@ export function showExampleCard(
// Close the example card. // Close the example card.
function close() { function close() {
prevCardClose = null;
collapseAndRemoveCard(cardElem, btnElem.getBoundingClientRect()); collapseAndRemoveCard(cardElem, btnElem.getBoundingClientRect());
// If we fail to save this preference, it's probably not worth alerting the user about, // If we fail to save this preference, it's probably not worth alerting the user about,
// so just log to console. // so just log to console.
@ -66,13 +69,21 @@ export function showExampleCard(
if (reopen) { if (reopen) {
expandCard(cardElem, btnElem.getBoundingClientRect()); 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 // 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. // the user where to find that button. Remove the card after the animation.
function collapseAndRemoveCard(card: HTMLElement, collapsedRect: DOMRect) { function collapseAndRemoveCard(card: HTMLElement, collapsedRect: DOMRect) {
const watcher = new TransitionWatcher(card); const watcher = new TransitionWatcher(card);
watcher.onDispose(() => card.remove()); watcher.onDispose(() => disposeCard(card));
collapseCard(card, collapsedRect); collapseCard(card, collapsedRect);
} }