user page

_.md

[ Launch: user page vanity edition ] 6094415 by enjalot
[ Launch: user page ] 5860371 by gelicia
[ Launch: testing params ] 5088240 by enjalot
[ Launch: testing params ] 5088156 by enjalot

config.json

{"description":"user page","endpoint":"","display":"div","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},"style.css":{"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,"thumbnail":"http://i.imgur.com/GaaFq7Z.png","ajax-caching":true}

inlet.js

var query = tributary.query;
var username = query.user || "zeffii";

var imgWidth = 32;
var imgHeight = 32;

var skip = 0;
var counter = 0;

var urlBase = "http://tributary.io"
var url = urlBase + "/api/user/" + username + "/latest/100/";

d3.json(url + skip, function(err, inlets) {
  setTimeout(function() {
    render(inlets);
  }, 50);
});

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

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

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

display.append("div")
.classed("name", true)
.text(username);
var count = display.append("div")
  .classed("count", true)

var more = display.append("div")
.classed("more", true)
.append("a")
.text("more")
.on("click", function() {
  skip += 100;
  d3.json(url + skip, function(err, inlets) {
     render(inlets);
  });
})





function render(inlets) {
  if(query.filter) {
    console.log("filter", query.filter);
    var q = query.filter.toLowerCase();
    
    inlets = inlets.filter(function(d) { 
      var desc = d.description.toLowerCase();
      return ~desc.indexOf(q)
    })
  }
  counter += inlets.length;
  
 
  count.text(counter + " inlets")
  
  divs = inletdivs.selectAll("div.inlet")
  .data(inlets, function(d) { return d._id; })
  //divs.exit().remove()
  
  var enter = divs
  .enter()
  .append("div")
  .classed("inlet", true);
    
  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("image", true)
  .attr({
    src: function(d) { return d.thumbnail },
    width: imgWidth,
    height: imgHeight,
    target: "_blank"
  })
  a.append("br")
  
 var detailDiv = enter.append("div")
  .classed("details", true)
  
  detailDiv.append("span")
   .classed("stats", true)
  .text(function(d) { 
    return " Visits: " + (d.visits === undefined ? 0 : d.visits)
    + " Forks: " + (d.nforks === undefined ? 0 : d.nforks)
  })
  
   detailDiv.append("span")
  .classed("date", true)
  .text(function(d) { 
    var date = new Date(d.createdAt);
    return "  " + dateFormat(date)
  })
  
  
}

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 {
  width: 150px;
  height: 150px;
  margin: 5px;
  float:left;
}
.inlet .date {
  font-size: 10px;
  float:left;
  clear:left;
  margin-top: -10px;
}

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

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

.more {
  position: fixed;
  bottom: 0;
  padding: 5px 10px;
  background-color: rgba(215, 220, 210, 0.5);
  cursor: pointer;
}