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

Mix colors when in multiple categories

Browse source
This commit is contained in:
Arne Schlüter 2015-02-07 22:51:28 +01:00
commit 19dc2a91a1
2 changed files with 35 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

37
static/js/main.js
View file

@ -59,14 +59,43 @@
return marker;
}
function pickColor (data) {
var categories = [ 'racism', 'antisemitism', 'sexism', 'homophobia' ];
return data.categories.length ? colors[categories.indexOf(data.categories[0])] : colors[4];
function mixColors (colors) {
var rgb = colors.map(function (color) {
var r = color.substr(1, 2)
, g = color.substr(3, 2)
, b = color.substr(5, 2);
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++) {
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);
}
function pickColor (incident) {
var categories = ['racism', 'antisemitism', 'sexism', 'homophobia'].map(function (category, index) {
if (incident.categories.indexOf(category) !== -1)
return index;
}).filter(function (value) {
return value != null
});
var categoryColors = colors.filter(function (color, index) {
return categories.indexOf(index) !== -1;
});
return incident.categories.length ? mixColors(categoryColors) : colors[4];
}
/**
* Clear the map and render new markers
* @param {Array[Object]} data The incidents to be shown
* @param {Array[Object]} incidents The incidents to be shown
*/
function displayMarkers (incidents) {
markers.forEach(function (marker) {

3
views/index.tpl
View file

@ -9,13 +9,14 @@
<body>
<nav id="filter-picker">
<ul class="year-filter">
<li class="active"><a href="#">2005</a></li>
<li><a href="#">2005</a></li>
<li><a href="#">2006</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2008</a></li>
<li><a href="#">2009</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
<li class="all active"><a href="#">Alle</a></li>
</ul>
<ul class="category-filter">