127 lines
3.6 KiB
JavaScript
127 lines
3.6 KiB
JavaScript
|
|
//////////////////////////
|
|
// use texture.js without d3 to create discerning patterns on the email blocks
|
|
/////////////////////////////////////
|
|
|
|
|
|
// some faked dom, see https://github.com/riccardoscalco/textures/issues/17
|
|
function dom(name) {
|
|
this.name = name;
|
|
this.els = [];
|
|
this.attrs = {};
|
|
}
|
|
dom.prototype.append = function(name) {
|
|
if (name === "defs") return this;
|
|
if (this.name === undefined) {
|
|
this.name = name;
|
|
return this;
|
|
}
|
|
var el = new dom(name);
|
|
this.els.push(el);
|
|
return el;
|
|
}
|
|
dom.prototype.attr = function(key, value) {
|
|
this.attrs[key] = value;
|
|
return this;
|
|
}
|
|
dom.prototype.toString = function() {
|
|
var attrs = [];
|
|
var k;
|
|
for (k in this.attrs) {
|
|
attrs += " " + k + "='" + this.attrs[k] + "'";
|
|
}
|
|
if (this.els.length) {
|
|
return "<"+this.name+attrs+">"+this.els.map(function(el) { return el.toString()}).join('\n')+"</"+this.name+">";
|
|
} else {
|
|
return "<"+this.name+attrs+"/>"
|
|
}
|
|
}
|
|
//////////// end of faked dom ///////////////////////////////
|
|
|
|
let textureMap = {};
|
|
function getColoredTexture(i, color) {
|
|
let j = i % 11; // update when adding items to switch:
|
|
switch(j) {
|
|
case 0:
|
|
return textures.lines().size(4).strokeWidth(1).stroke(color);
|
|
case 1:
|
|
return textures.circles().radius(2).size(10).fill('none').strokeWidth(1).stroke(color).complement();
|
|
case 2:
|
|
return textures.lines().size(10).orientation("3/8").stroke(color);
|
|
case 3:
|
|
return textures.lines().heavier(4).thinner(.8).stroke(color);
|
|
case 4:
|
|
return textures.paths().d("hexagons").size(7).strokeWidth(1).stroke(color);
|
|
case 5:
|
|
return textures.lines().orientation("vertical", "horizontal").size(4).strokeWidth(1).shapeRendering("crispEdges").stroke(color);
|
|
case 6:
|
|
return textures.paths().d("hexagons").size(5).strokeWidth(2).stroke("rgba(0,0,0,0)").fill(color);
|
|
case 7:
|
|
return textures.circles().size(4).stroke(color);
|
|
case 8:
|
|
return textures.circles().thicker().complement().stroke(color);
|
|
case 9:
|
|
return textures.paths().d("caps").lighter().thicker().stroke(color);
|
|
case 10:
|
|
return textures.paths().d("hexagons").size(4).strokeWidth(2).stroke(color);
|
|
// textures.lines().size(4).strokeWidth(1).orientation("-3/8"),
|
|
}
|
|
};
|
|
|
|
const categoryColors = {
|
|
"person": "#f00",
|
|
"vehicle": "#0f0",
|
|
"outdoor": "#006",
|
|
"animal": "#ff0",
|
|
"food": "#0ff",
|
|
"furniture": "#f0f",
|
|
"indoor": "#fff",
|
|
"electronic": "#390",
|
|
"kitchen": "#930",
|
|
"accessory": "#f90",
|
|
"sports": "#f09",
|
|
}
|
|
|
|
function getColorForSuperCategory(name) {
|
|
return categoryColors[name];
|
|
}
|
|
|
|
function getTextureForCategory(name, color) {
|
|
let hash = name+'-'+color;
|
|
if(!textureMap.hasOwnProperty(hash)) {
|
|
let i = Object.keys(textureMap).length;
|
|
textureMap[hash] = getColoredTexture(i, color);
|
|
}
|
|
|
|
return textureMap[hash];
|
|
}
|
|
|
|
|
|
// turn HTMLCollection into Array, to prevent dynamic updating of the collection during loop
|
|
pathEls = Array.from(document.getElementsByTagName('path'));
|
|
for(pathEl of pathEls){
|
|
let defsEls = pathEl.parentNode.getElementsByTagName('defs');
|
|
let defsEl;
|
|
if(defsEls.length < 1) {
|
|
defsEl = document.createElement("DEFS");
|
|
pathEl.parentNode.appendChild(defsEl);
|
|
} else {
|
|
defsEl = defsEls[0];
|
|
}
|
|
|
|
console.log(pathEl,pathEl.classList);
|
|
if(pathEl.classList.length != 2) continue;
|
|
let super_name = pathEl.classList.item(0).substr(6);
|
|
let cat_name = pathEl.classList.item(1).substr(4);
|
|
let color = getColorForSuperCategory(super_name)
|
|
let texture = getTextureForCategory(cat_name, color);
|
|
|
|
if(!defsEl.parentNode.getElementById(texture.id())) {
|
|
let sel = new dom();
|
|
texture(sel);
|
|
console.log(sel, sel.toString())
|
|
defsEl.innerHTML += sel.toString();
|
|
}
|
|
|
|
pathEl.style.fill = texture.url();
|
|
} |