chore(badges): save in-progress changes — background_image_path, cfg_json support, template form TS fix, view boolean fixes
This commit is contained in:
Scott Idem
@@ -185,6 +185,51 @@ let show_badge_back = $derived(
|
||||
!!$lq__event_badge_template_obj?.duplex
|
||||
);
|
||||
|
||||
// Full-badge background image: when set on the template, covers the entire badge_front
|
||||
// with the image (background-size: cover). The header section is suppressed — the
|
||||
// background image already contains the logo/event design. Text content is rendered
|
||||
// on top via z-index. When unset, the normal header_path / logo+text header logic applies.
|
||||
let bg_image_path = $derived(
|
||||
$lq__event_badge_template_obj?.background_image_path ?? null
|
||||
);
|
||||
|
||||
// Parse template cfg_json into an object for per-template flags (hide header/footer, QR)
|
||||
let template_cfg = $derived.by(() => {
|
||||
const raw = $lq__event_badge_template_obj?.cfg_json;
|
||||
if (!raw) return {};
|
||||
try {
|
||||
return typeof raw === 'string' ? JSON.parse(raw) : raw;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
});
|
||||
|
||||
// Visibility / QR flags: cfg_json overrides top-level fields when present.
|
||||
let hide_badge_header = $derived.by(() => {
|
||||
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;
|
||||
});
|
||||
|
||||
let hide_badge_footer = $derived.by(() => {
|
||||
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 || {};
|
||||
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 || {};
|
||||
if (Object.prototype.hasOwnProperty.call(cfg, 'show_qr_back')) return !!cfg.show_qr_back;
|
||||
return $lq__event_badge_template_obj?.show_qr_back ?? true;
|
||||
});
|
||||
|
||||
/**
|
||||
* Layout-aware section heights for Element_fit_text.
|
||||
*
|
||||
@@ -201,14 +246,18 @@ let show_badge_back = $derived(
|
||||
* Flex values: 'around' | 'between' | 'even' | 'center' | 'start' | 'end'
|
||||
* (mapped to space-around, space-between, space-evenly, center, flex-start, flex-end)
|
||||
*
|
||||
* TODO: Move to badge template config (cfg_json) once multi-layout events are needed.
|
||||
* Tune these values with real badge data and a ruler.
|
||||
* Per-template overrides: set cfg_json.fit_heights on the badge template record to
|
||||
* override any subset of these keys without a code deploy. This is especially useful
|
||||
* when background_image_path is set and the default layout heights need tuning to
|
||||
* align the text with the background image's designed zones.
|
||||
* Example cfg_json: { "fit_heights": { "grp_name_title": "1.8in", "name": "1.4in" } }
|
||||
*/
|
||||
let fit_heights = $derived.by(() => {
|
||||
const layout = $lq__event_badge_template_obj?.layout ?? 'badge_4x6_fanfold';
|
||||
let base: Record<string, string>;
|
||||
if (layout === 'badge_3.5x5.5_pvc') {
|
||||
// 3.5" × 5.5" PVC card — single-sided, compact
|
||||
return {
|
||||
base = {
|
||||
grp_name_title: '1.6in',
|
||||
grp_name_title_flex: 'around',
|
||||
name: '1.4in',
|
||||
@@ -220,7 +269,7 @@ let fit_heights = $derived.by(() => {
|
||||
};
|
||||
} else if (layout === 'badge_4x5_fanfold') {
|
||||
// 4" × 5" fanfold — slightly taller, duplex
|
||||
return {
|
||||
base = {
|
||||
grp_name_title: '2.1in',
|
||||
grp_name_title_flex: 'around',
|
||||
name: '1.6in',
|
||||
@@ -232,7 +281,7 @@ let fit_heights = $derived.by(() => {
|
||||
};
|
||||
} else {
|
||||
// Default: badge_4x6_fanfold — 4" × 6", most room
|
||||
return {
|
||||
base = {
|
||||
grp_name_title: '2.5in',
|
||||
grp_name_title_flex: 'around',
|
||||
name: '1.9in',
|
||||
@@ -243,6 +292,22 @@ let fit_heights = $derived.by(() => {
|
||||
location: '0.55in'
|
||||
};
|
||||
}
|
||||
|
||||
// Apply per-template cfg_json overrides so admins can fine-tune text area
|
||||
// heights/flex values via the DB without a code deploy.
|
||||
// cfg_json is stored as a JSON string — parse it before reading fit_heights key.
|
||||
let cfg_overrides: Record<string, any> | null = null;
|
||||
const cfg_raw = $lq__event_badge_template_obj?.cfg_json;
|
||||
if (cfg_raw && typeof cfg_raw === 'string') {
|
||||
try { cfg_overrides = JSON.parse(cfg_raw)?.fit_heights ?? null; } catch { /* ignore invalid JSON */ }
|
||||
} else if (cfg_raw && typeof cfg_raw === 'object') {
|
||||
// Already parsed (future-proof if ever stored as object)
|
||||
cfg_overrides = (cfg_raw as any)?.fit_heights ?? null;
|
||||
}
|
||||
if (cfg_overrides && typeof cfg_overrides === 'object') {
|
||||
return { ...base, ...cfg_overrides };
|
||||
}
|
||||
return base;
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -456,7 +521,9 @@ const code_to_icon: {
|
||||
text-center hover:outline-2 hover:outline-red-500/75
|
||||
hover:outline-dashed
|
||||
"
|
||||
style={demo_bg_style}>
|
||||
style="{bg_image_path
|
||||
? `background-image: url('${bg_image_path}'); background-size: cover; background-position: top center; background-repeat: no-repeat;`
|
||||
: ''}{demo_bg_style ? ` ${demo_bg_style}` : ''}">
|
||||
<span
|
||||
class="
|
||||
absolute top-1 left-4 text-xs
|
||||
@@ -467,9 +534,13 @@ const code_to_icon: {
|
||||
{#if show_badge_back}Front of badge{:else}Badge preview{/if}
|
||||
</span>
|
||||
|
||||
{#if $lq__event_badge_template_obj.header_path}
|
||||
<div
|
||||
class="badge_header
|
||||
<!-- Header: controlled by per-template cfg_json (hide_badge_header).
|
||||
If cfg.hide_badge_header is set, it overrides the default. By default
|
||||
a background image will hide the header unless explicitly overridden. -->
|
||||
{#if !hide_badge_header}
|
||||
{#if $lq__event_badge_template_obj.header_path}
|
||||
<div
|
||||
class="badge_header
|
||||
image
|
||||
m-0
|
||||
max-h-[1.00in]
|
||||
@@ -478,27 +549,28 @@ const code_to_icon: {
|
||||
p-0
|
||||
hover:outline-2 hover:outline-gray-500/75 hover:outline-dashed
|
||||
">
|
||||
<img
|
||||
class="header_image"
|
||||
class:header_full_width={banner_full_width}
|
||||
src={$lq__event_badge_template_obj.header_path}
|
||||
alt="check header path" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="badge_header logo_text">
|
||||
<img
|
||||
class="badge_logo"
|
||||
src={$lq__event_badge_template_obj.logo_path}
|
||||
alt="check badge logo" />
|
||||
<div class="banner_text">
|
||||
<div class="row_one">
|
||||
{@html $lq__event_badge_template_obj.header_row_1}
|
||||
</div>
|
||||
<div class="row_two">
|
||||
{@html $lq__event_badge_template_obj.header_row_2}
|
||||
<img
|
||||
class="header_image"
|
||||
class:header_full_width={banner_full_width}
|
||||
src={$lq__event_badge_template_obj.header_path}
|
||||
alt="check header path" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="badge_header logo_text">
|
||||
<img
|
||||
class="badge_logo"
|
||||
src={$lq__event_badge_template_obj.logo_path}
|
||||
alt="check badge logo" />
|
||||
<div class="banner_text">
|
||||
<div class="row_one">
|
||||
{@html $lq__event_badge_template_obj.header_row_1}
|
||||
</div>
|
||||
<div class="row_two">
|
||||
{@html $lq__event_badge_template_obj.header_row_2}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<div
|
||||
@@ -618,7 +690,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 || $lq__event_badge_template_obj?.show_qr_front}
|
||||
{#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="flex w-full flex-row justify-between">
|
||||
<span class="badge_body_special_left">
|
||||
@@ -638,7 +710,7 @@ const code_to_icon: {
|
||||
>{/if}
|
||||
</span>
|
||||
</div>
|
||||
{#if $lq__event_badge_template_obj?.show_qr_front}
|
||||
{#if use_show_qr_front}
|
||||
{#await qr_data_url}
|
||||
<!-- QR generating — show nothing to avoid layout shift -->
|
||||
{:then result}
|
||||
@@ -654,6 +726,7 @@ const code_to_icon: {
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !hide_badge_footer}
|
||||
<div
|
||||
class="badge_footer
|
||||
{effective_badge_type_code.toLowerCase()}
|
||||
@@ -693,7 +766,9 @@ const code_to_icon: {
|
||||
size="1em" />{/if}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- badge class div end -->
|
||||
</section>
|
||||
@@ -724,9 +799,10 @@ const code_to_icon: {
|
||||
Back of badge
|
||||
</span>
|
||||
|
||||
{#if $lq__event_badge_template_obj.secondary_header_path}
|
||||
<div
|
||||
class="badge_back_header
|
||||
{#if !hide_badge_header}
|
||||
{#if $lq__event_badge_template_obj.secondary_header_path}
|
||||
<div
|
||||
class="badge_back_header
|
||||
image
|
||||
m-0
|
||||
max-h-[1.00in]
|
||||
@@ -734,35 +810,36 @@ const code_to_icon: {
|
||||
p-0
|
||||
hover:outline-2 hover:outline-gray-500/75 hover:outline-dashed
|
||||
">
|
||||
<img
|
||||
class="header_image"
|
||||
class:header_full_width={banner_full_width}
|
||||
src={$lq__event_badge_template_obj.secondary_header_path}
|
||||
alt="check secondary header path" />
|
||||
</div>
|
||||
{:else if $lq__event_badge_template_obj.header_path}
|
||||
<div class="badge_back_header image max-w-xl">
|
||||
<img
|
||||
class="header_image"
|
||||
class:header_full_width={banner_full_width}
|
||||
src={$lq__event_badge_template_obj.header_path}
|
||||
alt="check primary header path" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="badge_back_header logo_text">
|
||||
<img
|
||||
class="badge_logo"
|
||||
src={$lq__event_badge_template_obj.logo_path}
|
||||
alt="check badge logo" />
|
||||
<div class="banner_text">
|
||||
<div class="row_one">
|
||||
{@html $lq__event_badge_template_obj.header_row_1}
|
||||
</div>
|
||||
<div class="row_two">
|
||||
{@html $lq__event_badge_template_obj.header_row_2}
|
||||
<img
|
||||
class="header_image"
|
||||
class:header_full_width={banner_full_width}
|
||||
src={$lq__event_badge_template_obj.secondary_header_path}
|
||||
alt="check secondary header path" />
|
||||
</div>
|
||||
{:else if $lq__event_badge_template_obj.header_path}
|
||||
<div class="badge_back_header image max-w-xl">
|
||||
<img
|
||||
class="header_image"
|
||||
class:header_full_width={banner_full_width}
|
||||
src={$lq__event_badge_template_obj.header_path}
|
||||
alt="check primary header path" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="badge_back_header logo_text">
|
||||
<img
|
||||
class="badge_logo"
|
||||
src={$lq__event_badge_template_obj.logo_path}
|
||||
alt="check badge logo" />
|
||||
<div class="banner_text">
|
||||
<div class="row_one">
|
||||
{@html $lq__event_badge_template_obj.header_row_1}
|
||||
</div>
|
||||
<div class="row_two">
|
||||
{@html $lq__event_badge_template_obj.header_row_2}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<div
|
||||
@@ -903,7 +980,7 @@ const code_to_icon: {
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $lq__event_badge_template_obj.show_qr_back}
|
||||
{#if use_show_qr_back}
|
||||
<div
|
||||
class="person_information qr_badge_id
|
||||
">
|
||||
|
||||
Reference in New Issue
Block a user