destroy() fires error after second mount() call

Hi! Thanks for very useful plugin! I founded some bug in Event Binder I try to mount Glide on small screens and destroy on large screens. When, Glide was mounted after first destroy(), on second destroy() Glide fire error in console and destroy doesn’t work There is fiddle

There is my code

window.addEventListener('resize', () => {
    if( window.innerWidth < 1200 ) {
        glide.mount();
    } else {
        glide.destroy();
    }
});

Also, if I set {type: ‘carousel’} Glide creates new clones with every attempt to call destroy()

[ar5-in]

I encountered the same issue when I tried to swap the slides and in doing so I was using destroy() and mount(). What I figured is that when you use the destroy() method, the listener property is removed and is not set when you call mount() after that. So any destroy() call will throw the error.

As a workaround, I created a new Glide object instead of calling mount() on the existing one.

instead of:

// First time I setup the slider
var glide = new Glide(slider, settings);

// ...

glide.destroy();
// ... code to update slides ...
glide.mount();

I did this:

// First time I setup the slider
var glide = new Glide(slider, settings);

// ...
glide.destroy();
// ... code to update slides ...
// Setup the slider again to initialize correctly
glide = new Glide(slider, settings);
glide.mount();

I think mount() is not the opposite of destroy() and when you call destroy once, event listeners are lost. And when we call mount() again, it doesn’t re-initializes the even listeners. May be a initialize() function that we can call before mount() could help.

[nirodaonline]

Yeah, same scenario, same issue.

It would be nice to use mount() and destroy() indefinitely as OP mentioned.

+1 for that.

EDIT: Or better yet, a way to disable per breakpoint.

EDIT 2: Workaround: add a control variable:

let glideActive = false;

$(window).on('resize', Drupal.debounce( function () {
    if ($(this).innerWidth() <= 992) {
        if (!glideActive) {
            glide = new Glide(slider, settings);
            glide.mount();
            glideActive = true;
        }
    } else if (glideActive) {
        glide.destroy();
        glideActive = false;
    }
}));