Skip to content
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

@codespacing
Copy link

@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
Copy link

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

        }]
    ]
});

Loading

@marcelodolza
Copy link
Owner

@marcelodolza marcelodolza commented Mar 5, 2018

Loading

@codespacing
Copy link
Author

@codespacing 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.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants