60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
interface AlertDetail {
|
|
type: 'alert-info' | 'alert-warning' | 'alert-success' | 'alert-error'
|
|
message: string
|
|
}
|
|
|
|
class AlertEvent extends CustomEvent<AlertDetail> {
|
|
constructor(detail: AlertDetail) {
|
|
super('alert', { detail })
|
|
}
|
|
}
|
|
|
|
const alertTemplate = document.createElement('template')
|
|
alertTemplate.innerHTML = `
|
|
<div class="alert">
|
|
<span></span>
|
|
</div>
|
|
`
|
|
|
|
class Alert extends HTMLElement {
|
|
constructor(alertDetail: AlertDetail) {
|
|
super()
|
|
this.appendChild(alertTemplate.content.cloneNode(true))
|
|
|
|
const outer = this.querySelector<HTMLDivElement>('div')!
|
|
outer.classList.add(alertDetail.type)
|
|
|
|
const message = this.querySelector<HTMLSpanElement>('span')!
|
|
message.textContent = alertDetail.message
|
|
}
|
|
}
|
|
|
|
const alertBoxTemplate = document.createElement('template')
|
|
alertBoxTemplate.innerHTML = `
|
|
<div id="alert-box" class="toast toast-top toast-end"></div>
|
|
`
|
|
|
|
class AlertBox extends HTMLElement {
|
|
private readonly alertBox: HTMLDivElement
|
|
|
|
constructor() {
|
|
super()
|
|
this.appendChild(alertBoxTemplate.content.cloneNode(true))
|
|
this.alertBox = this.querySelector<HTMLDivElement>('#alert-box')!
|
|
}
|
|
|
|
public add = (alertDetail: AlertDetail) => {
|
|
const alert = new Alert(alertDetail)
|
|
this.alertBox.appendChild(alert)
|
|
setTimeout(() => alert.remove(), 7000)
|
|
}
|
|
|
|
public static define() {
|
|
customElements.define('alert-element', Alert)
|
|
customElements.define('alert-box', AlertBox)
|
|
}
|
|
}
|
|
|
|
export default AlertBox
|
|
export { AlertEvent, type AlertDetail }
|