jquery-minicolors
jquery-minicolors copied to clipboard
claviska
Problem with opacity + wheel
Hi I found an issue that for the colours red + green the opacity slider also changes the rgb values when the wheel control type is used.
When i click on the blue swatch #00fand change the opacity slider i have the normal behaviour.
But when i click the red #f00and change the slider there is also an amount of blue and green added rgb(255,3,7), opacity instead of rgb(255,0,0), opacity.
Which can be seen in the demo below
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Case</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/claviska/jquery-minicolors/master/jquery.minicolors.css">
</head>
<body style="padding: 30px;">
<h3> swatches and opacity + wheel </h3>
<div style="max-width: 300px;">
<input type="text" id="swatches" class="form-control demo minicolors-input" data-format="rgb" data-control="wheel" data-opacity="1.00" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" data-defaultValue="rgba(255, 255, 255, 1)" value="rgba(255, 255, 255, 1)" size="25">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/claviska/jquery-minicolors/master/jquery.minicolors.js"></script>
<script>
$(document).ready(function(){
$('.demo').each( function() {
$(this).minicolors({
control: $(this).attr('data-control') || 'hue',
defaultValue: $(this).attr('data-defaultValue') || '',
format: $(this).attr('data-format') || 'hex',
keywords: $(this).attr('data-keywords') || '',
inline: $(this).attr('data-inline') === 'true',
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom',
swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
change: function(value, opacity) {
if( !value ) return;
if( opacity ) value += ', ' + opacity;
var rgbObject = $(this).minicolors('rgbObject');
if( typeof console === 'object' ) {
console.log(value);
// console.log(rgbObject);
}
},
theme: 'bootstrap'
});
});
});
</script>
</body>
</html>
Did you find a fix for this? We're running into this issue as well. To make this easier for @claviska to debug, the bug also appears on the minicolors demo page. To reproduce:
- Load https://labs.abeautifulsite.net/jquery-minicolors/.
- Copy #667EEA into the hex opacity demo (first demo in the ...and more! section).
- Change the opacity.
The original hex value becomes #657ceb.
However, this bug doesn't happen if you start with #FFFFFF or #333333.
This bug also doesn't occur if you first move the hue slider. For instance:
- In the hex opacity demo, paste #05ebd0.
- Move the hue slider to any position.
- Copy this hex value.
- Move the opacity slider. The hex value remains the same, as expected.
- Paste the hex value from step 2 into the input field.
- Move the opacity slider. Now the bug surfaces, changing the hex value.
