How do I prevent my jquery colorpicker from setting the selected color under certain conditions?

17 Views Asked by At

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?

0

There are 0 best solutions below