Comments (6)
I have the same problem when I call a notification with the backdrop enabled, the following notification calls also work with the backdrop enabled, ignoring the configuration settings. Does not help even a forced call to vm.$snotify.setDefaults(config: SnotifyDefaults)
from vue-snotify.
Hello,
As I had many problems with this bug, I tweaked your package by adding an initTime to each toast (timestamp divided by 100 and rounded for precision purposes): this.toast.initTime = Math.round(+new Date()/100)
in initToast method. Then in stateChanged method, I loop through each toast and group them by initTime. So when 2 toasts are launched at the same time, they are seen as one.
For some reason I had to change the template to (_vm.backdrop > 0)
instead of (_vm.backdrop >= 0)
because the line setTimeout(function () { return _this.$snotify.remove(_this.toast.id, true); }, _this.toast.config.animation.time / 2)
in onRemove method seems to recreate a backdrop with 0 opacity.
HTH you finding a way to fix this. Thank you again!
from vue-snotify.
I am having a similar issue with the backdrop not being removed.
I found this in the JS file:
// TODO: fix backdrop if more than one toast called in a row
Any news on when this will be fixed? Does anyone know a work around, at the moment the backdrop dosesnt get removed which then prevents users being able to access the form behind the backdrop
from vue-snotify.
Basically, my fix is explained in my previous post. But here is what I did for now in vue-snotify.esm.js
(kinda ugly but it works). HTH!
// --- Line 323
initToast: function () {
this.toast.initTime = Math.round(+new Date()/100); // Added initTime
if (this.toast.config.timeout > 0) {
this.startTimeout(0);
}
}
// --- Line 634
stateChanged: function (event) {
let toastShown = []
if (!this.withBackdrop.length) {
return;
} else {
// --- Group toasts by initTime
for (let i=0; i<this.withBackdrop.length; i++) {
if(toastShown.indexOf(this.withBackdrop[i].initTime) == -1){
toastShown.push(this.withBackdrop[i].initTime);
}
}
}
switch (event) {
case 'mounted':
if (this.backdrop < 0) {
this.backdrop = 0;
}
break;
case 'beforeShow':
this.backdrop = this.withBackdrop[this.withBackdrop.length - 1].config.backdrop;
break;
case 'beforeHide':
// --- Use groups to determine if one or more toasts shown
if (toastShown.length === 1) {
this.backdrop = 0;
}
break;
case 'hidden':
// --- Same as beforeHide
if (toastShown.length === 1) {
this.backdrop = -1;
}
break;
}
}
}
// --- Line 695
// --- Changed condition _vm.backdrop >= 0 to _vm.backdrop > 0 because backdrop is recreated with 0 opacity by second timeout in onRemove (line 400)
var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.backdrop > 0)?_c('div',{staticClass:"snotify-backdrop",style:({opacity: _vm.backdrop})}):_vm._e(),_vm._v(" "),_vm._l((_vm.notifications),function(position,index){return _c('div',{staticClass:"snotify",class:'snotify-' + index},_vm._l((_vm.notifications[index].slice(_vm.blockSize_a, _vm.blockSize_b)),function(toast){return _c('toast',{key:toast.id,attrs:{"toastData":toast},on:{"stateChanged":_vm.stateChanged}})}))})],2)};
from vue-snotify.
Thank you, will have a look at trying this.
Its better than my work around :)
from vue-snotify.
Basically, my fix is explained in my previous post. But here is what I did for now in
vue-snotify.esm.js
(kinda ugly but it works). HTH!// --- Line 323 initToast: function () { this.toast.initTime = Math.round(+new Date()/100); // Added initTime if (this.toast.config.timeout > 0) { this.startTimeout(0); } }
// --- Line 634 stateChanged: function (event) { let toastShown = [] if (!this.withBackdrop.length) { return; } else { // --- Group toasts by initTime for (let i=0; i<this.withBackdrop.length; i++) { if(toastShown.indexOf(this.withBackdrop[i].initTime) == -1){ toastShown.push(this.withBackdrop[i].initTime); } } } switch (event) { case 'mounted': if (this.backdrop < 0) { this.backdrop = 0; } break; case 'beforeShow': this.backdrop = this.withBackdrop[this.withBackdrop.length - 1].config.backdrop; break; case 'beforeHide': // --- Use groups to determine if one or more toasts shown if (toastShown.length === 1) { this.backdrop = 0; } break; case 'hidden': // --- Same as beforeHide if (toastShown.length === 1) { this.backdrop = -1; } break; } } }
// --- Line 695 // --- Changed condition _vm.backdrop >= 0 to _vm.backdrop > 0 because backdrop is recreated with 0 opacity by second timeout in onRemove (line 400) var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.backdrop > 0)?_c('div',{staticClass:"snotify-backdrop",style:({opacity: _vm.backdrop})}):_vm._e(),_vm._v(" "),_vm._l((_vm.notifications),function(position,index){return _c('div',{staticClass:"snotify",class:'snotify-' + index},_vm._l((_vm.notifications[index].slice(_vm.blockSize_a, _vm.blockSize_b)),function(toast){return _c('toast',{key:toast.id,attrs:{"toastData":toast},on:{"stateChanged":_vm.stateChanged}})}))})],2)};
Why you don't create that PR ? This is one of the solution
from vue-snotify.
Related Issues (20)
- vue 3 version?
- snotif.html not disable icon
- Notifications not showing on Windows 7
- switch page for 2 hours,when I cut back to see; several hours ago keeps popping up
- Duplicate notifications on route change (nuxt) HOT 4
- How to Set Global Defaults HOT 1
- Support for key enter or button focus HOT 1
- Getting error: "Document is not defined"
- Events not removed on toast destroyal leads to memory leak
- Using vue-snotify together with vue-fullscreen
- Instalation documentation missing style sheet import HOT 1
- Vue snotify doesn't work on iOS Safari 9 and below
- TypeError : async is not a function after calling this.$snotify.async HOT 1
- Cannot read property 'emitter' of undefined HOT 1
- Unexpected token: keyword «const» [./node_modules/vue-snotify/vue-snotify.esm.js:55,0] HOT 1
- Vuetify dialog
- Is this project still active?
- Clicking on html markup separately on various links
- Snotify just prints out JSON structure, while CSS applied HOT 1
- SNotify not showing any styles HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-snotify.