diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index 362b7e1c..ac9bd0f9 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -589,7 +589,7 @@ td pre { right: 0; left: 0; background-color: #00000070; - z-index: 3; + z-index: 4; } .modal { @@ -600,7 +600,7 @@ td pre { position: fixed; top: 3em; background-color: var(--post-color); - z-index: 4; + z-index: 5; box-sizing: border-box; border: 5px solid var(--post-color); align-self: center; @@ -631,6 +631,41 @@ details.actions div { padding: 2px 0; } +.floatactions[open] { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: inline-flex; + flex-direction: column; + max-width: calc(100% - 10px); + max-height: calc(100% - 50px); + position: fixed; + background-color: var(--post-color); + z-index: 3; + box-sizing: border-box; + border: 5px solid var(--post-color); + align-self: center; + overflow: auto; +} + +.floatactions[open] .toggle-summary { + list-style-type: none; + font-size: 0px; + font-weight: bold; + float: right; + overflow: hidden; + margin-right: 1px; +} + +.floatactions[open] .toggle-summary:hover { + color: var(--link-hover); +} + +.floatactions[open] .toggle-summary::before { + content: "X"; + font-size: 10pt!important; +} + div.captchafield { padding: 0px; grid-template-columns: 1fr 1fr 1fr 1fr; diff --git a/gulp/res/js/captcha.js b/gulp/res/js/captcha.js index 5c6edfcb..b227c6d3 100644 --- a/gulp/res/js/captcha.js +++ b/gulp/res/js/captcha.js @@ -101,6 +101,9 @@ class CaptchaController { loadCaptcha(field) { const captchaDiv = field.previousSibling; + if (captchaDiv.children.length > 0) { + return; + } const captchaImg = document.createElement('img'); const refreshDiv = document.createElement('div'); captchaDiv.style.display = ''; diff --git a/gulp/res/js/expand.js b/gulp/res/js/expand.js index 97b67a51..2ed84598 100644 --- a/gulp/res/js/expand.js +++ b/gulp/res/js/expand.js @@ -2,9 +2,13 @@ window.addEventListener('DOMContentLoaded', (event) => { const actionFooter = document.querySelector('summary.toggle-summary'); if (actionFooter) { - actionFooter.onclick = () => { - actionFooter.scrollIntoView(); - } + actionFooter.addEventListener('click', (e) => { + if (!actionFooter.parentElement.classList.contains('floatactions')) { + actionFooter.scrollIntoView(); + } else { + actionFooter.parentElement.classList.remove('floatactions'); + } + }, false); } const volumeSetting = document.getElementById('volume-setting'); diff --git a/gulp/res/js/filters.js b/gulp/res/js/filters.js index 5574b59a..5c659fdd 100644 --- a/gulp/res/js/filters.js +++ b/gulp/res/js/filters.js @@ -200,11 +200,48 @@ const toggleFilter = (filterType, filterData, state) => { updateSavedFilters(); } +//i guess this works, lmfao and saves ton of time +let actionForm, modalBg, moderatingPost; +const cancelModeratePost = () => { + if (!moderatingPost) { + return; + } + moderatingPost.querySelector('.post-check').checked = false; + moderatingPost.style.zIndex = 'unset'; + if (moderatingPost.classList.contains('op')) { + moderatingPost.style.background = 'unset'; + } + modalBg.style.display = 'none'; + modalBg.style.zIndex = 4; + actionForm.removeAttribute('open'); + moderatingPost = null; +} +const moderatePost = (postContainer) => { + moderatingPost = postContainer; + actionForm.classList.add('floatactions'); + actionForm.setAttribute('open', 'open'); + actionForm.style.zIndex = 3; + postContainer.style.zIndex = 3; + if (postContainer.classList.contains('op')) { + postContainer.style.background = 'var(--post-color)'; + } + modalBg.style.display = 'unset'; + modalBg.style.zIndex = 3; + const actionCaptcha = actionForm.querySelector('.captchafield'); + const postCheck = postContainer.querySelector('.post-check'); + Array.from(postCheck.form.elements) + .filter(e => e.name === 'checkedposts') + .forEach(e => e.checked = false); + postCheck.checked = true; + captchaController.loadCaptcha(actionCaptcha); +} + const postMenuChange = function(e) { const postContainer = this.parentElement.parentElement.parentElement; const postDataset = postContainer.dataset const filterType = this.value; const hiding = !postContainer.classList.contains('hidden'); + this.value = ''; let filterData; switch (filterType) { case 'single': @@ -222,9 +259,10 @@ const postMenuChange = function(e) { case 'fsub': filterData = postDataset.subject; break; + case 'moderate': + return moderatePost(postContainer); } toggleFilter(filterType, filterData, hiding); - this.value = ''; }; for (let menu of document.getElementsByClassName('postmenu')) { @@ -289,6 +327,10 @@ window.addEventListener('updatePostMessage', function(e) { window.addEventListener('settingsReady', function(e) { + actionForm = document.getElementById('actionform'); + modalBg = document.querySelector('.modal-bg'); + actionForm.firstChild.addEventListener('click', cancelModeratePost); + modalBg.addEventListener('click', cancelModeratePost, false); filtersTable = document.getElementById('advancedfilters'); updateFiltersTable(); diff --git a/gulp/res/js/forms.js b/gulp/res/js/forms.js index 2a96fa23..4dd5b996 100644 --- a/gulp/res/js/forms.js +++ b/gulp/res/js/forms.js @@ -1,3 +1,4 @@ +const forms = document.getElementsByTagName('form'); const modalClasses = ['modal', 'modal-bg']; function removeModal() { modalClasses.forEach(c => document.getElementsByClassName(c)[0].remove()); @@ -452,7 +453,6 @@ window.addEventListener('DOMContentLoaded', () => { window.addEventListener('settingsReady', () => { - const forms = document.getElementsByTagName('form'); for(let i = 0; i < forms.length; i++) { if (forms[i].method === 'post' /*&& forms[i].encoding === 'multipart/form-data'*/) { new formHandler(forms[i]); diff --git a/views/mixins/post.pug b/views/mixins/post.pug index 202cc1b6..0af1394a 100644 --- a/views/mixins/post.pug +++ b/views/mixins/post.pug @@ -64,6 +64,7 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false, overboar option(value='fsub') Filter Subject if post.tripcode option(value='ftrip') Filter Tripcode + option(value='moderate') Moderate .post-data if post.files.length > 0 .post-files(class=(post.files.length > 1 ? 'fn' : ''))