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; display: none;
} }
.iframe .module_header, .iframe .module_footer{
display: none;
}
/* Remove the background from the body in all cases */ /* Remove the background from the body in all cases */
/* body[data-theme] { */ /* body[data-theme] { */
/* background: none; */ /* 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} bind:open={show_edit}
autoclose={false} autoclose={false}
size="xl" 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 <form

4
src/routes/+layout.svelte
View File

@@ -939,7 +939,7 @@ $effect(() => {
onclick={() => { onclick={() => {
window.location.reload(); 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" title="Reload page to clear some caches and check for updates"
> >
<!-- <span class="fas fa-sync mx-1"></span> --> <!-- <span class="fas fa-sync mx-1"></span> -->
@@ -964,7 +964,7 @@ $effect(() => {
window.location.reload(); 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" title="Reload and clear the page cache"
> >
<!-- <span class="fas fa-sync mx-1"></span> --> <!-- <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(() => { onMount(() => {
console.log('Events - Launcher: +layout.svelte'); console.log('Events - Launcher: +layout.svelte');
// Hide the AppShell shell header (id="shell-header") and footer // Hide the AppShell shell header (id="shell-header") and footer
document.getElementById('shell-header').classList.add('hidden'); // document.getElementById('shell-header').classList.add('hidden');
document.getElementById('shell-footer').classList.add('hidden'); // document.getElementById('shell-footer').classList.add('hidden');
}); });
console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`); 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"> <script lang="ts">
import { run } from 'svelte/legacy'; let log_lvl: number = 2;
// *** Import Svelte specific
import { browser } from '$app/environment'; 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 { 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'; 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.url_origin = data.url.origin;
$ae_loc.params = data.params; $ae_loc.params = data.params;
@@ -123,83 +127,76 @@ if (browser) {
} }
let iframe = data.url.searchParams.get('iframe'); // let iframe = data.url.searchParams.get('iframe');
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');
// document.getElementsByTagName('html')[0].classList.add('light'); // // document.getElementsByTagName('html')[0].classList.add('light');
} // }
run(() => { // $effect(() => {
if ($ae_loc.iframe && $ae_loc.iframe_height && $ae_loc.iframe_height_modal_body) { // if ($ae_loc.iframe && $ae_loc.iframe_height && $ae_loc.iframe_height_modal_body) {
if (log_lvl > 1) { // if (log_lvl > 1) {
console.log('Getting new dimensions for iframe with modal:', $ae_loc.iframe_height, $ae_loc.iframe_height_modal_body); // 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) { // if ($ae_loc.iframe_height > $ae_loc.iframe_height_modal_body) {
iframe_height = $ae_loc.iframe_height; // iframe_height = $ae_loc.iframe_height;
} else { // } else {
iframe_height = $ae_loc.iframe_height_modal_body; // 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) { // if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.header_height) {
iframe_height = iframe_height + $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) { // 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 + $ae_loc.modal_dimensions.footer_height;
} // }
// iframe_height = iframe_height + 50; // Just in case // // iframe_height = iframe_height + 50; // Just in case
} // }
if (log_lvl > 1) { // if (log_lvl > 1) {
console.log(`Suggested new iframe_height with modal: ${iframe_height}`); // console.log(`Suggested new iframe_height with modal: ${iframe_height}`);
} // }
window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels // window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
} else if ($ae_loc.iframe && $ae_loc.iframe_height) { // } else if ($ae_loc.iframe && $ae_loc.iframe_height) {
if (log_lvl > 1) { // if (log_lvl > 1) {
console.log('Suggested new iframe_height:', $ae_loc.iframe_height); // console.log('Suggested new iframe_height:', $ae_loc.iframe_height);
} // }
window.parent.postMessage({'iframe_height': $ae_loc.iframe_height}, "*"); // This should be in pixels // window.parent.postMessage({'iframe_height': $ae_loc.iframe_height}, "*"); // This should be in pixels
} // }
}); // });
</script> </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)))} {#if (browser && ($ae_loc.trusted_access || ($ae_loc.authenticated_access && $idaa_loc.novi_uuid)))}
<div <!-- <div
bind:clientHeight={$ae_loc.iframe_height} bind:clientHeight={$ae_loc.iframe_height}
> > -->
{@render children?.()} {@render children?.()}
</div> <!-- </div> -->
{#if $idaa_loc.novi_uuid} {#if $idaa_loc.novi_uuid}
<span class="text-sm text-gray-500"> <span class="text-sm text-gray-500">
Novi: <span class="fas fa-user m-1"></span> Novi: <span class="fas fa-user m-1"></span>

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

@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
/** @type {import('./$types').LayoutData} */ let log_lvl: number = 2;
let log_lvl: number = 1;
// *** Import Svelte specific // *** Import Svelte specific
import { browser } from '$app/environment'; import { browser } from '$app/environment';
@@ -14,9 +13,9 @@ import {
Satellite Satellite
} from '@lucide/svelte'; } from '@lucide/svelte';
// import { AppBar } from '@skeletonlabs/skeleton-svelte'; // import { AppBar } from '@skeletonlabs/skeleton-svelte';
import type { // import type {
ModalComponent // ModalComponent
} from '@skeletonlabs/skeleton-svelte'; // } from '@skeletonlabs/skeleton-svelte';
// *** Import Aether specific variables and functions // *** 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 { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
import Element_data_store from '$lib/element_data_store_v2.svelte'; import Element_data_store from '$lib/element_data_store_v2.svelte';
const modalRegistry: Record<string, ModalComponent> = { // const modalRegistry: Record<string, ModalComponent> = {
// Set a unique modal ID, then pass the component reference // // Set a unique modal ID, then pass the component reference
// modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj }, // // modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
// modalComponentTwo: { ref: ModalComponentTwo }, // // modalComponentTwo: { ref: ModalComponentTwo },
// ... // // ...
}; // };
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props(); let { data, children }: Props = $props();
@@ -191,10 +197,71 @@ $effect(() => {
// console.log(`$idaa_loc.novi_uuid:`, $idaa_loc.novi_uuid); // 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> </script>
<svelte:head> <svelte:head>
<title>IDAA - {$idaa_loc?.title ?? 'Æ loading...'}</title> <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:head>
<!-- <svelte:window onscroll={handle_on_scroll} /> --> <!-- <svelte:window onscroll={handle_on_scroll} /> -->
@@ -202,6 +269,7 @@ $effect(() => {
<div <div
id="ae_idaa" id="ae_idaa"
bind:clientHeight={$ae_loc.iframe_height}
bind:this={box} bind:this={box}
onscroll={parse_scroll} onscroll={parse_scroll}
class:iframe={$ae_loc?.iframe} class:iframe={$ae_loc?.iframe}
@@ -215,6 +283,7 @@ $effect(() => {
<nav <nav
class=" class="
module_header
submenu submenu
flex flex-row flex-wrap flex flex-row flex-wrap
items-center justify-between items-center justify-between
@@ -247,57 +316,18 @@ $effect(() => {
</span> </span>
</a> </a>
</nav> </nav>
<!-- App Shell -->
<!-- <AppShell
regionPage={($ae_loc?.iframe ? 'iframe' : '')}
slotHeader={($ae_loc?.iframe ? 'iframe' : '')}
slotFooter={($ae_loc?.iframe ? 'iframe' : '')}
> -->
<section <section
class:iframe={$ae_loc?.iframe} class="module_main_content main_content grow px-1 md:px-2 pb-28"
class="main_content grow px-1 md:px-2 pb-28"
> >
<!-- OLD: App Bar --> {@render children?.()}
<!-- <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?.()}
</section> </section>
<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} class:ae_debug={$ae_loc?.debug}
> >