mirror of https://github.com/FreeTubeApp/FreeTube
55 lines
1.5 KiB
JavaScript
55 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: [
|
|
],
|
|
}
|
|
},
|
|
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)
|
|
// Remove toasts when most recent toast has finished to avoid re-render
|
|
if (this.toasts.filter(toast => toast.isOpen).length === 1) {
|
|
// Wait for fade-out to finish
|
|
setTimeout(this.clear, 300)
|
|
}
|
|
toast.isOpen = false
|
|
},
|
|
open: function (message, action, time) {
|
|
const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
|
|
toast.timeout = setTimeout(this.close, time || 3000, toast)
|
|
setImmediate(() => { toast.isOpen = true })
|
|
if (this.toasts.length > 4) {
|
|
for (let i = this.toasts.length - 1; i >= 0; i--) {
|
|
if (!this.toasts[i].isOpen) {
|
|
// Replace the first hidden toast starting from the bottom
|
|
return this.toasts.splice(i, 1, toast)
|
|
}
|
|
}
|
|
// Else replace the most recent
|
|
return this.toasts.splice(4, 1, toast)
|
|
}
|
|
this.toasts.push(toast)
|
|
},
|
|
clear: function () {
|
|
if (this.toasts.every(toast => !toast.isOpen)) {
|
|
this.toasts = []
|
|
}
|
|
}
|
|
},
|
|
})
|