Tributary Inlets

_.md

[ Launch: Tributary Inlets ] 4551425 by zeffii
[ Launch: Tributary Inlets ] 4549657 by enjalot
[ Launch: An inlet to Tributary ] 4545400 by enjalot

config.json

{"description":"Tributary Inlets","endpoint":"","display":"html","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}},"tab":"edit","display_percent":0.44265206125094625,"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 display = d3.select("#display")
.style("overflow", "scroll");

var users_url = '/api/users';
var created_url = '/api/latest/created'

// time data 
// "2013-01-16T22:11:10.874Z"
var iso = d3.time.format.utc("%Y-%m-%dT%H:%M:%S.%LZ").parse;

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


display.append("input")
.attr({
  id: "fetch",
  type: "button",
  value: "fetch"
})
.on("click", function() {
  d3.json(created_url, function(err, res) {
    tributary.inlets = res;
    render();
  })
})


function render() {
  if(!tributary.inlets) return;
  
  console.log(tributary.inlets)
  
  var inlets = display.selectAll("div.inlet")
  	.data(tributary.inlets)
  .enter()
  .append("div")
  .classed("inlet", true);
  
  inlets.append("a")
  .text(function(d) { return d.gistid })
  .attr({
    href: function(d) { return "/inlet/" + d.gistid }
  })
  

  var user_inlets = inlets.filter(function(d) {
    return d.user
  })
  user_inlets.append("span")
    .classed("login", true)
    .text(function(d) { return " by " + d.user.login });
  
  user_inlets.append("img")
  .attr({
    src: function(d) { 
      if(tributary.users)
        return tributary.users[d.user.login].avatar_url;
    },
    width: 25,
    height: 25
  })
  user_inlets.append("span")
  	.classed("time", true)
  .text(function(d) { 
    
    // return iso(d.lastSave) || iso(d.time)
    if (d.lastSave) return iso(d.lastSave)
    else return "None"
  })
  
  
};
render();
if(!tributary.inlets || !tributary.inlets.length) {
   d3.json(created_url, function(err, res) {
    tributary.inlets = res;
    render();
  })
}

style.css

/*
http://lesscss.org/ Pragmatic Theme by Dealga McArdle
After original "Dark Theme" ported to CodeMirror by Peter Kroon
*/

.cm-s-lesser-dark {
  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
  line-height: 1.26em;
 }

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #EEEEEE;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark pre { padding: 0 8px; line-height: 1.3em; }/*editable code holder*/

div.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/

.cm-s-lesser-dark .CodeMirror-gutters { background: #262626; border-right:1px solid #aaa; }
.cm-s-lesser-dark .CodeMirror-linenumber { color: #777; }

.cm-s-lesser-dark span.cm-keyword { color: DeepSkyBLue; }
.cm-s-lesser-dark span.cm-atom { color: #8CEEF7; font-weight: bold}
.cm-s-lesser-dark span.cm-number { color: Chartreuse; background: #000000;}
.cm-s-lesser-dark span.cm-def {color: #C4D8E6;}
.cm-s-lesser-dark span.cm-variable { color:#AAA; }
.cm-s-lesser-dark span.cm-variable-2 { color: #9DCFD8; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-property {color: #FFB78F;}
.cm-s-lesser-dark span.cm-operator {color: #92A75C;}
.cm-s-lesser-dark span.cm-comment { color: #b2b2b2; background: #000000;}
.cm-s-lesser-dark span.cm-string { color: Chartreuse; background: #424242;}
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse; background: #7E7E7E;}
.cm-s-lesser-dark span.cm-meta { color: #738C73; }
.cm-s-lesser-dark span.cm-error { color: #9d1e15; }
.cm-s-lesser-dark span.cm-qualifier {color: #000555; }
.cm-s-lesser-dark span.cm-builtin { color: #ff9e59; }
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark span.cm-tag { color: #669199; }
.cm-s-lesser-dark span.cm-attribute {color: #00c;}
.cm-s-lesser-dark span.cm-header {color: #a0a;}
.cm-s-lesser-dark span.cm-quote {color: #090;}
.cm-s-lesser-dark span.cm-hr {color: #999;}
.cm-s-lesser-dark span.cm-link {color: #00c;}

#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-top: 5px;
}

.time {
  font-size: 0.8em;
  margin-left: 10px;
}