mouse0270 / bootstrap-notify

Turns standard Bootstrap alerts into "Growl-like" notifications.
http://bootstrap-notify.remabledesigns.com/
MIT License
2.25k stars 641 forks source link

update showProgess and delay #110

Open alibarrak opened 9 years ago

alibarrak commented 9 years ago

I am wondering if this approach is possible with current update methods

  1. show sticky loading notify with {delay:0, showProgressbar: false}
  2. update title and message, then auto dismiss it {delay: 3000, showProgressbar: false}

it appears to me once showProgressbar is off I cannot turn on again. so I have to keep {showProgressbar: true} then use update('progress', 100). However, I cannot incorporate "delay" directly in this case. Any suggestion or correction

mouse0270 commented 9 years ago

Just to verify, you want to have show progress bar set to false and not have a delay before you update the notification. After you update the notificaion you want to add a delay of 3000

I would recommend something on the lines of this.

var notify = $.notify('<strong>Saving</strong> Do not close this page...', {
    allow_dismiss: false,
    delay: 0
});

onSaveComplete() {
    notify.update({'type': 'success', 'message': '<strong>Success</strong> Your page has been saved!'});
    setTimeout(function() {
        notify.close();
    }, 4500);
}

I hope this is what you were trying to accomplish. If not let me know.

alibarrak commented 9 years ago

not exactly what I'm trying to get. Basically, I show notify with progressBar that indicates the time until exit. your example does not show progressBar. I guess I need to reuse the setInterval somehow

alibarrak commented 9 years ago

I accomplished what I was trying to do. thanks to @defkev I added the following to update more values:

case "allow_dismiss":
  this.$ele.find('[data-notify="dismiss"]').css('display', commands[command] == true ? 'inline' : 'none');
  break;
case "delay":
  self.$ele.data('notify-delay', commands[command]);
  break;
case "showProgressbar":
  if(commands[command])
    this.$ele.find('[data-notify="progressbar"]').show();
  else
    this.$ele.find('[data-notify="progressbar"]').hide();
  break;

also replaced progressbar remove

this.$ele.find('[data-notify="progressbar"]').remove();

with hide

this.$ele.find('[data-notify="progressbar"]').hide();

this way I show sticky notify with showProgressbar:false and delay:0 then

var delay= 3000;
var timer = 200;
notify.update('delay', delay);
notify.update('showProgressbar', true);
var d = delay;
setInterval(function () {
  d -= timer;
  var percent = ((delay - d) / delay) * 100;
  toast.update('progress', percent);
  setTimeout(function () {
    clearInterval(timer);
    toast.close();
  }, delay);
}, timer);
mouse0270 commented 9 years ago

in version 4 I am adding the ability to update settings. I will take a look into using hide instead of remove