Add "cancel" event

[tommy7600]

Hi, the "cancel" event should be very helpful, mainly for revert changes after changes introduced by "move" event.

[bgrins]

Could you use the hide event for detecting when the cancel happens? This passes the color into the callback, which will be the original color.

[tommy7600]

It works. Thanks.

[cekerholic]

I think cancel event should be added. Currently is it not possible to use hide alongside with change event.

Here's the example:

$('#colorpicker').spectrum({
  color: '#f4ece2',
  preferredFormat: 'hex',
  showInput: true,
  move: function(color) {
    $('body').css('backgroundColor', color.toHexString());
  },
  hide: function(color) {
    $('body').removeAttr('style');
  },
  change: function(color) {
    $('body').css('backgroundColor', color.toHexString());
  }
});

The expected behavior is:

• Moving the cursor will change the background color,
• Clicking "choose" button, the selected color will be applied to body (doesn't work),
• Clicking "cancel" (or outside colorpicker) will discard the changes.

[tommy7600]

Maybe you are right.

[LionelMarbot]

Thank you for this great plugin. We are, however, also missing the ability to add a callback on the cancel event.

[cekerholic]

any update on this?

[ctekin]

Hi @cekerholic, here's how I handle a similar situation :

$('#colorpicker').spectrum({
  show: function() {
    $(this).data('changed', false);
  },
  change: function(color) {
    $(this).data('changed', true);
  },
  hide: function(color) {
    if($(this).data('changed')) {
        // changed
    } else {
        // cancelled
    }
  }
});

This works because change event is fired before the hide event.

[cekerholic]

Thanks @ctekin, works like a charm :+1:

[LionelMarbot]

Makes perfect sense, thank you @ctekin!

Would however still expect the plugin to have a native cancel event...

[winternet-studio]

Using hide is a bad idea because it triggers both when a new color was chosen and when you cancel (incl. clicking outside the picker). There really needs to be a cancel (or revert) event that triggers when clicking Cancel or clicking outside the picker.

My problem right now is that I need to know whether the user canceled or not, in order to know if I should update another input field - and I can't do that without hacking it.

[andrew-pause]

+1 for cancel event. you can simulate it with detecting a change between show and hide, but it's possible that they have opened and clicked "choose" without making any changes, my code will incorrectly detect this as a "cancel"

[usmanlogin]

Hi folks, i need help , my scenario is bit different to this topic , i am using spectrum on a div and how can i detect if user clicks on select or cancel button? suppose a person selects the color and click on select color will be applied but next time when he again opens the picker and dont want to change the color now here i need help how can i get the selected color if he clicks on "select", and i have multiple spectrum objects on same page for different purpose. thanks.

[lingtalfi]

@ctekin, thank you. I believe it would make sense to add a cancel event though (was looking for it in the doc, didn't found it, and had to search through the issues, almost posted a new one, until I found this "hack" of thought of sort).

[arekdygas]

Yeah - I know it's very old topic, but for any poor souls ending their search for close event here, I solved it this way:

$('#colorpicker').spectrum({
  hide: function(color) {
    if (document.activeElement.classList.contains('sp-cancel')) {
        // cancel was clicked
    }
  }
});