Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

102
src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
View File

@@ -206,30 +206,94 @@ let template_cfg = $derived.by(() => {
// Visibility / QR flags: cfg_json overrides top-level fields when present.
let hide_badge_header = $derived.by(() => {
const cfg = $template_cfg || {};
const cfg = template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'hide_badge_header')) return !!cfg.hide_badge_header;
// Default: if a background image is present, hide header; otherwise show.
return !!$bg_image_path;
return !!bg_image_path;
});
let hide_badge_footer = $derived.by(() => {
const cfg = $template_cfg || {};
const cfg = template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'hide_badge_footer')) return !!cfg.hide_badge_footer;
return false;
});
let use_show_qr_front = $derived.by(() => {
const cfg = $template_cfg || {};
const cfg = template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'show_qr_front')) return !!cfg.show_qr_front;
return $lq__event_badge_template_obj?.show_qr_front ?? false;
});
let use_show_qr_back = $derived.by(() => {
const cfg = $template_cfg || {};
const cfg = template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'show_qr_back')) return !!cfg.show_qr_back;
return $lq__event_badge_template_obj?.show_qr_back ?? true;
});
// Per-field hide toggles (title, affiliations, location)
let hide_title = $derived.by(() => {
const cfg = template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'hide_title')) return !!cfg.hide_title;
return false;
});
let hide_affiliations = $derived.by(() => {
const cfg = template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'hide_affiliations')) return !!cfg.hide_affiliations;
return false;
});
let hide_location = $derived.by(() => {
const cfg = template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'hide_location')) return !!cfg.hide_location;
return false;
});
// Alignment derived values (defaults to center). Stored under cfg_json.align and cfg_json.qr_alignment.
let align_name = $derived.by(() => {
const cfg = template_cfg || {};
return cfg?.align?.name ?? cfg.align_name ?? 'center';
});
let align_title = $derived.by(() => {
const cfg = template_cfg || {};
return cfg?.align?.title ?? cfg.align_title ?? 'center';
});
let align_affiliations = $derived.by(() => {
const cfg = template_cfg || {};
return cfg?.align?.affiliations ?? cfg.align_affiliations ?? 'center';
});
let align_location = $derived.by(() => {
const cfg = template_cfg || {};
return cfg?.align?.location ?? cfg.align_location ?? 'center';
});
let qr_front_align_css = $derived.by(() => {
const cfg = template_cfg || {};
const val = cfg?.qr_alignment?.front ?? cfg.qr_alignment_front ?? 'center';
const map: Record<string, string> = {
left: 'flex-start',
center: 'center',
right: 'flex-end',
justify: 'stretch'
};
return map[val] ?? 'center';
});
let qr_back_justify = $derived.by(() => {
const cfg = template_cfg || {};
const val = cfg?.qr_alignment?.back ?? cfg.qr_alignment_back ?? 'center';
const map: Record<string, string> = {
left: 'flex-start',
center: 'center',
right: 'flex-end',
justify: 'space-between'
};
return map[val] ?? 'center';
});
/**
* Layout-aware section heights for Element_fit_text.
*
@@ -515,7 +579,7 @@ const code_to_icon: {
w-[4in]
max-w-fit
flex-col
items-stretch justify-between gap-0
items-end justify-end gap-0
overflow-visible
p-0
text-center hover:outline-2 hover:outline-red-500/75
@@ -578,8 +642,8 @@ const code_to_icon: {
m-0
flex grow
flex-col
items-stretch
justify-between overflow-clip
items-center
justify-end overflow-clip
p-0 px-1
">
<!--
@@ -614,7 +678,8 @@ const code_to_icon: {
class="full_name_override"
class:name_pad_short
class:name_pad_mid
class:name_pad_long>
class:name_pad_long
style="text-align: {align_name};">
{#if display_name}
{display_name.trim()}
{:else}
@@ -623,7 +688,7 @@ const code_to_icon: {
</div>
</Element_fit_text>
{#if display_title}
{#if display_title && !hide_title}
<!--
Bounds: min=18 (small italic fine at small sizes)
max=38 (fills badge width for short titles)
@@ -634,12 +699,12 @@ const code_to_icon: {
manual_size={font_size_title ?? null}
height={fit_heights.title}
class="professional_title leading-none italic hover:bg-pink-100/50">
{@html display_title}
<div style="text-align: {align_title};">{@html display_title}</div>
</Element_fit_text>
{/if}
</div>
{#if display_affiliations || display_location}
{#if (display_affiliations && !hide_affiliations) || (display_location && !hide_location)}
<!--
affiliations_location container: explicit height from fit_heights.
flex-col with justify-content distributes affiliations and location.
@@ -655,7 +720,7 @@ const code_to_icon: {
style="height: {fit_heights.grp_aff_loc}; justify-content: {flex_justify(
fit_heights.grp_aff_loc_flex
)}">
{#if display_affiliations}
{#if display_affiliations && !hide_affiliations}
<!--
Bounds: min=18 (multi-line affiliations can be small)
max=40 (fills badge for short org names)
@@ -666,11 +731,11 @@ const code_to_icon: {
manual_size={font_size_affiliations ?? null}
height={fit_heights.affiliations}
class="affiliations leading-none hover:bg-pink-100/50">
{@html display_affiliations}
<div style="text-align: {align_affiliations};">{@html display_affiliations}</div>
</Element_fit_text>
{/if}
{#if display_location}
{#if display_location && !hide_location}
<!--
Bounds: min=18 (long city/country strings)
max=34 (matches title upper bound)
@@ -681,8 +746,7 @@ const code_to_icon: {
manual_size={font_size_location ?? null}
height={fit_heights.location}
class="location leading-none hover:bg-pink-100/50">
<span class="city state_province country"
>{@html display_location}</span>
<div class="city state_province country" style="text-align: {align_location};">{@html display_location}</div>
</Element_fit_text>
{/if}
</div>
@@ -691,7 +755,7 @@ const code_to_icon: {
<!-- Ticket indicators (front) + front QR if template enables it.
ticket_N_code fields drive the Star icons — empty = no indicator. -->
{#if eff_badge?.ticket_1_code || eff_badge?.ticket_2_code || eff_badge?.ticket_3_code || use_show_qr_front}
<div class="special flex w-full flex-col items-center">
<div class="special flex w-full flex-col items-center" style="align-items: {qr_front_align_css};">
<div class="flex w-full flex-row justify-between">
<span class="badge_body_special_left">
{#if eff_badge?.ticket_1_code}<span
@@ -1005,7 +1069,7 @@ const code_to_icon: {
{:then result}
{#if result}
<div
class="qr_badge_id_part_1 flex flex-row items-center justify-between">
class="qr_badge_id_part_1 flex flex-row items-center justify-between" style="justify-content: {qr_back_justify};">
<img
class="qr_code mecard_qr
image

108
src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte
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>