You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.1 KiB
70 lines
2.1 KiB
import { Controller } from "@hotwired/stimulus"
|
|
import Toastify from 'toastify-js'
|
|
|
|
export default class extends Controller {
|
|
|
|
static targets = ['flashItem']
|
|
|
|
OPTIONS = {
|
|
selector: 'flashbar',
|
|
escapeMarkup: false,
|
|
close: true,
|
|
position: 'center',
|
|
offset: { y: 30 },
|
|
}
|
|
|
|
onLoad(event) {
|
|
this.flashItemTargets.forEach((item) => {
|
|
this.popup({ detail: { type: item.dataset.type, message: item.textContent.trim() } })
|
|
})
|
|
}
|
|
|
|
icon(drawing) {
|
|
return `<svg xmlns="http://>']www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current mx-4" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${drawing}" />
|
|
</svg>`
|
|
}
|
|
|
|
iconNotice() { return this.icon('M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z') }
|
|
iconAlert() { return this.icon('M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z') }
|
|
className(toastType) { return `alert alert-${toastType} inset-ring-2 shadow-xl/50` }
|
|
classNameNotice() { return this.className('success') }
|
|
classNameAlert() { return this.className('error') }
|
|
textNotice(message) { return `${this.iconNotice()}<div>${message}</div>` }
|
|
textAlert(message) { return `${this.iconAlert()}<div>${message}</div>` }
|
|
|
|
popup(event) {
|
|
const { type, message } = event.detail
|
|
switch (type) {
|
|
case 'notice': this.notice(message); break
|
|
case 'alert': this.alert(message); break
|
|
default: console.error(`undefined popup message type: ${type}`)
|
|
}
|
|
}
|
|
|
|
log(type, message) {
|
|
switch (type) {
|
|
case 'notice': console.info(`FLASH:${type} => ${message}`); break
|
|
case 'alert': console.warn(`FLASH:${type} => ${message}`); break
|
|
}
|
|
}
|
|
|
|
notice(message) {
|
|
Toastify({
|
|
...this.OPTIONS,
|
|
text: this.textNotice(message),
|
|
className: this.classNameNotice(),
|
|
}).showToast();
|
|
this.log('notice', message)
|
|
}
|
|
|
|
alert(message) {
|
|
Toastify({
|
|
...this.OPTIONS,
|
|
text: this.textAlert(message),
|
|
className: this.classNameAlert(),
|
|
}).showToast();
|
|
this.log('alert', message)
|
|
}
|
|
|
|
}
|