Latest Tributary Inlets

_.md

[ Launch: Latest Tributary Inlets ] 6722486 by enjalot
[ Launch: Tributary Inlets With Titles ] 4569668 by enjalot
[ Launch: Tributary Inlets ] 4562326 by poezn
[ Launch: Tributary Inlets ] 4561783 by enjalot
[ Launch: Tributary Inlets ] 4561743 by enjalot
[ Launch: Tributary Inlets ] 4549657 by enjalot
[ Launch: An inlet to Tributary ] 4545400 by enjalot

config.json

{"description":"Latest Tributary Inlets","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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}},"fullscreen":false,"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,"tab":"edit","display_percent":0.6150630391506304,"hidepanel":false,"thumbnail":"http://i.imgur.com/3tKgIxq.png"}

inlet.js

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

var skip = 0;
var counter = 0;
var thumbWidth = 64;
var aviWidth = 32;

var urlBase = "http://tributary.io"

var usersUrl = urlBase + '/api/users';
var createdUrl = urlBase + '/api/latest/created'

tributary.inlets = [];

var dateFormat = d3.time.format("%m.%d.%Y %H:%M")

//grab the users
if(!tributary.users) {
   d3.json(usersUrl, function(err, res) {
     tributary.users = {};
     res.forEach(function(u) { 
       if(u)
       tributary.users[u.login] = u;
     })
     render();
  })
}
if(!tributary.inlets.length) {
   d3.json(createdUrl, function(err, res) {
     tributary.inlets = res;
     render();
  })
}


var display  = d3.select("#display");

var inletdivs = display.append("div").classed("inlets", true)

display.append("div")
.classed("name", true)


function render() {
  divs = inletdivs.selectAll("div.inlet")
  .data(tributary.inlets, function(d) { return d._id; })
  //divs.exit().remove()
  
  var enter = divs
  .enter()
  .append("div")
  .classed("inlet", true);
  
  //TODO: default image for when no thumbnail exists
  enter
  .filter(function(d, i) { return (!d.thumbnail) || d.thumbnail === null; })
  //.style("margin-left", (imgWidth + 10) + "px");
  
  var a = enter.append("a")
  .classed("description", true)
  .attr({
    href: function(d) { return urlBase + "/inlet/" + d.gistid },
    target: "blank"
  })
  a.append("span").text(function(d) { return d.description })
 
  a//.filter(function(d, i) { return d.thumbnail && d.thumbnail !== null; })
  .append("img")
  .classed("thumb", true)
  .attr({
    src: function(d) { return d.thumbnail },
    width: thumbWidth,
    height: thumbWidth,
    target: "_blank"
  })
  a.append("br")
  
 var detailDiv = enter.append("div")
  .classed("details", true)
 
  detailDiv.append("span")
  .classed("date", true)
  .text(function(d) { 
    var date = new Date(d.createdAt);
    return "  " + dateFormat(date)
  }) 
  
  detailDiv.append("img")
  .classed("avatar", true)
  .attr({
    src: function(d) { 
      if(!d.user) return;
      if(tributary.users && tributary.users[d.user.login])
        return tributary.users[d.user.login].avatar_url;
    }
  })
  
  detailDiv
  .append("a")
  .attr({
    target: "_blank",
    href: function(d) { 
      if(d.user) return "http://tributary.io/s/6094415?user=" + d.user.login;
    }
  })
  .append("span")
    .classed("login", true)
    .text(function(d) { if(d.user) return " by " + d.user.login });
  
  detailDiv.append("span")
   .classed("stats", true)
  .text(function(d) { 
    return " Visits: " + (d.visits === undefined ? 0 : d.visits)
    + " Forks: " + (d.nforks === undefined ? 0 : d.nforks)
  })
  
  
  
  
  
  
}

style.css

#display {
  overflow: scroll;
  background-color: white;
}
.name {
  position:fixed;
  float:left;
  font-weight: 700;
  font-size: 93px;
  margin-left: 0px;
  margin-top: -10px;
  padding: 38px;
}
.count {
  position: fixed;
  float: right;
  right: 0;
  
  margin-right: 20px;
  margin-left: 40px;
  margin-top: 5px;
}

.inlets {
  position:absolute;
  margin-top: 75px;
  clear:left;
  padding:10px;
  padding-bottom: 50px;
}

.inlet {
  width: 180px;
  height: 320px;
  float: left;
  margin: 2px;
  padding: 10px;
  border: 1px solid #D9DBF0;
}

.inlet:hover {
  background-color: rgba(160, 170, 160, 0.2);
 }

.inlet .description {
  float:left;
  clear:left;
}
.inlet .description span {
  float: left;
  font-size: 16px;
  line-height: 18px;
  height: 40px;
}

.inlet img.thumb {
  width: 150px;
  height: 150px;
  margin: 5px;
  float:left;
  display: inline;
}
.inlet .date {
  font-size: 10px;
  float:left;
  clear:left;
  margin-top: -10px;
}

.stats {
  float:left;
  clear:left;
  font-size: 15px;
}

.details{
  float:left;
  clear:left;
  display:inline;
  vertical-align:middle;
  margin-top: 30px;
}

.login {
  font-size: 12px;
  font-weight: bold;
  float:left;
  margin-left: 10px;
}
.avatar {
  float:left;
  width: 25px;
  clear: left;
  
}