<style> .thread-form { height: auto; width: 100%; display: flex; flex-direction: column; overflow: hidden; display: none; } #img_attachments img { max-height: 150px; aspect-ratio: 1/1; object-fit: cover; width: 150px; border: 2px solid orange; margin: 1px; } </style> <div style="font-size: 0.8rem;align-self: flex-start;display: none;" class="ui warning message" id="not_logged_in"><p style="font-size: 1.5rem;font-weight: 550;">Not logged in.</p><p style="font-weight: 550;">You cant post while you're not logged in. You can register an account or login if you have already existing one.</p><a class="ui yellow button" href="https://storehaccounts.blogspot.com/p/sign-in-with-storehaccounts.html">Login</a></div> <form id='sth_form' action="javascript:sth_submit();" class="thread-form" data-gtm-form-interact-id="0"> <div class="ui info message" style=" font-weight: 550; font-size: 1.5rem; padding: 5px; "><div style="font-size: 0.8rem;align-self: flex-start;" class="ui warning message"><p style="font-size: 1.5rem;font-weight: 550;">Title</p>Create a catchy title with a good keyword that can easily catch attentions to the viewers.</div><input placeholder="Title" class="ui inverted segment" style=" font-size: 1.5rem; margin: 0; width: 100%; color: lawngreen; " id="sth_title" required="" data-gtm-form-interact-field-id="0" minlength="5"> <div style="font-size: 0.8rem;align-self: flex-start;" class="ui warning message"><p style="font-size: 1.5rem;font-weight: 550;">Description</p>Note, all of the links pasted in the description will automatically converted to <a> tag. You can upload mediafire, youtube, or even reddit links here.</div><textarea placeholder="Enter your content here..." class="ui inverted segment" style=" height: fit-content; resize: none; margin: 0; font-size: 1.3rem; color: beige; min-height: 300px; " id="sth_description" required="" data-gtm-form-interact-field-id="1" minlength="50"></textarea><div style="font-size: 0.8rem;align-self: flex-start;" class="ui warning message"><p style="font-size: 1.5rem;font-weight: 550;">Category</p>This is where your posts belongs to, kindly add your posts to the most likely fitting category for the viewers will find your posts.</div> <select style=" width: 100%; text-align: center; padding: 10px; " id="sth_category" required=""> <option disabled="" selected="" value="">Select Category</option> </select> <br> <br><div id="img_attachments"> </div><div style=" display: flex; justify-content: space-between; "><button id='btn_upload' class="ui small blue button" style=" width: 100%; " type="button">Upload Images</button><button id='btn_post' class="ui red button" style=" width: fit-content; align-self: flex-end; width: 100%; " type="submit">Post</button></div> </div> <input type="file" accept="image/png, image/gif, image/jpeg, image/bmp" style="display: none;" id="upload_img"/> </form> <script type='module'> window.addEventListener('load', async() => { const title = document.getElementById('sth_title'); const description = document.getElementById('sth_description'); const category = document.getElementById('sth_category'); const sth_form = document.getElementById('sth_form'); const btn_upload = document.getElementById('btn_upload'); const btn_post = document.getElementById('btn_post'); const images = document.getElementById('img_attachments'); const not_logged_in = document.getElementById('not_logged_in'); await initializeForm(); window.sth_submit = async () => { submit(); } async function initializeForm() { if (!await isUserLoggedIn()) return; sth_form.style.display = 'block'; initImageUpload(); loadCategories(); async function isUserLoggedIn() { await initFunctions(['supabase', 'FirebaseModule']); let { data, error } = await supabase.auth.getSession(); if (error) { sth_form.innerHTML = ''; not_logged_in.style.display = 'block'; return; } if (!data.session) { sth_form.innerHTML = ''; not_logged_in.style.display = 'block'; return; } return true; } function initImageUpload() { btn_upload.addEventListener('click', () => document.getElementById('upload_img').click()); ImgurJS.uploadMultipleImgs('upload_img', 'img_attachments', () => { btn_upload.innerText = 'Uploading...'; btn_upload.style.pointerEvents = 'none'; }, () => { btn_upload.innerText = 'Upload Images'; btn_upload.style.pointerEvents = 'auto'; }); } async function loadCategories() { let fbdb = `https://storehaccounts-threads-default-rtdb.firebaseio.com/sth_categories.json`; let data = await FirebaseModule.fetchJSON(`${fbdb}`); if(!data) { window.alert("No categories were available to load."); return; } let keys = Object.keys(data); keys.forEach(item => { let option = document.createElement('option'); option.value = item; option.innerText = item; category.appendChild(option); }); } } function checkInfos() { } function submit() { const fbdb = `https://storehaccounts-threads-default-rtdb.firebaseio.com/`; } }, false); </script>