me/ctfd-category-submit-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update theming

Browse Source
This commit is contained in:
Matthew Grove
2026-01-05 22:14:44 +00:00
parent 5d19e009a5
commit 03d5da76d0
1 changed files with 22 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
assets/category_submit.js
View File

@@ -3,32 +3,38 @@
function injectSubmissionBoxes(config) { function injectSubmissionBoxes(config) {
const enabledCategories = config.categories || []; const enabledCategories = config.categories || [];
// Find all category headers
const headers = document.querySelectorAll('.category-header'); const headers = document.querySelectorAll('.category-header');
headers.forEach(header => { headers.forEach(header => {
const catName = header.textContent.trim(); const catName = header.textContent.trim();
// 1. Check if category is enabled
// 2. Check if we already injected a box (to prevent infinite loops)
const alreadyInjected = header.nextElementSibling && const alreadyInjected = header.nextElementSibling &&
header.nextElementSibling.classList.contains('custom-cat-sub-box'); header.nextElementSibling.classList.contains('cat-sub-row');
if (enabledCategories.includes(catName) && !alreadyInjected) { if (enabledCategories.includes(catName) && !alreadyInjected) {
const div = document.createElement('div'); // Create a row container to match CTFd's grid layout
div.className = "custom-cat-sub-box input-group mt-2 mb-4 p-3 bg-light border rounded"; const row = document.createElement('div');
div.style.maxWidth = "500px"; // Keep it tidy row.className = "cat-sub-row row mb-4 justify-content-center";
div.innerHTML = `
<input type="text" class="form-control" placeholder="Found a flag for ${catName}?" id="in-${catName.replace(/\s+/g, '-')}" autocomplete="off"> // Use col-md-8 or 10 to keep the box from being too wide
<div class="input-group-append"> row.innerHTML = `
<button class="btn btn-success btn-sub" data-cat="${catName}">Submit</button> <div class="col-md-10">
<div class="input-group custom-sub-group">
<input type="text"
class="form-control form-control-lg border-secondary bg-dark text-light"
placeholder="Found a flag for ${catName}?"
id="in-${catName.replace(/\s+/g, '-')}"
autocomplete="off"
style="border-color: rgba(255,255,255,0.1) !important;">
<div class="input-group-append">
<button class="btn btn-success btn-lg px-4 btn-sub" data-cat="${catName}">Submit</button>
</div>
</div>
</div> </div>
`; `;
header.after(div); header.after(row);
// Submission logic row.querySelector('button').onclick = function() {
div.querySelector('button').onclick = function() {
const btn = this; const btn = this;
const input = document.getElementById(`in-${catName.replace(/\s+/g, '-')}`); const input = document.getElementById(`in-${catName.replace(/\s+/g, '-')}`);
const val = input.value.trim(); const val = input.value.trim();
@@ -50,9 +56,7 @@
.then(r => r.json()) .then(r => r.json())
.then(data => { .then(data => {
alert(data.message); alert(data.message);
if (data.success) { if (data.success) location.reload();
location.reload(); // Refresh to show the checkmark on the challenge
}
btn.disabled = false; btn.disabled = false;
}) })
.catch(() => { .catch(() => {
@@ -64,27 +68,19 @@
}); });
} }
// Initialize the plugin
fetch('/category_submit/config') fetch('/category_submit/config')
.then(r => r.json()) .then(r => r.json())
.then(config => { .then(config => {
// Run once on load
injectSubmissionBoxes(config); injectSubmissionBoxes(config);
// Observe the challenge board for changes (e.g. category filtering/loading)
// We use a debounce timer to avoid the "Loading Forever" infinite loop
let timeout; let timeout;
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(() => { timeout = setTimeout(() => {
// Temporarily disconnect to avoid observing our own changes
observer.disconnect(); observer.disconnect();
injectSubmissionBoxes(config); injectSubmissionBoxes(config);
// Re-observe after injection
observer.observe(document.body, { childList: true, subtree: true }); observer.observe(document.body, { childList: true, subtree: true });
}, 200); }, 200);
}); });
observer.observe(document.body, { childList: true, subtree: true }); observer.observe(document.body, { childList: true, subtree: true });
}) })
.catch(err => console.error("Could not load category submission config", err)); .catch(err => console.error("Could not load category submission config", err));