Option to support "no color"

[TheWizz]

It's quite common to have a color string set to a value to indicate a desired color, e.g., #FF0000. If the string is left empty or undefined, this is interpreted to mean "no color". Note that "no color" isn't really the same as transparent (as represented by an rgba value with alpha being 0), which is indeed a specified value.

The color picker already displays "no color" in a neutral manner when the ng-model string is empty, and properly shows the color when the string contains a value. Going the other way is more problematic, however. Here I would like to have the option of adding a button to the picker that would set the ng-model value to empty, and consider this a valid value when the "no color" option is enabled.

This button could be located under the vertical color "rainbow" bar in the picker. Perhaps as a small square with a red, diagonal line through it, similar to the "no color" idicator in many Adobe programs.

[ruhley]

I know some people have created branches just to add in a close button, #82 has asked for a close button for mobile phones. I want to do this properly so I can come up with 3 optional buttons that could be available.

<color-picker options="options" event-api="eventApi"></color-picker>

$scope.options = {
  close: {
    show: true,
    label: 'Close',
  },
  clear: {
    show: true,
    label: 'Clear',
  },
  reset: {
    show: true,
    label: 'Reset',
  }
};

There could then be new events for these buttons. There is already an onClose event, so I would just need to add events for the other two.

$scope.eventApi = {
  onClear: function(api, color, event) {},
  onReset: function(api, color, event) {},
};

Can you think of any other buttons or options that could be available?

[TheWizz]

Sounds good to me. I assume all the Close button does is to hide the picker pop-up (i.e., equivalent to clicking outside the picker now). But what's the difference between Clear and Reset?

One detail to keep in mind. If you add support for a "Clear" button, make sure that clearing the value also signals any enclosing form with $setDirty(). This is currently NOT done if the value is set to empty string – only if the value is set to a valid color. If a Clear option is enabled, an "empty" value should also be considered valid, and should update the model and make the form $dirty.

-JM

[ruhley]

I have added these options and released it in v2.2.0