Croppie: Add event listener capabilities for update event

[bmalets]

Hi! Is it possible to catch somehow "zooming" or "moving" events in cropping area?
This code not working:

      var croppe = $('.photocrop_area').croppie({
        enableExif: true,
        url:        'test.png',
        viewport:   {width: 200, height: 200, type: 'squere'},
        boundary:   {width: 400, height: 300}
      });
      croppe.on('update', function(event) {
        console.log('it works');
      });

Can you kindly provide a simple working example?
Many thanks!

[thedustinsmith]

Try this:

var croppe = $('.photocrop_area').croppie({
        enableExif: true,
        url:        'test.png',
        viewport:   {width: 200, height: 200, type: 'squere'},
        boundary:   {width: 400, height: 300},
        update: function (data) {
            console.log('it works');
        }
      });

I think the reason we never implemented an event thing like that one you're suggesting is due to the fact that it's jquery independent. Those events are fired different ways. I think it would be useful to have that as an event though.

If this fixes your issue, would you mind if I hijack this case and rename it to "Add event listener capabilities for update event" or something along those lines?

[bmalets]

@thedustinsmith, thank you!

[thedustinsmith]

We're now triggering an update event that you can listen to with or without jquery.

with:

$(myel).on('update', function(ev, data) { 
    console.log(data); 
});

without:

document.querySelector('#croppie-el').addEventListener('update', function (ev) { 
    console.log(ev.detail); 
});

I'm going to leave this feature undocumented for a while - since I haven't tested it too thoroughly.

[nicolasvahidzein]

You should totally add this to the docs it's very important. And also Bravo on an amazing plugin.

[raffiniert]

How can I get this.croppie.elements in that update-function?
https://github.com/Foliotek/Croppie/issues/289

[LetherMade]

For vanilla JS, just use the croppie element to listen:

const croppie = new Croppie(image, {
    viewport: {
        width: 100,
        height: 100
    },
});

croppie.element.addEventListener('update', function(event) {
    const cropData = event.detail;
});