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

Fix: system bar hide logic for iframe and menu param overrides (IDAA embed reliability)

Browse Source
This commit is contained in:
Scott Idem
2026-03-25 15:49:41 -04:00
parent fd244720a7
commit 0ad36a74b2
6 changed files with 113 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/app_components/e_app_sys_bar.svelte
View File

@@ -229,6 +229,9 @@ const theme_options = [
OUTER WRAPPER — fixed bottom-right, hidden on print OUTER WRAPPER — fixed bottom-right, hidden on print
Visibility when in iframe is controlled by +layout.svelte (trusted_access gate) Visibility when in iframe is controlled by +layout.svelte (trusted_access gate)
══════════════════════════════════════════════════════════════════════════ --> ══════════════════════════════════════════════════════════════════════════ -->
<!-- {#if disable} -->
<!-- Hidden state: render nothing (not even the bar) -->
<!-- {:else} -->
<div <div
class=" class="
ae_sys_bar ae_sys_bar
@@ -237,6 +240,7 @@ const theme_options = [
flex flex
flex-col items-end gap-1 print:hidden flex-col items-end gap-1 print:hidden
" "
class:d-none={hide}
class:hidden={hide}> class:hidden={hide}>
<!-- ── EXPANDED PANEL ──────────────────────────────────────────────────── --> <!-- ── EXPANDED PANEL ──────────────────────────────────────────────────── -->
{#if expand} {#if expand}
@@ -723,6 +727,10 @@ const theme_options = [
<!-- END: Compact bar --> <!-- END: Compact bar -->
</div> </div>
<!-- {/if} -->
<style> <style>
/* /*
* Strip blue backgrounds and fixed widths from sub-components when * Strip blue backgrounds and fixed widths from sub-components when

0
src/lib/app_components/e_app_sys_menu.svelte → src/lib/app_components/e_app_sys_menu_legacy.svelte
View File

20
src/routes/+layout.svelte
View File

@@ -276,6 +276,8 @@ $effect(() => {
// Iframe Detection // Iframe Detection
let iframe = data.url.searchParams.get('iframe'); let iframe = data.url.searchParams.get('iframe');
// let iframe = $derived(data.url.searchParams.get('iframe'));
if (iframe === 'true') { if (iframe === 'true') {
$ae_loc.iframe = true; $ae_loc.iframe = true;
// Hide the AE system bar by default in iframe embeds — it's nav chrome // Hide the AE system bar by default in iframe embeds — it's nav chrome
@@ -289,10 +291,22 @@ $effect(() => {
// show_menu=true — override to show the AE system bar even inside an iframe. // show_menu=true — override to show the AE system bar even inside an iframe.
// Intended for trusted/admin users who need menu access while testing an embed. // Intended for trusted/admin users who need menu access while testing an embed.
// hide_menu=true — explicitly hide the bar outside of iframe contexts. // hide_menu=true — explicitly hide the bar outside of iframe contexts.
// const menu_override = data.url.searchParams.get('show_menu');
// if (menu_override === 'true') $ae_loc.sys_menu.hide = false;
// else if (data.url.searchParams.get('hide_menu') === 'true')
// $ae_loc.sys_menu.hide = true;
const menu_override = data.url.searchParams.get('show_menu'); const menu_override = data.url.searchParams.get('show_menu');
if (menu_override === 'true') $ae_loc.sys_menu.hide = false; if (menu_override === 'true') {
else if (data.url.searchParams.get('hide_menu') === 'true') $ae_loc.sys_menu.hide = false;
} else if (data.url.searchParams.get('hide_menu') === 'true') {
$ae_loc.sys_menu.hide = true; $ae_loc.sys_menu.hide = true;
} else if (data.url.searchParams.get('iframe') === 'true') {
$ae_loc.sys_menu.hide = true;
} else if (data.url.searchParams.get('iframe') === 'false') {
$ae_loc.sys_menu.hide = false;
}
// console.log('iframe:', $ae_loc.iframe, 'sys_menu.hide:', $ae_loc.sys_menu.hide);
// Theme URL params — ?theme=AE_Firefly_SteelBlue&theme_mode=dark // Theme URL params — ?theme=AE_Firefly_SteelBlue&theme_mode=dark
// Applied once on load, then silently removed from the URL (no history entry). // Applied once on load, then silently removed from the URL (no history entry).
@@ -397,7 +411,7 @@ $effect(() => {
</div> </div>
{/if} {/if}
{#if browser && (!$ae_loc?.iframe || $ae_loc?.trusted_access)} {#if browser && (!$ae_loc?.iframe || $ae_loc?.administrator_access || ($ae_loc?.trusted_access && $ae_loc.edit_mode))}
<!-- print:hidden wrapper: sys/debug menus are fixed overlays — must not appear on printed pages --> <!-- print:hidden wrapper: sys/debug menus are fixed overlays — must not appear on printed pages -->
<div class="print:hidden"> <div class="print:hidden">
<E_app_sys_bar <E_app_sys_bar

1
src/routes/idaa/(idaa)/+layout.svelte
View File

@@ -90,6 +90,7 @@ async function verify_novi_uuid(
api_key: string | null, api_key: string | null,
api_root_url: string api_root_url: string
) { ) {
console.log(`IDAA Layout: Starting Novi UUID verification for ${uuid}...`);
if (!api_key) { if (!api_key) {
// No Novi API key in site config. All-or-nothing means no UUID-based access. // No Novi API key in site config. All-or-nothing means no UUID-based access.
console.warn( console.warn(

1
src/routes/idaa/(idaa)/video_conferences/+page.svelte
View File

@@ -518,6 +518,7 @@ onMount(async () => {
'Jitsi: onMount - fetching user data and initializing Jitsi...' 'Jitsi: onMount - fetching user data and initializing Jitsi...'
); );
} }
// $ae_loc.sys_menu.hide = true;
await fetch_novi_data(); await fetch_novi_data();

170
src/routes/idaa/+layout.svelte
View File

@@ -32,56 +32,56 @@ interface Props {
let { data, children }: Props = $props(); let { data, children }: Props = $props();
function add_activity_log({ // function add_activity_log({
action = 'idaa_root_layout', // action = 'idaa_root_layout',
action_with = 'none' // action_with = 'none'
}: { // }: {
action?: string; // action?: string;
action_with?: string; // action_with?: string;
}) { // }) {
let last_cache_refresh_iso = new Date($ae_loc?.last_cache_refresh); // let last_cache_refresh_iso = new Date($ae_loc?.last_cache_refresh);
let activity_description = ` // let activity_description = `
${$idaa_loc.novi_full_name ?? 'none'} ${$idaa_loc.novi_email ?? 'no-email'} // ${$idaa_loc.novi_full_name ?? 'none'} ${$idaa_loc.novi_email ?? 'no-email'}
allow=${$ae_loc?.allow_access} // allow=${$ae_loc?.allow_access}
last_cache_refresh=${last_cache_refresh_iso.toLocaleString()} // last_cache_refresh=${last_cache_refresh_iso.toLocaleString()}
data_route=${data?.route.toString() ?? 'unknown'} // data_route=${data?.route.toString() ?? 'unknown'}
`; // `;
let data_kv = { // let data_kv = {
external_client_id: data?.route.id, // external_client_id: data?.route.id,
name: `IDAA: ${$idaa_loc.novi_full_name ?? 'none'} ${$idaa_loc.novi_email ?? ''}`, // name: `IDAA: ${$idaa_loc.novi_full_name ?? 'none'} ${$idaa_loc.novi_email ?? ''}`,
description: activity_description ?? null, // description: activity_description ?? null,
object_type: 'idaa', // archive, post, event // object_type: 'idaa', // archive, post, event
// object_id: data?.route, // // object_id: data?.route,
url_root: data?.url.origin, // url_root: data?.url.origin,
// url_full_path: data?.url.href, // // url_full_path: data?.url.href,
url_full_path: data?.url.pathname, // url_full_path: data?.url.pathname,
url_params: data?.url.searchParams.toString(), // url_params: data?.url.searchParams.toString(),
action: action, // action: action,
action_with: action_with ?? 'none', // action_with: action_with ?? 'none',
meta_json: { // meta_json: {
allow_access: $ae_loc?.allow_access, // allow_access: $ae_loc?.allow_access,
last_cache_refresh: $ae_loc?.last_cache_refresh, // last_cache_refresh: $ae_loc?.last_cache_refresh,
last_cache_refresh_iso: last_cache_refresh_iso.toISOString(), // last_cache_refresh_iso: last_cache_refresh_iso.toISOString(),
last_cache_refresh_locale: last_cache_refresh_iso.toLocaleString(), // last_cache_refresh_locale: last_cache_refresh_iso.toLocaleString(),
access_level: $ae_loc?.access_level, // access_level: $ae_loc?.access_level,
iframe: $ae_loc?.iframe // iframe: $ae_loc?.iframe
// site_access_key: $ae_loc?.site_access_key, // // site_access_key: $ae_loc?.site_access_key,
// site_domain_access_key: $ae_loc?.site_domain_access_key, // // site_domain_access_key: $ae_loc?.site_domain_access_key,
// site_domain: $ae_loc?.site_domain, // // site_domain: $ae_loc?.site_domain,
// extra_data: extra_data ?? '', // // extra_data: extra_data ?? '',
// log_lvl: log_lvl, // // log_lvl: log_lvl,
} // }
}; // };
core_func.create_ae_obj__activity_log({ // core_func.create_ae_obj__activity_log({
api_cfg: $ae_api, // api_cfg: $ae_api,
account_id: $ae_loc.account_id, // account_id: $ae_loc.account_id,
data_kv: data_kv, // data_kv: data_kv,
log_lvl: log_lvl // log_lvl: log_lvl
}); // });
} // }
let box: any; let box: any;
let xLeft = $state(0); let xLeft = $state(0);
@@ -184,51 +184,53 @@ afterNavigate(() => {
} }
}); });
let iframe = $derived(data.url.searchParams.get('iframe')); // let iframe = $derived(data.url.searchParams.get('iframe'));
$effect(() => { // $effect(() => {
if (browser && iframe == 'true') { // if (browser && iframe == 'true') {
console.log('Use iframe layout!'); // console.log('Use iframe layout!');
// data_struct['iframe'] = iframe; // // data_struct['iframe'] = iframe;
$ae_loc.iframe = true; // // $ae_loc.iframe = true;
document.getElementsByTagName('html')[0].classList.add('iframe'); // // document.getElementsByTagName('html')[0].classList.add('iframe');
// document.getElementsByTagName('html')[0].classList.remove('dark'); // // document.getElementsByTagName('html')[0].classList.remove('dark');
// document.getElementsByTagName('html')[0].classList.remove('light'); // // document.getElementsByTagName('html')[0].classList.remove('light');
// $ae_loc.app_cfg.show_element__access_type = false; // // $ae_loc.app_cfg.show_element__access_type = false;
// $ae_loc.app_cfg.show_element__cfg = false; // // $ae_loc.app_cfg.show_element__cfg = false;
} else if (browser && iframe == 'false') { // } else if (browser && iframe == 'false') {
// data_struct['iframe'] = false; // // data_struct['iframe'] = false;
$ae_loc.iframe = false; // // $ae_loc.iframe = false;
document.getElementsByTagName('html')[0].classList.remove('iframe'); // // document.getElementsByTagName('html')[0].classList.remove('iframe');
// data_struct['iframe'] = false; // // data_struct['iframe'] = false;
// WHY: The root layout sets sys_menu.hide=true when iframe=true, but never // // WHY: The root layout sets sys_menu.hide=true when iframe=true, but never
// restores it. We restore it here so the system bar reappears when the URL // // restores it. We restore it here so the system bar reappears when the URL
// param is explicitly set to false (e.g. admin toggling embed mode off). // // param is explicitly set to false (e.g. admin toggling embed mode off).
untrack(() => { // untrack(() => {
$ae_loc.sys_menu.hide = false; // $ae_loc.sys_menu.hide = false;
}); // });
} // }
}); // });
// When in iframe mode, the sys bar is hidden by default (it's nav chrome the host page // When in iframe mode, the sys bar is hidden by default (it's nav chrome the host page
// doesn't need). However, trusted admins should still get the menu — they can't update // doesn't need). However, trusted admins should still get the menu — they can't update
// the iframe src to pass show_menu=true, so we watch for trusted_access and unhide it. // the iframe src to pass show_menu=true, so we watch for trusted_access and unhide it.
$effect(() => {
if (browser && $ae_loc.iframe && $ae_loc.trusted_access) { // let show_menu = $derived(data.url.searchParams.get('show_menu'));
// WHY the guard: ae_loc is a tracked dep here (reads above). Writing // $effect(() => {
// $ae_loc.sys_menu.hide re-notifies this effect every run — infinite loop. // if (browser && $ae_loc.iframe && $ae_loc.trusted_access && show_menu === 'true') {
// untrack() does NOT help: it prevents new dep reads but the store still // // WHY the guard: ae_loc is a tracked dep here (reads above). Writing
// notifies already-subscribed effects after the write. // // $ae_loc.sys_menu.hide re-notifies this effect every run — infinite loop.
// The idempotent write guard breaks the cycle: run 2 finds the value // // untrack() does NOT help: it prevents new dep reads but the store still
// already false, skips the write, no further re-queue. // // notifies already-subscribed effects after the write.
if ($ae_loc.sys_menu.hide !== false) { // // The idempotent write guard breaks the cycle: run 2 finds the value
$ae_loc.sys_menu.hide = false; // // already false, skips the write, no further re-queue.
} // if ($ae_loc.sys_menu.hide !== false) {
} // $ae_loc.sys_menu.hide = false;
}); // }
// }
// });
$effect(() => { $effect(() => {
if ( if (