292 lines
No EOL
8.3 KiB
JavaScript
292 lines
No EOL
8.3 KiB
JavaScript
|
|
timezoneChangingOne = (x)=>{var date= new Date(x.innerHTML);
|
|
var year = date.getFullYear().toString();
|
|
var month = (date.getMonth()+1).toString().padStart(2, '0');
|
|
var day = date.getDate().toString().padStart(2, '0');
|
|
var hour = date.getHours().toString().padStart(2, '0');
|
|
var min = date.getMinutes().toString().padStart(2, '0');
|
|
var sec = date.getSeconds().toString().padStart(2, '0');
|
|
local_date_string = `${year}-${month}-${day} ${hour}:${min}:${sec}`;
|
|
x.innerHTML=local_date_string;}
|
|
|
|
function timezoneChanging(){
|
|
document.querySelectorAll(".post-time").forEach(
|
|
x => timezoneChangingOne(x)
|
|
);
|
|
}
|
|
|
|
var requestNote = {"type" : "home", "arg" : ""};
|
|
var pathName = window.location.pathname;
|
|
var homePattern = /[/]home[/]/;
|
|
var userPagePattern = /[/]user[/]([^/]+)/;
|
|
var userIdName = "";
|
|
if (pathName.match(userPagePattern)){
|
|
userIdName = pathName.match(userPagePattern)[1];
|
|
requestNote = {"type" : "user", "arg" : userIdName};
|
|
}
|
|
|
|
|
|
|
|
$name = (x) => document.getElementsByName(x);
|
|
$ = (x) => document.getElementById(x);
|
|
|
|
csrf_token = $("_token").content;
|
|
|
|
|
|
var httpRequest;
|
|
|
|
|
|
|
|
async function make_req() {
|
|
|
|
post_text = $('post_text').value;
|
|
post_privilage = $('privil_choosing').value;
|
|
|
|
|
|
|
|
if (post_text != ""){
|
|
|
|
await fetch('/api/post', {
|
|
method: 'POST',
|
|
headers: {
|
|
"X-CSRFToken": csrf_token,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
"privilage" : post_privilage,
|
|
"text" : post_text,
|
|
"request_note" : requestNote,
|
|
})
|
|
|
|
}).then(response => {if (response.ok == true)
|
|
{$('post_text').value = "";
|
|
getLatestPosts(); // wait for a moment then get latest posts
|
|
}}
|
|
|
|
);
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
function auto_expand(element) {
|
|
element.style.height = 6+"em";
|
|
element.style.height = (element.scrollHeight)+"px";
|
|
}
|
|
|
|
timezoneChanging();
|
|
|
|
function adjust_post_text(){
|
|
var post_text = $("post_text");
|
|
post_text.style.height = 6+"em";
|
|
post_text.style.height = (post_text.scrollHeight)+"px";
|
|
}
|
|
|
|
|
|
async function getRecentPostsCounter(){
|
|
latest_time_string = $("latest_time").innerHTML;
|
|
await fetch('/api/get_recent_posts_counter', {
|
|
method: 'POST',
|
|
headers: {
|
|
"X-CSRFToken": csrf_token,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
"latest_time" : latest_time_string,
|
|
"request_note" : requestNote,
|
|
})
|
|
|
|
}).then(response => response.json())
|
|
.then(the_json => {let newer_posts_num = the_json['newer_posts_num'];
|
|
if (newer_posts_num == 1)
|
|
{ $("new_post_notifier").style.display = "block";
|
|
$("new_post_notifier").innerHTML = `1 new post`}
|
|
if (newer_posts_num > 1)
|
|
{ $("new_post_notifier").style.display = "block";
|
|
$("new_post_notifier").innerHTML = `${newer_posts_num} new posts`} });
|
|
|
|
}
|
|
|
|
var intervalID = window.setInterval(getRecentPostsCounter, 20000);
|
|
|
|
function appendPostToTheEnd(post){
|
|
var public_tl = $("public_timeline");
|
|
var new_div = createPostDiv(post);
|
|
|
|
|
|
public_tl.insertBefore(new_div, $('previous_post_loader'));
|
|
}
|
|
|
|
async function getPreviousPosts(){
|
|
var new_oldest_time;
|
|
oldest_time_string = $("oldest_time").innerHTML;
|
|
await fetch('/api/get_previous_posts', {
|
|
method: 'POST',
|
|
headers: {
|
|
"X-CSRFToken": csrf_token,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
"oldest_time" : oldest_time_string,
|
|
"request_note" : requestNote,
|
|
|
|
}) }).then(response => response.json())
|
|
.then(item => {new_oldest_time_raw = item['oldest_time'];
|
|
new_oldest_time = new_oldest_time_raw.substring(0,10) + " " + new_oldest_time_raw.substring(11,26) + "+0000";
|
|
return item['older_posts'];})
|
|
.then(posts => {if (posts.length == 0)
|
|
{$('previous_post_loader').style.display = 'none';}
|
|
else{posts.forEach(post =>
|
|
appendPostToTheEnd(post));
|
|
updateClickedIconEvent();
|
|
$('oldest_time').innerHTML = new_oldest_time;}})
|
|
}
|
|
|
|
|
|
async function make_follow_req(){
|
|
requestValue = $("follow-user-button").value;
|
|
await fetch(`/api/follow_request/${requestValue}/${userIdName}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
"X-CSRFToken": csrf_token,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body : ""
|
|
}).then(response => response.json())
|
|
.then(
|
|
item =>{
|
|
returnValue = item["status"];
|
|
if (returnValue == "request sent"){
|
|
$("follow-user-button").value = "cancel-following-request";
|
|
$("follow-user-button").innerHTML = "Cancel Following Request";
|
|
}
|
|
else if(returnValue == "request cancelled" || returnValue == "unfollowed"){
|
|
$("follow-user-button").value = "send-following-request";
|
|
$("follow-user-button").innerHTML = "Follow";
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
async function getLatestPosts(){
|
|
latest_time_string = $("latest_time").innerHTML;
|
|
await fetch('/api/get_latest_posts', {
|
|
method: 'POST',
|
|
headers: {
|
|
"X-CSRFToken": csrf_token,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
"latest_time" : latest_time_string,
|
|
"request_note" : requestNote,
|
|
}) })
|
|
.then(response => response.json())
|
|
.then(item => item['newer_posts'])
|
|
.then(posts => {posts.forEach(post => addPostToTheBeginning(post));
|
|
$('new_post_notifier').style.display = "none";
|
|
var nowTime = new Date();
|
|
var nowTimeString = nowTime.toISOString();
|
|
updateClickedIconEvent();
|
|
$("latest_time").innerHTML = nowTimeString.substring(0,10) + " " + nowTimeString.substring(11,23) + "000+0000"; });
|
|
}
|
|
|
|
function createPostDiv(post){
|
|
|
|
var new_div = document.createElement("div");
|
|
new_div.id = `post-${post.id}`;
|
|
new_div.className = "post";
|
|
post_text_replaced = post.text.replace(/(\r\n|\n\r|\r|\n)/g, "<br>" );
|
|
new_div.innerHTML = `
|
|
<img class="timeline-avatar-img" width="100" src="${post.poster_avatar}">
|
|
<div class="post-content">
|
|
<a href="/user/${post.poster_username}">${post.poster_shown_name}</a>
|
|
at <a href="/post/${post.id}" class="post-time">${post.post_time}</a><br>
|
|
${post_text_replaced}<br>
|
|
<span id="reply-${post.id}" data-value="${post.id}" class="reply">↩️</span>
|
|
- <span id="repost-${post.id}" data-value="${post.id}" class="${(post.is_reposted == "0" ? "unchecked" : "")} repost">🔁</span>
|
|
- <span id="fav-${post.id}" data-value="${post.id}" class="${(post.is_faved == "0" ? "unchecked" : "")} fav">⭐</span>
|
|
</div>`;
|
|
|
|
new_div_timestamp = new_div.getElementsByClassName('post-time')[0];
|
|
|
|
timezoneChangingOne(new_div_timestamp);
|
|
|
|
return new_div;
|
|
}
|
|
|
|
function addPostToTheBeginning(post){
|
|
var public_tl = $("public_timeline");
|
|
var new_div = createPostDiv(post);
|
|
|
|
|
|
public_tl.insertBefore(new_div, $('latest_time').nextSibling);
|
|
|
|
}
|
|
|
|
$("new_post_notifier").addEventListener('click', getLatestPosts);
|
|
$("previous_post_loader").addEventListener('click', getPreviousPosts);
|
|
|
|
async function makeRepostRequest(event){
|
|
var postId = event.target.getAttribute('data-value');
|
|
await fetch(`/api/repost_request/${postId}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
"X-CSRFToken": csrf_token,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body : ""
|
|
}).then(response => response.json())
|
|
.then(item => item['status'])
|
|
.then(status =>{
|
|
if (status == "reposted"){
|
|
event.target.classList.remove("unchecked");
|
|
}else if (status == "deleted"){
|
|
event.target.classList.add("unchecked");
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
async function makeFavRequest(event){
|
|
var postId = event.target.getAttribute('data-value');
|
|
await fetch(`/api/fav_request/${postId}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
"X-CSRFToken": csrf_token,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body : ""
|
|
}).then(response => response.json())
|
|
.then(item => item['status'])
|
|
.then(status =>{
|
|
if (status == "faved"){
|
|
event.target.classList.remove("unchecked");
|
|
}else if (status == "deleted"){
|
|
event.target.classList.add("unchecked");
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateClickedIconEvent(){
|
|
var reposted_items = document.getElementsByClassName('repost');
|
|
for (var i = 0; i < reposted_items.length; i++) {
|
|
reposted_items[i].addEventListener('click', makeRepostRequest);
|
|
}
|
|
var reposted_items = document.getElementsByClassName('fav');
|
|
for (var i = 0; i < reposted_items.length; i++) {
|
|
reposted_items[i].addEventListener('click', makeFavRequest);
|
|
}
|
|
}
|
|
|
|
updateClickedIconEvent()
|
|
|
|
if (requestNote["type"] == "home"){
|
|
$("submit_post").addEventListener('click', make_req);
|
|
adjust_post_text();
|
|
}
|
|
if (requestNote["type"] == "user"){
|
|
if ($("follow-user-button")){
|
|
$("follow-user-button").addEventListener('click', make_follow_req);
|
|
}
|
|
} |