Inlet

Inlet copied to clipboard

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

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)

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

Awesome!

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

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?