108 lines
3.1 KiB
JavaScript
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")
|
|
}
|
|
})
|