boris/k-boris-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor item form visibility to data-attribute driven JS
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source 
Replace hardcoded id-based section lookup with declarative rules:
- data-show-category="games|books|films" on sections
- data-hide-status="unending" on individual fields

JS now has a single updateVisibility() that evaluates attributes.
Adding new conditions only requires touching HTML, not JS.

Also hides Progress and Total Hours for unending items.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Boris
2026-04-01 23:55:47 +03:00
parent 23eefc269b
commit b289e7c7fe
1 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
backlogger/templates/backlogger/item_form.html
View File

@@ -158,7 +158,7 @@
{{ form.name.errors }} {{ form.name.errors }}
</div> </div>
<div class="field"> <div class="field" data-hide-status="unending">
<div class="progress-label"> <div class="progress-label">
<label for="{{ form.progress_percent.id_for_label }}">Progress</label> <label for="{{ form.progress_percent.id_for_label }}">Progress</label>
<span class="progress-val" id="progress-display">{{ form.progress_percent.value|default:0|floatformat:0 }}%</span> <span class="progress-val" id="progress-display">{{ form.progress_percent.value|default:0|floatformat:0 }}%</span>
@@ -175,7 +175,7 @@
</div> </div>
<!-- Games fields --> <!-- Games fields -->
<div id="section-games" class="cat-section" style="display:none"> <div class="cat-section" data-show-category="games">
<hr class="section-divider"> <hr class="section-divider">
<div class="section-title">Games</div> <div class="section-title">Games</div>
<div class="two-col"> <div class="two-col">
@@ -184,7 +184,7 @@
{{ form.hours_played }} {{ form.hours_played }}
{{ form.hours_played.errors }} {{ form.hours_played.errors }}
</div> </div>
<div class="field"> <div class="field" data-hide-status="unending">
<label>Total hours <span class="optional">optional</span></label> <label>Total hours <span class="optional">optional</span></label>
{{ form.total_hours }} {{ form.total_hours }}
{{ form.total_hours.errors }} {{ form.total_hours.errors }}
@@ -201,7 +201,7 @@
</div> </div>
<!-- Books fields --> <!-- Books fields -->
<div id="section-books" class="cat-section" style="display:none"> <div class="cat-section" data-show-category="books">
<hr class="section-divider"> <hr class="section-divider">
<div class="section-title">Books</div> <div class="section-title">Books</div>
<div class="two-col"> <div class="two-col">
@@ -219,7 +219,7 @@
</div> </div>
<!-- Films fields --> <!-- Films fields -->
<div id="section-films" class="cat-section" style="display:none"> <div class="cat-section" data-show-category="films">
<hr class="section-divider"> <hr class="section-divider">
<div class="section-title">Films</div> <div class="section-title">Films</div>
<div class="two-col"> <div class="two-col">
@@ -249,15 +249,24 @@
const catSelect = document.getElementById('{{ form.category.id_for_label }}'); const catSelect = document.getElementById('{{ form.category.id_for_label }}');
const progressRange = document.getElementById('{{ form.progress_percent.id_for_label }}'); const progressRange = document.getElementById('{{ form.progress_percent.id_for_label }}');
const progressDisplay = document.getElementById('progress-display'); const progressDisplay = document.getElementById('progress-display');
const itemStatus = '{{ item.status|default:"active" }}';
function updateSections() { function updateVisibility() {
document.querySelectorAll('.cat-section').forEach(el => el.style.display = 'none'); const cat = catSelect.value;
const sec = document.getElementById('section-' + catSelect.value);
if (sec) sec.style.display = 'block'; // Show only the section matching the selected category
document.querySelectorAll('[data-show-category]').forEach(el => {
el.style.display = el.dataset.showCategory === cat ? 'block' : 'none';
});
// Hide fields that are not applicable for the current status
document.querySelectorAll('[data-hide-status]').forEach(el => {
el.style.display = el.dataset.hideStatus === itemStatus ? 'none' : '';
});
} }
catSelect.addEventListener('change', updateSections); catSelect.addEventListener('change', updateVisibility);
updateSections(); updateVisibility();
progressRange.addEventListener('input', function() { progressRange.addEventListener('input', function() {
progressDisplay.textContent = Math.round(this.value) + '%'; progressDisplay.textContent = Math.round(this.value) + '%';