This commit is contained in:
kyle.watson 2020-06-27 16:27:03 +01:00
parent ee1d8f3c8a
commit 48deb375cb
4 changed files with 22 additions and 20 deletions

View File

@ -60,7 +60,7 @@ export default Vue.extend({
}, },
copyInvidious() { copyInvidious() {
FtToastEvents.$emit('toast.open', "Invidious URL copied to clipboard") FtToastEvents.$emit('toast.open', 'Invidious URL copied to clipboard')
this.copy(this.invidiousURL) this.copy(this.invidiousURL)
this.$refs.iconButton.toggleDropdown() this.$refs.iconButton.toggleDropdown()
}, },
@ -71,7 +71,7 @@ export default Vue.extend({
}, },
copyYoutube() { copyYoutube() {
FtToastEvents.$emit('toast.open', "YouTube URL copied to clipboard") FtToastEvents.$emit('toast.open', 'YouTube URL copied to clipboard')
this.copy(this.youtubeURL) this.copy(this.youtubeURL)
this.$refs.iconButton.toggleDropdown() this.$refs.iconButton.toggleDropdown()
}, },
@ -82,7 +82,7 @@ export default Vue.extend({
}, },
copyYoutubeEmbed() { copyYoutubeEmbed() {
FtToastEvents.$emit('toast.open', "YouTube Embed URL copied to clipboard") FtToastEvents.$emit('toast.open', 'YouTube Embed URL copied to clipboard')
this.copy(this.youtubeEmbedURL) this.copy(this.youtubeEmbedURL)
this.$refs.iconButton.toggleDropdown() this.$refs.iconButton.toggleDropdown()
}, },
@ -93,7 +93,7 @@ export default Vue.extend({
}, },
copyInvidiousEmbed() { copyInvidiousEmbed() {
FtToastEvents.$emit('toast.open', "Invidious Embed URL copied to clipboard") FtToastEvents.$emit('toast.open', 'Invidious Embed URL copied to clipboard')
this.copy(this.invidiousEmbedURL) this.copy(this.invidiousEmbedURL)
this.$refs.iconButton.toggleDropdown() this.$refs.iconButton.toggleDropdown()
}, },

View File

@ -1,4 +1,4 @@
import Vue from 'vue'; import Vue from 'vue'
const events = new Vue(); const events = new Vue()
export default events; export default events

View File

@ -6,11 +6,11 @@ export default Vue.extend({
data: function () { data: function () {
return { return {
toasts: [ 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}, { 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: [], queue: [],
} }
@ -18,21 +18,24 @@ export default Vue.extend({
mounted: function () { mounted: function () {
FtToastEvents.$on('toast.open', this.open) FtToastEvents.$on('toast.open', this.open)
}, },
beforeDestroy: function () {
FtToastEvents.$off('toast.open', this.open)
},
methods: { methods: {
performAction: function (toast) { performAction: function (toast) {
toast.action() toast.action()
this.close(toast) this.close(toast)
}, },
close: function (toast) { close: function (toast) {
clearTimeout(toast.timeout); clearTimeout(toast.timeout)
toast.isOpen = false toast.isOpen = false
if(this.queue.length !== 0) { if (this.queue.length !== 0) {
const nexToast = this.queue.shift() const nexToast = this.queue.shift()
this.open(nexToast.message, nexToast.action) this.open(nexToast.message, nexToast.action)
} }
}, },
open: function (message, action) { open: function (message, action) {
for(let i = this.toasts.length - 1; i >= 0 ; i--){ for (let i = this.toasts.length - 1; i >= 0; i--) {
const toast = this.toasts[i] const toast = this.toasts[i]
if (!toast.isOpen) { if (!toast.isOpen) {
return this.showToast(message, action, toast) return this.showToast(message, action, toast)
@ -47,7 +50,4 @@ export default Vue.extend({
toast.timeout = setTimeout(this.close, 2000, toast) toast.timeout = setTimeout(this.close, 2000, toast)
} }
}, },
beforeDestroy: function () {
FtToastEvents.$off('toast.open', this.open)
},
}) })

View File

@ -7,10 +7,12 @@
:class="{ closed: !toast.isOpen, open: toast.isOpen }" :class="{ closed: !toast.isOpen, open: toast.isOpen }"
@click="performAction(toast)" @click="performAction(toast)"
> >
<p class="message">{{ toast.message }}</p> <p class="message">
{{ toast.message }}
</p>
</div> </div>
</div> </div>
</template> </template>
<script src="./ft-toast.js" /> <script src="./ft-toast.js" />
<style scoped src="./ft-toast.css" /> <style scoped src="./ft-toast.css" />