function recirc(selection) {
selection.each(function(data) {
d3.select(this).selectAll("div.recirc")
.data(data)
.enter()
.append("div.recirc")
.each(render)
.on("click", function(d) { window.location.href = d.url; });
});
function render(d,i) {
var recirc = d3.select(this);
recirc.append("div.title");
recirc.append("div.source");
recirc.append("iframe");
fetch(d.src)
.then(
function(response) {
response.text().then(function(rText) {
// get page title
var titleStart = rText.indexOf("
") + "".length;
var titleEnd = rText.indexOf("");
var titleLength = titleEnd - titleStart;
var title = rText.substr(titleStart, titleLength);
recirc.select(".title").text(title);
// get the source between and
var start = rText.indexOf("") + "".length;
var length = end - start;
var source = rText.substr(start,length);
var progress = 0;
var iframeDocument = recirc.select("iframe").node().contentWindow.document;
var renderingInterval = setInterval(function() {
// increment within bounds
progress=Math.min(progress + 5, source.length)
// add some text
recirc.select(".source").text(source.substr(0,progress));
// scroll to bottom
recirc.select(".source").node().scrollTop = recirc.select(".source").node().scrollHeight;
iframeDocument.open();
iframeDocument.write(source.substr(0,progress));
iframeDocument.close();
iframeDocument.getElementsByTagName("body")[0].scrollTop = iframeDocument.getElementsByTagName("body")[0].scrollHeight;
if(progress === source.length) clearInterval(renderingInterval);
})
})
}
);
}
}