glidejs
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()
i have the same issue when trying to disable glidejs on a given breakpoint.
@sashahohloma i don't think this issue exists anymore does it ?
It seems very similar to this one: #388
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.
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;
}
}));
@ar5-in thanks, didn't come up with that, you just saved my afternoon 😂
