feat(badges): cfg_json hide toggles for title/affiliations/location; wire renderer

This commit is contained in:
Scott Idem
2026-04-07 14:28:10 -04:00
parent 34bf823987
commit 988ba75df3
2 changed files with 191 additions and 19 deletions

View File

@@ -52,6 +52,17 @@ let cfg_hide_badge_header = $state(false);
let cfg_hide_badge_footer = $state(false);
let cfg_show_qr_front = $state(false);
let cfg_show_qr_back = $state(true);
// Per-field hide toggles
let cfg_hide_title = $state(false);
let cfg_hide_affiliations = $state(false);
let cfg_hide_location = $state(false);
// Alignment overrides: 'left' | 'center' | 'right' | 'justify'
let cfg_align_name = $state('center');
let cfg_align_title = $state('center');
let cfg_align_affiliations = $state('center');
let cfg_align_location = $state('center');
let cfg_qr_alignment_front = $state('center');
let cfg_qr_alignment_back = $state('center');
let submit_status = $state('idle'); // idle, loading, success, error
@@ -109,6 +120,19 @@ async function load_template(id: string) {
? parsed_cfg.show_qr_back
: (template_obj.show_qr_back ?? true);
// Per-field hide toggles
cfg_hide_title = parsed_cfg.hasOwnProperty('hide_title') ? !!parsed_cfg.hide_title : false;
cfg_hide_affiliations = parsed_cfg.hasOwnProperty('hide_affiliations') ? !!parsed_cfg.hide_affiliations : false;
cfg_hide_location = parsed_cfg.hasOwnProperty('hide_location') ? !!parsed_cfg.hide_location : false;
// Alignment overrides (nested under cfg_json.align and cfg_json.qr_alignment)
cfg_align_name = parsed_cfg?.align?.name ?? parsed_cfg.align_name ?? 'center';
cfg_align_title = parsed_cfg?.align?.title ?? parsed_cfg.align_title ?? 'center';
cfg_align_affiliations = parsed_cfg?.align?.affiliations ?? parsed_cfg.align_affiliations ?? 'center';
cfg_align_location = parsed_cfg?.align?.location ?? parsed_cfg.align_location ?? 'center';
cfg_qr_alignment_front = parsed_cfg?.qr_alignment?.front ?? parsed_cfg.qr_alignment_front ?? 'center';
cfg_qr_alignment_back = parsed_cfg?.qr_alignment?.back ?? parsed_cfg.qr_alignment_back ?? 'center';
// Keep top-level fields in sync for backward compatibility
show_qr_front = cfg_show_qr_front;
show_qr_back = cfg_show_qr_back;
@@ -144,6 +168,22 @@ async function handle_submit() {
cfg_obj.show_qr_front = cfg_show_qr_front;
cfg_obj.show_qr_back = cfg_show_qr_back;
// Per-field hide toggles
cfg_obj.hide_title = cfg_hide_title;
cfg_obj.hide_affiliations = cfg_hide_affiliations;
cfg_obj.hide_location = cfg_hide_location;
// Save alignment overrides under nested objects to keep cfg_json organized
cfg_obj.align = cfg_obj.align || {};
cfg_obj.align.name = cfg_align_name;
cfg_obj.align.title = cfg_align_title;
cfg_obj.align.affiliations = cfg_align_affiliations;
cfg_obj.align.location = cfg_align_location;
cfg_obj.qr_alignment = cfg_obj.qr_alignment || {};
cfg_obj.qr_alignment.front = cfg_qr_alignment_front;
cfg_obj.qr_alignment.back = cfg_qr_alignment_back;
const data_to_save: key_val = {
name,
background_image_path,
@@ -302,6 +342,74 @@ function handle_cancel() {
<input type="checkbox" bind:checked={cfg_show_qr_back} class="checkbox" />
<span>Show QR on Back (cfg_json)</span>
</label>
<div class="grid grid-cols-2 gap-2">
<label class="label flex items-center gap-2">
<input type="checkbox" bind:checked={cfg_hide_title} class="checkbox" />
<span>Hide Title</span>
</label>
<label class="label flex items-center gap-2">
<input type="checkbox" bind:checked={cfg_hide_affiliations} class="checkbox" />
<span>Hide Affiliations</span>
</label>
<label class="label flex items-center gap-2">
<input type="checkbox" bind:checked={cfg_hide_location} class="checkbox" />
<span>Hide Location</span>
</label>
<label class="label">
<span>Name Alignment</span>
<select bind:value={cfg_align_name} class="input">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
</label>
<label class="label">
<span>Title Alignment</span>
<select bind:value={cfg_align_title} class="input">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
</label>
<label class="label">
<span>Affiliations Alignment</span>
<select bind:value={cfg_align_affiliations} class="input">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
</label>
<label class="label">
<span>Location Alignment</span>
<select bind:value={cfg_align_location} class="input">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
</label>
<label class="label">
<span>QR Alignment (Front)</span>
<select bind:value={cfg_qr_alignment_front} class="input">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
</label>
<label class="label">
<span>QR Alignment (Back)</span>
<select bind:value={cfg_qr_alignment_back} class="input">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
</label>
</div>
<p class="text-xs text-surface-400 italic">
These values are saved into <code>cfg_json</code>. Existing cfg_json keys are preserved.
</p>