<style> div.pInf, div.brdCmb, h1.pTtl, .hot-items-buttons, header.header, .blogMn { display: none !important; } </style> <div class='ui big inverted attached segment'> <div class="ui fluid big input focus"> <input type="text" placeholder="Title"> </div> </div> <div class="ui big inverted attached segment"> <div class="ui basic large label">Cover Photo</div> <br /> <br /> <div id="image_div" class="ui inverted attached segment"></div> <div class="ui left aligned container"> <input style="display: none;" id="file_attachments" type="file" accept="image/png, image/gif, image/jpeg, image/bmp" placeholder="Change Profile Picture" /> </div> <br /> <button id="uploadImgBtn" type="button" class="ui red inverted button"> <i class="upload icon"></i>Upload </button> </div> <div id="ql-comment-editor" class="ui loading inverted attached segment"> </div> <div id="ql-toolbar-container" class="ui inverted attached segment"> <div class='ui red inverted basic large label'>Content</div> <span class="ql-formats"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="ql-underline"></button> <button class="ql-strike"></button> </span> <span class="ql-formats" ><button class="ql-blockquote"></button> <button class="ql-code-block"></button> </span> <span class="ql-formats"> <button class="ql-list" value="ordered"></button> <button class="ql-list" value="bullet"></button> </span> <span class="ql-formats"> <button class="ql-link"></button> <button class="ql-image"></button> <button class="ql-video"></button> </span> <span class="ql-formats"> <button class="ql-clean"></button> </span> </div> <div class='ui inverted attached segment'> <div class='ui red inverted basic large label'>Categories</div> <br/> <div id='labelDropdown' class="ui large multiple search fluid loading selection dropdown"> <input id='inputLabelDropdown' type="hidden" name="gender"> <i class="dropdown icon"></i> <div class="default text">Categories</div> <div id='labelItems' class="menu"> </div> </div> </div> <div class="ui inverted attached segment" style="min-height: 80px;"> <button id="postBtn" class="ui blue disabled inverted button" style="float: left;" > Type something... </button> <button id="cancelReplyBtn" style="display: none; float: right;" class="ui red inverted button" > Cancel Reply </button> </div> <script type='module'> window.addEventListener('load', async() => { const postBtn = document.getElementById('postBtn'); const editor = document.getElementById('ql-comment-editor'); const cancelBtn = document.getElementById('cancelReplyBtn'); (() => { let script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js'; document.querySelector('body').appendChild(script); })(); // setting up Quill Editor await initFunctions(['Quill', 'ImgurJS']); const quill = new Quill('#ql-comment-editor', { modules: { syntax: false, toolbar: '#ql-toolbar-container' }, theme: "snow" }); quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => { let ops = [] delta.ops.forEach(op => { if (op.insert && typeof op.insert === 'string') { ops.push({ insert: op.insert }) } }) delta.ops = ops return delta }) ImgurJS.uploadMultipleImgs('file_attachments', 'image_div', () => { document.getElementById('image_div').innerHTML = ''; document.getElementById('uploadImgBtn').classList.add('loading', 'disabled'); document.getElementById('uploadImgBtn').innerText = "Uploading..."; }, () => { document.getElementById('uploadImgBtn').classList.remove('loading', 'disabled'); document.getElementById('uploadImgBtn').innerText = "Upload"; }, () => { document.getElementById('image_div').innerHTML = ''; document.getElementById('uploadImgBtn').classList.remove('loading', 'disabled'); document.getElementById('uploadImgBtn').innerText = "Upload"; }); document.getElementById('uploadImgBtn').addEventListener('click', () => { document.getElementById('file_attachments').click(); }); const limit = 1000; const minlimit = 300; quill.on('text-change', function(delta, old, source) { if (source == 'user') { if (quill.getLength() > limit) { quill.deleteText(limit, quill.getLength()); } else if (quill.getLength() < minlimit) { postBtn.innerText = "Type something..."; postBtn.classList.add('disabled'); } else if (quill.getLength() > minlimit && quill.getLength() < limit) { postBtn.classList.remove('disabled'); postBtn.innerText = `Publish`; } } }); let editorForm = document.querySelector('#ql-comment-editor > div'); while (!editorForm) { setTimeout(() => { editorForm = document.querySelector('#ql-comment-editor > div'); }, 300); } editorForm.classList.add('ui', 'inverted', 'attached', 'segment'); document.querySelector('#ql-comment-editor').classList.remove('loading'); function getContent() { return document.querySelector('#ql-comment-editor div').innerHTML; } function getText() { return quill.getText(); } function dataURItoBlob(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1]); else byteString = unescape(dataURI.split(',')[1]); // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString }); } await initFunctions(['jQuery', '$().dropdown()', 'moment']); $('#labelDropdown').dropdown({ allowAdditions: true }); const outputDiv = document.getElementById('blogger_search_result'); const bloggerAPIKey = `&key=AIzaSyBs4OQldZVO9UhVDg08xmBvyhiwsYGjtFY`; const bloggerID = `4996019336227331994`; const bloggerAPIurl = `https://www.googleapis.com/blogger/v3/blogs/${bloggerID}/posts/search?q=`; const feedsUrl = `https://storehaccounts.blogspot.com/feeds/posts/default/?alt=json&q=`; await getLabels(); async function getLabels() { let data = await fetch('https://storehaccounts.blogspot.com/feeds/posts/default/?alt=json'); data = await data.json(); data = data.feed.category; let label_arr = []; data.forEach(items => { label_arr.push(items.term); }); label_arr.sort() for (const items of label_arr) { document.getElementById('labelItems').innerHTML += `<div class="item" data-value="${items}">${items}</div>` } document.getElementById('labelDropdown').classList.remove('loading'); } }, false); </script>