We're developing an AngularJS application that uses JQuery's colorPicker. Here's the code for the color picker:
$('#c' + driver.nodeId + '_' + driver.measurementGroupId).ColorPicker({
pickerDefault: driver.color,
colors: AppSettings.OptionalPalette,
transparency: true,
onColorChange: function(dummy, color) {
driverColorChanged(driver, color);
}
});
We want to prevent the user from selecting a color that has already been selected for another driver. So I implemented this code which runs in driverColorChanged() when the selected color matches an existing color:
var colorMatch = false;
_.forEach($scope.drivers, function(d) {
if (!(d.locationId === driver.locationId && d.measurementGroupId === driver.measurementGroupId)) {
colorMatch = d.color === color;
if (colorMatch) return false;
}
});
if (colorMatch) {
var colorPickerHandle = document.querySelector('#c' + driver.nodeId + '_' + driver.measurementGroupId);
var colorPicker = colorPickerHandle.nextElementSibling;
colorPicker.style.backgroundColor = driver.color;
$modal.open({
templateUrl: 'template/modal/messageModal.html',
size: "sm",
controller: function($scope, $modalInstance){
$scope.Header = $filter('translate')('CEBM_DRIVER_COLOR_TAKEN_TITLE');
$scope.Message = $filter('translate')('CEBM_DRIVER_COLOR_TAKEN_MSG');
$scope.ok = function(){
$modalInstance.close();
};
}
});
}
This works insofar as warning the user with a modal that the color has already been selected, but it doesn't work insofar as setting the color picker back to the original color with colorPicker.style.backgroundColor = driver.color. To be precise, if I put a breakpoint on that line and run it, I see that the color is changed back to the original, but then when I let it run I see that the color gets set back to the user's selected color (like the color picker is trying to override my programmatic settig of the backgroudColor).
So my question is: how can I tell the color picker not to set the color to the user's selected color? Is there another hook I can use, like beforeColorChange or something like that? How would you handle preventing the color from being set under specific conditions?