#4836 -- Avoid triggering toasts when window is hidden.

This commit is contained in:
Buster "Silver Eagle" Neece 2021-12-06 19:30:23 -06:00
parent f59c524442
commit fe33d352d1
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
1 changed files with 82 additions and 79 deletions

View File

@ -1,108 +1,111 @@
import Vue import Vue from 'vue';
from 'vue'; import {BootstrapVue} from 'bootstrap-vue';
import { BootstrapVue } from 'bootstrap-vue';
import 'bootstrap-vue/dist/bootstrap-vue.css'; import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.use(BootstrapVue); Vue.use(BootstrapVue);
const BootstrapVueNotifiers = { const BootstrapVueNotifiers = {
install (Vue, opts) { install(Vue, opts) {
Vue.prototype.$notify = function (message = null, options = {}) { Vue.prototype.$notify = function (message = null, options = {}) {
const defaults = { if (!!document.hidden) {
variant: 'default', return;
toaster: 'b-toaster-top-right', }
autoHideDelay: 3000,
solid: true const defaults = {
}; variant: 'default',
toaster: 'b-toaster-top-right',
autoHideDelay: 3000,
solid: true
};
this.$bvToast.toast(message, { ...defaults, ...options }); this.$bvToast.toast(message, {...defaults, ...options});
}; };
Vue.prototype.$notifyError = function (message = null, options = {}) { Vue.prototype.$notifyError = function (message = null, options = {}) {
if (message === null) { if (message === null) {
message = this.$gettext('An error occurred and your request could not be completed.'); message = this.$gettext('An error occurred and your request could not be completed.');
} }
const defaults = { const defaults = {
variant: 'danger', variant: 'danger',
title: this.$gettext('Error') title: this.$gettext('Error')
}; };
this.$notify(message, { ...defaults, ...options }); this.$notify(message, {...defaults, ...options});
return message; return message;
}; };
Vue.prototype.$notifySuccess = function (message = null, options = {}) { Vue.prototype.$notifySuccess = function (message = null, options = {}) {
if (message === null) { if (message === null) {
message = this.$gettext('Changes saved.'); message = this.$gettext('Changes saved.');
} }
const defaults = { const defaults = {
variant: 'success', variant: 'success',
title: this.$gettext('Success') title: this.$gettext('Success')
}; };
this.$notify(message, { ...defaults, ...options }); this.$notify(message, {...defaults, ...options});
return message; return message;
}; };
const LOADING_TOAST_ID = 'toast-loading'; const LOADING_TOAST_ID = 'toast-loading';
Vue.prototype.$showLoading = function (message = null, options = {}) { Vue.prototype.$showLoading = function (message = null, options = {}) {
if (message === null) { if (message === null) {
message = this.$gettext('Applying changes...'); message = this.$gettext('Applying changes...');
} }
const defaults = { const defaults = {
id: LOADING_TOAST_ID, id: LOADING_TOAST_ID,
variant: 'warning', variant: 'warning',
title: this.$gettext('Please wait...'), title: this.$gettext('Please wait...'),
autoHideDelay: 10000, autoHideDelay: 10000,
isStatus: true isStatus: true
}; };
this.$notify(message, { ...defaults, ...options }); this.$notify(message, {...defaults, ...options});
return message; return message;
}; };
Vue.prototype.$hideLoading = function () { Vue.prototype.$hideLoading = function () {
this.$bvToast.hide(LOADING_TOAST_ID); this.$bvToast.hide(LOADING_TOAST_ID);
}; };
let $isAxiosLoading = false; let $isAxiosLoading = false;
let $axiosLoadCount = 0; let $axiosLoadCount = 0;
Vue.prototype.$setLoading = function (isLoading) { Vue.prototype.$setLoading = function (isLoading) {
let prevIsLoading = $isAxiosLoading; let prevIsLoading = $isAxiosLoading;
if (isLoading) { if (isLoading) {
$axiosLoadCount++; $axiosLoadCount++;
$isAxiosLoading = true; $isAxiosLoading = true;
} else if ($axiosLoadCount > 0) { } else if ($axiosLoadCount > 0) {
$axiosLoadCount--; $axiosLoadCount--;
$isAxiosLoading = ($axiosLoadCount > 0); $isAxiosLoading = ($axiosLoadCount > 0);
} }
// Handle state changes // Handle state changes
if (!prevIsLoading && $isAxiosLoading) { if (!prevIsLoading && $isAxiosLoading) {
this.$showLoading(); this.$showLoading();
} else if (prevIsLoading && !$isAxiosLoading) { } else if (prevIsLoading && !$isAxiosLoading) {
this.$hideLoading(); this.$hideLoading();
} }
}; };
Vue.prototype.$wrapWithLoading = function (promise) { Vue.prototype.$wrapWithLoading = function (promise) {
this.$setLoading(true); this.$setLoading(true);
promise.finally(() => { promise.finally(() => {
this.$setLoading(false); this.$setLoading(false);
}); });
return promise; return promise;
}; };
} }
}; };
Vue.use(BootstrapVueNotifiers); Vue.use(BootstrapVueNotifiers);