#4836 -- Avoid triggering toasts when window is hidden.
This commit is contained in:
Buster "Silver Eagle" Neece
parent
f59c524442
commit
fe33d352d1
|
|
@ -1,108 +1,111 @@
|
|||
import Vue
|
||||
from 'vue';
|
||||
import { BootstrapVue } from 'bootstrap-vue';
|
||||
import Vue from 'vue';
|
||||
import {BootstrapVue} from 'bootstrap-vue';
|
||||
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css';
|
||||
|
||||
Vue.use(BootstrapVue);
|
||||
|
||||
const BootstrapVueNotifiers = {
|
||||
install (Vue, opts) {
|
||||
Vue.prototype.$notify = function (message = null, options = {}) {
|
||||
const defaults = {
|
||||
variant: 'default',
|
||||
toaster: 'b-toaster-top-right',
|
||||
autoHideDelay: 3000,
|
||||
solid: true
|
||||
};
|
||||
install(Vue, opts) {
|
||||
Vue.prototype.$notify = function (message = null, options = {}) {
|
||||
if (!!document.hidden) {
|
||||
return;
|
||||
}
|
||||
|
||||
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 = {}) {
|
||||
if (message === null) {
|
||||
message = this.$gettext('An error occurred and your request could not be completed.');
|
||||
}
|
||||
Vue.prototype.$notifyError = function (message = null, options = {}) {
|
||||
if (message === null) {
|
||||
message = this.$gettext('An error occurred and your request could not be completed.');
|
||||
}
|
||||
|
||||
const defaults = {
|
||||
variant: 'danger',
|
||||
title: this.$gettext('Error')
|
||||
};
|
||||
const defaults = {
|
||||
variant: 'danger',
|
||||
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 = {}) {
|
||||
if (message === null) {
|
||||
message = this.$gettext('Changes saved.');
|
||||
}
|
||||
Vue.prototype.$notifySuccess = function (message = null, options = {}) {
|
||||
if (message === null) {
|
||||
message = this.$gettext('Changes saved.');
|
||||
}
|
||||
|
||||
const defaults = {
|
||||
variant: 'success',
|
||||
title: this.$gettext('Success')
|
||||
};
|
||||
const defaults = {
|
||||
variant: '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 = {}) {
|
||||
if (message === null) {
|
||||
message = this.$gettext('Applying changes...');
|
||||
}
|
||||
Vue.prototype.$showLoading = function (message = null, options = {}) {
|
||||
if (message === null) {
|
||||
message = this.$gettext('Applying changes...');
|
||||
}
|
||||
|
||||
const defaults = {
|
||||
id: LOADING_TOAST_ID,
|
||||
variant: 'warning',
|
||||
title: this.$gettext('Please wait...'),
|
||||
autoHideDelay: 10000,
|
||||
isStatus: true
|
||||
};
|
||||
const defaults = {
|
||||
id: LOADING_TOAST_ID,
|
||||
variant: 'warning',
|
||||
title: this.$gettext('Please wait...'),
|
||||
autoHideDelay: 10000,
|
||||
isStatus: true
|
||||
};
|
||||
|
||||
this.$notify(message, { ...defaults, ...options });
|
||||
return message;
|
||||
};
|
||||
this.$notify(message, {...defaults, ...options});
|
||||
return message;
|
||||
};
|
||||
|
||||
Vue.prototype.$hideLoading = function () {
|
||||
this.$bvToast.hide(LOADING_TOAST_ID);
|
||||
};
|
||||
Vue.prototype.$hideLoading = function () {
|
||||
this.$bvToast.hide(LOADING_TOAST_ID);
|
||||
};
|
||||
|
||||
let $isAxiosLoading = false;
|
||||
let $axiosLoadCount = 0;
|
||||
let $isAxiosLoading = false;
|
||||
let $axiosLoadCount = 0;
|
||||
|
||||
Vue.prototype.$setLoading = function (isLoading) {
|
||||
let prevIsLoading = $isAxiosLoading;
|
||||
if (isLoading) {
|
||||
$axiosLoadCount++;
|
||||
$isAxiosLoading = true;
|
||||
} else if ($axiosLoadCount > 0) {
|
||||
$axiosLoadCount--;
|
||||
$isAxiosLoading = ($axiosLoadCount > 0);
|
||||
}
|
||||
Vue.prototype.$setLoading = function (isLoading) {
|
||||
let prevIsLoading = $isAxiosLoading;
|
||||
if (isLoading) {
|
||||
$axiosLoadCount++;
|
||||
$isAxiosLoading = true;
|
||||
} else if ($axiosLoadCount > 0) {
|
||||
$axiosLoadCount--;
|
||||
$isAxiosLoading = ($axiosLoadCount > 0);
|
||||
}
|
||||
|
||||
// Handle state changes
|
||||
if (!prevIsLoading && $isAxiosLoading) {
|
||||
this.$showLoading();
|
||||
} else if (prevIsLoading && !$isAxiosLoading) {
|
||||
this.$hideLoading();
|
||||
}
|
||||
};
|
||||
// Handle state changes
|
||||
if (!prevIsLoading && $isAxiosLoading) {
|
||||
this.$showLoading();
|
||||
} else if (prevIsLoading && !$isAxiosLoading) {
|
||||
this.$hideLoading();
|
||||
}
|
||||
};
|
||||
|
||||
Vue.prototype.$wrapWithLoading = function (promise) {
|
||||
this.$setLoading(true);
|
||||
Vue.prototype.$wrapWithLoading = function (promise) {
|
||||
this.$setLoading(true);
|
||||
|
||||
promise.finally(() => {
|
||||
this.$setLoading(false);
|
||||
});
|
||||
promise.finally(() => {
|
||||
this.$setLoading(false);
|
||||
});
|
||||
|
||||
return promise;
|
||||
};
|
||||
}
|
||||
return promise;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Vue.use(BootstrapVueNotifiers);
|
||||
|
|
|
|||
Loading…
Reference in New Issue