<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js'></script> <style> .postBody h1 { word-wrap: break-word; margin: 0 auto; } .postBody span { word-wrap: break-word; display: inline-block; margin-left: 5px; } .postBody p { word-wrap: break-word; margin: 0 auto; } .postBody textarea { background: transparent !important; color: white; border-color: red !important; border-style: solid; padding: 5px !important; border-radius: 0px !important; resize: none; } .block img { width: 150px; } #comment_editor { 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; } .article_post { 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; } </style> <div class='article_post'></div><br> <h4 id='h4comm'>Comments</h4> <br><br> <!-- Community Feeds H --> <ins class="adsbygoogle" style="display:inline-block;width:100%;height:90px" data-ad-client="ca-pub-6328531102448868" data-ad-slot="8763156309"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br><br> <div style='display:none;' id='approved'></div> <div id='all_comments'></div> <form id='comment_editor' action='javascript:createComment();'> <div style='background-size: cover; display: inline-block; width: 32px; height: 32px; border-radius: 15px'></div> <span style='vertical-align: super; display: inline-block;'></span> <textarea required minlength='10' name='comment' placeholder='Comment'></textarea> <input name='images' id='imgupload1' accept="image/png, image/gif, image/jpeg, image/bmp" type="file" /> <button id='submit_comment' style='padding: 0 10px 0 10px; float: right;' class='button ln' type='submit' name='submit'>Comment</button><br><br> <div id='form_attached_images'></div> </form> <script> let post_id = window.location.href.replace('&m=1', '').split('?')[1]; if(post_id.includes('#')) post_id = post_id.split('#')[0]; if(!post_id) window.location.href = 'https://storehaccounts.blogspot.com/p/community-official.html'; let post_data; let reply_to = 'none'; let img_uploading = false; GETdata('https://getpantry.cloud/apiv1/pantry/91c9a2f3-be20-4b3b-8c9e-94a81264de7a/basket/blog_feeds', displayPost); function displayPost(data) { let article = data[post_id]; post_data = article; let images_string = ''; document.title = article.post.title; //getting all images first for(i=0; i<article.post.images.length; i++) images_string += '<a target="_blank" href="' + article.post.images[i] + '"><img class="lazy" data-src="' + article.post.images[i] + '" style="width: 80%;"/></a>'; document.querySelector('.article_post').innerHTML = "<img class='lazy' data-src='" + article.author.img+ "' style='width: 32px; height: 32px; border-radius: 15px;'/><span style='vertical-align: super'>" + article.author.name + "</span><span style='vertical-align: super'> · " + moment(parseInt(post_id)).fromNow() + "</span><span style='vertical-align: super'> · " + article.reactions.views.length + " views</span><span style='vertical-align: super'>· <img src='https://i.imgur.com/LlNi8O3.png' style='height: 24px; width: 24px'/>" + article.reactions.happy.length + "</span><h1>" + article.post.title + "</h1><small>" + article.post.description.replaceAll('\n', '<br>').replace(/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/g, (x) => '<a target="_blank" href="' + x + '">' + x + '</a>') + "</small><div> " + images_string + "</div><button style='opacity: 0.7; pointer-events: none;' id='upvote' class='button ln' onclick='vote();'>Upvote</button><a href='https://storehaccounts.blogspot.com/p/community-official.html' class='button ln'>Back to Community</a><a href='https://storehaccounts.blogspot.com/p/create-feed.html' class='button ln'>Create Post</a>"; // building comments data document.querySelector('#h4comm').innerText = article.comments.length + ' Comments'; for(i=0; i<post_data.comments.length; i++) { let divblock = document.createElement('div'); let replyTo = document.createElement('blockquote'); let keys = Object.keys(post_data.comments[i]); let comm = post_data.comments[i][keys]; replyTo.style = 'opacity: 1 !important; background: rgba(255,255,255,0.1) !important'; // Getting all images in the comment let imgs_str = ''; for(j=0; j<comm.images.length; j++) imgs_str += '<a target="_blank" href="' + comm.images[j] + '"><img class="lazy" data-src="' + comm.images[j] + '"/></a>'; if(comm.reply_to != 'none') replyTo.innerHTML = '<span style="color: white !important; cursor: pointer;" onclick="scrollToTargetAdjusted(' + comm.reply_to + ')">' + document.querySelector('[id="' + comm.reply_to + '"] span').innerText + ' said: ↺</span><br>↓↓↓<br>' + document.querySelector('[id="' + comm.reply_to + '"]').innerText; divblock.setAttribute('style', 'margin-bottom: 20px; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255,0.1)); border-radius: 15px; padding: 20px;'); divblock.id = keys; divblock.classList.add('block'); divblock.innerHTML = "<div style='background: url(" + comm.img + "); background-size: cover; display: inline-block; width: 32px; height: 32px; border-radius: 15px'></div><span style='vertical-align: super; display: inline-block;'>" + comm.name + "</span><small style='opacity: 0.7; margin-left: 10px; vertical-align: super; display: inline-block;'> · " + moment(parseInt(keys)).fromNow() + "</small>" + (i == 0 ? "<div style='background: url(https://i.imgur.com/OjO8GDj.png); background-size: cover; display: inline-block; width: 32px; height: 32px; border-radius: 15px''></div><small style='margin: 0 auto; opacity: 0.7; vertical-align: super;'>1st comment badge</small>" : "") + "<small style='margin: 0 auto; opacity: 0.7; vertical-align: super;'> #" + (i+1) +"</small>" + (comm.reply_to != 'none' ? replyTo.outerHTML : '') + "<small><br>" + comm.message.replaceAll('\n', '<br>').replace(/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/g, (x) => '<a target="_blank" href="' + x + '">' + x + '</a>') + "</small>" + imgs_str + "" + (comm.username != decodeCredentials('username') ? "<button style='display: block; padding: 0 10px 0 10px;' class='button ln' onclick='replyTo(this.parentNode.id)'>Reply</button><button id='approvebtn' style='" + (post_data.author.username == decodeCredentials('username') && post_data.comments_approved != keys ? 'display: block' : 'display:none') +"; padding: 0 10px 0 10px;' onclick='approveComment("+ divblock.id + ")' class='button ln'>Approve</button>" : ""); if(post_data.comments_approved != keys) document.querySelector('#all_comments').appendChild(divblock); else { document.querySelector('#approved').appendChild(divblock); document.querySelector('#approved').style.display = 'block'; document.querySelector('[id="' + keys + '"]').innerHTML += "<img src='https://i.imgur.com/oTlEFav.png' style='width: 32px; height: 32px;'/><small style='margin: 0 auto; opacity: 0.7; vertical-align: super;'>This comment is considered the best for this post.</small>"; } } let newData = { [post_id]: { "reactions": { "views": [1] } } } PUTsend('https://getpantry.cloud/apiv1/pantry/91c9a2f3-be20-4b3b-8c9e-94a81264de7a/basket/blog_feeds', newData, null, unlockUpvote); } function replyTo(id) { if(localStorage.getItem('ptc_credentials')) { reply_to = id; document.querySelector('[id="' + id + '"]').appendChild(document.querySelector('#comment_editor')); } else window.location.href = 'https://storehaccounts.blogspot.com/p/login_20.html'; } const file = document.getElementById("imgupload1") file.addEventListener("change", ev => { try { img_uploading = true; document.querySelector('#imgupload1').style.pointerEvents = 'none'; document.querySelector('#imgupload1').style.opacity = '0.3'; document.querySelector('#submit_comment').style.pointerEvents = 'none'; document.querySelector('#submit_comment').style.opacity = '0.3'; let numImgs = 0; const formdata = new FormData(); for (i = 0; i < ev.target.files.length; i++) { formdata.append("image", ev.target.files[i]) fetch("https://api.imgbb.com/1/upload?key=07f1351d4e674784012d92ae6e03b49d", { method: "post", body: formdata }).then(data => data.json()).then(data => { numImgs++; if (numImgs == ev.target.files.length) img_uploading = false; document.querySelector('#imgupload1').style.pointerEvents = 'auto'; document.querySelector('#imgupload1').style.opacity = '1'; document.querySelector('#submit_comment').style.pointerEvents = 'auto'; document.querySelector('#submit_comment').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('#form_attached_images').appendChild(img); }) } } catch (err) { window.alert(err); } }); function approveComment(keys) { let choice = window.confirm("Are you sure you want to mark this comment as the best? It cant be undone.", "Best Comment"); if(choice) { let data = { [post_id]: { "comments_approved": keys } } PUTsend('https://getpantry.cloud/apiv1/pantry/91c9a2f3-be20-4b3b-8c9e-94a81264de7a/basket/blog_feeds', data, null, successComment); } } function createComment() { // check for images document.querySelector('#submit_comment').style.pointerEvents = 'none'; document.querySelector('#submit_comment').style.opacity = '0.3'; let imgs = document.querySelectorAll('#form_attached_images img'); let img_str = []; for(i=0; i<imgs.length; i++) img_str.push(imgs[i].src); let data = { [post_id]: { "comments": [{ [new Date().getTime()]: { "username": decodeCredentials('username'), "name": decodeCredentials('name'), "img": decodeCredentials('img'), "message": document.querySelector('#comment_editor textarea').value.replace(/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/g, (x) => '<a target="_blank" href="https://storehaccounts.blogspot.com/p/link-terminal.html#' + btoa(x) + '"> *Locked Link* </a>'), "images": img_str, "reply_to": reply_to } } ] } } PUTsend('https://getpantry.cloud/apiv1/pantry/91c9a2f3-be20-4b3b-8c9e-94a81264de7a/basket/blog_feeds', data, null, successComment); } function successComment() { window.location.reload(); } function decodeCredentials(id) { if(localStorage.getItem('ptc_credentials')) { let data = JSON.parse(localStorage.getItem('ptc_credentials')); return data[id]; } else return null; } function vote() { let newData = { [post_id]: { "reactions": { "happy": [1] } } } document.querySelector('#upvote').style.opacity = '0.3'; document.querySelector('#upvote').style.pointerEvents = 'none'; document.querySelector('#upvote').innerText = 'You ' +(post_data.reactions.happy.length > 0 ? ' and other ' + post_data.reactions.happy.length + ' voted this.' : ' voted this'); PUTsend('https://getpantry.cloud/apiv1/pantry/91c9a2f3-be20-4b3b-8c9e-94a81264de7a/basket/blog_feeds', newData, null, null); } function unlockUpvote() { document.querySelector('#upvote').style.opacity = '1'; document.querySelector('#upvote').style.pointerEvents = 'auto'; if(localStorage.getItem('ptc_credentials')) { document.querySelector('#comment_editor div').style.backgroundImage = 'url(' + decodeCredentials('img') + ')'; document.querySelector('#comment_editor span').innerHTML = 'What would <u>"' + decodeCredentials('name') + '"</u> say on this?'; } else document.querySelector('#comment_editor').style.display = 'none'; } function GETdata(pantry, callback) { let req = new XMLHttpRequest(); req.onload = () => { if (req.readyState == 4) if (req.status == 200) callback(JSON.parse(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 scrollToTargetAdjusted(id){ var element = document.getElementById(id); var headerOffset = 150; var elementPosition = element.getBoundingClientRect().top; var offsetPosition = elementPosition + window.pageYOffset - headerOffset; window.scrollTo({ top: offsetPosition, behavior: "smooth" }); } function PATCHsend(pantry, data, logs, callback) { data = JSON.stringify(data); let req = new XMLHttpRequest(); req.open('PATCH', pantry, true); req.setRequestHeader('Authorization', 'token 44489997-ed40-4f52-92a9-dfe6fe8ad5db'); 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 != null) callback(); } } req.onerror = () => { if(logs != null) logs.innerText = 'Server overloads retrying in 5 seconds...'; setTimeout(function() { PATCHsend(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() { PATCHsend(pantry, data, logs, callback); }, 5000); } } 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 != null) 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); } } </script>