Comparing version 1.0.1 to 1.0.2
338
es/index.js
@@ -11,3 +11,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); | ||
import { expr, hasProperty, isPlainObject, pick, round } from './utils'; | ||
import { expr, hasProperty, isPlainObject, isRequired, pick, round, validateHex } from './utils'; | ||
@@ -47,3 +47,3 @@ var RGB = ['r', 'g', 'b']; | ||
/** | ||
* Change the main color. | ||
* Set the main color. | ||
* | ||
@@ -57,5 +57,3 @@ * @param {string|Array|Object} color | ||
value: function setColor(color) { | ||
if (!color) { | ||
throw new Error('Not a valid color'); | ||
} | ||
if (!color) return; | ||
@@ -71,12 +69,24 @@ if (typeof color === 'string') { | ||
} else { | ||
throw new Error('Input not valid'); | ||
throw new Error('Invalid input type'); | ||
} | ||
} | ||
/** | ||
* Set color from an array. | ||
* | ||
* @private | ||
* @param {Array} input | ||
*/ | ||
}, { | ||
key: 'setColorFromArray', | ||
value: function setColorFromArray(color) { | ||
value: function setColorFromArray() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input'); | ||
if (!Array.isArray(input)) throw new Error('input is not an array'); | ||
this.rgb = { | ||
r: this.limit(color[0], 'r'), | ||
g: this.limit(color[1], 'g'), | ||
b: this.limit(color[2], 'b') | ||
r: this.limit(input[0], 'r'), | ||
g: this.limit(input[1], 'g'), | ||
b: this.limit(input[2], 'b') | ||
}; | ||
@@ -87,17 +97,29 @@ | ||
} | ||
/** | ||
* Set color from an object. | ||
* | ||
* @private | ||
* @param {Object} input | ||
*/ | ||
}, { | ||
key: 'setColorFromObject', | ||
value: function setColorFromObject(color) { | ||
if (hasProperty(color, 'h') && hasProperty(color, 's') && hasProperty(color, 'l')) { | ||
value: function setColorFromObject() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input'); | ||
if (!isPlainObject(input)) throw new Error('input is not an object'); | ||
if (hasProperty(input, 'h') && hasProperty(input, 's') && hasProperty(input, 'l')) { | ||
this.hsl = { | ||
h: this.limit(color.h, 'h'), | ||
s: this.limit(color.s, 's'), | ||
l: this.limit(color.l, 'l') | ||
h: this.limit(input.h, 'h'), | ||
s: this.limit(input.s, 's'), | ||
l: this.limit(input.l, 'l') | ||
}; | ||
this.rgb = this.hsl2rgb(); | ||
} else if (hasProperty(color, 'r') && hasProperty(color, 'g') && hasProperty(color, 'b')) { | ||
this.rgb = color; | ||
} else if (hasProperty(input, 'r') && hasProperty(input, 'g') && hasProperty(input, 'b')) { | ||
this.rgb = input; | ||
this.hsl = this.rgb2hsl(); | ||
} else { | ||
throw new Error('Not a valid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -117,3 +139,5 @@ | ||
key: 'lighten', | ||
value: function lighten(percentage) { | ||
value: function lighten() { | ||
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10; | ||
var hsl = this.shift({ | ||
@@ -135,3 +159,5 @@ l: this.constrain(this.lightness, percentage, [0, 100], '+') | ||
key: 'darken', | ||
value: function darken(percentage) { | ||
value: function darken() { | ||
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10; | ||
var hsl = this.shift({ | ||
@@ -153,3 +179,5 @@ l: this.constrain(this.lightness, percentage, [0, 100], '-') | ||
key: 'saturate', | ||
value: function saturate(percentage) { | ||
value: function saturate() { | ||
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10; | ||
var hsl = this.shift({ | ||
@@ -163,3 +191,3 @@ s: this.constrain(this.saturation, percentage, [0, 100], '+') | ||
/** | ||
* Descrease saturation. | ||
* Decrease saturation. | ||
* | ||
@@ -172,3 +200,5 @@ * @param {number} percentage | ||
key: 'desaturate', | ||
value: function desaturate(percentage) { | ||
value: function desaturate() { | ||
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10; | ||
var hsl = this.shift({ | ||
@@ -190,3 +220,5 @@ s: this.constrain(this.saturation, percentage, [0, 100], '-') | ||
key: 'adjustHue', | ||
value: function adjustHue(degrees) { | ||
value: function adjustHue() { | ||
var degrees = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 15; | ||
var hsl = this.shift({ | ||
@@ -203,3 +235,3 @@ h: this.constrainDegrees(this.hue, +degrees) | ||
* @param {Object} input | ||
* @param {boolean} returnHex | ||
* @param {boolean} [returnHex] | ||
* | ||
@@ -211,3 +243,4 @@ * @returns {string} | ||
key: 'remix', | ||
value: function remix(input) { | ||
value: function remix() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input'); | ||
var returnHex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
@@ -225,17 +258,2 @@ | ||
/** | ||
* Validate HEX color. | ||
* | ||
* @param {string} hex | ||
* | ||
* @returns {boolean} | ||
*/ | ||
}, { | ||
key: 'validHex', | ||
value: function validHex(hex) { | ||
return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex) | ||
); | ||
} | ||
/** | ||
* Generate a random color. | ||
@@ -263,5 +281,85 @@ * | ||
/** | ||
* Get the contrasted color for a given hex. | ||
* | ||
* @param {string} input | ||
* @returns {string} | ||
*/ | ||
}, { | ||
key: 'textColor', | ||
value: function textColor() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hex; | ||
var _hex2rgb = this.hex2rgb(input), | ||
r = _hex2rgb.r, | ||
g = _hex2rgb.g, | ||
b = _hex2rgb.b; | ||
var yiq = (r * 299 + g * 587 + b * 114) / 1000; | ||
return yiq >= 128 ? '#000' : '#fff'; | ||
} | ||
/** | ||
* Parse HEX color. | ||
* | ||
* @param {string} input | ||
* | ||
* @returns {string} | ||
*/ | ||
}, { | ||
key: 'parseHex', | ||
value: function parseHex() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input'); | ||
var color = input.replace('#', ''); | ||
var hex = color; | ||
if (color.length === 3) { | ||
hex = ''; | ||
color.split('').forEach(function (d) { | ||
hex += d + d; | ||
}); | ||
} | ||
hex = '#' + hex; | ||
if (!validateHex(hex)) { | ||
throw new Error('Invalid color'); | ||
} | ||
return hex; | ||
} | ||
/** | ||
* Parse CSS attribute. | ||
* | ||
* @param {string} input | ||
* @returns {Object} | ||
*/ | ||
}, { | ||
key: 'parseCSS', | ||
value: function parseCSS() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input'); | ||
var model = /^rgb/.test(input) ? 'rgba' : 'hsla'; | ||
var regex = new RegExp('^' + model + '?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?', 'i'); | ||
var matches = input.match(regex); | ||
if (matches && matches.length === 4) { | ||
var _ref; | ||
return _ref = {}, _defineProperty(_ref, model.slice(0, 1), parseInt(matches[1], 10)), _defineProperty(_ref, model.slice(1, 2), parseInt(matches[2], 10)), _defineProperty(_ref, model.slice(2, 3), parseInt(matches[3], 10)), _ref; | ||
} | ||
throw new Error('Invalid CSS string'); | ||
} | ||
/** | ||
* Convert a hex string to RGB object. | ||
* | ||
* @param {string} input | ||
* @param {string} [input] | ||
* @returns {{r: number, g: number, b: number}} | ||
@@ -287,3 +385,3 @@ */ | ||
* | ||
* @param {string} input | ||
* @param {string} [input] | ||
* @returns {{h: number, s: number, l: number}} | ||
@@ -303,3 +401,3 @@ */ | ||
* | ||
* @param {Object|string} input | ||
* @param {Object|string} [input] | ||
* @returns {{h: number, s: number, l: number}} | ||
@@ -316,3 +414,3 @@ */ | ||
if (!hasProperty(rgb, 'r') || !hasProperty(rgb, 'g') || !hasProperty(rgb, 'b')) { | ||
throw new Error('hex2hsl::invalid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -346,2 +444,3 @@ | ||
break; | ||
/* istanbul ignore next */ | ||
default: | ||
@@ -373,3 +472,3 @@ break; | ||
* | ||
* @param {Object|string} input | ||
* @param {Object|string} [input] | ||
* | ||
@@ -387,3 +486,3 @@ * @returns {string} | ||
if (!hasProperty(rgb, 'r') || !hasProperty(rgb, 'g') || !hasProperty(rgb, 'b')) { | ||
throw new Error('rgb2hex::invalid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -399,3 +498,3 @@ | ||
* | ||
* @param {Object|string} input | ||
* @param {Object|string} [input] | ||
* @returns {{r: number, g: number, b: number}} | ||
@@ -409,10 +508,6 @@ */ | ||
var hsl = input; | ||
var hsl = typeof input === 'string' ? this.parseCSS(input) : input; | ||
if (typeof hsl === 'string') { | ||
hsl = this.parseCSS(hsl); | ||
} | ||
if (!hasProperty(hsl, 'h') || !hasProperty(hsl, 's') || !hasProperty(hsl, 'l')) { | ||
throw new Error('hsl2rgb::invalid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -454,3 +549,3 @@ | ||
* | ||
* @param {Object} hsl | ||
* @param {Object|string} [input] | ||
* @returns {string} | ||
@@ -462,4 +557,6 @@ */ | ||
value: function hsl2hex() { | ||
var hsl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hsl; | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hsl; | ||
var hsl = typeof input === 'string' ? this.parseCSS(input) : input; | ||
return this.rgb2hex(this.hsl2rgb(hsl)); | ||
@@ -469,2 +566,5 @@ } | ||
/** | ||
* Convert hue to RGB using chroma and median point | ||
* | ||
* @private | ||
* @param {number} point | ||
@@ -479,3 +579,7 @@ * @param {number} chroma | ||
key: 'hue2rgb', | ||
value: function hue2rgb(point, chroma, h) { | ||
value: function hue2rgb() { | ||
var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('point'); | ||
var chroma = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isRequired('chroma'); | ||
var h = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : isRequired('hue'); | ||
var hue = h; | ||
@@ -507,36 +611,6 @@ | ||
/** | ||
* Parse HEX color. | ||
* Get a shifted color object with the same model of the input. | ||
* | ||
* @param {string} hex | ||
* | ||
* @returns {string} | ||
*/ | ||
}, { | ||
key: 'parseHex', | ||
value: function parseHex(hex) { | ||
var color = hex.replace('#', ''); | ||
var newHex = ''; | ||
if (color.length === 3) { | ||
color.split('').forEach(function (d) { | ||
newHex += d + d; | ||
}); | ||
} else { | ||
newHex = color; | ||
} | ||
newHex = '#' + newHex; | ||
if (!this.validHex(newHex)) { | ||
throw new Error('Not a valid color'); | ||
} | ||
return newHex; | ||
} | ||
/** | ||
* Parse CSS attribute. | ||
* | ||
* @param {string} input | ||
* @private | ||
* @param {Object} input - {r,g,b} or {h,s,l} | ||
* @returns {Object} | ||
@@ -546,32 +620,14 @@ */ | ||
}, { | ||
key: 'parseCSS', | ||
value: function parseCSS(input) { | ||
var model = /^rgb/.test(input) ? 'rgba' : 'hsla'; | ||
var regex = new RegExp('^' + model + '?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?', 'i'); | ||
var matches = input.match(regex); | ||
key: 'shift', | ||
value: function shift() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input'); | ||
if (matches && matches.length === 4) { | ||
var _ref; | ||
return _ref = {}, _defineProperty(_ref, model.slice(0, 1), parseInt(matches[1], 10)), _defineProperty(_ref, model.slice(1, 2), parseInt(matches[2], 10)), _defineProperty(_ref, model.slice(2, 3), parseInt(matches[3], 10)), _ref; | ||
if (!isPlainObject(input)) { | ||
throw new Error('Invalid input'); | ||
} | ||
throw new Error('Not a valid color'); | ||
} | ||
/** | ||
* Get a shifted color object with the same model of the input. | ||
* | ||
* @private | ||
* @param {Object} color - {r,g,b} or {h,s,l} | ||
* @returns {Object} | ||
*/ | ||
}, { | ||
key: 'shift', | ||
value: function shift(color) { | ||
var isHSL = Object.keys(color).some(function (d) { | ||
var isHSL = Object.keys(input).some(function (d) { | ||
return HSL.indexOf(d) !== -1; | ||
}); | ||
var isRGB = Object.keys(color).some(function (d) { | ||
var isRGB = Object.keys(input).some(function (d) { | ||
return RGB.indexOf(d) !== -1; | ||
@@ -581,3 +637,3 @@ }); | ||
if (isRGB && isHSL) { | ||
throw new Error('Only use a single color model'); | ||
throw new Error('Use a single color model'); | ||
} | ||
@@ -590,8 +646,4 @@ | ||
if (isHSL) { | ||
var hsl = pick(color, HSL); | ||
var hsl = pick(input, HSL); | ||
if (!Object.keys(hsl).length) { | ||
return this.hsl; | ||
} | ||
return _extends({}, this.hsl, hsl); | ||
@@ -601,8 +653,4 @@ } | ||
// Not HSL so it must be RGB | ||
var rgb = pick(color, RGB); | ||
var rgb = pick(input, RGB); | ||
if (!Object.keys(rgb).length) { | ||
return this.rgb; | ||
} | ||
return _extends({}, this.rgb, rgb); | ||
@@ -615,3 +663,3 @@ } | ||
* @private | ||
* @param {number} value | ||
* @param {number} input | ||
* @param {string} type | ||
@@ -623,16 +671,20 @@ * @returns {number} | ||
key: 'limit', | ||
value: function limit(value, type) { | ||
if (typeof value !== 'number') { | ||
throw new Error('not a number'); | ||
value: function limit() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input'); | ||
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isRequired('type'); | ||
if (typeof input !== 'number') { | ||
throw new Error('Input is not a number'); | ||
} | ||
/* istanbul ignore else */ | ||
if (RGB.indexOf(type) !== -1) { | ||
return Math.max(Math.min(value, 255), 0); | ||
return Math.max(Math.min(input, 255), 0); | ||
} else if (['s', 'l'].indexOf(type) !== -1) { | ||
return Math.max(Math.min(value, 100), 0); | ||
return Math.max(Math.min(input, 100), 0); | ||
} else if (type === 'h') { | ||
return Math.max(Math.min(value, 360), 0); | ||
return Math.max(Math.min(input, 360), 0); | ||
} | ||
throw new Error('invalid type'); | ||
throw new Error('Invalid type'); | ||
} | ||
@@ -647,3 +699,3 @@ | ||
* @param {Array} range | ||
* @param {string} direction | ||
* @param {string} sign | ||
* @returns {number} | ||
@@ -654,3 +706,8 @@ */ | ||
key: 'constrain', | ||
value: function constrain(input, amount, range, direction) { | ||
value: function constrain() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input'); | ||
var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isRequired('amount'); | ||
var range = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : isRequired('range'); | ||
var sign = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : isRequired('sign'); | ||
var _range = _slicedToArray(range, 2), | ||
@@ -660,3 +717,3 @@ min = _range[0], | ||
var value = expr(input + direction + amount); | ||
var value = expr(input + sign + amount); | ||
@@ -683,3 +740,6 @@ if (value < min) { | ||
key: 'constrainDegrees', | ||
value: function constrainDegrees(input, amount) { | ||
value: function constrainDegrees() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isRequired('input'); | ||
var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : isRequired('amount'); | ||
var value = input + amount; | ||
@@ -762,2 +822,4 @@ | ||
export { validateHex }; | ||
export default Colorizr; |
@@ -90,2 +90,6 @@ | ||
export function isRequired(name) { | ||
throw new Error((name || 'parameter') + ' is required'); | ||
} | ||
/** | ||
@@ -126,2 +130,7 @@ * Creates an object composed of the picked source properties. | ||
return Math.round(input * factor) / factor; | ||
} | ||
export function validateHex(input) { | ||
return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(input) | ||
); | ||
} |
336
lib/index.js
'use strict'; | ||
exports.__esModule = true; | ||
exports.validateHex = undefined; | ||
@@ -50,3 +51,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); | ||
/** | ||
* Change the main color. | ||
* Set the main color. | ||
* | ||
@@ -60,5 +61,3 @@ * @param {string|Array|Object} color | ||
value: function setColor(color) { | ||
if (!color) { | ||
throw new Error('Not a valid color'); | ||
} | ||
if (!color) return; | ||
@@ -74,12 +73,24 @@ if (typeof color === 'string') { | ||
} else { | ||
throw new Error('Input not valid'); | ||
throw new Error('Invalid input type'); | ||
} | ||
} | ||
/** | ||
* Set color from an array. | ||
* | ||
* @private | ||
* @param {Array} input | ||
*/ | ||
}, { | ||
key: 'setColorFromArray', | ||
value: function setColorFromArray(color) { | ||
value: function setColorFromArray() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input'); | ||
if (!Array.isArray(input)) throw new Error('input is not an array'); | ||
this.rgb = { | ||
r: this.limit(color[0], 'r'), | ||
g: this.limit(color[1], 'g'), | ||
b: this.limit(color[2], 'b') | ||
r: this.limit(input[0], 'r'), | ||
g: this.limit(input[1], 'g'), | ||
b: this.limit(input[2], 'b') | ||
}; | ||
@@ -90,17 +101,29 @@ | ||
} | ||
/** | ||
* Set color from an object. | ||
* | ||
* @private | ||
* @param {Object} input | ||
*/ | ||
}, { | ||
key: 'setColorFromObject', | ||
value: function setColorFromObject(color) { | ||
if ((0, _utils.hasProperty)(color, 'h') && (0, _utils.hasProperty)(color, 's') && (0, _utils.hasProperty)(color, 'l')) { | ||
value: function setColorFromObject() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input'); | ||
if (!(0, _utils.isPlainObject)(input)) throw new Error('input is not an object'); | ||
if ((0, _utils.hasProperty)(input, 'h') && (0, _utils.hasProperty)(input, 's') && (0, _utils.hasProperty)(input, 'l')) { | ||
this.hsl = { | ||
h: this.limit(color.h, 'h'), | ||
s: this.limit(color.s, 's'), | ||
l: this.limit(color.l, 'l') | ||
h: this.limit(input.h, 'h'), | ||
s: this.limit(input.s, 's'), | ||
l: this.limit(input.l, 'l') | ||
}; | ||
this.rgb = this.hsl2rgb(); | ||
} else if ((0, _utils.hasProperty)(color, 'r') && (0, _utils.hasProperty)(color, 'g') && (0, _utils.hasProperty)(color, 'b')) { | ||
this.rgb = color; | ||
} else if ((0, _utils.hasProperty)(input, 'r') && (0, _utils.hasProperty)(input, 'g') && (0, _utils.hasProperty)(input, 'b')) { | ||
this.rgb = input; | ||
this.hsl = this.rgb2hsl(); | ||
} else { | ||
throw new Error('Not a valid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -120,3 +143,5 @@ | ||
key: 'lighten', | ||
value: function lighten(percentage) { | ||
value: function lighten() { | ||
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10; | ||
var hsl = this.shift({ | ||
@@ -138,3 +163,5 @@ l: this.constrain(this.lightness, percentage, [0, 100], '+') | ||
key: 'darken', | ||
value: function darken(percentage) { | ||
value: function darken() { | ||
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10; | ||
var hsl = this.shift({ | ||
@@ -156,3 +183,5 @@ l: this.constrain(this.lightness, percentage, [0, 100], '-') | ||
key: 'saturate', | ||
value: function saturate(percentage) { | ||
value: function saturate() { | ||
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10; | ||
var hsl = this.shift({ | ||
@@ -166,3 +195,3 @@ s: this.constrain(this.saturation, percentage, [0, 100], '+') | ||
/** | ||
* Descrease saturation. | ||
* Decrease saturation. | ||
* | ||
@@ -175,3 +204,5 @@ * @param {number} percentage | ||
key: 'desaturate', | ||
value: function desaturate(percentage) { | ||
value: function desaturate() { | ||
var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10; | ||
var hsl = this.shift({ | ||
@@ -193,3 +224,5 @@ s: this.constrain(this.saturation, percentage, [0, 100], '-') | ||
key: 'adjustHue', | ||
value: function adjustHue(degrees) { | ||
value: function adjustHue() { | ||
var degrees = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 15; | ||
var hsl = this.shift({ | ||
@@ -206,3 +239,3 @@ h: this.constrainDegrees(this.hue, +degrees) | ||
* @param {Object} input | ||
* @param {boolean} returnHex | ||
* @param {boolean} [returnHex] | ||
* | ||
@@ -214,3 +247,4 @@ * @returns {string} | ||
key: 'remix', | ||
value: function remix(input) { | ||
value: function remix() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input'); | ||
var returnHex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
@@ -228,17 +262,2 @@ | ||
/** | ||
* Validate HEX color. | ||
* | ||
* @param {string} hex | ||
* | ||
* @returns {boolean} | ||
*/ | ||
}, { | ||
key: 'validHex', | ||
value: function validHex(hex) { | ||
return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex) | ||
); | ||
} | ||
/** | ||
* Generate a random color. | ||
@@ -266,5 +285,85 @@ * | ||
/** | ||
* Get the contrasted color for a given hex. | ||
* | ||
* @param {string} input | ||
* @returns {string} | ||
*/ | ||
}, { | ||
key: 'textColor', | ||
value: function textColor() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hex; | ||
var _hex2rgb = this.hex2rgb(input), | ||
r = _hex2rgb.r, | ||
g = _hex2rgb.g, | ||
b = _hex2rgb.b; | ||
var yiq = (r * 299 + g * 587 + b * 114) / 1000; | ||
return yiq >= 128 ? '#000' : '#fff'; | ||
} | ||
/** | ||
* Parse HEX color. | ||
* | ||
* @param {string} input | ||
* | ||
* @returns {string} | ||
*/ | ||
}, { | ||
key: 'parseHex', | ||
value: function parseHex() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input'); | ||
var color = input.replace('#', ''); | ||
var hex = color; | ||
if (color.length === 3) { | ||
hex = ''; | ||
color.split('').forEach(function (d) { | ||
hex += d + d; | ||
}); | ||
} | ||
hex = '#' + hex; | ||
if (!(0, _utils.validateHex)(hex)) { | ||
throw new Error('Invalid color'); | ||
} | ||
return hex; | ||
} | ||
/** | ||
* Parse CSS attribute. | ||
* | ||
* @param {string} input | ||
* @returns {Object} | ||
*/ | ||
}, { | ||
key: 'parseCSS', | ||
value: function parseCSS() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input'); | ||
var model = /^rgb/.test(input) ? 'rgba' : 'hsla'; | ||
var regex = new RegExp('^' + model + '?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?', 'i'); | ||
var matches = input.match(regex); | ||
if (matches && matches.length === 4) { | ||
var _ref; | ||
return _ref = {}, _defineProperty(_ref, model.slice(0, 1), parseInt(matches[1], 10)), _defineProperty(_ref, model.slice(1, 2), parseInt(matches[2], 10)), _defineProperty(_ref, model.slice(2, 3), parseInt(matches[3], 10)), _ref; | ||
} | ||
throw new Error('Invalid CSS string'); | ||
} | ||
/** | ||
* Convert a hex string to RGB object. | ||
* | ||
* @param {string} input | ||
* @param {string} [input] | ||
* @returns {{r: number, g: number, b: number}} | ||
@@ -290,3 +389,3 @@ */ | ||
* | ||
* @param {string} input | ||
* @param {string} [input] | ||
* @returns {{h: number, s: number, l: number}} | ||
@@ -306,3 +405,3 @@ */ | ||
* | ||
* @param {Object|string} input | ||
* @param {Object|string} [input] | ||
* @returns {{h: number, s: number, l: number}} | ||
@@ -319,3 +418,3 @@ */ | ||
if (!(0, _utils.hasProperty)(rgb, 'r') || !(0, _utils.hasProperty)(rgb, 'g') || !(0, _utils.hasProperty)(rgb, 'b')) { | ||
throw new Error('hex2hsl::invalid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -349,2 +448,3 @@ | ||
break; | ||
/* istanbul ignore next */ | ||
default: | ||
@@ -376,3 +476,3 @@ break; | ||
* | ||
* @param {Object|string} input | ||
* @param {Object|string} [input] | ||
* | ||
@@ -390,3 +490,3 @@ * @returns {string} | ||
if (!(0, _utils.hasProperty)(rgb, 'r') || !(0, _utils.hasProperty)(rgb, 'g') || !(0, _utils.hasProperty)(rgb, 'b')) { | ||
throw new Error('rgb2hex::invalid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -402,3 +502,3 @@ | ||
* | ||
* @param {Object|string} input | ||
* @param {Object|string} [input] | ||
* @returns {{r: number, g: number, b: number}} | ||
@@ -412,10 +512,6 @@ */ | ||
var hsl = input; | ||
var hsl = typeof input === 'string' ? this.parseCSS(input) : input; | ||
if (typeof hsl === 'string') { | ||
hsl = this.parseCSS(hsl); | ||
} | ||
if (!(0, _utils.hasProperty)(hsl, 'h') || !(0, _utils.hasProperty)(hsl, 's') || !(0, _utils.hasProperty)(hsl, 'l')) { | ||
throw new Error('hsl2rgb::invalid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -457,3 +553,3 @@ | ||
* | ||
* @param {Object} hsl | ||
* @param {Object|string} [input] | ||
* @returns {string} | ||
@@ -465,4 +561,6 @@ */ | ||
value: function hsl2hex() { | ||
var hsl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hsl; | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.hsl; | ||
var hsl = typeof input === 'string' ? this.parseCSS(input) : input; | ||
return this.rgb2hex(this.hsl2rgb(hsl)); | ||
@@ -472,2 +570,5 @@ } | ||
/** | ||
* Convert hue to RGB using chroma and median point | ||
* | ||
* @private | ||
* @param {number} point | ||
@@ -482,3 +583,7 @@ * @param {number} chroma | ||
key: 'hue2rgb', | ||
value: function hue2rgb(point, chroma, h) { | ||
value: function hue2rgb() { | ||
var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('point'); | ||
var chroma = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _utils.isRequired)('chroma'); | ||
var h = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (0, _utils.isRequired)('hue'); | ||
var hue = h; | ||
@@ -510,36 +615,6 @@ | ||
/** | ||
* Parse HEX color. | ||
* Get a shifted color object with the same model of the input. | ||
* | ||
* @param {string} hex | ||
* | ||
* @returns {string} | ||
*/ | ||
}, { | ||
key: 'parseHex', | ||
value: function parseHex(hex) { | ||
var color = hex.replace('#', ''); | ||
var newHex = ''; | ||
if (color.length === 3) { | ||
color.split('').forEach(function (d) { | ||
newHex += d + d; | ||
}); | ||
} else { | ||
newHex = color; | ||
} | ||
newHex = '#' + newHex; | ||
if (!this.validHex(newHex)) { | ||
throw new Error('Not a valid color'); | ||
} | ||
return newHex; | ||
} | ||
/** | ||
* Parse CSS attribute. | ||
* | ||
* @param {string} input | ||
* @private | ||
* @param {Object} input - {r,g,b} or {h,s,l} | ||
* @returns {Object} | ||
@@ -549,32 +624,14 @@ */ | ||
}, { | ||
key: 'parseCSS', | ||
value: function parseCSS(input) { | ||
var model = /^rgb/.test(input) ? 'rgba' : 'hsla'; | ||
var regex = new RegExp('^' + model + '?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?', 'i'); | ||
var matches = input.match(regex); | ||
key: 'shift', | ||
value: function shift() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input'); | ||
if (matches && matches.length === 4) { | ||
var _ref; | ||
return _ref = {}, _defineProperty(_ref, model.slice(0, 1), parseInt(matches[1], 10)), _defineProperty(_ref, model.slice(1, 2), parseInt(matches[2], 10)), _defineProperty(_ref, model.slice(2, 3), parseInt(matches[3], 10)), _ref; | ||
if (!(0, _utils.isPlainObject)(input)) { | ||
throw new Error('Invalid input'); | ||
} | ||
throw new Error('Not a valid color'); | ||
} | ||
/** | ||
* Get a shifted color object with the same model of the input. | ||
* | ||
* @private | ||
* @param {Object} color - {r,g,b} or {h,s,l} | ||
* @returns {Object} | ||
*/ | ||
}, { | ||
key: 'shift', | ||
value: function shift(color) { | ||
var isHSL = Object.keys(color).some(function (d) { | ||
var isHSL = Object.keys(input).some(function (d) { | ||
return HSL.includes(d); | ||
}); | ||
var isRGB = Object.keys(color).some(function (d) { | ||
var isRGB = Object.keys(input).some(function (d) { | ||
return RGB.includes(d); | ||
@@ -584,3 +641,3 @@ }); | ||
if (isRGB && isHSL) { | ||
throw new Error('Only use a single color model'); | ||
throw new Error('Use a single color model'); | ||
} | ||
@@ -593,8 +650,4 @@ | ||
if (isHSL) { | ||
var hsl = (0, _utils.pick)(color, HSL); | ||
var hsl = (0, _utils.pick)(input, HSL); | ||
if (!Object.keys(hsl).length) { | ||
return this.hsl; | ||
} | ||
return _extends({}, this.hsl, hsl); | ||
@@ -604,8 +657,4 @@ } | ||
// Not HSL so it must be RGB | ||
var rgb = (0, _utils.pick)(color, RGB); | ||
var rgb = (0, _utils.pick)(input, RGB); | ||
if (!Object.keys(rgb).length) { | ||
return this.rgb; | ||
} | ||
return _extends({}, this.rgb, rgb); | ||
@@ -618,3 +667,3 @@ } | ||
* @private | ||
* @param {number} value | ||
* @param {number} input | ||
* @param {string} type | ||
@@ -626,16 +675,20 @@ * @returns {number} | ||
key: 'limit', | ||
value: function limit(value, type) { | ||
if (typeof value !== 'number') { | ||
throw new Error('not a number'); | ||
value: function limit() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input'); | ||
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _utils.isRequired)('type'); | ||
if (typeof input !== 'number') { | ||
throw new Error('Input is not a number'); | ||
} | ||
/* istanbul ignore else */ | ||
if (RGB.includes(type)) { | ||
return Math.max(Math.min(value, 255), 0); | ||
return Math.max(Math.min(input, 255), 0); | ||
} else if (['s', 'l'].includes(type)) { | ||
return Math.max(Math.min(value, 100), 0); | ||
return Math.max(Math.min(input, 100), 0); | ||
} else if (type === 'h') { | ||
return Math.max(Math.min(value, 360), 0); | ||
return Math.max(Math.min(input, 360), 0); | ||
} | ||
throw new Error('invalid type'); | ||
throw new Error('Invalid type'); | ||
} | ||
@@ -650,3 +703,3 @@ | ||
* @param {Array} range | ||
* @param {string} direction | ||
* @param {string} sign | ||
* @returns {number} | ||
@@ -657,3 +710,8 @@ */ | ||
key: 'constrain', | ||
value: function constrain(input, amount, range, direction) { | ||
value: function constrain() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input'); | ||
var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _utils.isRequired)('amount'); | ||
var range = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (0, _utils.isRequired)('range'); | ||
var sign = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : (0, _utils.isRequired)('sign'); | ||
var _range = _slicedToArray(range, 2), | ||
@@ -663,3 +721,3 @@ min = _range[0], | ||
var value = (0, _utils.expr)(input + direction + amount); | ||
var value = (0, _utils.expr)(input + sign + amount); | ||
@@ -686,3 +744,6 @@ if (value < min) { | ||
key: 'constrainDegrees', | ||
value: function constrainDegrees(input, amount) { | ||
value: function constrainDegrees() { | ||
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _utils.isRequired)('input'); | ||
var amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, _utils.isRequired)('amount'); | ||
var value = input + amount; | ||
@@ -765,2 +826,3 @@ | ||
exports.validateHex = _utils.validateHex; | ||
exports.default = Colorizr; |
@@ -7,4 +7,6 @@ 'use strict'; | ||
exports.isPlainObject = isPlainObject; | ||
exports.isRequired = isRequired; | ||
exports.pick = pick; | ||
exports.round = round; | ||
exports.validateHex = validateHex; | ||
@@ -99,2 +101,6 @@ | ||
function isRequired(name) { | ||
throw new Error((name || 'parameter') + ' is required'); | ||
} | ||
/** | ||
@@ -135,2 +141,7 @@ * Creates an object composed of the picked source properties. | ||
return Math.round(input * factor) / factor; | ||
} | ||
function validateHex(input) { | ||
return (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(input) | ||
); | ||
} |
{ | ||
"name": "colorizr", | ||
"version": "1.0.1", | ||
"version": "1.0.2", | ||
"description": "Manipulate colors like a boss", | ||
@@ -5,0 +5,0 @@ "author": "Gil Barbara <gilbarbara@gmail.com>", |
280
src/index.js
// @flow | ||
import { expr, hasProperty, isPlainObject, pick, round } from './utils'; | ||
import { expr, hasProperty, isPlainObject, isRequired, pick, round, validateHex } from './utils'; | ||
@@ -33,3 +33,3 @@ const RGB = ['r', 'g', 'b']; | ||
/** | ||
* Change the main color. | ||
* Set the main color. | ||
* | ||
@@ -39,5 +39,3 @@ * @param {string|Array|Object} color | ||
setColor(color: string | Array<number> | Object) { | ||
if (!color) { | ||
throw new Error('Not a valid color'); | ||
} | ||
if (!color) return; | ||
@@ -56,11 +54,19 @@ if (typeof color === 'string') { | ||
else { | ||
throw new Error('Input not valid'); | ||
throw new Error('Invalid input type'); | ||
} | ||
} | ||
setColorFromArray(color: Array<number>) { | ||
/** | ||
* Set color from an array. | ||
* | ||
* @private | ||
* @param {Array} input | ||
*/ | ||
setColorFromArray(input: Array<number> = isRequired('input')) { | ||
if (!Array.isArray(input)) throw new Error('input is not an array'); | ||
this.rgb = { | ||
r: this.limit(color[0], 'r'), | ||
g: this.limit(color[1], 'g'), | ||
b: this.limit(color[2], 'b'), | ||
r: this.limit(input[0], 'r'), | ||
g: this.limit(input[1], 'g'), | ||
b: this.limit(input[2], 'b'), | ||
}; | ||
@@ -72,17 +78,25 @@ | ||
setColorFromObject(color: Object) { | ||
if (hasProperty(color, 'h') && hasProperty(color, 's') && hasProperty(color, 'l')) { | ||
/** | ||
* Set color from an object. | ||
* | ||
* @private | ||
* @param {Object} input | ||
*/ | ||
setColorFromObject(input: Object = isRequired('input')) { | ||
if (!isPlainObject(input)) throw new Error('input is not an object'); | ||
if (hasProperty(input, 'h') && hasProperty(input, 's') && hasProperty(input, 'l')) { | ||
this.hsl = { | ||
h: this.limit(color.h, 'h'), | ||
s: this.limit(color.s, 's'), | ||
l: this.limit(color.l, 'l'), | ||
h: this.limit(input.h, 'h'), | ||
s: this.limit(input.s, 's'), | ||
l: this.limit(input.l, 'l'), | ||
}; | ||
this.rgb = this.hsl2rgb(); | ||
} | ||
else if (hasProperty(color, 'r') && hasProperty(color, 'g') && hasProperty(color, 'b')) { | ||
this.rgb = color; | ||
else if (hasProperty(input, 'r') && hasProperty(input, 'g') && hasProperty(input, 'b')) { | ||
this.rgb = input; | ||
this.hsl = this.rgb2hsl(); | ||
} | ||
else { | ||
throw new Error('Not a valid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -99,3 +113,3 @@ | ||
*/ | ||
lighten(percentage: number): string { | ||
lighten(percentage: number = 10): string { | ||
const hsl = this.shift({ | ||
@@ -114,3 +128,3 @@ l: this.constrain(this.lightness, percentage, [0, 100], '+'), | ||
*/ | ||
darken(percentage: number): string { | ||
darken(percentage: number = 10): string { | ||
const hsl = this.shift({ | ||
@@ -129,3 +143,3 @@ l: this.constrain(this.lightness, percentage, [0, 100], '-'), | ||
*/ | ||
saturate(percentage: number): string { | ||
saturate(percentage: number = 10): string { | ||
const hsl = this.shift({ | ||
@@ -139,3 +153,3 @@ s: this.constrain(this.saturation, percentage, [0, 100], '+'), | ||
/** | ||
* Descrease saturation. | ||
* Decrease saturation. | ||
* | ||
@@ -145,3 +159,3 @@ * @param {number} percentage | ||
*/ | ||
desaturate(percentage: number): string { | ||
desaturate(percentage: number = 10): string { | ||
const hsl = this.shift({ | ||
@@ -160,3 +174,3 @@ s: this.constrain(this.saturation, percentage, [0, 100], '-'), | ||
*/ | ||
adjustHue(degrees: number): string { | ||
adjustHue(degrees: number = 15): string { | ||
const hsl = this.shift({ | ||
@@ -173,7 +187,7 @@ h: this.constrainDegrees(this.hue, +degrees), | ||
* @param {Object} input | ||
* @param {boolean} returnHex | ||
* @param {boolean} [returnHex] | ||
* | ||
* @returns {string} | ||
*/ | ||
remix(input: Object, returnHex: boolean = false): Object | string { | ||
remix(input: Object = isRequired('input'), returnHex: boolean = false): Object | string { | ||
const shift = this.shift(input); | ||
@@ -189,13 +203,2 @@ | ||
/** | ||
* Validate HEX color. | ||
* | ||
* @param {string} hex | ||
* | ||
* @returns {boolean} | ||
*/ | ||
validHex(hex: string): boolean { | ||
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex); | ||
} | ||
/** | ||
* Generate a random color. | ||
@@ -220,5 +223,68 @@ * | ||
/** | ||
* Get the contrasted color for a given hex. | ||
* | ||
* @param {string} input | ||
* @returns {string} | ||
*/ | ||
textColor(input: string = this.hex): string { | ||
const { r, g, b } = this.hex2rgb(input); | ||
const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000; | ||
return (yiq >= 128) ? '#000' : '#fff'; | ||
} | ||
/** | ||
* Parse HEX color. | ||
* | ||
* @param {string} input | ||
* | ||
* @returns {string} | ||
*/ | ||
parseHex(input: string = isRequired('input')): string { | ||
const color = input.replace('#', ''); | ||
let hex = color; | ||
if (color.length === 3) { | ||
hex = ''; | ||
color.split('').forEach(d => { | ||
hex += d + d; | ||
}); | ||
} | ||
hex = `#${hex}`; | ||
if (!validateHex(hex)) { | ||
throw new Error('Invalid color'); | ||
} | ||
return hex; | ||
} | ||
/** | ||
* Parse CSS attribute. | ||
* | ||
* @param {string} input | ||
* @returns {Object} | ||
*/ | ||
parseCSS(input: string = isRequired('input')): Object { | ||
const model = /^rgb/.test(input) ? 'rgba' : 'hsla'; | ||
const regex = new RegExp(`^${model}?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?`, 'i'); | ||
const matches = input.match(regex); | ||
if (matches && matches.length === 4) { | ||
return { | ||
[model.slice(0, 1)]: parseInt(matches[1], 10), | ||
[model.slice(1, 2)]: parseInt(matches[2], 10), | ||
[model.slice(2, 3)]: parseInt(matches[3], 10), | ||
}; | ||
} | ||
throw new Error('Invalid CSS string'); | ||
} | ||
/** | ||
* Convert a hex string to RGB object. | ||
* | ||
* @param {string} input | ||
* @param {string} [input] | ||
* @returns {{r: number, g: number, b: number}} | ||
@@ -239,3 +305,3 @@ */ | ||
* | ||
* @param {string} input | ||
* @param {string} [input] | ||
* @returns {{h: number, s: number, l: number}} | ||
@@ -250,3 +316,3 @@ */ | ||
* | ||
* @param {Object|string} input | ||
* @param {Object|string} [input] | ||
* @returns {{h: number, s: number, l: number}} | ||
@@ -258,3 +324,3 @@ */ | ||
if (!hasProperty(rgb, 'r') || !hasProperty(rgb, 'g') || !hasProperty(rgb, 'b')) { | ||
throw new Error('hex2hsl::invalid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -288,2 +354,3 @@ | ||
break; | ||
/* istanbul ignore next */ | ||
default: | ||
@@ -316,11 +383,11 @@ break; | ||
* | ||
* @param {Object|string} input | ||
* @param {Object|string} [input] | ||
* | ||
* @returns {string} | ||
*/ | ||
rgb2hex(input: Object = this.rgb): string { | ||
rgb2hex(input: Object | string = this.rgb): string { | ||
const rgb = typeof input === 'string' ? this.parseCSS(input) : input; | ||
if (!hasProperty(rgb, 'r') || !hasProperty(rgb, 'g') || !hasProperty(rgb, 'b')) { | ||
throw new Error('rgb2hex::invalid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -336,14 +403,10 @@ | ||
* | ||
* @param {Object|string} input | ||
* @param {Object|string} [input] | ||
* @returns {{r: number, g: number, b: number}} | ||
*/ | ||
hsl2rgb(input: Object | string = this.hsl): Object { | ||
let hsl = input; | ||
const hsl = typeof input === 'string' ? this.parseCSS(input) : input; | ||
if (typeof hsl === 'string') { | ||
hsl = this.parseCSS(hsl); | ||
} | ||
if (!hasProperty(hsl, 'h') || !hasProperty(hsl, 's') || !hasProperty(hsl, 'l')) { | ||
throw new Error('hsl2rgb::invalid object'); | ||
throw new Error('Invalid object'); | ||
} | ||
@@ -386,6 +449,8 @@ | ||
* | ||
* @param {Object} hsl | ||
* @param {Object|string} [input] | ||
* @returns {string} | ||
*/ | ||
hsl2hex(hsl: Object = this.hsl): string { | ||
hsl2hex(input: Object | string = this.hsl): string { | ||
const hsl = typeof input === 'string' ? this.parseCSS(input) : input; | ||
return this.rgb2hex(this.hsl2rgb(hsl)); | ||
@@ -395,2 +460,5 @@ } | ||
/** | ||
* Convert hue to RGB using chroma and median point | ||
* | ||
* @private | ||
* @param {number} point | ||
@@ -402,3 +470,3 @@ * @param {number} chroma | ||
*/ | ||
hue2rgb(point: number, chroma: number, h: number): number { | ||
hue2rgb(point: number = isRequired('point'), chroma: number = isRequired('chroma'), h: number = isRequired('hue')): number { | ||
let hue = h; | ||
@@ -430,65 +498,18 @@ | ||
/** | ||
* Parse HEX color. | ||
* Get a shifted color object with the same model of the input. | ||
* | ||
* @param {string} hex | ||
* | ||
* @returns {string} | ||
*/ | ||
parseHex(hex: string): string { | ||
const color = hex.replace('#', ''); | ||
let newHex = ''; | ||
if (color.length === 3) { | ||
color.split('').forEach(d => { | ||
newHex += d + d; | ||
}); | ||
} | ||
else { | ||
newHex = color; | ||
} | ||
newHex = `#${newHex}`; | ||
if (!this.validHex(newHex)) { | ||
throw new Error('Not a valid color'); | ||
} | ||
return newHex; | ||
} | ||
/** | ||
* Parse CSS attribute. | ||
* | ||
* @param {string} input | ||
* @private | ||
* @param {Object} input - {r,g,b} or {h,s,l} | ||
* @returns {Object} | ||
*/ | ||
parseCSS(input: string): Object { | ||
const model = /^rgb/.test(input) ? 'rgba' : 'hsla'; | ||
const regex = new RegExp(`^${model}?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?`, 'i'); | ||
const matches = input.match(regex); | ||
if (matches && matches.length === 4) { | ||
return { | ||
[model.slice(0, 1)]: parseInt(matches[1], 10), | ||
[model.slice(1, 2)]: parseInt(matches[2], 10), | ||
[model.slice(2, 3)]: parseInt(matches[3], 10), | ||
}; | ||
shift(input: Object = isRequired('input')): Object { | ||
if (!isPlainObject(input)) { | ||
throw new Error('Invalid input'); | ||
} | ||
throw new Error('Not a valid color'); | ||
} | ||
const isHSL = Object.keys(input).some(d => HSL.includes(d)); | ||
const isRGB = Object.keys(input).some(d => RGB.includes(d)); | ||
/** | ||
* Get a shifted color object with the same model of the input. | ||
* | ||
* @private | ||
* @param {Object} color - {r,g,b} or {h,s,l} | ||
* @returns {Object} | ||
*/ | ||
shift(color: Object): Object { | ||
const isHSL = Object.keys(color).some(d => HSL.includes(d)); | ||
const isRGB = Object.keys(color).some(d => RGB.includes(d)); | ||
if (isRGB && isHSL) { | ||
throw new Error('Only use a single color model'); | ||
throw new Error('Use a single color model'); | ||
} | ||
@@ -501,8 +522,4 @@ | ||
if (isHSL) { | ||
const hsl = pick(color, HSL); | ||
const hsl = pick(input, HSL); | ||
if (!Object.keys(hsl).length) { | ||
return this.hsl; | ||
} | ||
return { ...this.hsl, ...hsl }; | ||
@@ -512,8 +529,4 @@ } | ||
// Not HSL so it must be RGB | ||
const rgb = pick(color, RGB); | ||
const rgb = pick(input, RGB); | ||
if (!Object.keys(rgb).length) { | ||
return this.rgb; | ||
} | ||
return { ...this.rgb, ...rgb }; | ||
@@ -526,22 +539,23 @@ } | ||
* @private | ||
* @param {number} value | ||
* @param {number} input | ||
* @param {string} type | ||
* @returns {number} | ||
*/ | ||
limit(value: number, type: string): number { | ||
if (typeof value !== 'number') { | ||
throw new Error('not a number'); | ||
limit(input: number = isRequired('input'), type: string = isRequired('type')): number { | ||
if (typeof input !== 'number') { | ||
throw new Error('Input is not a number'); | ||
} | ||
/* istanbul ignore else */ | ||
if (RGB.includes(type)) { | ||
return Math.max(Math.min(value, 255), 0); | ||
return Math.max(Math.min(input, 255), 0); | ||
} | ||
else if (['s', 'l'].includes(type)) { | ||
return Math.max(Math.min(value, 100), 0); | ||
return Math.max(Math.min(input, 100), 0); | ||
} | ||
else if (type === 'h') { | ||
return Math.max(Math.min(value, 360), 0); | ||
return Math.max(Math.min(input, 360), 0); | ||
} | ||
throw new Error('invalid type'); | ||
throw new Error('Invalid type'); | ||
} | ||
@@ -556,8 +570,8 @@ | ||
* @param {Array} range | ||
* @param {string} direction | ||
* @param {string} sign | ||
* @returns {number} | ||
*/ | ||
constrain(input: number, amount: number, range: Array<number>, direction: string): number { | ||
constrain(input: number = isRequired('input'), amount: number = isRequired('amount'), range: Array<number> = isRequired('range'), sign: string = isRequired('sign')): number { | ||
const [min, max] = range; | ||
let value = expr(input + direction + amount); | ||
let value = expr(input + sign + amount); | ||
@@ -582,3 +596,3 @@ if (value < min) { | ||
*/ | ||
constrainDegrees(input: number, amount: number): number { | ||
constrainDegrees(input: number = isRequired('input'), amount: number = isRequired('amount')): number { | ||
let value = input + amount; | ||
@@ -640,2 +654,4 @@ | ||
export { validateHex }; | ||
export default Colorizr; |
@@ -90,2 +90,6 @@ // @flow | ||
export function isRequired(name) { | ||
throw new Error(`${name || 'parameter'} is required`); | ||
} | ||
/** | ||
@@ -125,1 +129,5 @@ * Creates an object composed of the picked source properties. | ||
} | ||
export function validateHex(input: string): boolean { | ||
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(input); | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
71391
10
2135
1