url box

_.md

[ Launch: url box ] 5623486 by enjalot

config.json

{"description":"url box","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},"template.html":{"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,"thumbnail":"http://i.imgur.com/mgMysBt.png"}

inlet.js

/*
* prepopulate with some good urls
one-click twitter
one-click BLS
*/

var urls = [
  {name: "something.csv", url: "http://example.com" },
  {name: "foo.tsv", url: "http://example2.com" }
]

var sources = d3.select("#sources")
var ul = sources.select("ul");

ul.append("span").classed("title", true)
.text("data sources")
var newButton = ul.append("button").classed("new", true)
.text("+")
//new data source
newButton.on("click", function(d,i) {
  urls.push({name: "", url:""});
  createLi(ul.selectAll("li.source").data(urls));
})

var lis = ul.selectAll("li.source")
  .data(urls)

createLi(lis)

function createLi(sel) {
  /* TODO:
    * figure out tab index so that tabbing from name goes right to url
    * icons for buttons
  */
 
  var enter = sel.enter()
    .append("li")
    .classed("source", true)
  
  //create the elements
  var nameDiv = enter.append("div").classed("name", true)
  nameDiv.append("input").classed("name", true)
  .attr("value", function(d) { return d.name })
  nameDiv.append("button").classed("refresh", true)
  .text("refresh")
  
  var urlDiv = enter.append("div").classed("url", true)
  urlDiv.append("input").classed("url", true)
  .attr("value", function(d) { return d.url })
  urlDiv.append("button").classed("delete", true).text("x");
  
  //add some interactivity
  //accordian
  nameDiv.on("click", function(d,i) {
    ul.selectAll("li.source").select("div.url")
      .classed("url-expand", false)
    .filter(function(c) { return c === d })
      .classed("url-expand", true)
    
    if(d3.event.target != d3.select(this).select("button").node()) {
      d3.event.cancelBubble = true;
    }
  }).select("input").on("click", function(d,i) {

  })
  urlDiv.select("input").on("click", function(d,i) {
    d3.event.cancelBubble = true;
  })
  
  //refresh button
  nameDiv.select("button.refresh").on("click", function(d,i) {
  })
  
  //delete button
  urlDiv.select("button.delete").on("click", function(d,i) {
    var index = urls.indexOf(d);
    urls.splice(index, 1);
    console.log(index, urls)
    ul.selectAll("li.source")
    .data(urls, function(d) { return d.name }).exit().remove()
  })
}

d3.select("#display")
.on("click", function() {
  ul.selectAll("li.source").select("div.url")
    .classed("url-expand", false)
})

style.css

/* TODO
 * overall style
 * proper transitions
*/
#sources {
  width: 400px;
}

.source {
  display:inline-block;
  border: 1px solid black;
  width: 100%;
  height: 100%;
}
.source button {
  float: right;
}

div.name {
  display: inline-block;
  width: 100%;
  height: 100%;
}
div.url {
  display: inline-block;
  width: 100%;
  height: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 300ms;
}

div.url-expand {
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  /*transition: opacity,height 1300ms;
  -webkit-transition: opacity,height 1300ms;
  */
  -webkit-transition: opacity 400ms;
}

template.html

<div id="sources">
  <ul>
  </ul>
</div>