Skip to content

Add support for 8 character hex codes #4

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

Closed
wants to merge 1 commit into from
Closed

Add support for 8 character hex codes #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
103 changes: 64 additions & 39 deletions color-string.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,59 +24,81 @@ function getRgba(string) {
if (!string) {
return;
}
var abbr = /^#([a-fA-F0-9]{3})$/i,
hex = /^#([a-fA-F0-9]{6})$/i,
rgba = /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i,
per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/i,
keyword = /(\w+)/;

var rgb = [0, 0, 0],
a = 1,
match = string.match(abbr);
if (match) {

var abbr = /^#([a-f0-9]{3,4})$/i;
var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
var rgba = /^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/i here makes a difference

var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/;
var keyword = /(\D+)/;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to change keyword (and why was the change needed to w+ in the first place)?


var rgb = [0, 0, 0, 1];
var match;
var i;
var hexAlpha;

if (match = string.match(hex)) {
hexAlpha = match[2];
match = match[1];
for (var i = 0; i < rgb.length; i++) {
rgb[i] = parseInt(match[i] + match[i], 16);

for (i = 0; i < 3; i++) {
// https://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/19
var i2 = i * 2;
rgb[i] = parseInt(match.slice(i2, i2 + 2), 16);
}
}
else if (match = string.match(hex)) {

if (hexAlpha) {
rgb[3] = Math.round((parseInt(hexAlpha, 16) / 255) * 100) / 100;
}
} else if (match = string.match(abbr)) {
match = match[1];
for (var i = 0; i < rgb.length; i++) {
rgb[i] = parseInt(match.slice(i * 2, i * 2 + 2), 16);
hexAlpha = match[3];

for (i = 0; i < 3; i++) {
rgb[i] = parseInt(match[i] + match[i], 16);
}
}
else if (match = string.match(rgba)) {
for (var i = 0; i < rgb.length; i++) {
rgb[i] = parseInt(match[i + 1]);

if (hexAlpha) {
rgb[3] = Math.round((parseInt(hexAlpha + hexAlpha, 16) / 255) * 100) / 100;
}
a = parseFloat(match[4]);
}
else if (match = string.match(per)) {
for (var i = 0; i < rgb.length; i++) {
} else if (match = string.match(rgba)) {
for (i = 0; i < 3; i++) {
rgb[i] = parseInt(match[i + 1], 0);
}

if (match[4]) {
rgb[3] = parseFloat(match[4]);
}
} else if (match = string.match(per)) {
for (i = 0; i < 3; i++) {
rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
}
a = parseFloat(match[4]);
}
else if (match = string.match(keyword)) {
if (match[1] == "transparent") {

if (match[4]) {
rgb[3] = parseFloat(match[4]);
}
} else if (match = string.match(keyword)) {
if (match[1] === 'transparent') {
return [0, 0, 0, 0];
}

rgb = colorNames[match[1]];

if (!rgb) {
return;
}

rgb[3] = 1;

return rgb;
} else {
return;
}

for (var i = 0; i < rgb.length; i++) {
for (i = 0; i < 3; i++) {
rgb[i] = scale(rgb[i], 0, 255);
}
if (!a && a != 0) {
a = 1;
}
else {
a = scale(a, 0, 1);
}
rgb[3] = a;
rgb[3] = scale(rgb[3], 0, 1);

return rgb;
}

Expand Down Expand Up @@ -136,9 +158,12 @@ function getAlpha(string) {
}

// generators
function hexString(rgb) {
return "#" + hexDouble(rgb[0]) + hexDouble(rgb[1])
+ hexDouble(rgb[2]);
function hexString(rgba) {
return "#"
+ hexDouble(rgba[0])
+ hexDouble(rgba[1])
+ hexDouble(rgba[2])
+ (rgba[3] < 1 ? (hexDouble(Math.round(rgba[3] * 255))) : '');
}

function rgbString(rgba, alpha) {
Expand Down
16 changes: 15 additions & 1 deletion test/basic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ var string = require("../color-string"),


assert.deepEqual(string.getRgba("#fef"), [255, 238, 255, 1]);
assert.deepEqual(string.getRgba("#fffFEF"), [255, 255, 239,1]);
assert.deepEqual(string.getRgba("#fffFEF"), [255, 255, 239, 1]);
assert.deepEqual(string.getRgba('#fffFEFff'), [255, 255, 239, 1]);
assert.deepEqual(string.getRgba('#fffFEF00'), [255, 255, 239, 0]);
assert.deepEqual(string.getRgba('#fffFEFa9'), [255, 255, 239, 0.66]);
assert.deepEqual(string.getRgba("rgb(244, 233, 100)"), [244, 233, 100, 1]);
assert.deepEqual(string.getRgba("rgb(100%, 30%, 90%)"), [255, 77, 229, 1]);
assert.deepEqual(string.getRgba("transparent"), [0, 0, 0, 0]);
Expand Down Expand Up @@ -33,6 +36,9 @@ assert.equal(string.getAlpha("hwb(244, 100%, 100%, 0.6)"), 0.6);
assert.equal(string.getAlpha("hwb(244, 100%, 100%)"), 1);

// alpha
assert.deepEqual(string.getRgba('#c814e933'), [200, 20, 233, 0.2]);
assert.deepEqual(string.getRgba('#c814e900'), [200, 20, 233, 0]);
assert.deepEqual(string.getRgba('#c814e9ff'), [200, 20, 233, 1]);
assert.deepEqual(string.getRgba("rgba(200, 20, 233, 0.2)"), [200, 20, 233, 0.2]);
assert.deepEqual(string.getRgba("rgba(200, 20, 233, 0)"), [200, 20, 233, 0]);
assert.deepEqual(string.getRgba("rgba(100%, 30%, 90%, 0.2)"), [255, 77, 229, 0.2]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should add a test for "RGBA(...)" as that should be supported.

Expand All @@ -57,9 +63,17 @@ assert.deepEqual(string.getHwb("hwb(400, 10%, 200%, 10)"), [360, 10, 100, 1]);
assert.strictEqual(string.getRgba("yellowblue"), undefined);
assert.strictEqual(string.getRgba("hsl(100, 10%, 10%)"), undefined);
assert.strictEqual(string.getRgba("hwb(100, 10%, 10%)"), undefined);
assert.strictEqual(string.getRgba('#1'), undefined);
assert.strictEqual(string.getRgba('#f'), undefined);
assert.strictEqual(string.getRgba('#4f'), undefined);
assert.strictEqual(string.getRgba('#45ab4'), undefined);
assert.strictEqual(string.getRgba('#45ab45e'), undefined);

// generators
assert.equal(string.hexString([255, 10, 35]), "#FF0A23");
assert.equal(string.hexString([255, 10, 35, 1]), '#FF0A23');
assert.equal(string.hexString([255, 10, 35, 0.3]), '#FF0A234D');
assert.equal(string.hexString([255, 10, 35, 0]), '#FF0A2300');

assert.equal(string.rgbString([255, 10, 35]), "rgb(255, 10, 35)");
assert.equal(string.rgbString([255, 10, 35, 0.3]), "rgba(255, 10, 35, 0.3)");
Expand Down