coco/www/coco_example.js

//////////////////////////
// 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();
}