2020-06-14 21:13:35 +00:00
|
|
|
import Vue from 'vue'
|
2020-06-15 19:08:42 +00:00
|
|
|
import FtToastEvents from './ft-toast-events.js'
|
2020-06-14 21:13:35 +00:00
|
|
|
|
|
|
|
export default Vue.extend({
|
|
|
|
name: 'FtToast',
|
|
|
|
data: function () {
|
|
|
|
return {
|
2020-08-02 11:28:10 +00:00
|
|
|
toasts: [],
|
2020-06-14 21:13:35 +00:00
|
|
|
}
|
|
|
|
},
|
2020-06-15 19:08:42 +00:00
|
|
|
mounted: function () {
|
|
|
|
FtToastEvents.$on('toast.open', this.open)
|
|
|
|
},
|
2020-06-27 15:27:03 +00:00
|
|
|
beforeDestroy: function () {
|
|
|
|
FtToastEvents.$off('toast.open', this.open)
|
|
|
|
},
|
2020-06-14 21:13:35 +00:00
|
|
|
methods: {
|
2020-08-02 11:28:10 +00:00
|
|
|
performAction: function (index) {
|
|
|
|
this.toasts[index].action()
|
|
|
|
this.remove(index)
|
2020-06-14 21:13:35 +00:00
|
|
|
},
|
2020-06-27 15:06:42 +00:00
|
|
|
close: function (toast) {
|
2020-08-02 11:28:10 +00:00
|
|
|
// Wait for fade-out to finish
|
|
|
|
setTimeout(this.remove, 300, this.toasts.length)
|
|
|
|
|
2020-07-04 15:13:47 +00:00
|
|
|
toast.isOpen = false
|
2020-06-14 21:13:35 +00:00
|
|
|
},
|
2020-07-04 15:44:35 +00:00
|
|
|
open: function (message, action, time) {
|
2020-07-04 15:13:47 +00:00
|
|
|
const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
|
2020-08-02 11:28:10 +00:00
|
|
|
toast.timeout = setTimeout(this.close, time || 6000, toast)
|
2020-07-04 15:54:49 +00:00
|
|
|
setImmediate(() => { toast.isOpen = true })
|
2020-07-04 15:13:47 +00:00
|
|
|
if (this.toasts.length > 4) {
|
2020-08-02 11:28:10 +00:00
|
|
|
this.remove(0)
|
2020-06-15 19:08:42 +00:00
|
|
|
}
|
2020-07-04 15:13:47 +00:00
|
|
|
this.toasts.push(toast)
|
2020-06-14 21:13:35 +00:00
|
|
|
},
|
2020-08-02 11:28:10 +00:00
|
|
|
remove: function(index) {
|
|
|
|
const removed = this.toasts.splice(index, 1)
|
|
|
|
clearTimeout(removed.timeout)
|
2020-06-27 10:41:34 +00:00
|
|
|
}
|
2020-06-14 21:13:35 +00:00
|
|
|
},
|
|
|
|
})
|