@attivio/suit
Version:
Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.
217 lines (182 loc) • 8 kB
JavaScript
;
exports.__esModule = true;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
// @Flow
/**
* Utility class that provdides CSS-related functionality.
*/
var StyleUtils = function () {
function StyleUtils() {
_classCallCheck(this, StyleUtils);
}
/**
* Parse the passed-in CSS color into its red, green, and blue values
* (each of which will be an integer between 0 and 255). This method
* ignores any alpha value if the color is in the "rgba()" format.
*
* NOTE: For now, it only handles HEX color values...
*/
StyleUtils.parseColor = function parseColor(colorToParse) {
var tryCssColorNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var color = colorToParse ? colorToParse.trim() : '';
if (color) {
if (color.charAt(0) === '#') {
var hexColor = color.substr(1);
if (hexColor.length === 6) {
var redString = hexColor.substr(0, 2);
var red = parseInt(redString, 16);
var greenString = hexColor.substr(2, 2);
var green = parseInt(greenString, 16);
var blueString = hexColor.substr(4, 2);
var blue = parseInt(blueString, 16);
return [red, green, blue];
} else if (hexColor.length === 3) {
var _redString = hexColor.substr(0, 1);
var _red = parseInt(_redString, 16) * 16;
var _greenString = hexColor.substr(1, 1);
var _green = parseInt(_greenString, 16) * 16;
var _blueString = hexColor.substr(2, 1);
var _blue = parseInt(_blueString, 16) * 16;
return [_red, _green, _blue];
}
} else if (color.startsWith('rgb(') || color.startsWith('rgba(')) {
var openingParenIndex = color.indexOf('(');
var closingParenIndex = color.lastIndexOf(')');
var numbersString = color.substr(openingParenIndex + 1, closingParenIndex - openingParenIndex);
var numbers = numbersString.split(',');
if (numbers.length >= 3) {
var _red2 = parseInt(numbers[0].trim(), 10);
var _green2 = parseInt(numbers[1].trim(), 10);
var _blue2 = parseInt(numbers[2].trim(), 10);
return [_red2, _green2, _blue2];
}
} else if (tryCssColorNames) {
// See if it's a valid named CSS color
var d = document.createElement('div');
d.style.color = color;
document.body.appendChild(d);
var rgbColor = window.getComputedStyle(d).color;
document.body.removeChild(d);
if (rgbColor.startsWith('rgb(')) {
return StyleUtils.parseColor(rgbColor, false);
}
}
}
// Can't parse the color; return black
return [0, 0, 0];
};
/**
* Given two integers, find a new one that is "percentage" percent of the
* way from "from" to "to." Percentage is a number between 0 and 1.0. This is
* done over the squares of the numbers.
*/
StyleUtils.blendInts = function blendInts(from, to) {
var percentage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
var pct = percentage;
if (pct > 1.0) {
pct = 1.0;
} else if (pct < 0) {
pct = 0;
}
var realTo = to * to;
var realFrom = from * from;
var realDiff = realTo - realFrom;
var realPercentageDiff = realDiff * pct;
var realValue = realFrom + realPercentageDiff;
var newValue = Math.round(Math.sqrt(realValue));
return newValue;
};
/**
* Given a three-element array with the RGB values for a color, create
* a CSS hex color string starting with an octothorpe.
*/
StyleUtils.toHexColor = function toHexColor(color) {
var red = color[0],
green = color[1],
blue = color[2];
var redString = void 0;
var greenString = void 0;
var blueString = void 0;
if (red % 16 === 0 && green % 16 === 0 && blue % 16 === 0) {
// Special case: we can name that color in only 3 digits...
redString = red.toString(16).charAt(0);
greenString = green.toString(16).charAt(0);
blueString = blue.toString(16).charAt(0);
} else {
redString = red.toString(16);
if (redString.length === 1) {
redString = '0' + redString;
}
greenString = green.toString(16);
if (greenString.length === 1) {
greenString = '0' + greenString;
}
blueString = blue.toString(16);
if (blueString.length === 1) {
blueString = '0' + blueString;
}
}
return ('#' + redString + greenString + blueString).toUpperCase();
};
/**
* Takes two CSS colors, from and to, and calculates a new color "percentage"
* percent of the way from "from" to "to." Percentage should be between 0 and 1.0.
* Both the from and to parameters can be hex strings prefixed with an octothorpe
* (either 3 or 6 digits), expressions with rgb() or rgba(), or valid CSS color
* names.
* It always returns a hex encoded number prefixed with an octothorpe, e.g., "#f2a902,"
* regardless of the format of the original colors.
*/
StyleUtils.blendColors = function blendColors(from, to) {
var percentage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
var fromParsed = StyleUtils.parseColor(from);
var toParsed = StyleUtils.parseColor(to);
var newRed = StyleUtils.blendInts(fromParsed[0], toParsed[0], percentage);
var newGreen = StyleUtils.blendInts(fromParsed[1], toParsed[1], percentage);
var newBlue = StyleUtils.blendInts(fromParsed[2], toParsed[2], percentage);
return StyleUtils.toHexColor([newRed, newGreen, newBlue]);
};
/**
* Takes a CSS color, orig, and lightens it by the specified percentage, which
* should be between 0 and 1.0 (where 0 is the original color and 1.0 is white).
* (This is the equivalent of calling blendColors() with the value of "to" set
* to white.)
* The orig parameter can be a hex string prefixed with an octothorpe
* (either 3 or 6 digits), an expression with rgb() or rgba(), or a valid CSS
* color name.
* It always returns the color as a hex string
* prefixed with an octothorpe, e.g., "#f2a902," regardless of the format of the
* original color.
*/
StyleUtils.lightenColor = function lightenColor(orig) {
var percentage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
var origParsed = StyleUtils.parseColor(orig);
var newRed = StyleUtils.blendInts(origParsed[0], 255, percentage);
var newGreen = StyleUtils.blendInts(origParsed[0], 255, percentage);
var newBlue = StyleUtils.blendInts(origParsed[0], 255, percentage);
return StyleUtils.toHexColor([newRed, newGreen, newBlue]);
};
/**
* Takes a CSS color, orig, and darkens it by the specified percentage, which
* should be between 0 and 1.0 (where 0 is the original color and 1.0 is black).
* (This is the equivalent of calling blendColors() with the value of "to" set
* to black.)
* The orig parameter can be a hex string prefixed with an octothorpe
* (either 3 or 6 digits), an expression with rgb() or rgba(), or a valid CSS
* color name.
* It always returns the color as a hex string
* prefixed with an octothorpe, e.g., "#f2a902," regardless of the format of the
* original color.
*/
StyleUtils.darkenColor = function darkenColor(orig) {
var percentage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
var origParsed = StyleUtils.parseColor(orig);
var newRed = StyleUtils.blendInts(origParsed[0], 0, percentage);
var newGreen = StyleUtils.blendInts(origParsed[0], 0, percentage);
var newBlue = StyleUtils.blendInts(origParsed[0], 0, percentage);
return StyleUtils.toHexColor([newRed, newGreen, newBlue]);
};
return StyleUtils;
}();
exports.default = StyleUtils;
module.exports = exports['default'];