mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
1a4561dbf2
Summary: Also fixes a deployment test failure in staging due to a test util throwing a (harmless) error. Test Plan: Tested manually. Reviewers: jarek Reviewed By: jarek Differential Revision: https://phab.getgrist.com/D3740
127 lines
3.9 KiB
TypeScript
127 lines
3.9 KiB
TypeScript
import {showBehavioralPrompt} from 'app/client/components/modals';
|
|
import {AppModel} from 'app/client/models/AppModel';
|
|
import {GristBehavioralPrompts} from 'app/client/ui/GristTooltips';
|
|
import {isNarrowScreen} from 'app/client/ui2018/cssVars';
|
|
import {BehavioralPrompt} from 'app/common/Prefs';
|
|
import {getGristConfig} from 'app/common/urlUtils';
|
|
import {Computed, Disposable, dom} from 'grainjs';
|
|
import {IPopupOptions} from 'popweasel';
|
|
|
|
export interface AttachOptions {
|
|
/** Defaults to false. */
|
|
hideArrow?: boolean;
|
|
popupOptions?: IPopupOptions;
|
|
onDispose?(): void;
|
|
}
|
|
|
|
interface QueuedTip {
|
|
prompt: BehavioralPrompt;
|
|
refElement: Element;
|
|
options: AttachOptions;
|
|
}
|
|
|
|
/**
|
|
* Manages tips that are shown the first time a user performs some action.
|
|
*
|
|
* Tips are shown in the order that they are attached.
|
|
*/
|
|
export class BehavioralPrompts extends Disposable {
|
|
private _prefs = this._appModel.behavioralPrompts;
|
|
private _dismissedTips: Computed<Set<BehavioralPrompt>> = Computed.create(this, use => {
|
|
const {dismissedTips} = use(this._prefs);
|
|
return new Set(dismissedTips.filter(BehavioralPrompt.guard));
|
|
});
|
|
private _queuedTips: QueuedTip[] = [];
|
|
|
|
constructor(private _appModel: AppModel) {
|
|
super();
|
|
}
|
|
|
|
public showTip(refElement: Element, prompt: BehavioralPrompt, options: AttachOptions = {}) {
|
|
this._queueTip(refElement, prompt, options);
|
|
}
|
|
|
|
public attachTip(prompt: BehavioralPrompt, options: AttachOptions = {}) {
|
|
return (element: Element) => {
|
|
this._queueTip(element, prompt, options);
|
|
};
|
|
}
|
|
|
|
public hasSeenTip(prompt: BehavioralPrompt) {
|
|
return this._dismissedTips.get().has(prompt);
|
|
}
|
|
|
|
private _queueTip(refElement: Element, prompt: BehavioralPrompt, options: AttachOptions) {
|
|
if (
|
|
// Don't show tips if surveying is disabled.
|
|
// TODO: Move this into a dedicated variable - this is only a short-term fix for hiding
|
|
// tips in grist-core.
|
|
!getGristConfig().survey ||
|
|
// Or on mobile - the design currently isn't mobile-friendly.
|
|
isNarrowScreen() ||
|
|
// Or if "Don't show tips" was checked in the past.
|
|
this._prefs.get().dontShowTips ||
|
|
// Or if this tip has been shown and dismissed in the past.
|
|
this.hasSeenTip(prompt)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
this._queuedTips.push({prompt, refElement, options});
|
|
if (this._queuedTips.length > 1) {
|
|
// If we're already showing a tip, wait for that one to be dismissed, which will
|
|
// cause the next one in the queue to be shown.
|
|
return;
|
|
}
|
|
|
|
this._showTip(refElement, prompt, options);
|
|
}
|
|
|
|
private _showTip(refElement: Element, prompt: BehavioralPrompt, options: AttachOptions) {
|
|
const close = () => {
|
|
if (!ctl.isDisposed()) {
|
|
ctl.close();
|
|
}
|
|
};
|
|
|
|
const {hideArrow = false, onDispose, popupOptions} = options;
|
|
const {title, content} = GristBehavioralPrompts[prompt];
|
|
const ctl = showBehavioralPrompt(refElement, title, content(), {
|
|
onClose: (dontShowTips) => {
|
|
if (dontShowTips) { this._dontShowTips(); }
|
|
this._markAsSeen(prompt);
|
|
},
|
|
hideArrow,
|
|
popupOptions,
|
|
});
|
|
|
|
ctl.onDispose(() => {
|
|
onDispose?.();
|
|
this._showNextQueuedTip();
|
|
});
|
|
dom.onElem(refElement, 'click', () => close());
|
|
dom.onDisposeElem(refElement, () => close());
|
|
}
|
|
|
|
private _showNextQueuedTip() {
|
|
this._queuedTips.shift();
|
|
if (this._queuedTips.length !== 0) {
|
|
const [nextTip] = this._queuedTips;
|
|
const {refElement, prompt, options} = nextTip;
|
|
this._showTip(refElement, prompt, options);
|
|
}
|
|
}
|
|
|
|
private _markAsSeen(prompt: BehavioralPrompt) {
|
|
const {dismissedTips} = this._prefs.get();
|
|
const newDismissedTips = new Set(dismissedTips);
|
|
newDismissedTips.add(prompt);
|
|
this._prefs.set({...this._prefs.get(), dismissedTips: [...newDismissedTips]});
|
|
}
|
|
|
|
private _dontShowTips() {
|
|
this._prefs.set({...this._prefs.get(), dontShowTips: true});
|
|
this._queuedTips = [];
|
|
}
|
|
}
|