JSFiddle - React, Tailwind, and code Playground
by zono
HTML
<div ng-app="app">
<div ng-controller="testCtrl">
<hr/>
<input type="text" data-ng-model="inputText" data-ng-change="setColors()"/>
<div data-ng-if="inputText" data-ng-style="{'background-color': colors.backgroundColor, 'color': colors.fontColor}" data-ng-bind="inputText"></div>
<hr/>
</div>
</div>
JavaScript
angular.module('app', []).controller('testCtrl', function ($scope, stringHexNumber) {
$scope.setColors = function() {
$scope.colors = stringHexNumber($scope.inputText);
};
}).service("stringHexNumber", function () {
return function (inputString) {
var result = {};
var predefinedColors = {
"Sentence": "#3498DB",
"Chunk": "#27AE60",
"Disease": "#ABC8E2",
"Drug": "#F2836B",
"LabMeasurement": "#E89A3A",
"Measurement": "#F2DC38",
"Medication": "#EBB9D7",
"Date": "#4AD9D9",
"Experiencer": "#D9CB9E",
"Negation": "#0FD4F2",
"Temporality": "#FFCCBF",
"AnatomicalSite_cTakes": "#CA8ADE",
"Disease_cTakes": "#C9AE3E",
"Medication_cTakes": "#16A085",
"Reporting To": "#9A8E9E",
"Contract Type": "#AD7E6F",
"Contact": "#F5E9AE",
"Apply To email": "#C7A19D"
};
var properties = Object.getOwnPropertyNames(predefinedColors);
var stringIndex = properties.indexOf(inputString);
if(stringIndex != -1) {
result['backgroundColor'] = predefinedColors[properties[stringIndex]];
result['fontColor'] = (function (hexTripletColor) {
var color = hexTripletColor;
color = color.substring(1); // remove #
color = parseInt(color, 16); // convert to integer
color = 0xFFFFFF ^ color; // invert three bytes
color = color.toString(16); // convert to hex
color = ("000000" + color).slice(-6); // pad with leading zeros
color = "#" + color; // prepend #
return color;
})(result['backgroundColor']);
return result;
} else {
throw new Error('Cannot find predefined color for ' + inputString);
}
};
});