Instance in callbacks [duplicate]

[nickcarterney]

If I have many Glides in a page like this, this context always return the latest initialized Glide:

let queries = ["slide1", "slide2"];

queries .forEach(function(queryItem){
    let currentGlide = new Glide(document.querySelector("." + queryItem), {
        //options...
    })

    currentGlide.on("run.after", function(e){
        //e should be an instance, then I can know the current Glide is
        console.log(this);// <= always return Slide 2
    })

    currentGlide.mount();
})

How can I get the current Glide in event callback function? same with issue in #44

[nickcarterney]

Current my solution :( although it's too bad, but I cannot find the other ways

let queries = ["slide1", "slide2"],
    glides = {};

queries.forEach(function(queryItem){
    let currentGlide = new Glide(document.querySelector("." + queryItem), {
        //options...
    })

    currentGlide.on("run.after", function(e){
        queries.forEach(function(queryItem){
            if(document.querySelector("." + queryItem).dataset.currentTarget) {
                //current Glide
                console.log(glides[queryItem]);
            }
        })
    })

    currentGlide.mount();

    currentGlide.addEventListener("mouseenter", function(e){
        queries.forEach(function(queryItem){
            document.querySelector("." + queryItem).dataset.currentTarget = false;
        })
        e.target.dataset.currentTarget = true;
    })
    glides[queryItem] = currentGlide;
})

It takes too many codes :(

[nickcarterney]

Well, I've customized for myself. Hope that this feature will available in 4.0 version

[jedrzejchalubek]

let queries = ["slide1", "slide2"];

queries .forEach(function(queryItem){
    let currentGlide = new Glide(document.querySelector("." + queryItem), {
        //options...
    })

    currentGlide.on("run.after", function(e) {
        console.log(currentGlide); // <= current glide instance
    })

    currentGlide.mount();
})

[nickcarterney]

let queries = ["slide1", "slide2"];

queries .forEach(function(queryItem){
    let currentGlide = new Glide(document.querySelector("." + queryItem), {
        //options...
    })

    currentGlide.on("run.after", function(e) {
        console.log(currentGlide); // <= current glide instance
    })

    currentGlide.mount();
})

that's not correct bro :D currentGlide always is Slide 2, because we've stored the 2nd initialized Glide into currentGlide.

1. currentGlide  = Slide 1
2. currentGlide  = Slide 2
3. currentGlide.on("run.after", function(e) {
        console.log(currentGlide); // <= current glide instance = Slide 2, what i need is Slide 1
    })

[jedrzejchalubek]

In that case, create an extension where you have direct access to an instance of glide and event bus. Details here: https://glidejs.com/docs/extending-components/