feat(badges): cfg_json hide toggles for title/affiliations/location; wire renderer
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user