Sha256: 1e7fed1918e94f657d94ef89265dba2073ed341fc077c791e4a2e290b4e7b56f
Contents?: true
Size: 1.4 KB
Versions: 19
Compression:
Stored size: 1.4 KB
Contents
const DISMISS_DELAY = 5000
class Message extends HTMLElement {
#message
constructor() {
super()
this.#message = this.innerHTML
if (this.dismissable || this.type === "error") {
this.addEventListener("click", this)
}
}
handleEvent(event) {
if (event.type === "click") {
this.dismiss()
}
}
connectedCallback() {
this.innerHTML = `
<alchemy-icon name="${this.iconName}"></alchemy-icon>
${this.dismissable && this.type === "error" ? '<alchemy-icon name="close"></alchemy-icon>' : ""}
${this.#message}
`
if (this.dismissable && this.type !== "error") {
setTimeout(() => {
this.dismiss()
}, this.delay)
}
}
dismiss() {
this.addEventListener("transitionend", () => this.remove())
this.classList.add("dismissed")
}
get dismissable() {
return this.hasAttribute("dismissable")
}
get type() {
return this.getAttribute("type") || "notice"
}
get delay() {
return parseInt(this.getAttribute("delay") || DISMISS_DELAY)
}
get iconName() {
switch (this.type) {
case "warning":
case "warn":
case "alert":
return "alert"
case "notice":
return "check"
case "info":
case "hint":
return "information"
case "error":
return "bug"
default:
return this.type
}
}
}
customElements.define("alchemy-message", Message)
Version data entries
19 entries across 19 versions & 1 rubygems