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

Cleaning layout related...

Browse Source
This commit is contained in:
Scott Idem
2025-06-26 15:49:46 -04:00
parent 1f46b51c9a
commit 71b2de27ce
6 changed files with 163 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.css
View File

@@ -549,6 +549,10 @@ html.trusted_access #appShell {
display: none;
}
.iframe .module_header, .iframe .module_footer{
display: none;
}
/* Remove the background from the body in all cases */
/* body[data-theme] { */
/* background: none; */

10
src/lib/element_data_store_v2.svelte
View File

@@ -521,7 +521,15 @@ async function handle_update__data_store(
bind:open={show_edit}
autoclose={false}
size="xl"
class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
placement="top-center"
class="
bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md
relative flex flex-col
mx-auto divide-y
w-full
max-w-6xl
"
>
<form

4
src/routes/+layout.svelte
View File

@@ -939,7 +939,7 @@ $effect(() => {
onclick={() => {
window.location.reload();
}}
class="btn btn-sm m-1 preset-tonal-secondary border border-secondary-500 hover:preset-tonal-warning border border-warning-500 hover:variant-outline-warning text-warning-800 hover:text-warning-900 transition-all"
class="btn btn-sm m-1 preset-tonal-secondary border-secondary-500 hover:preset-tonal-warning border-warning-500 hover:variant-outline-warning text-warning-800 hover:text-warning-900 transition-all"
title="Reload page to clear some caches and check for updates"
>
<!-- <span class="fas fa-sync mx-1"></span> -->
@@ -964,7 +964,7 @@ $effect(() => {
window.location.reload();
}}
class="btn btn-sm m-1 preset-tonal-secondary border border-secondary-500 hover:preset-tonal-warning border border-warning-500 hover:variant-outline-warning text-error-700 hover:text-error-900 transition-all text-wrap"
class="btn btn-sm m-1 preset-tonal-secondary border-secondary-500 hover:preset-tonal-warning border-warning-500 hover:variant-outline-warning text-error-700 hover:text-error-900 transition-all text-wrap"
title="Reload and clear the page cache"
>
<!-- <span class="fas fa-sync mx-1"></span> -->

4
src/routes/events/[event_id]/(launcher)/+layout.svelte
View File

@@ -140,8 +140,8 @@ let ae_promises: key_val = {
onMount(() => {
console.log('Events - Launcher: +layout.svelte');
// Hide the AppShell shell header (id="shell-header") and footer
document.getElementById('shell-header').classList.add('hidden');
document.getElementById('shell-footer').classList.add('hidden');
// document.getElementById('shell-header').classList.add('hidden');
// document.getElementById('shell-footer').classList.add('hidden');
});
console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);

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

@@ -1,18 +1,22 @@
<script lang="ts">
import { run } from 'svelte/legacy';
let log_lvl: number = 2;
// *** Import Svelte specific
import { browser } from '$app/environment';
// *** Import other supporting libraries
// *** Import Aether specific variables and functions
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let log_lvl: number = 0;
let { data, children }: Props = $props();
$ae_loc.url_origin = data.url.origin;
$ae_loc.params = data.params;
@@ -123,83 +127,76 @@ if (browser) {
}
let iframe = data.url.searchParams.get('iframe');
if (browser && iframe == 'true') {
console.log('Use iframe layout!');
// data_struct['iframe'] = iframe;
$ae_loc.iframe = true;
// let iframe = data.url.searchParams.get('iframe');
// if (browser && iframe == 'true') {
// console.log('Use iframe layout!');
// // data_struct['iframe'] = iframe;
// $ae_loc.iframe = true;
document.getElementsByTagName('html')[0].classList.add('iframe');
// document.getElementsByTagName('html')[0].classList.remove('dark');
// document.getElementsByTagName('html')[0].classList.remove('light');
// document.getElementsByTagName('html')[0].classList.add('iframe');
// // document.getElementsByTagName('html')[0].classList.remove('dark');
// // document.getElementsByTagName('html')[0].classList.remove('light');
// $ae_loc.app_cfg.show_element__access_type = false;
// $ae_loc.app_cfg.show_element__cfg = false;
} else if (browser && iframe == 'false') {
// data_struct['iframe'] = false;
$ae_loc.iframe = false;
// // $ae_loc.app_cfg.show_element__access_type = false;
// // $ae_loc.app_cfg.show_element__cfg = false;
// } else if (browser && iframe == 'false') {
// // data_struct['iframe'] = false;
// $ae_loc.iframe = false;
document.getElementsByTagName('html')[0].classList.remove('iframe');
// document.getElementsByTagName('html')[0].classList.add('light');
}
// document.getElementsByTagName('html')[0].classList.remove('iframe');
// // document.getElementsByTagName('html')[0].classList.add('light');
// }
run(() => {
if ($ae_loc.iframe && $ae_loc.iframe_height && $ae_loc.iframe_height_modal_body) {
if (log_lvl > 1) {
console.log('Getting new dimensions for iframe with modal:', $ae_loc.iframe_height, $ae_loc.iframe_height_modal_body);
}
// $effect(() => {
// if ($ae_loc.iframe && $ae_loc.iframe_height && $ae_loc.iframe_height_modal_body) {
// if (log_lvl > 1) {
// console.log('Getting new dimensions for iframe with modal:', $ae_loc.iframe_height, $ae_loc.iframe_height_modal_body);
// }
let iframe_height = 0;
// let iframe_height = 0;
if ($ae_loc.iframe_height > $ae_loc.iframe_height_modal_body) {
iframe_height = $ae_loc.iframe_height;
} else {
iframe_height = $ae_loc.iframe_height_modal_body;
// if ($ae_loc.iframe_height > $ae_loc.iframe_height_modal_body) {
// iframe_height = $ae_loc.iframe_height;
// } else {
// iframe_height = $ae_loc.iframe_height_modal_body;
// console.log($ae_loc.modal_dimensions);
// // console.log($ae_loc.modal_dimensions);
if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.header_height) {
iframe_height = iframe_height + $ae_loc.modal_dimensions.header_height;
}
if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.footer_height) {
iframe_height = iframe_height + $ae_loc.modal_dimensions.footer_height;
}
// iframe_height = iframe_height + 50; // Just in case
}
// if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.header_height) {
// iframe_height = iframe_height + $ae_loc.modal_dimensions.header_height;
// }
// if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.footer_height) {
// iframe_height = iframe_height + $ae_loc.modal_dimensions.footer_height;
// }
// // iframe_height = iframe_height + 50; // Just in case
// }
if (log_lvl > 1) {
console.log(`Suggested new iframe_height with modal: ${iframe_height}`);
}
window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
} else if ($ae_loc.iframe && $ae_loc.iframe_height) {
if (log_lvl > 1) {
console.log('Suggested new iframe_height:', $ae_loc.iframe_height);
}
window.parent.postMessage({'iframe_height': $ae_loc.iframe_height}, "*"); // This should be in pixels
}
});
// if (log_lvl > 1) {
// console.log(`Suggested new iframe_height with modal: ${iframe_height}`);
// }
// window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
// } else if ($ae_loc.iframe && $ae_loc.iframe_height) {
// if (log_lvl > 1) {
// console.log('Suggested new iframe_height:', $ae_loc.iframe_height);
// }
// window.parent.postMessage({'iframe_height': $ae_loc.iframe_height}, "*"); // This should be in pixels
// }
// });
</script>
<svelte:head>
<title>{$ae_loc.title ?? 'Æ loading...'}</title>
{#if $ae_loc.iframe}
<!-- <meta name="robots" content="noindex, nofollow" /> -->
<link href="https://assets-staging.noviams.com/novi-core-assets/css/fontawesome.css" rel="stylesheet" />
<link href="https://assets-staging.noviams.com/novi-core-assets/css/c/idaa/idaa.css" rel="stylesheet" />
{/if}
</svelte:head>
{#if (browser && ($ae_loc.trusted_access || ($ae_loc.authenticated_access && $idaa_loc.novi_uuid)))}
<div
<!-- <div
bind:clientHeight={$ae_loc.iframe_height}
>
> -->
{@render children?.()}
</div>
<!-- </div> -->
{#if $idaa_loc.novi_uuid}
<span class="text-sm text-gray-500">
Novi: <span class="fas fa-user m-1"></span>

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

@@ -1,6 +1,5 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 1;
let log_lvl: number = 2;
// *** Import Svelte specific
import { browser } from '$app/environment';
@@ -14,9 +13,9 @@ import {
Satellite
} from '@lucide/svelte';
// import { AppBar } from '@skeletonlabs/skeleton-svelte';
import type {
ModalComponent
} from '@skeletonlabs/skeleton-svelte';
// import type {
// ModalComponent
// } from '@skeletonlabs/skeleton-svelte';
// *** Import Aether specific variables and functions
@@ -25,12 +24,19 @@ import { core_func } from '$lib/ae_core/ae_core_functions';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
import Element_data_store from '$lib/element_data_store_v2.svelte';
const modalRegistry: Record<string, ModalComponent> = {
// Set a unique modal ID, then pass the component reference
// modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
// modalComponentTwo: { ref: ModalComponentTwo },
// ...
};
// const modalRegistry: Record<string, ModalComponent> = {
// // Set a unique modal ID, then pass the component reference
// // modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
// // modalComponentTwo: { ref: ModalComponentTwo },
// // ...
// };
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
@@ -191,10 +197,71 @@ $effect(() => {
// console.log(`$idaa_loc.novi_uuid:`, $idaa_loc.novi_uuid);
// }
let iframe = data.url.searchParams.get('iframe');
if (browser && iframe == 'true') {
console.log('Use iframe layout!');
// data_struct['iframe'] = iframe;
$ae_loc.iframe = true;
document.getElementsByTagName('html')[0].classList.add('iframe');
// document.getElementsByTagName('html')[0].classList.remove('dark');
// document.getElementsByTagName('html')[0].classList.remove('light');
// $ae_loc.app_cfg.show_element__access_type = false;
// $ae_loc.app_cfg.show_element__cfg = false;
} else if (browser && iframe == 'false') {
// data_struct['iframe'] = false;
$ae_loc.iframe = false;
document.getElementsByTagName('html')[0].classList.remove('iframe');
// document.getElementsByTagName('html')[0].classList.add('light');
}
$effect(() => {
if ($ae_loc.iframe && $ae_loc.iframe_height && $ae_loc.iframe_height_modal_body) {
if (log_lvl > 1) {
console.log('Getting new dimensions for iframe with modal:', $ae_loc.iframe_height, $ae_loc.iframe_height_modal_body);
}
let iframe_height = 0;
if ($ae_loc.iframe_height > $ae_loc.iframe_height_modal_body) {
iframe_height = $ae_loc.iframe_height;
} else {
iframe_height = $ae_loc.iframe_height_modal_body;
// console.log($ae_loc.modal_dimensions);
if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.header_height) {
iframe_height = iframe_height + $ae_loc.modal_dimensions.header_height;
}
if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.footer_height) {
iframe_height = iframe_height + $ae_loc.modal_dimensions.footer_height;
}
// iframe_height = iframe_height + 50; // Just in case
}
if (log_lvl > 1) {
console.log(`Suggested new iframe_height with modal: ${iframe_height}`);
}
window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
} else if ($ae_loc.iframe && $ae_loc.iframe_height) {
if (log_lvl > 1) {
console.log('Suggested new iframe_height:', $ae_loc.iframe_height);
}
window.parent.postMessage({'iframe_height': $ae_loc.iframe_height}, "*"); // This should be in pixels
}
});
</script>
<svelte:head>
<title>IDAA - {$idaa_loc?.title ?? 'Æ loading...'}</title>
{#if $ae_loc.iframe}
<!-- <meta name="robots" content="noindex, nofollow" /> -->
<link href="https://assets-staging.noviams.com/novi-core-assets/css/fontawesome.css" rel="stylesheet" />
<link href="https://assets-staging.noviams.com/novi-core-assets/css/c/idaa/idaa.css" rel="stylesheet" />
{/if}
</svelte:head>
<!-- <svelte:window onscroll={handle_on_scroll} /> -->
@@ -202,6 +269,7 @@ $effect(() => {
<div
id="ae_idaa"
bind:clientHeight={$ae_loc.iframe_height}
bind:this={box}
onscroll={parse_scroll}
class:iframe={$ae_loc?.iframe}
@@ -215,6 +283,7 @@ $effect(() => {
<nav
class="
module_header
submenu
flex flex-row flex-wrap
items-center justify-between
@@ -247,57 +316,18 @@ $effect(() => {
</span>
</a>
</nav>
<!-- App Shell -->
<!-- <AppShell
regionPage={($ae_loc?.iframe ? 'iframe' : '')}
slotHeader={($ae_loc?.iframe ? 'iframe' : '')}
slotFooter={($ae_loc?.iframe ? 'iframe' : '')}
> -->
<section
class:iframe={$ae_loc?.iframe}
class="main_content grow px-1 md:px-2 pb-28"
class="module_main_content main_content grow px-1 md:px-2 pb-28"
>
<!-- OLD: App Bar -->
<!-- <AppBar
gridColumns="grid-cols-3"
slotDefault="place-self-center"
slotTrail="place-content-end"
padding="px-4"
>
<Element_data_store
ds_code="hub__page__appshell_header_lead"
ds_type="html"
/>
<Element_data_store
ds_code="hub__site__appshell_header"
ds_type="html"
/>
<Element_data_store
ds_code="hub__page__appshell_header_trail"
ds_type="html"
/>
</AppBar> -->
<!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
|| ($ae_loc.site_access_key == access_key || $ae_loc.site_domain_access_key == access_key)} -->
<!-- {$ae_loc?.site_access_key ?? '-- site access key not set --'} -->
<!-- {$ae_loc?.site_domain_access_key ?? '-- site domain access key not set --'} -->
<!-- {access_key ?? '-- param key not set --'} -->
<!-- Page Route Content -->
{@render children?.()}
{@render children?.()}
</section>
<section
class="footer_content flex text-sm sm:text-sm lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 py-0.5 min-h-7"
class="module_footer footer_content flex text-sm sm:text-sm lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 py-0.5 min-h-7"
class:ae_debug={$ae_loc?.debug}
>