<style> form textarea.textarea-design { resize: none; width: 100%; height: 300px; } form textarea.textarea-single { resize: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Works with overflow: hidden */ min-height: 0; /* Ensures the element can be constrained to a single line's height */ } form div#image_attachments img { height: 300px; width: 47%; object-fit: cover; aspect-ratio: 1/1; display: inline-block; border: 1px solid rgba(255,255,255,0.3); } </style> <form id='thread_form' action='javascript:submitForm();'> <input id='form_title' style=' clear: both; font-weight: 550; font-size: 1.5rem; color: white; border: 1px solid rgba(255,255,255,0.3); padding: 10px; ' class='title-input' required type='text' placeholder='Title'/> <textarea id='form_desc' class='ui segment textarea-design' required placeholder='Description'></textarea> <br> <img id="cat_banner" src=""/> <br> <select required id='category_selections' class='ui big floating segment inverted'> <option value='' disabled selected>Select Category</option> </select> <br/> <br/> <h2>Attachments (Optional)</h2> <div id="image_attachments"></div> <button id="uploaddummy" class="ui inverted yellow button" type='button'>Upload Image</button><button id="clear_attachments" class="ui disabled small inverted button red" type="button">Clear Images</button> <input id='uploadimg' style='display: none;' type='file' accept='image/jpeg, image/png'/> <br> <br> <br> <button id='submit_form' class='ui big button teal' type='submit'>Post Thread</button> </form> <script type='module'> window.addEventListener('load', async() => { await initFunctions(['FirebaseModule', 'supabase', 'ImgurJS']); const fbdb = `https://storehaccounts-website-default-rtdb.firebaseio.com/sth_community_images/threads.json`; const discord_webhook = `https://discord.com/api/webhooks/1473339151503069307/NxXDLzOvzQX4qLHHjIGY_RqAeAev_T1lRPl477ZHhhR_9zB8Ue7dKisF3xtydWYdopb5`; const post_btn = document.getElementById('submit_form'); const form = document.getElementById('thread_form'); let user_id = await checkIfUserLoggedin(); if (!user_id) { window.alert("You're not logged in."); window.location.href = `https://storehaccounts.blogspot.com/p/sign-in-with-storehaccounts.html`; return; } document.getElementById('clear_attachments').addEventListener('click', () => { let res = window.confirm('Are you sure you want to remove all attachments?'); if (res) { document.getElementById('image_attachments').innerHTML = ''; document.getElementById('clear_attachments').classList.add('disabled'); } }); await getCategories(); // Process the Form window.submitForm = async() => { await processForm(); } async function processForm() { form.style.pointerEvents = 'none'; let title = document.getElementById('form_title').value; let desc = document.getElementById('form_desc').value; let category_id = document.getElementById('category_selections').value; let images = document.querySelectorAll('#image_attachments img'); let imgs = []; let fbdb_id = ''; if (!category_id || category_id == '') { window.alert("Please select a category!"); return; } post_btn.innerText = `Creating Thread...`; post_btn.classList.add('disabled'); images.forEach(item => { imgs.push(item.src); }); // upload to FBDB if (imgs.length > 0) { fbdb_id = await FirebaseModule.post(`${fbdb}`, JSON.stringify(imgs)); fbdb_id = JSON.parse(fbdb_id).name; } let data = await supabase.from('sth_threads').insert({ date: 'now()', title: title, description: desc, category_id: category_id, images: fbdb_id, user_id: user_id }); if (data.error) { window.alert(`${error.message}`); post_btn.innerText = `Post Thread`; post_btn.classList.remove('disabled'); form.style.pointerEvents = 'auto'; return; } if (data.status == 201) { window.alert("Thread has been posted to the community."); window.location.href = `https://storehaccounts.blogspot.com/`; } else { post_btn.innerText = `Post Thread`; post_btn.classList.remove('disabled'); form.style.pointerEvents = 'auto'; } } // check if the user has logged in async function checkIfUserLoggedin() { let { data, error } = await supabase.auth.getSession(); if (error || !data || !data.session) return; let user_data = await supabase.from('users').select('id').eq('email', data.session.user.email).single(); return user_data.data.id; } // load categories async function getCategories() { let { data, error } = await supabase.from('sth_category').select('id, title').order('title', { ascending: true }); if (error) return; if (data.length == 0) return; data.forEach(item => category_selections.innerHTML += `<option value='${item.id}'>${item.title}</option>`); return data; } document.getElementById('category_selections').addEventListener('change', async() => { let { data, error } = await supabase.from('sth_category').select('banner').eq('id', document.getElementById('category_selections').value).single(); if (error) { window.alert(`Error has been detected: ${error.message}`); return; } document.getElementById('cat_banner').src = data.banner; }); // load upload image XHR ImgurJS.uploadMultipleImgs('uploadimg', 'image_attachments', () => { document.getElementById('submit_form').classList.add('disabled'); document.getElementById('clear_attachments').classList.remove('disabled'); document.getElementById('uploaddummy').classList.add('disabled'); }, () => { document.getElementById('uploaddummy').classList.remove('disabled'); document.getElementById('submit_form').classList.remove('disabled'); }); document.getElementById('uploaddummy').addEventListener('click', () => { document.getElementById('uploadimg').click(); }); function executeJS(src) { let script = document.createElement('script'); script.src = src; script.setAttribute('async', 'async'); } }, false); </script>