support rgba(r,g,b,a) - Githubissues

enjalot commented 11 years ago

find a way to present this to the user just presentation or also editable?

georules commented 11 years ago

Thistle doesn't support rgba, but does have hsl, rgb. I did a regex for hsl to present thistle. Perhaps the regex that matched should determine a translated output from thistle (getRGB, getHSL, getCSS)

michaelsboost commented 8 years ago

I added RGBA to the RegEx.

Minor change: from: /rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)/g to: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)/g

Here's a fiddle I made to play with this idea. I'm using JQuery MiniColors for this and got RGBA to work. I'm using it in my application kodeWeave

curran commented 8 years ago

Awesome!

georules commented 8 years ago

I had some problems with the fiddle provided. When changing alpha values, the other values would get reset completely.

https://drive.google.com/file/d/0ByHFCJUkfjcXenVtbzBwVEgxV3M/view?usp=sharing

michaelsboost commented 8 years ago

Try now: http://plnkr.co/edit/H3dirvhyvGAxGLXiaoxM?p=preview

I'm using TinyColor to convert color codes. (Seeing as how JQuery MiniColors does not support HSL color values)

This little snippet (for HSL) fixes the problems you were experiencing.

var color = hslMatch.string;
var hasAlpha = parseFloat(color.split(',')[3]);
var alphaVal = ( hasAlpha ) ? hasAlpha : "1";
$('#pickerHolder').empty().append('<input type="text" id="picker" value="'+ tinycolor(color).toRgbString() +'" data-opacty="'+ alphaVal +'">');
$('#picker').minicolors({
  format: 'rgb',
  opacity: true,
  inline: true,
  change: function(value, opacity) {
    pickerCallback(tinycolor(this.value).toHslString(),'hsl');
  }
}).focus();

JQuery MiniColors is a great color picker, but for some people the only flaw is that it requires JQuery. So in order to port it properly with Inlet it'd have to be converted to Vanilla JS.

Think it's time for this issue to be closed?

enjalot / Inlet

support rgba(r,g,b,a) #4