Another Inlet

_.md

[ Launch Inlet ]
Gist #4405278 [ Launch Inlet ]
Gist #4404031 [ Launch Inlet ]
Gist #4404008 [ Launch Inlet ]
Gist #4403958 [ Launch Inlet ]
Gist #4403933 [ Launch Inlet ]
Gist #4403895 [ Launch Inlet ]
Gist #4403848 [ Launch Inlet ]
Gist #4403830 [ Launch Inlet ]
Gist #4403782 [ Launch Inlet ]
Gist #4403781 [ Launch Inlet ]
Gist #4403739 [ Launch Inlet ]
Gist #4403488 [ Launch Inlet ]
Gist #4403465 [ Launch Inlet ]
Gist #4403407 [ Launch Inlet ]
Gist #4403395 [ Launch Inlet ]
Gist #4403393 [ Launch Inlet ]
Gist #4403363 [ Launch Inlet ]
Gist #4403311 [ Launch Inlet ]
Gist #4403303 [ Launch Inlet ]
Gist #4403287 [ Launch Inlet ]
Gist #4403199 [ Launch Inlet ]
Gist #4403141 [ Launch Inlet ]
Gist #4403136 [ 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},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.3856103110547,"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

  function Tooltip(config){
  this.x = config["x"] || 0;
  this.y = config["y"] || 0;
  this.width = config["width"] || 0;  
  this.height = config["height"] || 0;
  
  this.padding = config["padding"] || {"top": 0, "bottom": 0, "left": 0, "right": 0};
  this.onclickCallback = config["onclickCall"];
  this.container = config["appendTo"];
  this.style = config["style"] || {}; 
  this.contentFill = config["tooltip-content"];
	
  this.ArrowHeight = 8;  
   
  this.container = this.container.append("g")
    .attr("class","tooltip-container")
    .attr("transform","translate("+[this.x,this.y]+")")
    .on("click",config["onclick"]);
  
   
 
  this.bgRect = this.container.append("svg:rect")
    .attr("width", this.width)
    .attr("height", this.height)
    .attr("rx",10)
    .attr("ry",10)
    .attr("x",0)
    .attr("y",0)
    .attr("fill","#201F24")
.attr("stroke","#201F24")    
    .classed("bgRect",true)
    .style(this.style);
  
  
  this.arrow = this.container.append('svg:path')
    .attr("fill","#201F24")
    .attr("d","m0,0 l35,0 l-17.5,20Z")
    .attr("fill","#201F24")
    .attr("transform","translate("+[(this.width/2)-8,this.height]+")")
    .style(this.style)
  
  this.content = this.container.append("g")
            .attr("class","tooltip-content")
  this.contentFill(this.content, config)()

    
   
  this.render();
  //this.hide();
  
}

Tooltip.prototype.render = function(){
  
  
  
      var currentScale = 1
      
      var bb = this.content.node().getBBox();
      var width = bb.width;
      var height = bb.height;

      var boxHeight = this.width - this.padding["left"] - this.padding["right"];
      var boxWidth  = this.height - this.padding["top"] - this.padding["bottom"];

      var currentSF = 1;

      var maxWidth = (boxWidth / width );
      var maxHeight = (boxHeight /height);
      
      var max = Math.min(maxWidth, maxHeight);
      
      var scaling = (currentSF * max);
      var old_transform = ""; 
  
      if(this.content.attr("transform") != null){
            old_transform = this.content.attr("transform");
       }
        
      this.content.attr("transform","scale("+scaling+")");
      var bb = this.content.node().getBoundingClientRect();
  	  
  
  	  console.log('sfsd',bbCon);
  		
  	this.content.attr("transform","translate("+(this.width/2 - bb.width/2)+","+(this.height/2 - bb.height/2)+")scale("+scaling+")");  
    var bbCon = this.container.node().getBoundingClientRect();
  	console.log(bbCon)
  	 this.container
       .attr("transform","translate("+((this.x - bbCon.width/2))+","+(this.y - bbCon.height + 13)+")scale("+scaling+")");  
  
  
}; 

Tooltip.prototype.show = function(){
this.container
      .attr("transform","translate("+[this.x+this.width/2,this.y=this.height]+")rotate(0)scale(1)")
      .attr("fill-opacity",0)
      .transition()
      .duration(1000) 
      .attr("transform","translate("+[this.x,this.y]+")rotate(0)scale(1)")
      .attr("fill-opacity",1)
  
};

Tooltip.prototype.hide = function(){
  this.container
      .attr("transform","translate("+[this.x,this.y]+")rotate(0)scale(1)")
      .attr("fill-opacity",1)
      .transition()
      .duration(1000) 
  .attr("transform","translate("+[this.x+this.width/2,this.y-this.height]+")rotate(0)scale(1)")
      .attr("fill-opacity",0)
  
};

Tooltip.prototype.destroy = function(){
  this.container.remove();
};


function createTooltip(svg,x,y){

    
      var onclickCall =  function(){
    console.log("click");
   }
    
  var content = function(appendTo, config){
  return function(d,i){
  var text = appendTo.append('svg:text')
      .attr("fill", "#FFFFFF")
      .attr("x", 0)
      .attr("y", 40)
      .attr("font-size", 29)
      .attr("font-family", "Arial")
      .attr("text-anchor", "start")
      ;
  
    text.append("tspan")
   .attr("dy",0)
      .attr("x",0)
      .text("whitney houston");
      
    text.append("tspan")
   .attr("dy",40)
      .attr("x",0)
      .text("Wikipedia link:");
    
    
       
    text.append("tspan")
    .attr("dy",40)
        .attr("x",0)
    .attr("fill","#2632EE")
        .attr("text-decoration","underline")  
    .text("here") 
          .on("click",function(){
            var href = "http://www.spiegel.de"
            window.open(''+href+'', '_blank', 'width=600, height=300');
          })
      
    
 
  	}
	}
    
      
        
   var config = {"width": 256, "height": 187,
                  "x" : x, "y": y, "appendTo": svg,
                  "tooltip-content" : content, "onclick": onclickCall,
                           "padding": {"top": 0, "bottom": 0, "left": 10, "right": 0},
              "style" : {"fill":"#A3A3A3"}
	}        
        
        
        
    var tooltip = new Tooltip(config);
    

return tooltip;
    

}

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


var range = d3.range(1);

var row = 5;
var cols = 5;


 

svg.selectAll(".tile")
  .data(range)
  .enter()
  .append("svg:rect")
	.attr("width",175)
	.attr("height",90)
  .attr("x",function(d,i){
      	return ((i % cols) * 70)+100;

  })
  .attr("y",function(d,i){ 
  	return (Math.floor(i / row) * 60)+200;
  })
  .attr("fill",function(){

	  return "#2E36B6";
  })
  .attr("class","tile")  
  
  
  svg.selectAll(".tile").each(function(){
	var x1 = this.x.baseVal.value;
	var y1 = this.y.baseVal.value;
	 
    this.tooltip = createTooltip(svg,x1,y1)
  	 
    console.log('d',x1,y1)
    
  
  });    
    
    svg.selectAll(".tile").each(function(){
      
      d3.select(this)
        .on('mouseover',function(){
          //this.tooltip.show();
          console.log('helllo',this.tooltip,this)
        })
        .on('mouseout',function(){
          //this.tooltip.hide();
        })        
      
      })