mirror of https://github.com/FreeTubeApp/FreeTube
54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
import Vue from 'vue'
|
|
import FtToastEvents from './ft-toast-events.js'
|
|
|
|
export default Vue.extend({
|
|
name: 'FtToast',
|
|
data: function () {
|
|
return {
|
|
toasts: [
|
|
{ isOpen: false, message: '', action: null, timeout: null },
|
|
{ isOpen: false, message: '', action: null, timeout: null },
|
|
{ isOpen: false, message: '', action: null, timeout: null },
|
|
{ isOpen: false, message: '', action: null, timeout: null },
|
|
{ isOpen: false, message: '', action: null, timeout: null }
|
|
],
|
|
queue: [],
|
|
}
|
|
},
|
|
mounted: function () {
|
|
FtToastEvents.$on('toast.open', this.open)
|
|
},
|
|
beforeDestroy: function () {
|
|
FtToastEvents.$off('toast.open', this.open)
|
|
},
|
|
methods: {
|
|
performAction: function (toast) {
|
|
toast.action()
|
|
this.close(toast)
|
|
},
|
|
close: function (toast) {
|
|
clearTimeout(toast.timeout)
|
|
toast.isOpen = false
|
|
if (this.queue.length !== 0) {
|
|
const nexToast = this.queue.shift()
|
|
this.open(nexToast.message, nexToast.action)
|
|
}
|
|
},
|
|
open: function (message, action) {
|
|
for (let i = this.toasts.length - 1; i >= 0; i--) {
|
|
const toast = this.toasts[i]
|
|
if (!toast.isOpen) {
|
|
return this.showToast(message, action, toast)
|
|
}
|
|
}
|
|
this.queue.push({ message: message, action: action })
|
|
},
|
|
showToast: function(message, action, toast) {
|
|
toast.message = message
|
|
toast.action = action || (() => {})
|
|
toast.isOpen = true
|
|
toast.timeout = setTimeout(this.close, 2000, toast)
|
|
}
|
|
},
|
|
})
|