From 0decef2093c676d91b0b590a9b94f201c4995716 Mon Sep 17 00:00:00 2001 From: Benjamin Jones Date: Wed, 12 Jun 2013 16:14:11 -0700 Subject: refactored fiveui.color functions; added more unit tests! --- src/js/fiveui/injected/prelude.js | 62 ++++++++++++++++++++++++--------------- src/js/tests/specs/prelude.js | 35 ++++++++++++++++++++++ 2 files changed, 73 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/js/fiveui/injected/prelude.js b/src/js/fiveui/injected/prelude.js index 705956a..ce27bdb 100644 --- a/src/js/fiveui/injected/prelude.js +++ b/src/js/fiveui/injected/prelude.js @@ -256,25 +256,32 @@ fiveui.color.colorCheck = function (selector, colorSet) { // function expression ?!? }; -/** - * Convert a base-10 byte to a zero padded hex byte. - */ -fiveui.color.componentToHex = function (c) { - var hex = c.toString(16).toUpperCase(); - return hex.length == 1 ? "0" + hex : hex; +componentToHex = function (c) { + var hex = c.toString(16).toUpperCase(); + return hex.length == 1 ? "0" + hex : hex; } +shortHexToHex = function (color) { + var have = color.length - 1; + var haveDigits = color.substr(1, color.length); + var need = 6 - have; + var reps = Math.ceil(need / have); + var i, strColor; + for (i = 0, stdColor = color; i < reps; i += 1) { stdColor += haveDigits; } + return stdColor.substr(0, 7); +}; + /** * Convert RGB values to Hex. */ fiveui.color.rgbToHex = function (r, g, b) { - return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); + return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); } /** * Convert a 3-byte hex value to base-10 RGB */ -fiveui.color.hexToRgb = function (hex) { +fiveui.color.hexToRGB = function (hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), @@ -295,36 +302,43 @@ fiveui.color.hexToRgb = function (hex) { * @throws {ParseError} if the rgb color string cannot be parsed */ fiveui.color.colorToHex = function(color) { - var have, need; if (color.substr(0, 1) === '#') { if (color.length === 7) { return color; } else { // deal with #0 or #F7 cases - var have = color.length - 1; - var haveDigits = color.substr(1, color.length); - var need = 6 - have; - var reps = Math.ceil(need / have); - var i, strColor; - for (i = 0, stdColor = color; i < reps; i += 1) { stdColor += haveDigits; } - return stdColor.substr(0, 7); + return shortHexToHex(color); } } + else { // color == 'rgb...' + var c = fiveui.color.colorToRGB(color) + return fiveui.color.rgbToHex(c.r, c.g, c.b); + } +}; + +/** + * Covert color to RGB color object. + * + * @param {!String} color The color string to convert. This should be either of the form rgb(...) or #... + * @returns {!Object} An RGB color object with attributes: r, g, b + * @throws {ParseError} if the rgb color string cannot be parsed + */ +fiveui.color.colorToRGB = function(color) { + + if (color.substr(0, 1) === '#') { + return fiveui.color.hexToRGB(fiveui.color.colorToHex(color)); + } var digits = /rgba?\((\d+), (\d+), (\d+)/.exec(color); if (!digits) { - return color; // in case there is a parse error, we just - // return the input unchanged + throw new ParseError('could not parse color string: ' + color); } - var r = parseInt(digits[1]); - var g = parseInt(digits[2]); - var b = parseInt(digits[3]); - - return fiveui.color.rgbToHex(r, g, b); + return { r: parseInt(digits[1]), + g: parseInt(digits[2]), + b: parseInt(digits[3]) }; }; - /** * Utilities for dealing with fonts. * diff --git a/src/js/tests/specs/prelude.js b/src/js/tests/specs/prelude.js index 31510e7..7b37494 100644 --- a/src/js/tests/specs/prelude.js +++ b/src/js/tests/specs/prelude.js @@ -9,6 +9,15 @@ describe('prelude', function() { }); }; + // 3 argument version of addTestSet + var addTestSet3 = function(fn, tests) { + _.each(tests, function(test) { + it(test[0], function() { + expect(fn(test[1], test[2], test[3])).toEqual(test[4]); + }); + }); + }; + addTestSet(fiveui.isString,[ // name , input , oracle ['isString: undefined', undefined, false], @@ -85,6 +94,24 @@ describe('prelude', function() { expect(typeof fiveui.color.colorCheck('', [])).toEqual('function'); }); + addTestSet(fiveui.color.hexToRGB, [ + // name , input , oracle + ['hexToRGB: full white' , '#000000', { r: 0, g: 0, b: 0 }], + ['hexToRGB: full black' , '#FFFFFF', { r: 255, g: 255, b: 255 }], + ['hexToRGB: C7 grey' , '#C7C7C7', { r: 199, g: 199, b: 199 }], + ['hexToRGB: full red' , '#FF0000', { r: 255, g: 0, b: 0 }], + ['hexToRGB: full blue' , '#0000FF', { r: 0, g: 0, b: 255 }], + ]); + + addTestSet3(fiveui.color.rgbToHex, [ + // name , 3 inputs, oracle + ['rgbToHex: full white' , 0, 0, 0, '#000000'], + ['rgbToHex: full black' , 255, 255, 255, '#FFFFFF'], + ['rgbToHex: C7 grey' , 199, 199, 199, '#C7C7C7'], + ['rgbToHex: full red' , 255, 0, 0, '#FF0000'], + ['rgbToHex: full blue' , 0, 0, 255, '#0000FF'], + ]); + addTestSet(fiveui.color.colorToHex, [ ['colorToHex: full white' , '#000000', '#000000'], ['colorToHex: abreviated white 1' , '#0', '#000000'], @@ -98,6 +125,14 @@ describe('prelude', function() { ['colorToHex: rgba(255, 255, 255, 100)', 'rgba(255, 255, 255, 100)', '#FFFFFF'] // alpha is ignored ]); + addTestSet(fiveui.color.colorToRGB, [ + ['colorToRGB: full white' , '#000000', {r: 0, g: 0, b:0} ], + ['colorToRGB: abreviated white 1' , '#0', {r: 0, g: 0, b:0} ], + ['colorToRGB: black' , '#FFFFFF', {r: 255, g: 255, b: 255} ], + ['colorToRGB: rgb(222, 173, 190)' , 'rgb(222, 173, 190)', {r: 222, g: 173, b: 190} ], + ['colorToRGB: rgba(255, 255, 255, 100)', 'rgba(255, 255, 255, 100)', {r: 255, g: 255, b: 255} ], + ]); + var getFontTests = [ // CSS ID, Family, Weight, Size ['#getFontTest1', 'Arial', 'normal', '12'], -- cgit v1.2.3