FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

rgb() and rgba() support added by enchev · Pull Request #1777 · NativeScript/NativeScript · GitHub

/ NativeScript Public

rgb() and rgba() support added #1777

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

Merged
enchev merged 1 commit into from
Mar 17, 2016
Conversation 5 Commits 1 Checks 0 Files changed
Merged

rgb() and rgba() support added #1777

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 .ts  (2) All 1 file type selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
82 changes: 58 additions & 24 deletions apps/tests/color-tests.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ export var test_Hex_Color = function () {
var color = new Color("#FF0000");
// ```
// </snippet>
TKUnit.assert(color.a === 255, "Color.a not properly parsed");
TKUnit.assert(color.r === 255, "Color.r not properly parsed");
TKUnit.assert(color.g === 0, "Color.g not properly parsed");
TKUnit.assert(color.b === 0, "Color.b not properly parsed");
TKUnit.assert(color.hex === "#FF0000", "Color.hex not properly parsed");
TKUnit.assert(color.argb === _parseArgb(255, 255, 0, 0), "Color.argb not properly parsed");
TKUnit.assertEqual(color.a, 255, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 0, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 0, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, "#FF0000", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(255, 255, 0, 0), "Color.argb not properly parsed");
}

export var test_ShortHex_Color = function () {
Expand All @@ -32,12 +32,12 @@ export var test_ShortHex_Color = function () {
var color = new Color("#F80");
// ```
// </snippet>
TKUnit.assert(color.a === 255, "Color.a not properly parsed");
TKUnit.assert(color.r === 255, "Color.r not properly parsed");
TKUnit.assert(color.g === 136, "Color.g not properly parsed"); // 0x88 == 136
TKUnit.assert(color.b === 0, "Color.b not properly parsed");
TKUnit.assert(color.hex === "#FF8800", "Color.hex not properly parsed");
TKUnit.assert(color.argb === _parseArgb(255, 255, 136, 0), "Color.argb not properly parsed");
TKUnit.assertEqual(color.a, 255, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 136, "Color.g not properly parsed"); // 0x88 == 136
TKUnit.assertEqual(color.b, 0, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, "#FF8800", "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(255, 255, 136, 0), "Color.argb not properly parsed");
}

export var test_Argb_Color = function () {
Expand All @@ -48,12 +48,12 @@ export var test_Argb_Color = function () {
var color = new Color(100, 255, 100, 100);
// ```
// </snippet>
TKUnit.assert(color.a === 100, "Color.a not properly parsed");
TKUnit.assert(color.r === 255, "Color.r not properly parsed");
TKUnit.assert(color.g === 100, "Color.g not properly parsed");
TKUnit.assert(color.b === 100, "Color.b not properly parsed");
TKUnit.assert(color.hex === _buildHex(100, 255, 100, 100), "Color.hex not properly parsed");
TKUnit.assert(color.argb === _parseArgb(100, 255, 100, 100), "Color.argb not properly parsed");
TKUnit.assertEqual(color.a, 100, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(100, 255, 100, 100), "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(100, 255, 100, 100), "Color.argb not properly parsed");
}

export var test_ArgbInt_Color = function () {
Expand All @@ -65,12 +65,46 @@ export var test_ArgbInt_Color = function () {
var color = new Color(argb);
// ```
// </snippet>
TKUnit.assert(color.a === 100, "Color.a not properly parsed");
TKUnit.assert(color.r === 100, "Color.r not properly parsed");
TKUnit.assert(color.g === 100, "Color.g not properly parsed");
TKUnit.assert(color.b === 100, "Color.b not properly parsed");
TKUnit.assert(color.hex === _buildHex(100, 100, 100, 100), "Color.hex not properly parsed");
TKUnit.assert(color.argb === _parseArgb(100, 100, 100, 100), "Color.argb not properly parsed");
TKUnit.assertEqual(color.a, 100, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 100, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(100, 100, 100, 100), "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(100, 100, 100, 100), "Color.argb not properly parsed");
}

export var test_rgb_Color_CSS = function () {
// <snippet module="color" title="color">
// ### Creating a Color from four RGB values
// ``` JavaScript
//// Creates the color with 255 red, 100 green, 100 blue
var color = new Color("rgb(255, 100, 100)");
// ```
// </snippet>
TKUnit.assertEqual(color.a, 255, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(255, 255, 100, 100), "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(255, 255, 100, 100), "Color.argb not properly parsed");
}

export var test_rgba_Color_CSS = function () {
var alpha = 0.5;
var expected = Math.round(alpha * 255);
// <snippet module="color" title="color">
// ### Creating a Color from four RGB values
// ``` JavaScript
//// Creates the color with 255 red, 100 green, 100 blue and 0 alpha
var color = new Color(`rgba(255, 100, 100, ${alpha})`);
// ```
// </snippet>
TKUnit.assertEqual(color.a, expected, "Color.a not properly parsed");
TKUnit.assertEqual(color.r, 255, "Color.r not properly parsed");
TKUnit.assertEqual(color.g, 100, "Color.g not properly parsed");
TKUnit.assertEqual(color.b, 100, "Color.b not properly parsed");
TKUnit.assertEqual(color.hex, _buildHex(expected, 255, 100, 100), "Color.hex not properly parsed");
TKUnit.assertEqual(color.argb, _parseArgb(expected, 255, 100, 100), "Color.argb not properly parsed");
}

var _buildHex = function (a: number, r: number, g: number, b: number): string {
Expand Down
49 changes: 43 additions & 6 deletions color/color-common.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,18 @@ export class Color implements definition.Color {
if (arguments.length === 1) {
var arg = arguments[0];
if (types.isString(arg)) {
if (knownColors.isKnownName(arg)) {
if (isRgbOrRgba(arg)) {
this._argb = argbFromRgbOrRgba(arg);
} else if (knownColors.isKnownName(arg)) {
// The parameter is a known color name
this._hex = knownColors.getKnownColor(arg);
this._name = arg;
this._argb = this._argbFromString(this._hex);
} else {
// The parameter is a "#AARRGGBB" formatted string
this._hex = this._normalizeHex(arg);
this._argb = this._argbFromString(this._hex);
}
this._argb = this._argbFromString(this._hex);
} else if (types.isNumber(arg)) {
// The parameter is a 32-bit unsigned integer where each 8 bits specify a color component
this._argb = arg;
Expand Down Expand Up @@ -121,7 +124,7 @@ export class Color implements definition.Color {
return true;
}

return HEX_REGEX.test(value);
return HEX_REGEX.test(value) || isRgbOrRgba(value);
}

private _buildHex(): string {
Expand Down Expand Up @@ -158,10 +161,44 @@ export class Color implements definition.Color {
if (hexStr.charAt(0) === AMP && hexStr.length === 4) {
// Duplicate each char after the #, so "#123" becomes "#112233"
hexStr = hexStr.charAt(0)
+ hexStr.charAt(1) + hexStr.charAt(1)
+ hexStr.charAt(2) + hexStr.charAt(2)
+ hexStr.charAt(3) + hexStr.charAt(3);
+ hexStr.charAt(1) + hexStr.charAt(1)
+ hexStr.charAt(2) + hexStr.charAt(2)
+ hexStr.charAt(3) + hexStr.charAt(3);
}
return hexStr;
}
}

function isRgbOrRgba(value: string): boolean {
var toLower = value.toLowerCase();
return (toLower.indexOf("rgb(") === 0 || toLower.indexOf("rgba(") === 0) && toLower.indexOf(")") === (toLower.length - 1);
}

function argbFromRgbOrRgba(value: string): number {
var toLower = value.toLowerCase();
var parts = toLower.replace("rgba(", "").replace("rgb(", "").replace(")", "").trim().split(",");

var r = 255,
g = 255,
b = 255,
a = 255;

if (parts[0]) {
r = parseInt(parts[0].trim());
}

if (parts[1]) {
g = parseInt(parts[1].trim());
}

if (parts[2]) {
b = parseInt(parts[2].trim());
}

if (parts[3]) {
a = Math.round(parseFloat(parts[3].trim()) * 255);
}

// Format is ARGB, so alpha takes the first 8 bits, red the next, green the next and the last 8 bits are for the blue component
return (a << 24) | (r << 16) | (g << 8) | b;
}
Back | FazBrowse Home | New Git URL