From 528ddf5e00e84f547708fbb995c7e4b82979a693 Mon Sep 17 00:00:00 2001 From: AngryAndConflict Date: Thu, 16 Feb 2017 16:05:19 +0300 Subject: [PATCH 1/4] Fix rechecking unchanged variable in .toString() Also changed ifs to switch, this way it is more readable and compact --- tinycolor.js | 48 +++++++++++++++++++----------------------------- 1 file changed, 19 insertions(+), 29 deletions(-) diff --git a/tinycolor.js b/tinycolor.js index 9580299..38ce49f 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -167,7 +167,6 @@ tinycolor.prototype = { var formatSet = !!format; format = format || this._format; - var formattedString = false; var hasAlpha = this._a < 1 && this._a >= 0; var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name"); @@ -179,35 +178,26 @@ tinycolor.prototype = { } return this.toRgbString(); } - if (format === "rgb") { - formattedString = this.toRgbString(); + switch(format){ + case 'rgb': + return this.toRgbString(); + case "prgb": + return this.toPercentageRgbString(); + case "hex3": + return this.toHexString(true); + case "hex4": + return this.toHex8String(true); + case "hex8": + return this.toHex8String(); + case "name": + return this.toName() || this.toHexString(); + case "hsl": + return this.toHslString(); + case "hsv": + return this.toHsvString(); + // case "hex": case "hex6": case unknown: + default: return this.toHexString(); } - if (format === "prgb") { - formattedString = this.toPercentageRgbString(); - } - if (format === "hex" || format === "hex6") { - formattedString = this.toHexString(); - } - if (format === "hex3") { - formattedString = this.toHexString(true); - } - if (format === "hex4") { - formattedString = this.toHex8String(true); - } - if (format === "hex8") { - formattedString = this.toHex8String(); - } - if (format === "name") { - formattedString = this.toName(); - } - if (format === "hsl") { - formattedString = this.toHslString(); - } - if (format === "hsv") { - formattedString = this.toHsvString(); - } - - return formattedString || this.toHexString(); }, clone: function() { return tinycolor(this.toString()); From a6d1d2b583906392091aabdbfa533828c45e685f Mon Sep 17 00:00:00 2001 From: AngryAndConflict Date: Sat, 18 Feb 2017 21:08:43 +0300 Subject: [PATCH 2/4] generalized clamp pattern In case of using tinycolor on complex math platform, will have more optimized clamp, Or in case using with libs like Ramda or Lodash, they have crazy caching and memoization mechanics, so there clamp version is more performant, and can be easily used in exchange. Also have made it with variable initialization so it is currable out of the box, and params order for same reason. --- tinycolor.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/tinycolor.js b/tinycolor.js index 38ce49f..e369b4b 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -994,9 +994,14 @@ function bound01(n, max) { return (n % max) / parseFloat(max); } +// Force a numeric value within the inclusive lower and upper bounds +var clamp = function(lower, upper, numeric){ + return mathMin(upper, mathMax(lower, numeric)); +}; + // Force a number between 0 and 1 function clamp01(val) { - return mathMin(1, mathMax(0, val)); + return clamp(0, 1, val); } // Parse a base-16 hex value into a base-10 integer From fbb366dc1a2249d7c7a5e5d3cbb5fbb41c88d9e2 Mon Sep 17 00:00:00 2001 From: AngryAndConflict Date: Sat, 18 Feb 2017 21:16:49 +0300 Subject: [PATCH 3/4] clamping 0 255 for brighten function --- tinycolor.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tinycolor.js b/tinycolor.js index e369b4b..1828e59 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -590,9 +590,9 @@ function lighten (color, amount) { function brighten(color, amount) { amount = (amount === 0) ? 0 : (amount || 10); var rgb = tinycolor(color).toRgb(); - rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); - rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); - rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); + rgb.r = clamp(0, 255, rgb.r - mathRound(255 * - (amount / 100))); + rgb.g = clamp(0, 255, rgb.g - mathRound(255 * - (amount / 100))); + rgb.b = clamp(0, 255, rgb.b - mathRound(255 * - (amount / 100))); return tinycolor(rgb); } From af8145de61b1affb3c0f5841618b9614c3ae3cdf Mon Sep 17 00:00:00 2001 From: AngryAndConflict Date: Sat, 18 Feb 2017 21:27:37 +0300 Subject: [PATCH 4/4] clamp usage inputToRGB return cleaning to use clamp, as well as bound01, in last one it really benifits in readability. --- tinycolor.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tinycolor.js b/tinycolor.js index 1828e59..58d73d8 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -337,9 +337,9 @@ function inputToRGB(color) { return { ok: ok, format: color.format || format, - r: mathMin(255, mathMax(rgb.r, 0)), - g: mathMin(255, mathMax(rgb.g, 0)), - b: mathMin(255, mathMax(rgb.b, 0)), + r: clamp(0, 255, rgb.r), + g: clamp(0, 255, rgb.g), + b: clamp(0, 255, rgb.b), a: a }; } @@ -978,7 +978,7 @@ function bound01(n, max) { if (isOnePointZero(n)) { n = "100%"; } var processPercent = isPercentage(n); - n = mathMin(max, mathMax(0, parseFloat(n))); + n = clamp(0, max, parseFloat(n)); // Automatically convert percentage into number if (processPercent) {