Can't pause and resume the timer (Error: Cannot read property 'querySelector' of undefined)

[codespacing]

Hi,

I use the same code your proposed here #71 but still have issues. I tried version 1.2 & 1.3.

Error:

Uncaught TypeError: Cannot read property 'querySelector' of undefined
at Object.$iziToast.progress (iziToast.js:394)
at HTMLButtonElement. (iziToast.js:917)

The code:

iziToast.show({
    timeout: 10000,
    close: false,
    overlay: true,
    toastOnce: true,
    pauseOnHover: false,
    id: 'question',
    message: 'Working with time',
    position: 'center',
    buttons: [
        ['<button><b>RESUME</b></button>', function (instance, toast) {
           
            instance.progress(toast).resume();

        }, true],
        ['<button>PAUSE</button>', function (instance, toast) {

            instance.progress(toast).pause();

        }]
    ]
});

Can you please help with this?

[rossdomke]

I ran into the same issue you did trying to pause. It really comes down to the fact that the progress function is expecting iziToast.progress(options, toast, callback). So you're really passing your toast into the options param it seems. But if you add a null for the first param you get a new error about settings.TIME.END undefined. I mucked around with it but I cannot get the full iziToast settings. In the end I added some event listeners to the toast and called them. It works well enough, but I feel there is a better solution.

I put this code under the comment //Progress Bar & Timeout inside of the if(settings.timeout) block:

$DOM.toast.addEventListener(PLUGIN_NAME+'-reset', function(e){
  var _this = this;
  that.progress(settings, $DOM.toast, function(){
    _this.classList.add(PLUGIN_NAME+'-reseted');
    that.progress(settings, $DOM.toast, function(){
      _this.classList.remove(PLUGIN_NAME+'-reseted');
    }).start();
  }).reset();
});

$DOM.toast.addEventListener(PLUGIN_NAME+'-pause', function(e){
  this.classList.add(PLUGIN_NAME+'-paused');
  that.progress(settings, $DOM.toast).pause();
});

$DOM.toast.addEventListener(PLUGIN_NAME+'-resume', function(e){
  this.classList.remove(PLUGIN_NAME+'-paused');
  that.progress(settings, $DOM.toast).resume();
});

$DOM.toast.addEventListener(PLUGIN_NAME+'-start', function(e){
  this.classList.remove(PLUGIN_NAME+'-paused');
  that.progress(settings, $DOM.toast).start();
});

Then you can just trigger the event on the toast:

var toast = document.getElementById('question');
toast.dispatchEvent(new Event('iziToast-start'));

Or if you don't want to have to worry about what event to call:

/**
 * Set progress 
 * @public
 */
$iziToast.setProgress = function($toast){
  return{
    start: function() {
      $toast.dispatchEvent(new Event(PLUGIN_NAME + '-start'));
    },
    pause: function() {
      $toast.dispatchEvent(new Event(PLUGIN_NAME + '-pause'));
    },
    resume: function() {
      $toast.dispatchEvent(new Event(PLUGIN_NAME + '-resume'));
    },
    reset: function() {
      $toast.dispatchEvent(new Event(PLUGIN_NAME + '-reset'));
    }
  }
}

Using your example:

iziToast.show({
    timeout: 10000,
    close: false,
    overlay: true,
    toastOnce: true,
    pauseOnHover: false,
    id: 'question',
    message: 'Working with time',
    position: 'center',
    buttons: [
        ['<button><b>RESUME</b></button>', function (instance, toast) {
           
            instance.setProgress(toast).resume();

        }, true],
        ['<button>PAUSE</button>', function (instance, toast) {

            instance.setProgress(toast).pause();

        }]
    ]
});

[marcelodolza]

@codespacing @rossdomke
Please, see if it's working normally now.
https://github.com/dolce/iziToast/releases/tag/v1.3.0

[codespacing]

Hi @Dolce

Yes it works now using this code:

iziToast.show({
    timeout: 10000,
    close: false,
    overlay: true,
    toastOnce: true,
    pauseOnHover: false,
    id: 'question',
    message: 'Working with time',
    position: 'center',
    buttons: [
        ['<button><b>RESUME</b></button>', function (instance, toast) {
           
            instance.progress({}, toast).resume();

        }, true],
        ['<button>PAUSE</button>', function (instance, toast) {

            instance.progress({}, toast).pause();

        }]
    ]
});	

Thanks a bunch for the update.