near/berliner-winter
1
0
Fork 0
mirror of https://github.com/heyarne/berliner-winter.git synced 2026-05-06 19:23:39 +02:00
Code Issues Projects Releases Wiki Activity

Refactor the color module

Browse source
This commit is contained in:
Arne Schlüter 2015-02-08 09:58:07 +01:00
commit 2229d548b5
3 changed files with 31 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

37
static/js/colors.js
View file

@ -1,18 +1,37 @@
export default function mixColors (colors) { var colorUtils = {
var rgb = colors.map(function (color) {
/**
* Converts a hex string to RGB
* @param {String} color A string in six digit hex format
* @return {Array[Number]} An array of 3 integers which are the red,
* green and blue values
*/
hexToRGB: function toRGB (color) {
var r = color.substr(1, 2) var r = color.substr(1, 2)
, g = color.substr(3, 2) , g = color.substr(3, 2)
, b = color.substr(5, 2); , b = color.substr(5, 2);
return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)]; return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
}); },
var result = [ 0, 0, 0 ]; /**
for (var i = 0, l = rgb.length; i < l; i++) { * Mixes an arbitrary amount of colors linearly
result[0] += rgb[i][0] / l; * @param {Array[String]} colors Different colors as hex string
result[1] += rgb[i][1] / l; * @return {String} The mixed color as hex string
result[2] += rgb[i][2] / l; */
mix: function mixColors (colors) {
var rgb = colors.map(colorUtils.hexToRGB);
var result = [ 0, 0, 0 ];
for (var i = 0, l = rgb.length; i < l; i++) {
result[0] += rgb[i][0] / l;
result[1] += rgb[i][1] / l;
result[2] += rgb[i][2] / l;
}
return '#' + result[0].toString(16) + result[1].toString(16) + result[2].toString(16);
} }
return '#' + result[0].toString(16) + result[1].toString(16) + result[2].toString(16);
} }
export default colorUtils;

2
static/js/filter.js
View file

@ -16,4 +16,4 @@ export default {
}); });
} }
} };

4
static/js/main.js
View file

@ -1,7 +1,7 @@
'use strict'; 'use strict';
import $ from 'jquery'; import $ from 'jquery';
import filter from './filter'; import filter from './filter';
import {mixColors} from './colors'; import colorUtils from './colors';
// http://www.colourlovers.com/palette/1811244/1001_Stories // http://www.colourlovers.com/palette/1811244/1001_Stories
var colors = [ '#F8B195', '#F67280', '#C06C84', '#6C5B7B', '#355C7D' ]; var colors = [ '#F8B195', '#F67280', '#C06C84', '#6C5B7B', '#355C7D' ];
@ -73,7 +73,7 @@ function pickColor (incident) {
return categories.indexOf(index) !== -1; return categories.indexOf(index) !== -1;
}); });
return incident.categories.length ? mixColors(categoryColors) : colors[4]; return incident.categories.length ? colorUtils.mix(categoryColors) : colors[4];
} }
/** /**