play

_.md

[ Launch: play ] 6762703 by gelicia

config.json

{"description":"play","endpoint":"","display":"div","public":true,"require":[{"name":"momentjs","url":"https://rawgithub.com/moment/moment/2.2.1/min/moment.min.js"}],"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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/qX4X6cQ.png"}

inlet.js

//this is mostly just http://tributary.io/inlet/4569668 but it wouldn't fork :( 

//6694952
//6708450
var gistID = "6708450";

var url = "http://tributary.io/api/inlet/" + gistID;

d3.json(url, function(err, inlets) {
  render(inlets);
});
var dateFormat = d3.time.format("%m.%d.%Y %H:%M")

var display = d3.select("#display")
.style("overflow", "scroll");


function render(inlets){
 //put all related gists in an array so it's easier to iterate through
  var inletArr = [];
  var inlet = inlets;
  var parent = inlet.parent;  
  while(parent !== undefined){
    delete inlet.parent;
    inletArr.push(inlet);
    inlet = parent;
    parent = inlet.parent;
  } 
  //push the root inlet
  inletArr.push(inlet);
  
  inletArr = inletArr.map(function(d){
    d.createdAt = moment(d.createdAt);//.toDate(); 
    d.lastSave = moment(d.lastSave);//.toDate(); 
    return d;
  });
  
  var inletsDiv = display.selectAll("div.inlet")
  .data(inletArr)
  .enter()
  .append("div")
  .classed("inlet", true);
  
  inletsDiv.append("img").attr({
    src: function(d) { 
      return d.thumbnail
    },
    width: 25,
    height: 25
  }).classed("thumbnail", true);
  
  inletsDiv.append("a")
  .text(function(d) { return d.description })
  .attr({
    href: function(d) { return "http://tributary.io/inlet/" + d.gistid },
    target: "_blank"
  });
  
 inletsDiv.append("span")
  .classed("author", true)
  .text(function(d) { 
    return d.user.login;
  });
  
  inletsDiv.append("span")
  .classed("date", true)
  .text(function(d) { 
    var date = new Date(d.createdAt);
    return dateFormat(date)
  });
  
}

style.css

#fetch {
  position:relative;
  margin-top: 20px;
  right: 40px;
  font-size:29px;
  float:right;
}

.inlet {
  margin-left: 10px;
  margin-top: 20px;
}

.inlet img {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}

.inlet .date {
  font-size: 10px;
  margin-left: 5px;
}

.inlet .author {
  font-weight:bold;
  font-size: 15px;
  margin-left: 5px;
}