New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
codespacing opened this Issue Jan 18, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@codespacing

codespacing commented Jan 18, 2018

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

This comment has been minimized.

rossdomke commented Feb 8, 2018

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();

        }]
    ]
});

@dolce dolce added the bug label Mar 4, 2018

@dolce

This comment has been minimized.

Owner

dolce commented Mar 5, 2018

@codespacing

This comment has been minimized.

codespacing commented Mar 5, 2018

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.

@dolce dolce added the fixed label Mar 5, 2018

@dolce dolce closed this Mar 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment