color-classifier
Version:
Classify the color along the reference color. using algorithm the CIEDE2000, RGB, HSV.
1,527 lines (1,260 loc) • 2.26 MB
JavaScript
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
/*!
* color-classifier
* Classify the color along the reference color.
*
* @author tsuyoshiwada
* @license MIT
* @version 0.0.1
*/
(function (global, factory) {
(typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.ColorClassifier = factory();
})(undefined, function () {
'use strict';
var babelHelpers = {};
babelHelpers.typeof = typeof Symbol === "function" && _typeof(Symbol.iterator) === "symbol" ? function (obj) {
return typeof obj === 'undefined' ? 'undefined' : _typeof(obj);
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj === 'undefined' ? 'undefined' : _typeof(obj);
};
babelHelpers.classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
babelHelpers.createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
babelHelpers.defineProperty = function (obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
};
babelHelpers.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");
}
};
}();
babelHelpers.toConsumableArray = function (arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}return arr2;
} else {
return Array.from(arr);
}
};
babelHelpers;
function minBy(array, key) {
var sortedArray = [].concat(babelHelpers.toConsumableArray(array));
sortedArray.sort(function (a, b) {
if (a[key] < b[key]) return -1;
if (a[key] > b[key]) return 1;
return 0;
});
return sortedArray.shift();
}
var HEX_SHORT = /^#([a-fA-F0-9]{3})$/;
var HEX = /^#([a-fA-F0-9]{6})$/;
function roundColors(obj, round) {
if (!round) return obj;
var o = {};
for (var k in obj) {
o[k] = Math.round(obj[k]);
}
return o;
}
function hasProp(obj, key) {
return obj.hasOwnProperty(key);
}
function isRgb(obj) {
return hasProp(obj, "r") && hasProp(obj, "g") && hasProp(obj, "b");
}
var Color = function () {
babelHelpers.createClass(Color, null, [{
key: "normalizeHex",
value: function normalizeHex(hex) {
if (HEX.test(hex)) {
return hex;
} else if (HEX_SHORT.test(hex)) {
var r = hex.slice(1, 2);
var g = hex.slice(2, 3);
var b = hex.slice(3, 4);
return "#" + (r + r) + (g + g) + (b + b);
}
return null;
}
}, {
key: "hexToRgb",
value: function hexToRgb(hex) {
var normalizedHex = this.normalizeHex(hex);
if (normalizedHex == null) {
return null;
}
var m = normalizedHex.match(HEX);
var i = parseInt(m[1], 16);
var r = i >> 16 & 0xFF;
var g = i >> 8 & 0xFF;
var b = i & 0xFF;
return { r: r, g: g, b: b };
}
}, {
key: "rgbToHex",
value: function rgbToHex(rgb) {
var r = rgb.r;
var g = rgb.g;
var b = rgb.b;
var i = ((Math.round(r) & 0xFF) << 16) + ((Math.round(g) & 0xFF) << 8) + (Math.round(b) & 0xFF);
var s = i.toString(16).toLowerCase();
return "#" + ("000000".substring(s.length) + s);
}
}, {
key: "rgbToHsv",
value: function rgbToHsv(rgb) {
var round = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
var r = rgb.r;
var g = rgb.g;
var b = rgb.b;
var min = Math.min(r, g, b);
var max = Math.max(r, g, b);
var delta = max - min;
var hsv = {};
if (max === 0) {
hsv.s = 0;
} else {
hsv.s = delta / max * 1000 / 10;
}
if (max === min) {
hsv.h = 0;
} else if (r === max) {
hsv.h = (g - b) / delta;
} else if (g === max) {
hsv.h = 2 + (b - r) / delta;
} else {
hsv.h = 4 + (r - g) / delta;
}
hsv.h = Math.min(hsv.h * 60, 360);
hsv.h = hsv.h < 0 ? hsv.h + 360 : hsv.h;
hsv.v = max / 255 * 1000 / 10;
return roundColors(hsv, round);
}
}, {
key: "rgbToXyz",
value: function rgbToXyz(rgb) {
var round = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
var r = rgb.r / 255;
var g = rgb.g / 255;
var b = rgb.b / 255;
var rr = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
var gg = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
var bb = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
var x = (rr * 0.4124 + gg * 0.3576 + bb * 0.1805) * 100;
var y = (rr * 0.2126 + gg * 0.7152 + bb * 0.0722) * 100;
var z = (rr * 0.0193 + gg * 0.1192 + bb * 0.9505) * 100;
return roundColors({ x: x, y: y, z: z }, round);
}
}, {
key: "rgbToLab",
value: function rgbToLab(rgb) {
var round = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
var xyz = Color.rgbToXyz(rgb, false);
var x = xyz.x;
var y = xyz.y;
var z = xyz.z;
x /= 95.047;
y /= 100;
z /= 108.883;
x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
var l = 116 * y - 16;
var a = 500 * (x - y);
var b = 200 * (y - z);
return roundColors({ l: l, a: a, b: b }, round);
}
}]);
function Color(value) {
babelHelpers.classCallCheck(this, Color);
this.original = value;
if (isRgb(value)) {
this.rgb = value;
this.hex = Color.rgbToHex(value);
} else {
this.hex = Color.normalizeHex(value);
this.rgb = Color.hexToRgb(this.hex);
}
this.hsv = Color.rgbToHsv(this.rgb);
}
return Color;
}();
function radians(n) {
return n * Math.PI / 180;
}
function degrees(n) {
return n * (180 / Math.PI);
}
function hypot(a, b) {
return Math.sqrt(a * a + b * b);
}
function pow2(n) {
return n * n;
}
function pow7(n) {
return n * n * n * n * n * n * n;
}
var _diffMethodMap;
var abs = Math.abs;
var atan2 = Math.atan2;
var cos = Math.cos;
var min = Math.min;
var exp = Math.exp;
var sqrt = Math.sqrt;
var sin = Math.sin;
var AlgorithmTypes = {
CIEDE2000: "CIEDE2000",
HSV: "HSV",
RGB: "RGB"
};
var diffMethodMap = (_diffMethodMap = {}, babelHelpers.defineProperty(_diffMethodMap, AlgorithmTypes.CIEDE2000, "ciede2000"), babelHelpers.defineProperty(_diffMethodMap, AlgorithmTypes.HSV, "hsv"), babelHelpers.defineProperty(_diffMethodMap, AlgorithmTypes.RGB, "rgb"), _diffMethodMap);
var kl = 1;
var kc = 1;
var kh = 1;
var pow7_25 = pow7(25);
var ColorDiff = function () {
function ColorDiff() {
babelHelpers.classCallCheck(this, ColorDiff);
}
babelHelpers.createClass(ColorDiff, null, [{
key: "diff",
value: function diff(algorithmType, color1, color2) {
var method = diffMethodMap[algorithmType];
return ColorDiff[method](color1, color2);
}
}, {
key: "ciede2000",
value: function ciede2000(color1, color2) {
var a = Color.rgbToLab(color1.rgb);
var b = Color.rgbToLab(color2.rgb);
return ColorDiff._ciede2000(a.l, a.a, a.b, b.l, b.a, b.b);
}
}, {
key: "_ciede2000",
value: function _ciede2000(l1, a1, b1, l2, a2, b2) {
var c1 = hypot(a1, b1);
var c2 = hypot(a2, b2);
var ac1c2 = (c1 + c2) / 2;
var g = 0.5 * (1 - sqrt(pow7(ac1c2) / (pow7(ac1c2) + pow7_25)));
var a1p = (1 + g) * a1;
var a2p = (1 + g) * a2;
var c1p = sqrt(pow2(a1p) + pow2(b1));
var c2p = sqrt(pow2(a2p) + pow2(b2));
var h1pd = degrees(atan2(b1, a1p));
var h1p = b1 === 0 && a1p === 0 ? 0 : h1pd > 0 ? h1pd : h1pd + 360;
var h2pd = degrees(atan2(b2, a2p));
var h2p = b2 === 0 && a2p === 0 ? 0 : h2pd > 0 ? h2pd : h2pd + 360;
var dlp = l2 - l1;
var dcp = c2p - c1p;
var dhp = 2 * sqrt(c1p * c2p) * sin(radians(c1 * c2 === 0 ? 0 : abs(h2p - h1p) <= 180 ? h2p - h1p : h2p - h1p > 180 ? h2p - h1p - 360 : h2p - h1p + 360) / 2);
var al = (l1 + l2) / 2;
var acp = (c1p + c2p) / 2;
var ahp = void 0;
if (c1 * c2 === 0) {
ahp = h1p + h2p;
} else if (abs(h1p - h2p) <= 180) {
ahp = (h1p + h2p) / 2;
} else if (abs(h1p - h2p) > 180 && h1p + h2p < 360) {
ahp = (h1p + h2p + 360) / 2;
} else {
ahp = (h1p + h2p - 360) / 2;
}
var t = 1 - 0.17 * cos(radians(ahp - 30)) + 0.24 * cos(radians(2 * ahp)) + 0.32 * cos(radians(3 * ahp + 6)) - 0.20 * cos(radians(4 * ahp - 63));
var dro = 30 * exp(-pow2((ahp - 275) / 25));
var rc = sqrt(pow7(acp) / (pow7(acp) + pow7_25));
var sl = 1 + 0.015 * pow2(al - 50) / sqrt(20 + pow2(al - 50));
var sc = 1 + 0.045 * acp;
var sh = 1 + 0.015 * acp * t;
var rt = -2 * rc * sin(radians(2 * dro));
return sqrt(pow2(dlp / (sl * kl)) + pow2(dcp / (sc * kc)) + pow2(dhp / (sh * kh)) + rt * (dcp / (sc * kc)) * (dhp / (sh * kh)));
}
}, {
key: "hsv",
value: function hsv(color1, color2) {
var a = color1.hsv;
var b = color2.hsv;
var h = 0;
if (a.h > b.h) {
h = min(a.h - b.h, b.h - a.h + 360);
} else {
h = min(b.h - a.h, a.h - b.h + 360);
}
return sqrt(pow2(h) + pow2(a.s - b.s) + pow2(a.v - b.v));
}
}, {
key: "rgb",
value: function rgb(color1, color2) {
var a = color1.rgb;
var b = color2.rgb;
return sqrt(pow2(a.r - b.r) + pow2(a.g - b.g) + pow2(a.b - b.b));
}
}]);
return ColorDiff;
}();
// https://www.w3.org/TR/css3-color/#html4
var W3C = ["#000000", "#808080", "#c0c0c0", "#ffffff", "#800000", "#ff0000", "#008000", "#00ff00", "#808000", "#ffff00", "#008080", "#00ffff", "#000080", "#0000ff", "#800080", "#ff00ff"];
var RAINBOW = ["#000000", "#808080", "#ffffff", "#ff0000", "#ffa500", "#ffff00", "#008000", "#00ffff", "#0000ff", "#800080"];
var Palette = Object.freeze({
W3C: W3C,
RAINBOW: RAINBOW
});
function equal(a, b) {
if (a === b) return true;
var ka = void 0;
var kb = void 0;
try {
ka = Object.keys(a);
kb = Object.keys(b);
} catch (e) {
return false;
}
if (ka.length !== kb.length) return false;
for (var i = 0; ka.length - 1; i++) {
var key = ka[i];
if (a[key] !== b[key]) return false;
}
return (typeof a === "undefined" ? "undefined" : babelHelpers.typeof(a)) === (typeof b === "undefined" ? "undefined" : babelHelpers.typeof(b));
}
var ColorClassifier = function () {
babelHelpers.createClass(ColorClassifier, null, [{
key: "throwError",
value: function throwError(msg) {
throw new Error("[ColorClassifier] " + msg);
}
}]);
function ColorClassifier() {
var palette = arguments.length <= 0 || arguments[0] === undefined ? W3C : arguments[0];
var algorithmType = arguments.length <= 1 || arguments[1] === undefined ? AlgorithmTypes.CIEDE2000 : arguments[1];
babelHelpers.classCallCheck(this, ColorClassifier);
this.setPalette(palette);
this.setAlgorithmType(algorithmType);
}
babelHelpers.createClass(ColorClassifier, [{
key: "setPalette",
value: function setPalette(palette) {
if (!Array.isArray(palette)) {
ColorClassifier.throwError("palette is should be a Array.");
}
this.palette = palette.map(function (c) {
return new Color(c);
});
}
}, {
key: "getPalette",
value: function getPalette() {
return this.palette;
}
}, {
key: "setAlgorithmType",
value: function setAlgorithmType(algorithmType) {
if (!AlgorithmTypes.hasOwnProperty(algorithmType)) {
ColorClassifier.throwError(algorithmType + " is an undefined algorithm type.");
}
this.algorithmType = algorithmType;
}
}, {
key: "getAlgorithmType",
value: function getAlgorithmType() {
return this.algorithmType;
}
}, {
key: "classify",
value: function classify(value) {
var format = arguments.length <= 1 || arguments[1] === undefined ? "rgb" : arguments[1];
var palette = this.palette;
var algorithmType = this.algorithmType;
var color = new Color(value);
var array = [];
palette.forEach(function (paletteColor) {
array.push({
distance: ColorDiff.diff(algorithmType, paletteColor, color),
color: format === "raw" ? paletteColor : paletteColor[format]
});
});
return minBy(array, "distance").color;
}
}, {
key: "classifyFromArray",
value: function classifyFromArray(colors) {
var _this = this;
var format = arguments.length <= 1 || arguments[1] === undefined ? "rgb" : arguments[1];
var results = [];
var array = [];
colors.forEach(function (value) {
var color = new Color(value);
var palette = _this.classify(color.rgb, "raw");
array.push({ palette: palette, color: color });
});
array.forEach(function (obj) {
var palette = obj.palette;
var color = obj.color;
var _results$filter = results.filter(function (o) {
return equal(o.palette, palette[format]);
});
var _results$filter2 = babelHelpers.slicedToArray(_results$filter, 1);
var paletteColor = _results$filter2[0];
if (!paletteColor) {
results.push({
palette: palette[format],
colors: [color[format]]
});
} else {
paletteColor.colors.push(color[format]);
}
});
return results;
}
}]);
return ColorClassifier;
}();
ColorClassifier.Palette = Palette;
ColorClassifier.AlgorithmTypes = AlgorithmTypes;
return ColorClassifier;
});
},{}],2:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactSelect = require("react-select");
var _reactSelect2 = _interopRequireDefault(_reactSelect);
var _reactTooltip = require("react-tooltip");
var _reactTooltip2 = _interopRequireDefault(_reactTooltip);
var _ = require("../../../../");
var _2 = _interopRequireDefault(_);
var _colorList = require("./color-list");
var _colorList2 = _interopRequireDefault(_colorList);
var _colorPicker = require("./color-picker");
var _colorPicker2 = _interopRequireDefault(_colorPicker);
var _color = require("../utils/color");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var App = function (_Component) {
_inherits(App, _Component);
function App(props) {
_classCallCheck(this, App);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(App).call(this, props));
_this.state = {
color: (0, _color.getRandomColor)(),
colors: [].concat(_toConsumableArray(_.Palette.W3C)),
displayColorPicker: false,
algorithmType: _.AlgorithmTypes.CIEDE2000
};
_this.colorClassifier = new _2.default(_this.state.colors);
return _this;
}
_createClass(App, [{
key: "handleMainChangeColor",
value: function handleMainChangeColor(color) {
this.setState({
color: color.hex,
displayColorPicker: false
});
}
}, {
key: "handleMainClick",
value: function handleMainClick() {
this.setState({ displayColorPicker: true });
}
}, {
key: "handleMainClose",
value: function handleMainClose() {
this.setState({ displayColorPicker: false });
}
}, {
key: "handleChangeColor",
value: function handleChangeColor(index, color) {
var colors = [].concat(_toConsumableArray(this.state.colors));
colors[index] = color;
this.setState({ colors: colors });
}
}, {
key: "handleDeleteColor",
value: function handleDeleteColor(index) {
var colors = [].concat(_toConsumableArray(this.state.colors));
colors.splice(index, 1);
this.setState({ colors: colors });
}
}, {
key: "handleRequestAddColor",
value: function handleRequestAddColor() {
var colors = [].concat(_toConsumableArray(this.state.colors));
var color = (0, _color.getRandomColor)();
colors.push(color);
this.setState({ colors: colors });
}
}, {
key: "handleRandomColorClick",
value: function handleRandomColorClick() {
this.setState({ color: (0, _color.getRandomColor)() });
}
}, {
key: "handleAlgorithmTypeChange",
value: function handleAlgorithmTypeChange(obj) {
this.setState({ algorithmType: obj.value });
}
}, {
key: "render",
value: function render() {
var colorClassifier = this.colorClassifier;
var _state = this.state;
var color = _state.color;
var colors = _state.colors;
var displayColorPicker = _state.displayColorPicker;
var algorithmType = _state.algorithmType;
colorClassifier.setPalette(colors);
colorClassifier.setAlgorithmType(algorithmType);
var activeColor = colorClassifier.classify(color, "hex");
return _react2.default.createElement(
"div",
{ className: "full-size" },
_react2.default.createElement(
"div",
{ className: "header" },
_react2.default.createElement(
"h1",
{ className: "logo" },
"color-classifier.js"
),
_react2.default.createElement(
"ul",
{ className: "gnav" },
_react2.default.createElement(
"li",
{ className: "gnav__item", "data-tip": "Random Color" },
_react2.default.createElement(
"button",
{ onClick: this.handleRandomColorClick.bind(this) },
_react2.default.createElement("i", { className: "fa fa-random" })
)
),
_react2.default.createElement(
"li",
{ className: "gnav__item", "data-tip": "Select AlgorithmType" },
_react2.default.createElement(_reactSelect2.default, {
options: [{ value: _.AlgorithmTypes.RGB, label: "RGB" }, { value: _.AlgorithmTypes.HSV, label: "HSV" }, { value: _.AlgorithmTypes.CIEDE2000, label: "CIEDE2000" }],
value: algorithmType,
placeholder: "AlgorithmTypes",
clearable: false,
searchable: false,
onChange: this.handleAlgorithmTypeChange.bind(this),
onOpen: function onOpen() {
return _reactTooltip2.default.hide();
} })
),
_react2.default.createElement(
"li",
{ className: "gnav__item" },
_react2.default.createElement(
"a",
{ href: "https://github.com/tsuyoshiwada/color-classifier" },
_react2.default.createElement("i", { className: "fa fa-github" }),
" Source on GitHub"
)
)
)
),
_react2.default.createElement(
"div",
{ className: "row" },
_react2.default.createElement(
"div",
{ className: "col" },
_react2.default.createElement(_colorPicker2.default, {
color: color,
display: displayColorPicker,
hueWrapperStyle: {
top: "auto",
bottom: 0
},
onChangeComplete: this.handleMainChangeColor.bind(this),
onRequestClose: this.handleMainClose.bind(this) }),
_react2.default.createElement(
"div",
{
className: "main-color",
style: { backgroundColor: color },
onClick: this.handleMainClick.bind(this) },
_react2.default.createElement(
"span",
{
className: "main-color__label",
style: {
color: (0, _color.getTextColor)(color)
},
onClick: function onClick(e) {
return e.stopPropagation();
} },
color
)
)
),
_react2.default.createElement(
"div",
{ className: "col" },
_react2.default.createElement(_colorList2.default, {
colors: this.state.colors,
activeColor: activeColor,
onChangeColor: this.handleChangeColor.bind(this),
onDeleteColor: this.handleDeleteColor.bind(this),
onRequestAddColor: this.handleRequestAddColor.bind(this) })
)
),
_react2.default.createElement(_reactTooltip2.default, { place: "bottom", effect: "solid" })
);
}
}]);
return App;
}(_react.Component);
exports.default = App;
},{"../../../../":1,"../utils/color":7,"./color-list":3,"./color-picker":4,"react":232,"react-select":88,"react-tooltip":93}],3:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _color = require("./color");
var _color2 = _interopRequireDefault(_color);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ColorList = function (_Component) {
_inherits(ColorList, _Component);
function ColorList() {
_classCallCheck(this, ColorList);
return _possibleConstructorReturn(this, Object.getPrototypeOf(ColorList).apply(this, arguments));
}
_createClass(ColorList, [{
key: "handleChange",
value: function handleChange(index, color) {
this.props.onChangeColor(index, color);
}
}, {
key: "handleDelete",
value: function handleDelete(index) {
this.props.onDeleteColor(index);
}
}, {
key: "handleAddColorClick",
value: function handleAddColorClick() {
this.props.onRequestAddColor();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props;
var colors = _props.colors;
var activeColor = _props.activeColor;
var colorItems = colors.map(function (color, index) {
return _react2.default.createElement(
"div",
{ className: "color-list__item", key: color },
_react2.default.createElement(_color2.default, {
color: color,
active: color === activeColor,
onChange: function onChange(color) {
return _this2.handleChange(index, color);
},
onDelete: function onDelete() {
return _this2.handleDelete(index);
} })
);
});
colorItems.push(_react2.default.createElement(
"div",
{ className: "color-list__item--add", key: "add-color", onClick: this.handleAddColorClick.bind(this) },
_react2.default.createElement("i", { className: "fa fa-plus-circle" }),
" Add Color"
));
return _react2.default.createElement(
"div",
{ className: "color-list" },
colorItems
);
}
}]);
return ColorList;
}(_react.Component);
exports.default = ColorList;
},{"./color":5,"react":232}],4:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _objectAssign = require("object-assign");
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactColor = require("react-color");
var _common = require("react-color/lib/components/common");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Pointer = function (_Component) {
_inherits(Pointer, _Component);
function Pointer() {
_classCallCheck(this, Pointer);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Pointer).apply(this, arguments));
}
_createClass(Pointer, [{
key: "render",
value: function render() {
var style = (0, _objectAssign2.default)({
width: "12px",
height: "12px",
borderRadius: "6px",
backgroundColor: "rgb(248, 248, 248)",
boxShadow: "0 1px 4px 0 rgba(0, 0, 0, .37",
transform: "translate(-6px, -1px)"
}, this.props.style);
return _react2.default.createElement("div", { style: style });
}
}]);
return Pointer;
}(_react.Component);
Pointer.defaultProps = {
style: {}
};
var ColorPicker = function (_Component2) {
_inherits(ColorPicker, _Component2);
function ColorPicker() {
_classCallCheck(this, ColorPicker);
return _possibleConstructorReturn(this, Object.getPrototypeOf(ColorPicker).apply(this, arguments));
}
_createClass(ColorPicker, [{
key: "handleChange",
value: function handleChange(data) {
this.props.onChange(data);
}
}, {
key: "handleCoverClick",
value: function handleCoverClick() {
this.props.onRequestClose();
}
}, {
key: "render",
value: function render() {
if (this.props.display === false) {
return null;
}
var popoverStyle = (0, _objectAssign2.default)({
position: "absolute",
zIndex: 9999,
width: "100%",
height: "100%"
}, this.props.popoverStyle);
var coverStyle = (0, _objectAssign2.default)({
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0
}, this.props.coverStyle);
var pickerStyle = (0, _objectAssign2.default)({
position: "relative",
zIndex: 10,
boxSizing: "border-box",
width: "100%",
height: "100%"
}, this.props.pickerStyle);
var saturationStyle = (0, _objectAssign2.default)({
position: "relative",
width: "100%",
height: "100%"
}, this.props.saturationStyle);
var hueWrapperStyle = (0, _objectAssign2.default)({
position: "absolute",
top: "100%",
left: 0,
right: 0,
height: "10px"
}, this.props.hueWrapperStyle);
var hueStyle = (0, _objectAssign2.default)({
radius: "2px"
}, this.props.hueStyle);
return _react2.default.createElement(
"div",
{ style: popoverStyle },
_react2.default.createElement("div", { style: coverStyle, onClick: this.handleCoverClick.bind(this) }),
_react2.default.createElement(
"div",
{ style: pickerStyle },
_react2.default.createElement(
"div",
{ style: saturationStyle },
_react2.default.createElement(_common.Saturation, _extends({}, this.props, { pointer: Pointer, onChange: this.handleChange.bind(this) })),
_react2.default.createElement(
"div",
{ style: hueWrapperStyle },
_react2.default.createElement(_common.Hue, _extends({ style: hueStyle }, this.props, { pointer: Pointer, onChange: this.handleChange.bind(this) }))
)
)
)
);
}
}]);
return ColorPicker;
}(_react.Component);
ColorPicker.defaultProps = {
display: false,
popoverStyle: {},
coverStyle: {},
pickerStyle: {},
saturationStyle: {},
hueWrapperStyle: {},
hueStyle: {},
onRequestClose: function onRequestClose() {}
};
exports.default = (0, _reactColor.CustomPicker)(ColorPicker);
},{"object-assign":42,"react":232,"react-color":75,"react-color/lib/components/common":55}],5:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _colorPicker = require("./color-picker");
var _colorPicker2 = _interopRequireDefault(_colorPicker);
var _color = require("../utils/color");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Color = function (_Component) {
_inherits(Color, _Component);
function Color() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
_classCallCheck(this, Color);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Color)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
displayColorPicker: false
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Color, [{
key: "handleClick",
value: function handleClick(e) {
this.setState({ displayColorPicker: true });
}
}, {
key: "handleClose",
value: function handleClose() {
this.setState({ displayColorPicker: false });
}
}, {
key: "handleChangeComplete",
value: function handleChangeComplete(color) {
this.props.onChange(color.hex);
}
}, {
key: "handleDeleteClick",
value: function handleDeleteClick(e) {
e.preventDefault();
e.stopPropagation();
this.props.onDelete();
}
}, {
key: "render",
value: function render() {
var _props = this.props;
var color = _props.color;
var active = _props.active;
var displayColorPicker = this.state.displayColorPicker;
return _react2.default.createElement(
"div",
{
className: active ? "color--active" : "color",
style: {
color: (0, _color.getTextColor)(color)
} },
_react2.default.createElement(_colorPicker2.default, {
color: color,
display: displayColorPicker,
onChangeComplete: this.handleChangeComplete.bind(this),
onRequestClose: this.handleClose.bind(this) }),
_react2.default.createElement(
"div",
{ className: "color__inner", onClick: this.handleClick.bind(this) },
_react2.default.createElement(
"span",
{ className: "color__label", onClick: function onClick(e) {
return e.stopPropagation();
} },
color
),
_react2.default.createElement(
"button",
{ className: "color__delete", onClick: this.handleDeleteClick.bind(this) },
"×"
)
),
_react2.default.createElement("div", { className: "color__bg", style: { backgroundColor: color } })
);
}
}]);
return Color;
}(_react.Component);
exports.default = Color;
},{"../utils/color":7,"./color-picker":4,"react":232}],6:[function(require,module,exports){
"use strict";
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactDom = require("react-dom");
var _app = require("./components/app.js");
var _app2 = _interopRequireDefault(_app);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(0, _reactDom.render)(_react2.default.createElement(_app2.default, null), document.getElementById("app"));
},{"./components/app.js":2,"react":232,"react-dom":84}],7:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.luminance = luminance;
exports.getTextColor = getTextColor;
exports.getRandomColor = getRandomColor;
var _color = require("../../../../src/utils/color");
var _color2 = _interopRequireDefault(_color);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function luminance(hex) {
var rgb = _color2.default.hexToRgb(hex);
return Math.floor(0.298912 * rgb.r + 0.586611 * rgb.g + 0.114478 * rgb.b);
}
function getTextColor(backgroundColor) {
return luminance(backgroundColor) < 120 ? "#fff" : "#000";
}
function getRandomColor() {
return "#" + Math.random().toString(16).slice(-6);
}
},{"../../../../src/utils/color":396}],8:[function(require,module,exports){
/*!
Copyright (c) 2016 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
classes.push(classNames.apply(null, arg));
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// register as 'classnames', consistent with npm package name
define('classnames', [], function () {
return classNames;
});
} else {
window.classNames = classNames;
}
}());
},{}],9:[function(require,module,exports){
(function (process){
'use strict';
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @typechecks
*/
var emptyFunction = require('./emptyFunction');
/**
* Upstream version of event listener. Does not take into account specific
* nature of platform.
*/
var EventListener = {
/**
* Listen to DOM events during the bubble phase.
*
* @param {DOMEventTarget} target DOM element to register listener on.
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
* @param {function} callback Callback function.
* @return {object} Object with a `remove` method.
*/
listen: function (target, eventType, callback) {
if (target.addEventListener) {
target.addEventListener(eventType, callback, false);
return {
remove: function () {
target.removeEventListener(eventType, callback, false);
}
};
} else if (target.attachEvent) {
target.attachEvent('on' + eventType, callback);
return {
remove: function () {
target.detachEvent('on' + eventType, callback);
}
};
}
},
/**
* Listen to DOM events during the capture phase.
*
* @param {DOMEventTarget} target DOM element to register listener on.
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
* @param {function} callback Callback function.
* @return {object} Object with a `remove` method.
*/
capture: function (target, eventType, callback) {
if (target.addEventListener) {
target.addEventListener(eventType, callback, true);
return {
remove: function () {
target.removeEventListener(eventType, callback, true);
}
};
} else {
if (process.env.NODE_ENV !== 'production') {
console.error('Attempted to listen to events during the capture phase on a ' + 'browser that does not support the capture phase. Your application ' + 'will not receive some events.');
}
return {
remove: emptyFunction
};
}
},
registerDefault: function () {}
};
module.exports = EventListener;
}).call(this,require('_process'))
},{"./emptyFunction":16,"_process":43}],10:[function(require,module,exports){
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*/
'use strict';
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
/**
* Simple, lightweight module assisting with the detection and context of
* Worker. Helps avoid circular dependencies and allows code to reason about
* whether or not they are in a Worker, even if they never include the main
* `ReactWorker` dependency.
*/
var ExecutionEnvironment = {
canUseDOM: canUseDOM,
canUseWorkers: typeof Worker !== 'undefined',
canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),
canUseViewport: canUseDOM && !!window.screen,
isInWorker: !canUseDOM // For now, this is true - might change in the future.
};
module.exports = ExecutionEnvironment;
},{}],11:[function(require,module,exports){
"use strict";
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @typechecks
*/
var _hyphenPattern = /-(.)/g;
/**
* Camelcases a hyphenated string, for example:
*
* > camelize('background-color')
* < "backgroundColor"
*
* @param {string} string
* @return {string}
*/
function camelize(string) {
return string.replace(_hyphenPattern, function (_, character) {
return character.toUpperCase();
});
}
module.exports = camelize;
},{}],12:[function(require,module,exports){
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @typechecks
*/
'use strict';
var camelize = require('./camelize');
var msPattern = /^-ms-/;
/**
* Camelcases a hyphenated CSS property name, for example:
*
* > camelizeStyleName('background-color')
* < "backgroundColor"
* > camelizeStyleName('-moz-transition')
* < "MozTransition"
* > camelizeStyleName('-ms-transition')
* < "msTransition"
*
* As Andi Smith suggests
* (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
* is converted to lowercase `ms`.
*
* @param {string} string
* @return {string}
*/
function camelizeStyleName(string) {
return camelize(string.replace(msPattern, 'ms-'));
}
module.exports = camelizeStyleName;
},{"./camelize":11}],13:[function(require,module,exports){
'use strict';
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @typechecks
*/
var isTextNode = require('./isTextNode');
/*eslint-disable no-bitwise */
/**
* Checks if a given DOM node contains or is another DOM node.
*
* @param {?DOMNode} outerNode Outer DOM node.
* @param {?DOMNode} innerNode Inner DOM node.
* @return {boolean} True if `outerNode` contains or is `innerNode`.
*/
function containsNode(outerNode, innerNode) {
if (!outerNode || !innerNode) {
return false;
} else if (outerNode === innerNode) {
return true;
} else if (isTextNode(outerNode)) {
return false;
} else if (isTextNode(innerNode)) {
return containsNode(outerNode, innerNode.parentNode);
} else if (outerNode.contains) {
return outerNode.contains(innerNode);
} else if (outerNode.compareDocumentPosition) {
return !!(outerNode.compareDocumentPosition(innerNode) & 16);
} else {
return false;
}
}
module.exports = containsNode;
},{"./isTextNode":26}],14:[function(require,module,exports){
(function (process){
'use strict';
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of thi