Beads are now a property of prayer steps, not separate steps
Each prayer in the library has an optional default_bead_type (small/large/ crucifix). Standard prayers get sensible defaults: Our Father=large, Hail Mary=small, Sign of Cross=crucifix, Divine Mercy beads accordingly. In the sequence, each step card shows a bead selector (—/○/●/✝) so users can override the default per step. Adding a prayer pre-fills its default. Bead library icon hints (○●✝) appear on prayer cards in the library. Modal now includes a Bead selector for creating/editing prayers. Remove the separate Bead Markers library section — beads live on prayers. build_slides: prayer steps with bead_type now get a real bead_index so the ring advances correctly during presentation. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+49
-13
@@ -27,7 +27,7 @@
|
||||
STEPS.push({ step_type: 'bead', bead_type: s.bead_type });
|
||||
} else {
|
||||
const prayer = PRAYERS.find(p => String(p.id) === String(s.prayer_id));
|
||||
if (prayer) STEPS.push({ step_type: 'prayer', prayer_id: s.prayer_id, attribution: s.attribution, _prayer: prayer });
|
||||
if (prayer) STEPS.push({ step_type: 'prayer', prayer_id: s.prayer_id, attribution: s.attribution, bead_type: s.bead_type || null, _prayer: prayer });
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -81,6 +81,15 @@
|
||||
radio.addEventListener('change', updateModalFields);
|
||||
});
|
||||
|
||||
// Modal bead selector buttons
|
||||
document.querySelectorAll('#modal-bead-row .bead-sel-btn').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
document.querySelectorAll('#modal-bead-row .bead-sel-btn').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
document.getElementById('modal-bead-type').value = this.dataset.bead;
|
||||
});
|
||||
});
|
||||
|
||||
// Modal save
|
||||
document.getElementById('modal-save').addEventListener('click', saveModalPrayer);
|
||||
|
||||
@@ -112,15 +121,18 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const beadIcon = { small: '○', large: '●', crucifix: '✝' };
|
||||
|
||||
list.innerHTML = visible.map(function (p) {
|
||||
const preview = (p.leader_text || p.all_text || '').replace(/\n/g, ' ').substring(0, 100);
|
||||
const badgeClass = p.source_tag === 'standard' ? 'standard' : (p.source_tag === 'global' ? 'global' : 'mine');
|
||||
const badgeLabel = p.source_tag === 'standard' ? 'Standard' : (p.source_tag === 'global' ? 'Global' : 'Mine');
|
||||
const canEdit = p.source_tag === 'mine' || window.IS_ADMIN;
|
||||
const beadHint = p.default_bead_type ? `<span class="prayer-bead-hint" title="${p.default_bead_type} bead">${beadIcon[p.default_bead_type]}</span>` : '';
|
||||
|
||||
return `<div class="prayer-card">
|
||||
<div class="prayer-card-top">
|
||||
<span class="prayer-card-name">${esc(p.name)}</span>
|
||||
<span class="prayer-card-name">${esc(p.name)} ${beadHint}</span>
|
||||
<span class="source-badge ${badgeClass}">${badgeLabel}</span>
|
||||
</div>
|
||||
<div class="prayer-card-preview">${esc(preview)}${preview.length >= 100 ? '…' : ''}</div>
|
||||
@@ -177,18 +189,27 @@
|
||||
const leaderPrev = (p.leader_text || '').replace(/\n/g, ' ').substring(0, 60);
|
||||
const allPrev = (p.all_text || '').replace(/\n/g, ' ').substring(0, 60);
|
||||
|
||||
const bead = step.bead_type || '';
|
||||
return `<div class="step-card">
|
||||
<div class="step-num">${i + 1}</div>
|
||||
<div class="step-body">
|
||||
<div class="step-name">${esc(p.name)}</div>
|
||||
${leaderPrev ? `<div class="step-preview leader">Leader: ${esc(leaderPrev)}${leaderPrev.length >= 60 ? '…' : ''}</div>` : ''}
|
||||
${allPrev ? `<div class="step-preview response">All: ${esc(allPrev)}${allPrev.length >= 60 ? '…' : ''}</div>` : ''}
|
||||
<select class="step-attribution-select" onchange="builderSetAttribution(${i}, this.value)">
|
||||
<option value="leader_all" ${step.attribution==='leader_all' ? 'selected':''}>Leader / All</option>
|
||||
<option value="leader_only" ${step.attribution==='leader_only' ? 'selected':''}>Leader only</option>
|
||||
<option value="all_only" ${step.attribution==='all_only' ? 'selected':''}>All together (unison)</option>
|
||||
<option value="none" ${step.attribution==='none' ? 'selected':''}>No attribution</option>
|
||||
</select>
|
||||
<div class="step-controls-row">
|
||||
<select class="step-attribution-select" onchange="builderSetAttribution(${i}, this.value)">
|
||||
<option value="leader_all" ${step.attribution==='leader_all' ? 'selected':''}>Leader / All</option>
|
||||
<option value="leader_only" ${step.attribution==='leader_only' ? 'selected':''}>Leader only</option>
|
||||
<option value="all_only" ${step.attribution==='all_only' ? 'selected':''}>All (unison)</option>
|
||||
<option value="none" ${step.attribution==='none' ? 'selected':''}>No attribution</option>
|
||||
</select>
|
||||
<div class="step-bead-btns">
|
||||
<button class="bead-sel-btn ${bead===''?'active':''}" onclick="builderSetBead(${i},null)" title="No bead">—</button>
|
||||
<button class="bead-sel-btn ${bead==='small'?'active':''}" onclick="builderSetBead(${i},'small')" title="Small bead (Hail Mary)">○</button>
|
||||
<button class="bead-sel-btn ${bead==='large'?'active':''}" onclick="builderSetBead(${i},'large')" title="Large bead (Our Father)">●</button>
|
||||
<button class="bead-sel-btn ${bead==='crucifix'?'active':''}" onclick="builderSetBead(${i},'crucifix')" title="Crucifix">✝</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-actions">${moveUp}${moveDn}${remove}</div>
|
||||
</div>`;
|
||||
@@ -220,7 +241,8 @@
|
||||
else if (!prayer.all_text) attr = 'leader_only';
|
||||
else if (!prayer.leader_text) attr = 'all_only';
|
||||
|
||||
STEPS.push({ step_type: 'prayer', prayer_id: prayerId, attribution: attr, _prayer: prayer });
|
||||
const defaultBead = prayer.default_bead_type || null;
|
||||
STEPS.push({ step_type: 'prayer', prayer_id: prayerId, attribution: attr, bead_type: defaultBead, _prayer: prayer });
|
||||
renderSequence();
|
||||
// Briefly highlight the new step
|
||||
const list = document.getElementById('step-list');
|
||||
@@ -249,6 +271,13 @@
|
||||
if (STEPS[index]) STEPS[index].attribution = value;
|
||||
};
|
||||
|
||||
window.builderSetBead = function (index, value) {
|
||||
if (STEPS[index]) {
|
||||
STEPS[index].bead_type = value;
|
||||
renderSequence(); // re-render so active bead button updates
|
||||
}
|
||||
};
|
||||
|
||||
window.builderEditPrayer = function (prayerId) {
|
||||
openModal(prayerId);
|
||||
};
|
||||
@@ -276,6 +305,12 @@
|
||||
document.getElementById('modal-leader').value = p.leader_text || '';
|
||||
document.getElementById('modal-all').value = p.all_text || '';
|
||||
document.getElementById('modal-global').checked = !!p.is_global;
|
||||
// Pre-fill bead type
|
||||
const beadVal = p.default_bead_type || '';
|
||||
document.getElementById('modal-bead-type').value = beadVal;
|
||||
document.querySelectorAll('#modal-bead-row .bead-sel-btn').forEach(function (btn) {
|
||||
btn.classList.toggle('active', btn.dataset.bead === beadVal);
|
||||
});
|
||||
|
||||
// Determine existing attribution for radio pre-selection
|
||||
const hasLeader = !!(p.leader_text || '').trim();
|
||||
@@ -327,8 +362,9 @@
|
||||
const name = document.getElementById('modal-name').value.trim();
|
||||
const leader = document.getElementById('modal-leader').value.trim();
|
||||
const all = document.getElementById('modal-all').value.trim();
|
||||
const global = document.getElementById('modal-global').checked ? 1 : 0;
|
||||
const attr = getSelectedAttr();
|
||||
const global = document.getElementById('modal-global').checked ? 1 : 0;
|
||||
const beadType = document.getElementById('modal-bead-type').value || null;
|
||||
const attr = getSelectedAttr();
|
||||
|
||||
if (!name) {
|
||||
document.getElementById('modal-name').focus();
|
||||
@@ -350,7 +386,7 @@
|
||||
fetch(url, {
|
||||
method: method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, leader_text: sendLeader, all_text: sendAll, is_global: global }),
|
||||
body: JSON.stringify({ name, leader_text: sendLeader, all_text: sendAll, default_bead_type: beadType, is_global: global }),
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(function (data) {
|
||||
@@ -417,7 +453,7 @@
|
||||
subject_dates: document.getElementById('subject-dates').value.trim(),
|
||||
steps: STEPS.map(s => s.step_type === 'bead'
|
||||
? { step_type: 'bead', bead_type: s.bead_type }
|
||||
: { step_type: 'prayer', prayer_id: s.prayer_id, attribution: s.attribution }),
|
||||
: { step_type: 'prayer', prayer_id: s.prayer_id, attribution: s.attribution, bead_type: s.bead_type || null }),
|
||||
};
|
||||
|
||||
const btn = document.getElementById('btn-save');
|
||||
|
||||
Reference in New Issue
Block a user