<style> #attachments_images img { width: 30%; object-fit: cover; } [thread-images] img { width: 30% } [thread-badges] img { width: 30px } h1.pTtl { display: none; } img.magnify { display: block; width: 100%; } img.unclicked { border: 3px solid #d8cbcb; cursor: pointer; } </style> <div thread-parent style=" font-size: 1.3rem; line-height: 2rem; border-radius: 5px; border-bottom: 2px solid slategray; "><div style=" padding: 5px !important; border-bottom: 1px solid rgba(144, 100, 0, 1); color: honeydew; border-top: 1px solid rgb(239 173 23); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; "><h2 thread-title style=" color: beige; padding: 3px; border-radius: 5px; line-height: 2rem; "></h2><span thread-timeago style=" font-size: 1rem; opacity: 0.7; color: beige; float: right; padding: 10px; flex-basis: 100px; flex-grow: 0; flex-shrink: 1; font-weight: 550; line-height: 15px; "></span> </div><div style=" display: flex; overflow: hidden; border-radius: 10px; min-width: 300px; border-bottom: 1px solid rgba(255,255,255,0.5); "><a href="https://storehaccounts.blogspot.com/p/profile-page.html" style=" display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px; max-width: 150px; border-radius: 10px; min-width: 100px; flex: 1 1 20%; " thread-userlink=""><img style=" max-width: 100px; max-height: 100px; flex: 1 1 50px; width: 50px; height: 50px !important; object-fit: cover; " thread-userprof=""><span thread-username style=" width: 100%; font-size: 1rem; text-align: center; line-height: 1.2rem; margin-top: 5px; "></span></a><div style=" display: flex; flex-direction: column; width: 100%; min-width: 150px; flex: 1 1 80%; "><div thread-badges style=" flex-basis: 90%; border-left: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); align-items: center; display: flex; flex-wrap: wrap; column-gap: 5px; /* horizontal spacing */ /* vertical spacing */ justify-content: center; "> </div><div style=" display: flex; justify-content: space-evenly; align-items: flex-end; flex-basis: 10%; border-left: 1px solid rgba(255, 255, 255, 0.3); width: 99%; padding: 5px; flex-wrap: wrap; gap: 10px; "><span thread-userrank style=" font-size: 1rem; text-align: center; line-height: 1.2rem; font-weight: 550; opacity: 0.8; "></span><span thread-userage style=" font-size: 1rem; text-align: center; line-height: 1.2rem; font-weight: 550; opacity: 0.8; "></span></div></div></div><p thread-description style=" opacity: 0.8; text-align: justify; padding: 5px !important; font-size: 1.2rem; line-height: 1.5rem; "></p><div thread-images style=" display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start; justify-content: flex-start; padding: 10px; "></div></div> <form style='display: none; margin: 30px 0' id="thread_comment_creator" action="javascript:create_comment();"> <div> <div style=" height: fit-content; border-top: 3px solid rgb(212 24 232); display: flex; align-items: center; background: black; width: 100%; padding: 10px; border-bottom: 1px solid #414141; min-width: 300px; overflow: hidden; border-radius: 5px; "><img src="https://i.imgur.com/0cE1BlT.png" style=" max-height: 32px; "><p style=" line-height: 1rem; opacity: 1; font-size: 1rem; display: block; padding: 0 10px; font-style: italic; font-weight: 550; ">Comment with honesty and respect!</p><button id="upload_btn" type="button" style=" color: #ffffff; background: rgb(57 84 147); padding: 5px 20px; border: 1px solid #000000; font-weight: 550; font-size: 1rem; cursor: pointer; margin-left: auto; ">Image</button><button id="submit_btn" type="submit" style=" color: #ffffff; background: rgb(205 79 157); padding: 5px 20px; border: 1px solid #000000; font-weight: 550; font-size: 1rem; cursor: pointer; ">Post</button></div> <textarea id="comment_textarea_value" placeholder="Enter comment here" required="" type="text" style=" min-height: 100px; resize: none; field-sizing: content; padding: 10px 8px !important; background: #131414; color: beige; border-radius: 5px; font-size: 15px; line-height: 1.5rem; font-weight: 550; opacity: 0.8; min-width: 300px; "></textarea> <div id='attachments_images' style=" border-bottom: 5px solid rgb(212 24 232); display: flex; align-items: center; background: black; padding: 10px; overflow: hidden; border-radius: 5px; gap: 10px; flex-wrap: wrap; "></div></div> <input id="dummy_file_upload" type="file" accept=".jpg,.jpeg,.png,.gif,.webp,.svg" style="display: none;"> </form> <div id="not_logged_in" style="background: black;height: 50px;border: 5px solid rgb(83 89 142);display: none;align-items: center;justify-content: center;border-radius: 10px;"><a href="https://storehaccounts.blogspot.com/p/sign-in-with-storehaccounts.html">Login before commenting Policy.</a></div> <script type='module'> window.addEventListener('load', async() => { // loading thread appendScript('https://rawcdn.githack.com/ptcreborn/battlecatsarchive/46bb665e5a22a21508572f5ff7d0a715f5830b3c/sth_thread_viewer.js'); // variables let user_id = ''; // initialize await handleImageUpload(); await checkIfUserOnline(); window.create_comment = async() => { await createComment(); } async function checkIfUserOnline() { let { data, error } = await supabase.auth.getSession(); if (error) { window.alert(`${error.message}`); document.getElementById('thread_comment_creator').remove(); document.getElementById('not_logged_in').style.display = 'flex'; elemStatus('submit_btn', 'Post'); enableElem('thread_comment_creator'); return; } if (!data.session) { document.getElementById('thread_comment_creator').remove(); document.getElementById('not_logged_in').style.display = 'flex'; return; } user_id = await supabase.from('users').select('id').eq('email', data.session.user.email).single(); document.getElementById('thread_comment_creator').style.display = 'block'; } async function createComment() { await initFunctions(['supabase', 'FirebaseModule']); const commentVal = document.getElementById('comment_textarea_value'); const submitBtn = document.getElementById('submit_btn'); disableElem('thread_comment_creator'); elemStatus('submit_btn', 'Posting...'); if (user_id.error) { window.alert(`Error detected: ${user_id.error.message}`); elemStatus('submit_btn', 'Post'); enableElem('thread_comment_creator'); return; } //check all the contents to be written in the database. let allImgs = []; let image_data; document.querySelectorAll('#attachments_images img').forEach(element => { allImgs.push(element.src); }); if(allImgs.length > 0) { image_data = await FirebaseModule.post(`https://storehaccounts-website-default-rtdb.firebaseio.com/sth_community_images/comments.json`, JSON.stringify(allImgs) ) } let postComment = await supabase.from('sth_comments').insert({ date: 'now()', description: document.getElementById('comment_textarea_value').value, images: image_data ? `${JSON.parse(image_data).name}`: null, user_id: user_id.data.id, thread_id: query('thread-parent').id }); if (postComment.error) { window.alert(`Error in submitting comment! ${postComment.error.message}`); elemStatus('submit_btn', 'Post'); enableElem('thread_comment_creator'); return; } } function disableElem(id) { document.getElementById(id).style.pointerEvents = 'none'; document.getElementById(id).style.opacity = '0.8'; } function enableElem(id) { document.getElementById(id).style.pointerEvents = 'auto'; document.getElementById(id).style.opacity = '1'; } function elemStatus(id, str) { document.getElementById(id).innerText = str; } async function handleImageUpload() { await initFunctions(['ImgurJS']); document.getElementById('upload_btn').addEventListener('click', () => document.getElementById('dummy_file_upload').click()); ImgurJS.uploadMultipleImgs('dummy_file_upload', 'attachments_images', () => { disableElem('thread_comment_creator'); elemStatus('upload_btn', 'Uploading...'); }, () => { enableElem('thread_comment_creator'); elemStatus('upload_btn', 'Image'); }, () => { window.alert("Error in uploading image."); enableElem('thread_comment_creator'); elemStatus('upload_btn', 'Image'); } ); } function query(str) { return document.querySelector(`[${str}]`); } }, false); </script>