Change Hook Running On Init

[mgabi4488]

Hi guys,
I have a weird issue the change hook is running on plugin initializing, here is the test i did:

// Initialization
let picker = new CP(element);

// change hook listener
picker.on('change', function(r, g, b, a) {
    // firing immediately 
    console.log(1);
});

[taufik-nurrohman]

That’s intentional. The change hook will also run on init to tidy/validate the color value. You can disable this effect by adding a placeholder variable to store the initialization state once.

let init = true;

picker.on('change', function(r, g, b, a) {
    if (init) {
        return;
    }
    console.log([r, g, b, a]);
    init = false; // Update the state here!
});

[mgabi4488]

Thanks, that's exactly how i solved the issue.

[taufik-nurrohman]

FYI, you can also make custom hook inside another hook. In your case, that would be something like this:

function onChangeOnce(r, g, b, a) {
    this.fire('start', [r, g, b, a]);
    this.off('change', onChangeOnce);
}

​picker​.​on​(​'change'​,​ ​onChangeOnce)​;

Later, you can trigger your initialization function via the start hook:

picker.on('start', function(r, g, b, a) {
    console.log('Once!');
});

[evolross]

This seems weird. Why would we need to design around a test/validation? It's not logical that changed fires when the picker gets instantiated. Although it works well, your color picker package is very cumbersome to use with lots of strange work-arounds.

[taufik-nurrohman]

It's not logical that changed fires when the picker gets instantiated.

@evolross There’s a drag event that you can use to prevent this behaviour if you want 😉