-
Notifications
You must be signed in to change notification settings - Fork 237
/
notification.ts
96 lines (78 loc) · 2.58 KB
/
notification.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { getSingleton } from "../lib/singleton";
import { shared, mixins } from "../styles";
export type NotificationType = "info" | "warning";
export interface NotificationParams {
message: string;
duration?: number;
type?: NotificationType;
}
@customElement("pl-notification")
export class Notification extends LitElement {
@property({ type: Number })
duration: number = 2000;
@property()
message: string = "";
@property({ reflect: true })
type: NotificationType = "info";
private _hideTimeout: number;
static styles = [
shared,
css`
:host {
display: flex;
align-items: center;
text-align: center;
transition: transform 0.5s cubic-bezier(1, -0.3, 0, 1.3);
position: fixed;
left: 15px;
right: 15px;
bottom: 15px;
z-index: 10;
max-width: 400px;
margin: 0 auto;
border-radius: var(--border-radius);
color: var(--color-background);
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 0;
${mixins.gradientDark(true)};
}
:host(:not(.showing)) {
transform: translateY(130%);
}
:host([type="warning"]) {
${mixins.gradientWarning(true)};
}
.message {
flex: 1;
min-width: 0;
padding: 15px 0 15px 15px;
font-weight: bold;
}
pl-icon.close-button {
margin: auto 5px;
}
`,
];
render() {
return html`
<div class="message">${this.message}</div>
<pl-icon icon="close" class="close-button tap" @click=${() => this.dismiss()}></pl-icon>
`;
}
async show({ message, duration = 2000, type = "info" }: NotificationParams) {
clearTimeout(this._hideTimeout);
this.message = message;
this.type = type;
await this.updateComplete;
this.classList.add("showing");
this._hideTimeout = window.setTimeout(() => this.dismiss(), duration);
}
dismiss() {
this.classList.remove("showing");
}
}
export function notify(message: string, params: Partial<NotificationParams> = {}) {
const notification = getSingleton("pl-notification") as Notification;
notification.show({ ...params, message });
}