pguzman/Rosary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Beads are now a property of prayer steps, not separate steps

Browse Source 
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:
Philip Guzman III
2026-05-13 22:07:48 -07:00
parent 76a5061fba
commit 8c047f5b28
7 changed files with 228 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/builder.css
+59 -93
View File
@@ -259,8 +259,15 @@
.step-preview.leader { color: #2563eb; }
.step-preview.response { color: #059669; }
.step-attribution-select {
.step-controls-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
flex-wrap: wrap;
}
.step-attribution-select {
padding: 3px 6px;
font-size: 11px;
border: 1px solid var(--border);
@@ -269,7 +276,57 @@
color: var(--text);
font-family: var(--font);
cursor: pointer;
width: 100%;
flex: 1;
min-width: 120px;
}
/* ── Bead selector buttons (on step cards and modal) ─────────── */
.step-bead-btns {
display: flex;
gap: 3px;
flex-shrink: 0;
}
.bead-sel-btn {
padding: 3px 7px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg);
font-size: 12px;
cursor: pointer;
font-family: var(--font);
color: var(--muted);
line-height: 1.4;
transition: all 0.12s;
}
.bead-sel-btn:hover { border-color: var(--primary); color: var(--primary); }
.bead-sel-btn.active {
background: var(--primary);
border-color: var(--primary);
color: #fff;
font-weight: 600;
}
/* Modal bead row */
.bead-btn-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
}
.bead-btn-row .bead-sel-btn {
padding: 5px 14px;
font-size: 13px;
}
/* Bead hint icon on library cards */
.prayer-bead-hint {
font-size: 12px;
color: var(--muted);
margin-left: 2px;
}
.step-actions {
@@ -439,97 +496,6 @@
margin-top: 2px;
}
/* ── Bead markers section ────────────────────────────────────── */
.bead-markers-section {
padding: 10px 16px 8px;
border-bottom: 1px solid var(--border);
background: var(--bg-card);
flex-shrink: 0;
}
.bead-markers-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
margin-bottom: 8px;
}
.bead-marker-cards {
display: flex;
gap: 8px;
}
.bead-marker-card {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
cursor: pointer;
font-family: var(--font);
font-size: 12px;
text-align: left;
transition: border-color .15s, background .15s;
}
.bead-marker-card:hover {
border-color: var(--primary);
background: #eff6ff;
}
.bead-icon-sm { font-size: 18px; color: #6b7280; flex-shrink: 0; line-height: 1; }
.bead-icon-lg { font-size: 20px; color: #374151; flex-shrink: 0; line-height: 1; }
.bead-icon-cx { font-size: 18px; color: var(--gold); flex-shrink: 0; line-height: 1; }
.bead-card-text {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.bead-card-text strong { font-size: 12px; font-weight: 600; color: var(--text); }
.bead-card-text small { font-size: 10px; color: var(--muted); }
.bead-add-label {
font-size: 11px;
color: var(--primary);
font-weight: 600;
flex-shrink: 0;
}
/* ── Bead step card (in sequence list) ───────────────────────── */
.step-card.bead-step {
background: #fefce8;
border-color: #fde68a;
}
.step-card.bead-step:hover {
border-color: #f59e0b;
}
.bead-step-name {
font-size: 13px;
font-weight: 600;
color: #92400e;
display: flex;
align-items: center;
gap: 6px;
}
.bead-step-sub {
font-size: 11px;
color: #b45309;
margin-top: 2px;
}
/* ── Library footer ──────────────────────────────────────────── */
.library-footer {
assets/js/builder.js
+49 -13
View File
@@ -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');