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.
124 lines
3.6 KiB
124 lines
3.6 KiB
import { Controller } from "@hotwired/stimulus"
|
|
import Toastify from 'toastify-js'
|
|
|
|
let _should_popup = false
|
|
|
|
export default class extends Controller {
|
|
|
|
_should_popup = false
|
|
static targets = ['flashItem']
|
|
|
|
OPTIONS = {
|
|
selector: 'flashbar',
|
|
escapeMarkup: false,
|
|
close: true,
|
|
position: 'center',
|
|
offset: { y: 30 },
|
|
}
|
|
|
|
showLog(event) {
|
|
switch (event.type) {
|
|
case 'turbo:before-fetch-request':
|
|
_should_popup = true
|
|
// console.log('should popup on next connect', _should_popup)
|
|
break
|
|
case 'turbo:visit':
|
|
_should_popup = false
|
|
// console.log('redirect detected', _should_popup)
|
|
break
|
|
case 'turbo:load':
|
|
// console.log('should popup now', this.flashItemTargets.length)
|
|
this.doPopup()
|
|
break
|
|
}
|
|
}
|
|
|
|
connect() {
|
|
if (_should_popup) {
|
|
// console.warn('popup on connect', _should_popup, this.flashItemTargets.length)
|
|
this.doPopup()
|
|
_should_popup = false
|
|
}
|
|
}
|
|
|
|
// disconnect() {
|
|
// console.warn('disconnect')
|
|
// }
|
|
|
|
|
|
// flashItemTargetConnected(target) {
|
|
// console.warn('on targetConnected', target, this.element.isConnected)
|
|
// // this.popup({ detail: { type: target.dataset.type, message: target.textContent.trim() } })
|
|
// }
|
|
|
|
// flashItemTargetDisconnected(target) {
|
|
// console.warn('on targetDisconnected')
|
|
// }
|
|
|
|
// onFrameLoad(event) {
|
|
// console.warn('onFrameLoad', this.element, document.documentElement.hasAttribute("data-turbolinks-preview"))
|
|
// }
|
|
|
|
doPopup() {
|
|
this.flashItemTargets.forEach((item) => {
|
|
this.popup({ detail: { type: item.dataset.type, message: item.textContent.trim() } })
|
|
})
|
|
}
|
|
|
|
|
|
onLoad(event) {
|
|
// console.warn('onLoad', this.element.parentNode.isConnected)
|
|
// 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('M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z') }
|
|
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)
|
|
}
|
|
|
|
}
|