matiasgali/guillotine

eventOnChange and onChange callback doesn't work

Closed this issue · 2 comments

Hello, thanks for perfect plugin.
I am not sure is it bug.
if it isn't - you may want add some extra info about this thing to readme.

// code to bug reproduce
var picture = $('#thepicture');
picture.guillotine('remove');//i need this in case of user pick another file
picture.guillotine({width: 400, height: 300});
picture.guillotine({eventOnChange: 'guillotinechange'});
picture.on('guillotinechange', function(ev, data, action){
    //this callback doesn't work
});
picture.guillotine('fit');

//working code
var picture = $('#thepicture');
picture.guillotine('remove');//i need this in case of user pick another file
//event declaration should go before setting size or calling any method
picture.guillotine({eventOnChange: 'guillotinechange'});
picture.on('guillotinechange', function(ev, data, action){
    //this callback works well
});
picture.guillotine({width: 400, height: 300});
picture.guillotine('fit');

Ubuntu 14.04 lts / chrome 39.0.2171.95 (64-bit) / jquery v1.11.1 / Guillotine v1.3.0

$('#thepicture') was loaded by FileReader.readAsDataURL
(i am working on image crop/preview before upload)
but i think it is'n matter

Some details:
after calling

picture.guillotine({eventOnChange: 'guillotinechange'});

options

picture.guillotine({width: 300, height: 300});

are ignored
And this works fine:

$(this).guillotine({width: 300, height: 300, onChange: function(data, action){
alert('!');
}});

You're not setting up the plugin properly.

All the options need to be passed on initialization. The API in the docs describes what you can do after the plugin is initialized.

var picture = $('#thepicture')

// Pass all the options
picture.guillotine({ width: 400, height: 300, eventOnChange: 'guillotinechange' })

// Event listener
picture.on('guillotinechange', function (ev, data, action) { ... })

Please read the docs carefully before submitting issues.