smr/assets/index_scroll.js

108 lines
3.1 KiB
JavaScript

/*
Allows for lazy loading of stories on the main page as the user scrolls down
*/
function add_stories(stories){
var tbody_el = document.querySelector("table#story_list tbody")
for(var i = 0; i < stories.length; i++){
var story = stories[i];
/* This chunk should match /src/pages/parts/story_brief */
console.log("Adding story:",story)
var row = document.createElement("tr");
row.appendChild(
document.createElement("td")
); // unlisted cell
var link_cell = document.createElement("td");
var link = document.createElement("a");
link.textContent = story.title;
link.href = story.url;
link_cell.appendChild(link);
row.appendChild(link_cell);
var author_cell = document.createElement("td");
author_cell.appendChild(
document.createTextNode("By ")
);
if(story.isanon){
author_cell.appendChild(
document.createTextNode("Anonymous")
);
}else{
var author_page = document.createElement("a");
author_page.textContent = story.author;
author_page.href = story.author; // TODO: fix
author_cell.appendChild(author_page);
}
row.appendChild(author_cell);
var hits_cell = document.createElement("td")
hits_cell.appendChild(
document.createTextNode(story.hits + " hits")
);
row.appendChild(hits_cell);
var comments_cell = document.createElement("td");
comments_cell.appendChild(
document.createTextNode(story.ncomments + " comments")
);
row.appendChild(comments_cell);
var tag_cell = document.createElement("td");
var tag_list = document.createElement("ul");
tag_list.className = "row tag-list";
tag_cell.appendChild(tag_list);
for(var j = 0; j < Math.min(story.tags.length,5); j++){
var tag = story.tags[j];
var tag_item = document.createElement("li");
var tag_button = document.createElement("a");
tag_button.className = "tag button button-outline";
tag_button.textContent = tag;
tag_button.href = "/_search?q=%2B" + tag;
tag_item.appendChild(tag_button);
tag_list.appendChild(tag_item);
}
row.appendChild(tag_cell);
var date_cell = document.createElement("td");
date_cell.appendChild(
document.createTextNode(story.posted)
);
row.appendChild(date_cell);
tbody_el.appendChild(row);
}
}
/*
A tiny state machine:
0 - idle
1 - loading more stories (do not send another request)
2 - stories loaded, waiting for next scroll event to transition to idle
*/
var state = 0
var loaded = 50 // by default we load 50 stories on the site index
document.addEventListener("scroll",function(e){
var tobot = window.scrollMaxY - window.scrollY
if (tobot < 100){
if (state == 0){
//Ask the server for stories
// TODO: Finish this
var xhr = new XMLHttpRequest();
xhr.open("GET", "/_api?call=stories&data=" + loaded);
xhr.onreadystatechange = function(e){
if(xhr.readyState === 4){
console.log("response:",xhr.response)
resp = JSON.parse(xhr.response);
console.log("resp:",resp)
add_stories(resp.stories);
loaded += resp.stories.length;
}
state = 2
}
xhr.send()
state = 1
}else if (state == 1){
// Do nothing
}else if (state == 2){
state = 0
}
console.log("we should load more stories")
}
})