xssbook/public/js/home.js

257 lines
8.1 KiB
JavaScript
Raw Normal View History

2023-01-26 22:29:16 +00:00
function parseComment(comment) {
let author = data.users[comment[0]]
2023-01-26 22:29:16 +00:00
if (author === undefined) {
author = {}
}
const html = `
<div class="comment">
<a class="pfp">
2023-01-31 03:55:14 +00:00
${pfp(author.user_id)}
2023-01-26 22:29:16 +00:00
</a>
<span>
<span class="bold mtext">${author.firstname + ' ' + author.lastname}</span>
<p class="mtext">${comment[1]}</p>
</span>
</div>
`
return html
}
function parsePost(post) {
let author = data.users[post.user_id]
2023-01-26 22:29:16 +00:00
if (author === undefined) {
author = {}
}
const html = `
<div class="post" postid=${post.post_id}>
<div class="postheader">
<a class="pfp" href=/profile?id=${author.user_id}>
2023-01-31 03:55:14 +00:00
${pfp(author.user_id)}
2023-01-26 22:29:16 +00:00
</a>
<div class="postname">
<span class="bold">${author.firstname + ' ' + author.lastname}</span>
<span class="gtext mtext">${parseDate(new Date(post.date))}</span>
</div>
</div>
2023-01-30 23:55:36 +00:00
<p class="mtext" style="color: var(--text);">
2023-01-26 22:29:16 +00:00
${post.content.replace(/\n/g,'<br>')}
</p>
2023-01-30 23:55:36 +00:00
<span class="gtext mtext likes">
${post.likes.length} Likes
2023-01-26 22:29:16 +00:00
</span>
<div class="fullline nb"></div>
<div class="postbuttons">
<span class="likeclicky" onclick="like(this)">
<i class="liketoggle icons like ${post.likes.includes(data.user.user_id) ? 'blue' : ''}"></i>
2023-01-30 23:55:36 +00:00
<span class="liketoggle bold ${post.likes.includes(data.user.user_id) ? 'bltext' : ''}">Like</span>
2023-01-26 22:29:16 +00:00
</span>
<span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()">
<i class="icons comm"></i>
<span class="bold">Comment</span>
</span>
</div>
<div class="comments">
2023-01-26 22:29:16 +00:00
<div class="fullline" style="margin-top: 0"></div>
${post.comments.map(parseComment).join('')}
<div class="comment commentsubmit">
2023-01-26 22:29:16 +00:00
<a class="pfp" href="profile">
2023-01-31 03:55:14 +00:00
${pfp(data.user.user_id)}
2023-01-26 22:29:16 +00:00
</a>
<form onsubmit="comment(event)">
<input type="text" name="text" placeholder="Write a comment..." id="newcomment" class="newcomment">
</form>
</div>
</div>
</div>
`
return html
}
function getPost(post_id) {
for (let i = 0; i < data.posts.length; i++) {
if (data.posts[i].post_id === post_id) {
return i
}
}
return -1
}
async function like(span) {
const container = span.parentElement.parentElement;
const id = parseInt(container.getAttribute('postid'))
2023-01-26 22:29:16 +00:00
const post = data.posts[getPost(id)]
const index = post.likes.indexOf(data.user.user_id)
const current = index !== -1
const response = await postlike(id, !current)
if (response.status != 200) return;
if (current) {
post.likes.splice(index, 1)
} else {
post.likes.push(data.user.user_id)
}
const buttons = container
.getElementsByClassName("postbuttons")[0]
.getElementsByClassName("likeclicky")[0]
.getElementsByClassName("liketoggle")
if (current) {
buttons[0].classList.remove("blue")
2023-01-30 23:55:36 +00:00
buttons[1].classList.remove("bltext")
} else {
buttons[0].classList.add("blue")
2023-01-30 23:55:36 +00:00
buttons[1].classList.add("bltext")
}
2023-01-30 23:55:36 +00:00
container.getElementsByClassName("likes")[0].innerHTML = post.likes.length + " Likes"
2023-01-26 22:29:16 +00:00
}
async function comment(event) {
event.preventDefault();
const text = event.target.elements.text.value.trim();
if (text.length < 1) return;
const container = event.target.parentElement.parentElement.parentElement;
const post_id = parseInt(container.getAttribute('postid'))
var index = getPost(post_id);
2023-01-26 22:29:16 +00:00
if (index === -1) return;
const response = await postcomment(post_id, text)
2023-01-26 22:29:16 +00:00
if (response.status != 200) return;
event.target.elements.text.value = '';
let new_comment = [data.user.user_id, text]
data.posts[index].comments.push(new_comment)
let comments = container.getElementsByClassName("comments")[0]
prepend(parseComment(new_comment), comments, comments.getElementsByClassName("commentsubmit")[0])
2023-01-26 22:29:16 +00:00
}
async function post() {
const text = document.getElementById("text").value.trim()
const error = document.getElementsByClassName('error')[0]
const posts_block = document.getElementById("posts")
2023-01-26 22:29:16 +00:00
if (text.length < 1) return;
const response = await createpost(text);
if (response.status != 201) {
error.innerHTML = response.msg
return;
}
error.innerHTML = '';
let post = {
2023-01-27 21:04:04 +00:00
post_id: response.json.post_id,
2023-01-26 22:29:16 +00:00
user_id: data.user.user_id,
date: Date.now(),
content: text,
likes: [],
comments: []
}
data.posts.unshift(post)
let html = parsePost(post)
prepend(html, posts_block)
document.getElementById('popup').classList.add('hidden')
}
async function loadMore() {
const posts = await load()
data.posts.push(... posts)
const posts_block = document.getElementById("posts")
for (p of posts) {
append(parsePost(p), posts_block)
}
2023-01-26 22:29:16 +00:00
}
function render() {
const html = `
<div id="create">
2023-01-26 22:29:16 +00:00
<div class="create">
<a class="pfp" href="profile">
2023-01-31 03:55:14 +00:00
${pfp(data.user.user_id)}
2023-01-26 22:29:16 +00:00
</a>
<button class="pfp">
<p class="gtext" onclick="document.getElementById('popup').classList.remove('hidden')">
What's on your mind, ${data.user.firstname}?
</p>
</button>
</div>
</div>
<div id="posts">
2023-01-26 22:29:16 +00:00
${data.posts.map(p => parsePost(p)).join('')}
</div>
`
append(html)
2023-01-26 22:29:16 +00:00
const popup = `
<div id="popup" class="hidden">
<div class="createpost">
<div class="close" onclick="document.getElementById('popup').classList.add('hidden')"></div>
<span class="ltext ctext bold">Create post</span>
<div class="fullline"></div>
<div class="postheader">
<a class="pfp" style="cursor: auto">
2023-01-31 03:55:14 +00:00
${pfp(data.user.user_id)}
2023-01-26 22:29:16 +00:00
</a>
<div class="postname">
<span class="bold">${data.user.firstname + ' ' + data.user.lastname}</span>
<span class="gtext mtext">Now</span>
</div>
</div>
<textarea type="text" name="text" id="text" placeholder="What's on your mind, ${data.user.firstname}?"></textarea>
<span class="error ctext" style="padding-bottom: 15px; margin-top: -30px;"></span>
<button class="primary" onclick="post(this)">Post</button>
</div>
</div>
`
append(popup)
2023-01-26 22:29:16 +00:00
const load = `
<div id="load">
<a class="bold gtext" onclick="loadMore()">Load more posts</a>
2023-01-26 22:29:16 +00:00
</div>
`
append(load)
2023-01-26 22:29:16 +00:00
}
var page = 0
const data = {
user: {},
users: {},
posts: []
}
async function load() {
const posts = (await loadpostspage(page)).json
if (posts.length === 0) {
page = -1
remove('load')
return []
2023-01-26 22:29:16 +00:00
} else {
page++
}
const batch = []
for (const post of posts) {
for(const comment of post.comments) {
if (data.users[comment[0]] !== undefined) continue
if (batch.includes(comment[0])) continue
batch.push(comment[0])
}
if (data.users[post.user_id] !== undefined) continue
if (batch.includes(post.user_id)) continue
batch.push(post.user_id)
}
const users = batch.length == 0 ? [] : (await loadusers(batch)).json
for (const user of users) {
data.users[user.user_id] = user
2023-01-26 22:29:16 +00:00
}
return posts
2023-01-26 22:29:16 +00:00
}
async function init() {
2023-01-31 05:00:13 +00:00
let request = (await loadself());
if (request.status === 429) {
header(true, false)
throw new Error("Rate limited");
}
data.user = request.json
2023-01-31 03:55:14 +00:00
header(true, false, data.user.user_id)
2023-01-26 22:29:16 +00:00
data.users[data.user.user_id] = data.user
const posts = await load()
data.posts.push(... posts)
render()
2023-01-26 22:29:16 +00:00
}