Commit dc4471fe authored by Zéfling's avatar Zéfling 🎨

Coloration lib

parent bbe1fe2a
Pipeline #11 failed with stages
...@@ -133,6 +133,41 @@ ...@@ -133,6 +133,41 @@
} }
} }
} }
},
"coloration": {
"root": "projects/coloration",
"sourceRoot": "projects/coloration/src",
"projectType": "library",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/coloration/tsconfig.lib.json",
"project": "projects/coloration/ng-package.json"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/coloration/src/test.ts",
"tsConfig": "projects/coloration/tsconfig.spec.json",
"karmaConfig": "projects/coloration/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/coloration/tsconfig.lib.json",
"projects/coloration/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
} }
}, },
"defaultProject": "coloration-demo" "defaultProject": "coloration-demo"
......
This diff is collapsed.
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/coloration",
"lib": {
"entryFile": "src/public_api.ts"
}
}
\ No newline at end of file
{
"name": "coloration",
"version": "0.0.1",
"peerDependencies": {}
}
\ No newline at end of file
// tslint:disable:no-bitwise
const pattern = {
hexa: /^^#?(([\da-f]{3})(([\da-f]{3})([\da-f]{2})?|[\da-f]{1})?)$/i,
rgba: /^rgba?\(([\d]*(\.[\d]+)?)(,?\s*|\s+)([\d]*(\.[\d]+)?)(,?\s*|\s+)([\d]*(\.[\d]+)?)((,\s*)([\d]*(\.[\d]+)?))?\)$/i
};
export class Coloration {
static colorsName: any = {
// CSS 1
black: '#000000', silver: '#c0c0c0', gray: '#808080', white: '#ffffff', maroon: '#800000', red: '#ff0000',
purple: '#800080', fuchsia: '#ff00ff', green: '#008000', lime: '#00ff00', olive: '#808000', yellow: '#ffff00',
navy: '#000080', blue: '#0000ff', teal: '#008080', aqua: '#00ffff',
// CSS 2 (Revision 1)
orange: '#ffa500',
// CSS 3
aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc',
bisque: '#ffe4c4', blanchedalmond: '#ffebcd', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887',
cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed',
cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', deaqua: '#00ffff', darkblue: '#00008b',
darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9',
darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00',
darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b', darkslategray: '#2f4f4f', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1',
darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969',
dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22',
gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', greenyellow: '#adff2f',
grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082',
ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00',
lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff',
lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3',
lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa',
lightslategray: '#778899', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0',
limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', defuchsia: '#ff00ff', mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1',
moccasin: '#ffe4b5', navajowhite: '#ffdead', oldlace: '#fdf5e6', olivedrab: '#6b8e23', orangered: '#ff4500',
orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee',
palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb',
plum: '#dda0dd', powderblue: '#b0e0e6', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513',
salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d',
skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', slategrey: '#708090', snow: '#fffafa',
springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', thistle: '#d8bfd8', tomato: '#ff6347',
turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', whitesmoke: '#f5f5f5', yellowgreen: '#9acd32',
// CSS 4
rebeccapurple: '#663399'
};
constructor(public color: string) { }
/**
* change the luminosity of a color
* @param lum value between -1 and 1
*/
changeLuminosity(lum: number): string {
lum = Math.min(Math.max(lum || 0, -1), 1);
return this.maskColor(lum < 0 ? '#000' : '#FFF', Math.abs(lum));
}
/**
* add color with a mark
* @param color additional color
* @param opacity value of opacity between 0 and 1 for the additional color
* @returns hexa color
*/
maskColor(color: string, opacity: number = 1): string {
const baseColor = this.parseColor(this.color);
const additionalColor = this.parseColor(color);
const lum = Math.min(Math.max(opacity || 0, 0), 1);
const R = baseColor >> 16;
const G = baseColor >> 8 & 0x00FF;
const B = baseColor & 0x0000FF;
return '#' + (0x1000000 +
(Math.round(((additionalColor >> 16) - R) * lum) + R) * 0x10000
+ (Math.round(((additionalColor >> 8 & 0x00FF) - G) * lum) + G) * 0x100
+ (Math.round(((additionalColor & 0x0000FF) - B) * lum) + B)
).toString(16).slice(1);
}
/**
* change color
* @param color parse color : name, #HEXA, rgba()
* @returns int color
*/
private parseColor(color: string) {
// si named color
if (Coloration.colorsName[color]) {
color = Coloration.colorsName[color];
}
// validate hexa string #RGB, #RGBA, #RRGGBB, #RRGGBBAA (ignore alpha)
const matchHex = String(color).match(pattern.hexa);
let intColor;
if (matchHex) {
const hexa = matchHex[4]
? matchHex[2] + matchHex[4]
: matchHex[2][0] + matchHex[2][0] + matchHex[2][1] + matchHex[2][1] + matchHex[2][2] + matchHex[2][2];
intColor = parseInt(hexa, 16);
}
if (intColor === undefined) {
// validate rgb() / rgba()
const matchRgb = String(color).match(pattern.rgba);
if (matchRgb) {
intColor = parseInt(matchRgb[1], 10) * 65536 + parseInt(matchRgb[3], 10) * 256 + parseInt(matchRgb[5], 10);
}
}
return intColor;
}
}
/*
* Public API Surface of coloration
*/
export * from './lib/coloration';
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2015",
"module": "es2015",
"moduleResolution": "node",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"types": [],
"lib": [
"dom",
"es2018"
]
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
{
"extends": "../../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"lib",
"camelCase"
],
"component-selector": [
true,
"element",
"lib",
"kebab-case"
]
}
}
<!--The content below is only a placeholder and can be replaced.--> <!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center"> <div>
<h1> <h1>
Welcome to {{ title }}! Welcome to {{ title }}!
</h1> </h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div> </div>
<h2>Here are some links to help you start: </h2> <h2>Test to change color: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet> <div>
Color : <input type="color"
[value]="color"
(change)="changeColor($event)">
Luminosity : <input type="number"
max="1"
min="-1"
step="0.01"
[value]="luminosity"
(keyup)="changeLuminosity($event)"
(change)="changeLuminosity($event)">
</div>
<hr>
<div>Color : {{color}}</div>
<div>ColorFinal : {{colorFinal}}</div>
<div [style.background-color]="colorFinal">&nbsp;</div>
\ No newline at end of file
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Coloration } from 'projects/coloration/src/public_api';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
...@@ -7,4 +8,29 @@ import { Component } from '@angular/core'; ...@@ -7,4 +8,29 @@ import { Component } from '@angular/core';
}) })
export class AppComponent { export class AppComponent {
title = 'coloration-demo'; title = 'coloration-demo';
color = '#FF0000';
luminosity = 0;
colorFinal: string;
constructor() {
this.calculColor();
}
changeColor(event: Event) {
this.color = (event.target as any).value;
this.calculColor();
}
changeLuminosity(event: Event) {
this.luminosity = parseFloat((event.target as any).value);
this.calculColor();
}
calculColor() {
const color = new Coloration(this.color);
this.colorFinal = color.changeLuminosity(this.luminosity);
}
} }
...@@ -16,6 +16,14 @@ ...@@ -16,6 +16,14 @@
"lib": [ "lib": [
"es2018", "es2018",
"dom" "dom"
] ],
"paths": {
"coloration": [
"dist/coloration"
],
"coloration/*": [
"dist/coloration/*"
]
}
} }
} }
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment