Community Post

.loader { width: 48px; height: 48px; border: 3px solid #FFF; border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; animation: rotation 1s linear infinite; } .loader::after { content: ''; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 3px solid; border-color: #FF3D00 transparent; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .post_block { width: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255,0.1)); box-shadow: 0 0 5px 10px rgba(0,0,0,0.3); padding: 10px; } .block_heading { margin: 0 !important; display: block; width: 100%; padding: 0 20px 0 10px; } .block_heading img { height: 32px; width: 32px; } .block_heading span { vertical-align: super; font-weight: bold; } .block_heading small { display: inline-block; vertical-align: super; margin-left: 5px; } .block_title { margin: 0 !important; padding: 0 10px 0 20px !important; word-wrap: break-word; } .block_description { margin: 0 !important; padding: 0 10px 0 10px !important; word-wrap: break-word; } .block_images { padding: 5px; width: 100%; } .block_reactions img { width: 32px; height: 32px; object-fit: cover; } .block_reactions label { vertical-align: super; } /* ---- CUSTOM ROOT PROPERTIES ---- */ :root { --bccats-border: 0 0 0 2px silver, 0 0 0 10px black, 0 0 0 10px silver; --bccats-bgColor: linear-gradient(rgb(65,60,44), rgb(24,23,19)); --bccats-bgColorInverted: linear-gradient(rgb(24,23,19), rgb(65,60,44)); --bccats-bgColor1: rgb(65,60,44); --bccats-bgColor2: rgb(24,23,19); --bccats-bgColor3: rgb(14,13,9); --cblock-bgColor1: #ebf; --cblock-bgColor1: #ffb; --cblock-textColor1: #222; --cblock-textColor1: #300; } .cblock-grid * { box-sizing: border-box; margin: 0; padding: 0; color: #eee; font-weight: bold; } /* ---- STYLING ---- */ .cblock-grid { background: var(--bccats-bgColor); box-shadow: var(--bccats-border); } .cblock-grid { margin-bottom: 20px !important; width: 100% !important; } .cblock-item { padding: .7rem; background: #00000011; } .cblock-pfp-com-details { margin: 0 auto; } .cblock-images-section { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } img.cblock-profile-pic, .cblock-profile > img.lazy { width: 2.5rem; height: 2.5rem; border-radius: 50%; } img.cblock-images, .cblock-images-section > img.lazy { width: 2rem; height: 2rem; } .cblock-pfp-com-details > h2 { font-size: 1.4rem; line-height: 1.3rem; /* border: 1px solid silver; */ margin: 0 auto; } .cblock-pfp-com-details > p { font-size: .9rem; line-height: 1.5rem; margin: 0 auto; } .cblock-comment > p { font-size: 1rem; line-height: 1.3rem; margin: 0; } .cblock-spacer { display: none; } /* ---- FOR SMALLER DISPLAYS ---- */ @media(max-width: 600px) { :root { font-size: 12px; } .cblock-profile { display: flex; flex-wrap: wrap; align-items: center; } .cblock-pfp-com-details { margin-left: .8rem; } .cblock-pfp-com-details > p { font-weight: normal; } .cblock-comment { border-top: 1px solid #80808055; border-bottom: 1px solid #80808055; } .cblock-spacer { display: none; } .cblock-images-section { gap: 0; padding: 0 .7rem .7rem 0; } .cblock-images, .cblock-images-section > img.lazy { margin-top: .7rem; } .cblock-images/*:not(:first-child)*/, .cblock-images-section > img.lazy { margin-left: .7rem; } } /* -------------------- */ /* ---- FOR BIGGER DISPLAYS ---- */ @media(min-width: 600px) { :root { font-size: 14px; } /* ---- DISPLAY GRID - CHILD NAMES ---- */ .cblock-item:nth-child(1) { grid-area: profile; max-width: 10rem; } .cblock-item:nth-child(2) { grid-area: comment; } .cblock-item:nth-child(3) { grid-area: spacer; } .cblock-item:nth-child(4) { grid-area: images; } /* ---- GRID AREAS ---- */ .cblock-grid { display: grid; grid-template-areas: 'profile comment' 'profile images'; width: fit-content; justify-content: center; } .cblock-pfp-com-details > h2 { font-size: 1.3rem; } .cblock-pfp-com-details > p { font-size: .9rem; font-weight: normal; } /* .cblock-item:first-child, */ .cblock-item:nth-child(2) { border-bottom: 1px solid #80808055; } .cblock-item:nth-child(2), .cblock-item:nth-child(4) { border-left: 1px solid #80808055; } .cblock-profile { display: flex; flex-direction: column; justify-content: center; align-items: center; } .cblock-pfp-com-details { text-align: center; } img.cblock-profile-pic, .cblock-profile > img.lazy { width: 5rem; height: 5rem; } .cblock-pfp-com-details { margin-top: .8rem; } } /* -------------------- */ /* ---- HOVER IMAGE TEST ---- */ .cblock-images:hover, .cblock-images-section > img.lazy:hover { width: 20rem; height: 20rem; transition: .25s; } .cblock-images, .cblock-images-section > img.lazy { transition: .25s; } .cblock-replied { margin-left: 30px !important; margin-bottom: 20px !important; margin-right: 20px !important; }

(adsbygoogle = window.adsbygoogle || []).push({});

Back to Community Loading Comments... Add Comment as Clear Reply Add Image Clear images Comment let all_user_data;

let data_title; let data_username; let data_date; let data_description; let data_images; let post_id;

let is_reacted = false;

let parsed_data; let post_username;

// variables to store relevant informations let user_data; let post_data; let stats_data; let comments_data;

let img_uploading = false; let reply_to = 'none'; let comment_id = "";

PUTsend('https://getpantry.cloud/apiv1/pantry/91c9a2f3-be20-4b3b-8c9e-94a81264de7a/basket/comments', data, null, comm_successComment); } }

function comm_successComment() { window.location.reload(); }

function comm_generateCommentID() { comment_id = new Date().getTime() + '&' + getCurrentUserCredentials().username; }

function clearReply() { reply_to = 'none'; selector('#ptc-comment-editor').style.marginLeft = '0px'; selector('#comment-blocks').appendChild(selector('#ptc-comment-editor')); }

function successUserData(data) { let user_data = JSON.parse(data); all_user_data = user_data.members; user_data = user_data.members[data_username]; selector('.block_heading img').src = user_data[2]; selector('.block_author_name').innerText = user_data[0]; //console.log('user data: ' + user_data); }

setTimeout(function () { GETdata('https://getpantry.cloud/apiv1/pantry/91c9a2f3-be20-4b3b-8c9e-94a81264de7a/basket/statistics', successStatsData); GETdata('https://getpantry.cloud/apiv1/pantry/91c9a2f3-be20-4b3b-8c9e-94a81264de7a/basket/comments', successCommentsData); }, 6000); }

function getCurrentUserCredentials() { let data = JSON.parse(localStorage.getItem('ptc_credentials')); return data; }

function successStatsData(data) { let stats_data = JSON.parse(data); let happy = document.createElement('label'); let amazed = document.createElement('label'); let angry = document.createElement('label');

happy.setAttribute('onclick', 'react("happy", this)'); amazed.setAttribute('onclick', 'react("amazed", this)'); angry.setAttribute('onclick', 'react("angry", this)');

if (stats_data[post_id]) { stats_data = stats_data[post_id];

if (stats_data.views) { selector('.block_views').innerText = stats_data.views.length + ' views'; selector('.block_views').classList.remove('loader'); } else { selector('.block_views').innerText = '0 views'; selector('.block_views').classList.remove('loader'); } if (stats_data.happy) { happy.innerHTML = stats_data.happy.length + " "; } else { happy.innerHTML = "0 "; }

if (stats_data.amazed) { amazed.innerHTML = stats_data.amazed.length + " "; } else { amazed.innerHTML = "0 "; }

if (stats_data.angry) { angry.innerHTML = stats_data.angry.length + " "; } else { angry.innerHTML = "0 "; }

selector('.block_reactions').classList.remove('loader'); selector('.block_reactions').appendChild(happy); selector('.block_reactions').appendChild(amazed); selector('.block_reactions').appendChild(angry); } else { // block_reactions

happy.innerHTML = "0 "; amazed.innerHTML = "0 "; angry.innerHTML = "0 ";

selector('.block_reactions').classList.remove('loader');

selector('.block_reactions').appendChild(happy); selector('.block_reactions').appendChild(amazed); selector('.block_reactions').appendChild(angry);

selector('.block_views').classList.remove('loader'); selector('.block_views').innerText = '0 views';

// all reaction counts to 0.. // fresh statistics //console.log('fresh statistics'); } //console.log(stats_data); }

function successCommentsData(data) { console.log(all_user_data); comments_data = JSON.parse(data); selector('#comment-blocks').classList.remove('loader'); selector('.block_reactions').style.pointerEvents = 'auto'; selector('.block_reactions').style.opacity = '1'; if (comments_data[post_id]) { comments_data = comments_data[post_id]; selector('#comment_count').innerText = comments_data.length + ' Comments'; console.log(comments_data[0]); for (i = 0; i = 1) for (j = 0; j '; let div = document.createElement('div'); div.setAttribute('id', comments_data[i].id);

//div.innerHTML = " " + all_user_data[comment_username][0] + " " + moment(parseInt(comment_id)).fromNow() + "

" + (comments_data[i].reply_to == 'none'? "": " Replied to " + comments_data[i].reply_to.split('&')[1] + " ") + " " + comments_data[i].message + "

Reply " + images_urls +" ";

div.innerHTML = " " + all_user_data[comment_username][0] + " " + moment(parseInt(comment_id)).fromNow() + "

" + (comments_data[i].message).replace(/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/g, (x) => ' *Locked Link* ') + "

" + images_urls + " Reply ";

if (comments_data[i].reply_to == 'none') selector('#comment-blocks').appendChild(div); else { div.classList.add('cblock-replied'); let beforeElement = document.querySelector('[id="' + comments_data[i].reply_to + '"]'); beforeElement.appendChild(div); //insertAfter(beforeElement, div); //.appendChild(div); }

} } else { selector('#comment_count').innerText = 'Be the first to comment'; } //console.log(comments_data); if(selector('#ptc-comment-editor')) selector('#ptc-comment-editor').style.display = 'block'; selector('#comment-blocks').style.display = 'block'; }

function successReact() { if (is_reacted) { selector('.block_reactions').style.opacity = '1'; selector('.block_reactions').style.pointerEvents = 'none'; } }

function successAddView() { selector('.block_views').innerText = (parseInt(selector('.block_views').innerText.split(' ')[0]) + 1) + ' views.'; }

function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); }

function delay(ms) { setTimeout(function () { console.log('delaying send to server...'); }, ms); }

function PUTsend(pantry, data, logs, callback) { data = JSON.stringify(data); let req = new XMLHttpRequest(); req.open('PUT', pantry, true); req.setRequestHeader('Content-Type', 'application/json');

req.onload = () => { if (req.readyState == XMLHttpRequest.DONE) if (req.status == 200) { if (logs != null) logs.innerText = 'Accepted by server..'; if (callback) callback(); } else PUTsend(pantry, data, logs, callback); }

req.onerror = () => { if (logs != null) logs.innerText = 'Server overloads retrying in 5 seconds...'; setTimeout(function () { PUTsend(pantry, data, logs, callback); }, 5000); }

try { req.send(data); } catch (err) { if (logs != null) logs.innerText = 'Server overloads retrying in 5 seconds... ' + err; setTimeout(function () { PUTsend(pantry, data, logs, callback); }, 5000); } }

function GETdata(pantry, callback) { let req = new XMLHttpRequest();

req.onload = () => { if (req.readyState == 4) if (req.status == 200) callback(req.response); }

req.onerror = () => { setTimeout(function () { GETdata(pantry, callback); }, 5000); }

req.open('GET', pantry, false); req.setRequestHeader('Content-Type', 'application/json');

try { req.send(); } catch (err) { setTimeout(function () { GETdata(pantry, callback); }, 5000); } }

function selector(query) { return document.querySelector(query); }

function clearImages() { selector('#comm_form_attached_images').innerHTML = ''; }

const file = document.getElementById("comm_imgupload1") file.addEventListener("change", ev => { img_uploading = true; document.querySelector('#comm_img').style.pointerEvents = 'none'; document.querySelector('#comm_img').style.opacity = '0.7'; let numImgs = 0; const formdata = new FormData() for (i = 0; i data.json()).then(data => { numImgs++; if (numImgs == ev.target.files.length) img_uploading = false; document.querySelector('#comm_img').style.pointerEvents = 'auto'; document.querySelector('#comm_img').style.opacity = '1'; let img = document.createElement('img'); img.src = data.data.url; img.setAttribute('style', 'display: inline-block; margin: 5px; width: 150px !important'); document.querySelector('#comm_form_attached_images').appendChild(img); //addImages(data.data.url); //url.innerText = data.data.link }) } });

// main checkUrl();

Hi there Catters!

Our Battle Cats Mods is in the latest version. Please click the links below!

Subscribe now to PTC Reborn™

StoreHaccounts (Battle Cats Community)

Community Post

Loading Comments...

Add Comment as