Another Inlet

_.md

[ Launch Inlet ]
Gist #4323275 [ Launch Inlet ]
Gist #4323059 [ Launch Inlet ]
Gist #4322999 [ Launch Inlet ]
Gist #3200444

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.4541666666666664,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var svg = d3.select("svg");




var theme_properties = { "thumbnail-standard-small" : {"circleRadius": 200 ,"backgroundColor": "#fff", "circle1Color" : "#fae34b", "circle2Color" : "#00adef", "fontColor":"#000" , "fontColor2": "#fff", "text1" : "DATA","text2" : "DESIGN", "intersection": "VISUALLY", "interface-color": "#201F24",
	"colorCombos" : [
		{"color1":"#f8e64b","color2":"#00aeef","font1": "#000","font2":"#000","fontFamily":"FSAlbert"},
		{"color1":"#f8e64b","color2":"#ec008c", "font1": "#000","font2":"#fff","fontFamily":"FSAlbert"},
		{"color1":"#00aeef","color2":"#ec008c","font1": "#000","font2":"#fff","fontFamily":"FSAlbert"},
		{"color1":"#6abf5a","color2":"#f8e64b","font1": "#000","font2":"#000","fontFamily":"FSAlbert"},
		{"color1":"#CB1C2C","color2":"#eec3b5","font1": "#000","font2":"#000","fontFamily":"FSAlbert"},
		{"color1":"#3c5a93","color2":"#d8dfe9","font1": "#000","font2":"#000","fontFamily":"FSAlbert"},
		{"color1":"#6abf5a","color2":"#e7e8e9","font1": "#000","font2":"#000","fontFamily":"FSAlbert"},
		{"color1":"#414142","color2":"#e7e8e9","font1": "#000","font2":"#000","fontFamily":"FSAlbert"},
      		{"color1":"#414142","color2":"#e7e8e9","font1": "#000","font2":"#000","fontFamily":"FSAlbert"},
      		{"color1":"#414142","color2":"#e7e8e9","font1": "#000","font2":"#000","fontFamily":"FSAlbert"},
      		{"color1":"#414142","color2":"#e7e8e9","font1": "#000","font2":"#000","fontFamily":"FSAlbert"},
		{"color1":"#777B7D","color2":"#fff","font1": "#2d2a2e","font2":"#ef452f","fontFamily":"FSAlbert"},
		{"color1":"#777b7d","color2":"#fff","font1": "#2d2a2e","font2":"#ef452f","fontFamily":"FSAlbert", "background":"#cee6f6"}
	]}};



function ColorPicker(x, y, width, height, container, colorCombos){
  
  this.colorPicker = container.append("svg:g")
      .attr("id","colorPicker")
      .attr("fill-opacity","0")
      .style("visibility","hidden")
      .attr("class","non-print")
      .attr("transform","translate("+[x, y]+")rotate(0)scale(1)");
  
 
  this.distanceX = 50;
  this.distanceY = 57;
  this.x = x;
  this.y = y;
  
  this.heightArrow = 20;
  
  
  
  this.colorCombos = colorCombos;
  
  var colorPickerWidth = width;
  var colorPickerHeight = height;
  

  
  this.bgRect = this.colorPicker.append("svg:rect")
    .attr("width",colorPickerWidth)
    .attr("height",colorPickerHeight)
    .attr("rx",25)
    .attr("ry",25)
    .attr("x",0)
    .attr("y",0)
    .attr("fill","#201F24")
    .classed("bgRect",true);
  
  this.arrow = this.colorPicker.append('svg:path')
    .attr("fill","#201F24")
    .attr("d","m0,0 l35,0 l-17.5,20Z")
    .attr("fill","#201F24")
    .attr("transform","translate("+[(colorPickerWidth/2)-8,colorPickerHeight]+")");  
 
  
  
  this.createCombos(this.colorCombos );
  
  this.render();

}

ColorPicker.prototype.render = function(){
  var bb = this.colorPicker.node().getBBox();
  this.colorPicker.attr("transform","translate("+[this.x - bb.width/2, this.y - bb.height]+")")
	
    
    this.bgRect
      .attr("height", bb.height)
      .attr("y",-this.heightArrow);
  
  
  this.arrow.attr("transform","translate("+[(bb.width/2)-8,bb.height-this.heightArrow]+")");  


}; 

ColorPicker.prototype.createCombos = function(){

  var xPos = 10;
  var yPos = 50;
  
  var width = 20;
  var height = 20;
  
  var self = this;
  
  var x = this.x;
  var y = this.y;
  
  var paddingX = 10;
  var paddingY = 10;
  
  var colorGroup = this.colorPicker.append("svg:g")
      .attr("transform","translate("+[paddingX, paddingY]+")")
      .attr("id","colorPicks");
  
  var col = 4;
  var row = 4;
  
  this.colorCombos.forEach( function(colorCombo, i) {
    
   
        var colorChoiceGroup1 = colorGroup.append("svg:g")
        .attr("transform","translate("+[0,0]+")")
        .attr("id","colorChoiceWrapper")
        .attr("class","colorChoice")
        .attr("cursor","pointer");
        
  
        colorChoiceGroup1.append("svg:rect")
        .attr("width",width)
		.attr("height",height)
        .attr("x", ((i % col) * self.distanceX)+width/2)
        .attr("y", (Math.floor(i / row)) * self.distanceY)
        .attr("class","colorChoice")
        .attr("fill-opacity",0.5)
        .attr("fill",colorCombo["color2"])
        .attr("rx",25)
        .attr("ry",25);
    
    
        colorChoiceGroup1.append("svg:rect")
        .attr("width",width)
		.attr("height",height)
        .attr("x", (i % col) * self.distanceX)
        .attr("y", (Math.floor(i / row)) * self.distanceY)
        .attr("class","colorChoice")
        .attr("fill-opacity",1)
        .attr("fill",colorCombo["color1"])
        .attr("rx",25)
        .attr("ry",25);
    
        colorChoiceGroup1.append("svg:rect")
        .attr("width",width)
		.attr("height",height)
        .attr("x", ((i % col) * self.distanceX)+width/2)
        .attr("y", (Math.floor(i / row)) * self.distanceY)
        .attr("class","colorChoice")
        .attr("fill-opacity",0.5)
        .attr("fill",colorCombo["color2"])
        .attr("rx",25)
        .attr("ry",25);
    
    
    	

  });

}; 



ColorPicker.prototype.show = function(){

	this.render();
	this.colorPicker
      .transition()
      .duration(1)
      .attr("fill-opacity",1)
      .style("visibility","visible")



}; 

var x = 125;
var y = 284;

  
  
svg.append("svg:circle")
	.attr("r",10)
	.attr("cx",10+x)
	.attr("cy",10+y)
	.attr("fill","#ff00ff");

var colorCombos = theme_properties["thumbnail-standard-small"]["colorCombos"];

console.log(colorCombos)

var x = new ColorPicker(x,y, 200, 200, svg, colorCombos );


console.log("x",x.show(),colorCombos,theme_properties)