Hook needed: afterOpen

[raphaelbastide]

I am using the container option so I can easily modify the size and the placement of the gallery. However, I want this element to be hidden before the gallery is opened, and closed after the gallery is closed. I currently do:

afterMarkup: function () {
  b.classList.add("has-gallery")
},
afterClose: function () {
  b.classList.remove("has-gallery")
}

…but the afterMarkup runs once if I am not mistaking. A afterOpen or more ideally a afterCalled hook would be very cool in this case.

[nicolas-t]

Hello,

Not sure I totally understand your use case, but have you checked the api documentation here : https://chocolat.gitbook.io/chocolat/api

Maybe it could be useful if you can add an eventListener on the element that opens chocolat in your container.

Anyway those hooks are a good idea and I will add them.

Best

[nicolas-t]

There is also a hook called afterImageLoad would it fit your needs ?

[raphaelbastide]

have you checked the api documentation

I did, but what I need is the other way around, being able to display or not the container if it is called.

Maybe it could be useful if you can add an eventListener on the element that opens chocolat in your container.

Yes, I can do that, but mixing that with afterClode hook (that I use) is a bit messy.

There is also a hook called afterImageLoad would it fit your needs ?

Not really, it seams to be triggered too late and the first image doesn’t show up.

But I am curious, what would be a good practice to use together the container option with a hidden, then visible container element?

[nicolas-t]

For specific needs like this the most flexible way is to use chocolat's API

Something like this for example

var instance = Chocolat([
        {src : 'demo-images/1.jpg', title : 'caption 1'},
        {src : 'demo-images/6.jpg', title : 'caption 2'},
        {src : 'demo-images/8.jpg', title : 'caption 3'},
    ], {
    container: document.querySelector('#container'),
    afterMarkup: function () {
        console.log('afterMarkup hook is called')
    },
    afterImageLoad: function () {
        console.log('afterImageLoad hook is called')
    },
    afterInitialize: function () {
        console.log('afterInitialize hook is called')
    },
    afterClose: function ()
        // Maybe remove "has-gallery" class here
        console.log('afterClose hook is called')
    },
})

document.querySelector('.api-open').addEventListener('click', function() {
    document.querySelector('#container').classList.add('has-gallery')

    console.log('open start')
    instance.api.open().then(function(){
        console.log('open done')
    })
})

document.querySelector('.api-close').addEventListener('click', function() {
    document.querySelector('#container').classList.remove('has-gallery')

    console.log('close start')
    instance.api.close().then(function(){
        console.log('close done')
    })
})

You can check this demo https://github.com/nicolas-t/Chocolat/blob/d8cdeb4d37547c8ae66ca672f1311d5dcf91613c/demo/index.html#L97-L113

I'll add a hook for beforeOpen and I think with beforeOpen and afterClose you should also be able to toggle the class when needed.

Feel free to share your code if you need more help

[raphaelbastide]

Very cool thanks!

[raphaelbastide]

Using beforeImageLoad and afterClose did the trick! Thank you!