dispute-protocol/builder-prototype
2
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Fancified the template selector

Browse Source
This commit is contained in:
Nathan Schneider
2025-05-12 22:44:24 -06:00
parent 41aeffa81b
commit 8aabd66666
3 changed files with 279 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
themes/dispute-protocol-theme/layouts/_default/builder.html
View File

@ -7,22 +7,32 @@
<div class="builder-main">
<div class="protocol-metadata">
<div class="metadata-field">
<label for="community-name">Community Name:</label>
<h2>Community Name</h2>
<input type="text" id="community-name" name="community-name" placeholder="Enter your community name...">
</div>
<div class="metadata-field">
<label for="protocol-summary">Summary:</label>
<h2>Summary</h2>
<textarea id="protocol-summary" name="protocol-summary" placeholder="Briefly describe this dispute resolution protocol and its purpose..."></textarea>
</div>
</div>
<div class="protocol-template-selector">
<label for="protocol-template">Select a Protocol Template:</label>
<select id="protocol-template" class="protocol-template-select">
<option value="">-- Create Your Own Protocol --</option>
<!-- Template options will be populated by JavaScript -->
</select>
<div class="stage-header" id="template-header">
<div class="stage-header-content">
<h2>Select a Template</h2>
</div>
<button type="button" class="toggle-btn" aria-label="Toggle section" onclick="toggleTemplateSection(this)">+</button>
</div>
<div class="template-body" style="display: none;">
<div class="template-options">
<div class="template-option" data-template-id="">
<button class="template-select-btn">Create Your Own Protocol</button>
<p class="template-description">Start with a blank protocol and build it from scratch.</p>
</div>
<!-- Template options will be populated by JavaScript -->
</div>
</div>
</div>
<div class="builder-content">
@ -154,6 +164,22 @@ function toggleStage(button) {
event.stopPropagation();
}
function toggleTemplateSection(button) {
const section = button.closest('.protocol-template-selector');
const body = section.querySelector('.template-body');
if (body.style.display === 'block') {
body.style.display = 'none';
button.textContent = '+';
} else {
body.style.display = 'block';
button.textContent = '-';
}
// Prevent event from propagating
event.stopPropagation();
}
// Make headers also toggle sections
document.addEventListener('DOMContentLoaded', function() {
const headers = document.querySelectorAll('.stage-header-content');
@ -164,6 +190,16 @@ document.addEventListener('DOMContentLoaded', function() {
toggleButton.click();
});
});
// Make template header also toggle section
const templateHeader = document.querySelector('#template-header .stage-header-content');
if (templateHeader) {
templateHeader.addEventListener('click', function() {
const header = this.closest('#template-header');
const toggleButton = header.querySelector('.toggle-btn');
toggleButton.click();
});
}
// Textarea auto-resizing is now handled by the script in head.html