mahuntington
/
saved-programmer-humor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

infinite scroll

Browse Source
master
Matt Huntington 3 years ago
parent e5ef421277
commit 9f82f07ab2
5 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File

7
public/app.css
Unescape View File

@ -1,7 +1,12 @@
body {
margin:0px;
}
li { li {
display:inline-block;
border:1px solid black; border:1px solid black;
list-style:none; list-style:none;
} }
ul { ul {
padding:0 padding:0;
margin:0;
} }

20
public/app.js
Unescape View File

@ -0,0 +1,20 @@
let next;
const handleData = (data)=>{
if(data.posts.length > 0){
for(post of data.posts){
const li = document.createElement('li');
li.innerHTML = `<iframe id="reddit-embed" src="https://www.redditmedia.com/${post}?ref_source=embed&amp;ref=share&amp;embed=true" sandbox="allow-scripts allow-same-origin allow-popups" style="border: none;" scrolling="no" width="640" height="526"></iframe>`
document.querySelector('ul').appendChild(li)
next = data.next
}
}
}
window.addEventListener('DOMContentLoaded', (event) => {
fetch('/posts').then(response => response.json()).then(handleData);
});
document.addEventListener('scroll', (event)=>{
if(document.querySelector('body').scrollHeight == window.scrollY+window.innerHeight){
fetch('/posts/after/'+next).then(response => response.json()).then(handleData);
}
})

11
public/index.html
Unescape View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<link href="/app.css" rel="stylesheet"></link>
<script src="/app.js"></script>
</head>
<body>
<ul>
</ul>
</body>
</html>

17
server.js
Unescape View File

@ -48,20 +48,25 @@ const generate = async (req, res)=>{
const config = await getToken() const config = await getToken()
const response = await axios.get(url, config) const response = await axios.get(url, config)
const next = response.data.data.after;
const posts = response.data.data.children.filter(post => {
return post.data.subreddit === 'ProgrammerHumor' && post.data.removed_by_category === null
}).map(post => {
return post.data.permalink
})
res.render('all.ejs', { res.json({
posts: response.data.data.children.filter(post => post.data.subreddit === 'ProgrammerHumor' && post.data.removed_by_category === null), posts,
next: response.data.data.after, next
previous: response.data.data.before
}) })
} }
getToken(); getToken();
app.get('/', generate) app.get('/posts/', generate)
app.get('/:direction/:page', generate) app.get('/posts/:direction/:page', generate)
app.listen(3002, ()=>{ app.listen(3002, ()=>{
console.log('listening'); console.log('listening');

23
views/all.ejs
Unescape View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link href="/app.css" rel="stylesheet"></link>
</head>
<body>
<ul>
<%for(let i = 0; i < posts.length; i++){%>
<li>
<iframe id="reddit-embed" src="https://www.redditmedia.com/<%=posts[i].data.permalink%>?ref_source=embed&amp;ref=share&amp;embed=true" sandbox="allow-scripts allow-same-origin allow-popups" style="border: none;" scrolling="no" width="640" height="526"></iframe>
</li>
<%}%>
</ul>
<nav>
<%if(previous){%>
<a href="/before/<%=previous%>">Previous</a>
<%}%>
<%if(next){%>
<a href="/after/<%=next%>">Next</a>
<%}%>
</nav>
</body>
</html>
Write Preview
Loading…
Cancel
Save