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