2bb21c615d
- Adds notify, navigate, and log in events to global event map, handle in `btrix-app` - Adds console debugs, which are stripped in prod - Replaces TODO redundant `navTo`s with controller implementation - Refactors rest of `LitElement` helpers into arrow functions
65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import type {
|
|
ReactiveController,
|
|
ReactiveControllerHost,
|
|
TemplateResult,
|
|
} from "lit";
|
|
|
|
export type NotifyEventDetail = {
|
|
/**
|
|
* Notification message body.
|
|
* Example:
|
|
* ```ts
|
|
* message: html`<strong>Look!</strong>`
|
|
* ```
|
|
*
|
|
* Note: In order for `this` methods to work, you'll
|
|
* need to bind `this` or use a fat arrow function.
|
|
* For example:
|
|
* ```ts
|
|
* message: html`<button @click=${this.onClick.bind(this)}>Go!</button>`
|
|
* ```
|
|
* Or:
|
|
* ```ts
|
|
* message: html`<button @click=${(e) => this.onClick(e)}>Go!</button>`
|
|
* ```
|
|
**/
|
|
message: string | TemplateResult;
|
|
/** Notification title */
|
|
title?: string;
|
|
/** Shoelace icon name */
|
|
icon?: string;
|
|
variant?: "success" | "warning" | "danger" | "primary" | "info";
|
|
duration?: number;
|
|
};
|
|
|
|
export interface NotifyEventMap {
|
|
"btrix-notify": CustomEvent<NotifyEventDetail>;
|
|
}
|
|
|
|
const NOTIFY_EVENT_NAME: keyof NotifyEventMap = "btrix-notify";
|
|
|
|
/**
|
|
* Manage global app notifications
|
|
*/
|
|
export class NotifyController implements ReactiveController {
|
|
private host: ReactiveControllerHost & EventTarget;
|
|
|
|
constructor(host: NotifyController["host"]) {
|
|
this.host = host;
|
|
host.addController(this);
|
|
}
|
|
|
|
hostConnected() {}
|
|
hostDisconnected() {}
|
|
|
|
toast(detail: NotifyEventDetail) {
|
|
this.host.dispatchEvent(
|
|
new CustomEvent<NotifyEventDetail>(NOTIFY_EVENT_NAME, {
|
|
bubbles: true,
|
|
composed: true,
|
|
detail,
|
|
})
|
|
);
|
|
}
|
|
}
|