#4836 -- Avoid triggering toasts when window is hidden.
This commit is contained in:
parent
f59c524442
commit
fe33d352d1
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue