Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problem with opacity + wheel #279

Open
Bhoft opened this issue Nov 5, 2019 · 1 comment
Open

Problem with opacity + wheel #279

Bhoft opened this issue Nov 5, 2019 · 1 comment

Comments

@Bhoft
Copy link

Bhoft commented Nov 5, 2019

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

color_picker_bug_2

<!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>
@HotpotDesign
Copy link

HotpotDesign commented Dec 21, 2019 •
edited
Loading

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:

  1. Load https://labs.abeautifulsite.net/jquery-minicolors/.
  2. Copy #667EEA into the hex opacity demo (first demo in the ...and more! section).
  3. 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:

  1. In the hex opacity demo, paste #05ebd0.
  2. Move the hue slider to any position.
  3. Copy this hex value.
  4. Move the opacity slider. The hex value remains the same, as expected.
  5. Paste the hex value from step 2 into the input field.
  6. Move the opacity slider. Now the bug surfaces, changing the hex value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Bhoft