Removed queue,

destroy elements once all toasts are hidden
This commit is contained in:
kylejwatson 2020-07-04 16:13:47 +01:00
parent 48deb375cb
commit cc101fd119
1 changed files with 22 additions and 20 deletions

View File

@ -6,13 +6,7 @@ export default Vue.extend({
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 () {
@ -28,26 +22,34 @@ export default Vue.extend({
},
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)
// 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) {
const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
toast.timeout = setTimeout(this.close, 5000, toast)
setImmediate(() => toast.isOpen = true)
if (this.toasts.length > 4) {
for (let i = this.toasts.length - 1; i >= 0; i--) {
const toast = this.toasts[i]
if (!toast.isOpen) {
return this.showToast(message, action, toast)
if (!this.toasts[i].isOpen) {
// Replace the first hidden toast starting from the bottom
return this.toasts.splice(i, 1, toast)
}
}
this.queue.push({ message: message, action: action })
// Else replace the most recent
return this.toasts.splice(4, 1, toast)
}
this.toasts.push(toast)
},
showToast: function(message, action, toast) {
toast.message = message
toast.action = action || (() => {})
toast.isOpen = true
toast.timeout = setTimeout(this.close, 2000, toast)
clear: function () {
if (this.toasts.every(toast => !toast.isOpen)) {
this.toasts = []
}
}
},
})