488 lines
16 KiB
Svelte
488 lines
16 KiB
Svelte
<script lang="ts">
|
|
/** @type {import('./$types').LayoutData} */
|
|
export let data;
|
|
// console.log(`ae_ Svelte root +layout data:`, data);
|
|
|
|
import { onMount } from 'svelte';
|
|
import '../app.postcss';
|
|
|
|
import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
|
|
// Initialize the stores for Drawer, Modal, and Toast so they work throughout the app.
|
|
initializeStores();
|
|
import { Drawer, Modal, getDrawerStore } from '@skeletonlabs/skeleton';
|
|
import type {
|
|
// DrawerSettings, DrawerComponent, DrawerStore,
|
|
ModalSettings, ModalComponent, ModalStore
|
|
} from '@skeletonlabs/skeleton';
|
|
const drawerStore = getDrawerStore();
|
|
|
|
// import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
|
|
|
|
const modalRegistry: Record<string, ModalComponent> = {
|
|
// Set a unique modal ID, then pass the component reference
|
|
// modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
|
|
// modalComponentTwo: { ref: ModalComponentTwo },
|
|
// ...
|
|
};
|
|
|
|
|
|
// Highlight JS
|
|
import hljs from 'highlight.js/lib/core';
|
|
import 'highlight.js/styles/github-dark.css';
|
|
import type { Writable } from 'svelte/store';
|
|
import { get } from 'svelte/store';
|
|
import { page } from "$app/stores";
|
|
import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
|
|
import xml from 'highlight.js/lib/languages/xml'; // for HTML
|
|
import css from 'highlight.js/lib/languages/css';
|
|
import javascript from 'highlight.js/lib/languages/javascript';
|
|
import typescript from 'highlight.js/lib/languages/typescript';
|
|
|
|
hljs.registerLanguage('xml', xml); // for HTML
|
|
hljs.registerLanguage('css', css);
|
|
hljs.registerLanguage('javascript', javascript);
|
|
hljs.registerLanguage('typescript', typescript);
|
|
storeHighlightJs.set(hljs);
|
|
|
|
// Floating UI for Popups
|
|
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
|
|
import { storePopup } from '@skeletonlabs/skeleton';
|
|
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
|
|
|
|
|
|
import { api } from '$lib/api';
|
|
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
|
import { events_loc, events_slct } from '$lib/ae_events_stores';
|
|
import type { key_val } from '$lib/ae_stores';
|
|
// console.log($ae_loc, $ae_sess, $ae_api);
|
|
|
|
import Element_access_type from '$lib/element_access_type.svelte';
|
|
import Element_app_cfg from '$lib/element_app_cfg.svelte';
|
|
import Element_data_store from '$lib/element_data_store.svelte';
|
|
|
|
|
|
if (data.url.searchParams.get('event_id')) {
|
|
$events_slct.event_id = data.url.searchParams.get('event_id');
|
|
$events_loc.event_id = data.url.searchParams.get('event_id');
|
|
} else if (data.ae_loc.site_cfg_json.slct__event_id) {
|
|
$events_slct.event_id = data.ae_loc.site_cfg_json.slct__event_id;
|
|
$events_loc.event_id = data.ae_loc.site_cfg_json.slct__event_id;
|
|
} else if ($events_slct.event_id) {
|
|
console.log(`Event ID already set:`, $events_slct.event_id);
|
|
$events_loc.event_id = $events_slct.event_id;
|
|
} else if (data.ae_loc.default__event_id) {
|
|
$events_slct.event_id = data.ae_loc.default__event_id;
|
|
$events_loc.event_id = data.ae_loc.default__event_id;
|
|
} else {
|
|
console.log(`No Event ID set.`);
|
|
}
|
|
|
|
|
|
onMount(() => {
|
|
console.log('Root: +layout.svelte');
|
|
if ($ae_loc.iframe) {
|
|
console.log('Use iframe layout!');
|
|
|
|
document.getElementsByTagName('html')[0].classList.add('iframe');
|
|
document.getElementsByTagName('html')[0].classList.remove('dark');
|
|
document.getElementsByTagName('html')[0].classList.remove('light');
|
|
|
|
$ae_loc.hub.show_element__access_type = false;
|
|
$ae_loc.hub.show_element__cfg = false;
|
|
} else if ($ae_loc.trusted_access) {
|
|
$ae_loc.hub.show_element__access_type = true;
|
|
$ae_loc.hub.show_element__cfg = true;
|
|
} else {
|
|
$ae_loc.hub.show_element__access_type = true;
|
|
$ae_loc.hub.show_element__cfg = false;
|
|
}
|
|
});
|
|
|
|
|
|
// $ae_loc = data;
|
|
|
|
// const ae_loc_test_store: Writable<string> = localStorageStore('ae_loc_test', {'test': 'This is a test'});
|
|
// // Subscribe to the store
|
|
// ae_loc_test_store.subscribe(() => {});
|
|
|
|
// // Update the value
|
|
// ae_loc_test_store.update(() => {});
|
|
|
|
// // Set the value
|
|
// ae_loc_test_store.set(() => {});
|
|
|
|
// // // Read the value
|
|
// get(ae_loc_test_store);
|
|
|
|
// // // Read value with automatic subscription
|
|
// $ae_loc_test_store
|
|
|
|
let data_store_obj_get_promises: key_val = {};
|
|
// let get_ds_hub_page_access_code_li_json_promise = handle_get_data_store_obj_w_code({code: 'hub__page__access_code_li_json', data_type: 'json', trigger: 'set_access_code_li'});
|
|
// let get_ds_hub_site_header_promise = handle_get_data_store_obj_w_code({code: 'hub_site_header'});
|
|
// let get_ds_hub_site_footer_promise = handle_get_data_store_obj_w_code({code: 'hub_site_footer'});
|
|
|
|
|
|
async function handle_get_data_store_obj_w_code({ code=null, data_type='text', trigger=null }) {
|
|
console.log(`*** handle_get_data_store_obj_w_code() *** code=${code}`);
|
|
|
|
if (!code) {
|
|
console.log('No code provided.');
|
|
return;
|
|
}
|
|
// let get_item_result = window.localStorage.getItem(code);
|
|
// localStorage.getItem(code);
|
|
|
|
// if ($ae_loc_test_store) {
|
|
// $ae_loc.ds[code] = $ae_loc_test_store;
|
|
// } else {
|
|
// console.log('Get local storage item miss.');
|
|
// }
|
|
|
|
data_store_obj_get_promises[code] = api.get_data_store_obj_w_code({
|
|
api_cfg: $ae_api,
|
|
data_store_code: code,
|
|
data_type: data_type,
|
|
log_lvl: 0
|
|
})
|
|
.then(function (get_data_store_result) {
|
|
if (get_data_store_result) {
|
|
|
|
if (data_type == 'text') {
|
|
// console.log(get_data_store_result.text);
|
|
$ae_loc.ds[code] = get_data_store_result.text;
|
|
} else if (data_type == 'json') {
|
|
// console.log(get_data_store_result.json);
|
|
$ae_loc.ds[code] = get_data_store_result.json;
|
|
}
|
|
|
|
// console.log(`Code: ${$ae_loc.ds[code]}`);
|
|
// console.log(`Code:`, $ae_loc.ds[code]);
|
|
|
|
if (trigger) {
|
|
$slct_trigger = trigger;
|
|
}
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
console.log('No results returned or failed.', error);
|
|
});
|
|
}
|
|
|
|
$slct_trigger = 'set_access_code_li';
|
|
$: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_code_li_json']) {
|
|
console.log(`$ae_loc.ds['hub__page__access_code_li_json'] = `, $ae_loc.ds['hub__page__access_code_li_json']);
|
|
$slct_trigger = null; // Reset the trigger to prevent loops
|
|
|
|
$ae_loc.page_access_code_li = $ae_loc.ds['hub__page__access_code_li_json'];
|
|
$ae_loc = $ae_loc; // Trigger Svelte just in case
|
|
console.log($ae_loc);
|
|
}
|
|
|
|
|
|
// let ae_site_domain_obj_get_promise;
|
|
// $slct_trigger = 'lookup_fqdn';
|
|
// $: if ($slct_trigger == 'lookup_fqdn' && data.url.host) {
|
|
// $slct_trigger = null; // Reset the trigger to prevent loops
|
|
// // $ae_loc.url_host = data.url.host; // Use this to look up? sub.example.com:123
|
|
// $ae_loc.fqdn = data.url.host; // Use this to look up? sub.example.com:123
|
|
// // $ae_loc.url_hostname = data.url.hostname; // sub.example.com
|
|
// // $ae_loc.url_origin = data.url.origin; // Use this to look up? https://sub.example.com:123
|
|
// // $ae_loc.site_domain = data.url.origin;
|
|
// console.log(`$ae_loc = `, $ae_loc);
|
|
|
|
// handle_load_ae_obj_id__site_domain({fqdn: $ae_loc.fqdn, try_cache: false});
|
|
// }
|
|
|
|
|
|
// async function handle_load_ae_obj_id__site_domain({fqdn, try_cache=false}) {
|
|
// console.log(`*** handle_load_ae_obj_id__site_domain() *** fqdn=${fqdn}`);
|
|
|
|
// let params = {};
|
|
|
|
// // $ae_loc.hub.site_domain_id_qry_status = 'loading';
|
|
// ae_site_domain_obj_get_promise = api.get_ae_obj_id_crud({
|
|
// api_cfg: $ae_api,
|
|
// no_account_id: true,
|
|
// obj_type: 'site_domain',
|
|
// obj_id: fqdn, // NOTE: This is the FQDN, not normally the ID.
|
|
// use_alt_table: true, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
|
|
// use_alt_base: true, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
|
|
// params: params,
|
|
// log_lvl: 2
|
|
// })
|
|
// .then(function (site_domain_obj_get_result) {
|
|
// if (site_domain_obj_get_result) {
|
|
// $slct.site_domain_obj = site_domain_obj_get_result;
|
|
// console.log(`site_domain object:`, $slct.site_domain_obj);
|
|
|
|
// $ae_loc.account_id = $slct.site_domain_obj.account_id_random;
|
|
// $ae_loc.site_id = $slct.site_domain_obj.site_id_random;
|
|
// $ae_loc.site_domain_id = $slct.site_domain_obj.site_domain_id_random;
|
|
// }
|
|
// })
|
|
// .catch(function (error) {
|
|
// console.log('No results returned or failed.', error);
|
|
// });
|
|
|
|
// return ae_site_domain_obj_get_promise;
|
|
// }
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
<title>{data.ae_loc.title}</title>
|
|
<link rel="stylesheet" href="{data.ae_loc.site_style_href}">
|
|
<!-- <link rel="manifest" href="/manifest.json"> -->
|
|
</svelte:head>
|
|
|
|
|
|
<!-- regionFooter="flex justify-end space-x-2" -->
|
|
|
|
<Modal components={modalRegistry}
|
|
regionBackdrop=''
|
|
regionBody=''
|
|
regionHeader='modal-header card-header text-2xl font-bold'
|
|
regionFooter='modal-footer flex justify-between space-x-2'
|
|
/>
|
|
|
|
|
|
<!-- <Drawer>
|
|
{#if $drawerStore.id === 'example-1'}
|
|
(show 'example-1' contents)
|
|
{:else if $drawerStore.id === 'example-2'}
|
|
(show 'example-2' contents)
|
|
{:else if $drawerStore.id === 'sponsorships__edit'}
|
|
(show 'sponsorships__edit__sponsorship_obj' contents)
|
|
<section class="sponsorships_editing">
|
|
</section>
|
|
{:else}
|
|
(fallback contents)
|
|
{/if}
|
|
</Drawer> -->
|
|
|
|
|
|
<!-- App Shell -->
|
|
<AppShell
|
|
regionPage={($ae_loc.iframe ? 'iframe' : '')}
|
|
slotHeader={($ae_loc.iframe ? 'iframe' : '')}
|
|
slotFooter={($ae_loc.iframe ? 'iframe' : '')}
|
|
>
|
|
|
|
<svelte:fragment slot="header">
|
|
<!-- App Bar -->
|
|
<AppBar
|
|
gridColumns="grid-cols-3"
|
|
slotDefault="place-self-center"
|
|
slotTrail="place-content-end"
|
|
>
|
|
<svelte:fragment slot="lead">
|
|
<Element_data_store
|
|
ds_code="hub__page__appshell_header_lead"
|
|
ds_type="html"
|
|
display="block"
|
|
/>
|
|
<!-- {#if $ae_loc.ds['hub__page__appshell_header_lead']}
|
|
{@html $ae_loc.ds['hub__page__appshell_header_lead']}
|
|
{:else}
|
|
<a href="/" class="btn variant-gradiant-surface text-xl">
|
|
<span class="fas fa-laptop-house mx-1"></span> Æ Home
|
|
</a>
|
|
{/if} -->
|
|
|
|
</svelte:fragment>
|
|
<!-- OSIT's Aether App -->
|
|
<!-- {@html $ae_loc.ds['hub__site__appshell_header']} -->
|
|
<Element_data_store
|
|
ds_code="hub__site__appshell_header"
|
|
ds_type="html"
|
|
display="block"
|
|
/>
|
|
<svelte:fragment slot="trail">
|
|
<Element_data_store
|
|
ds_code="hub__page__appshell_header_trail"
|
|
ds_type="html"
|
|
display="block"
|
|
/>
|
|
<!-- {#if $ae_loc.ds['hub__page__appshell_header_trail']}
|
|
{@html $ae_loc.ds['hub__page__appshell_header_trail']}
|
|
{:else}
|
|
<a
|
|
class="btn btn-sm variant-ghost-surface"
|
|
href="/testing"
|
|
>
|
|
Testing X
|
|
</a>
|
|
|
|
<a
|
|
class="btn btn-sm variant-ghost-surface"
|
|
class:active={$page.url.pathname==='/sponsorships'}
|
|
href="/sponsorships">Sponsorships</a>
|
|
|
|
<a
|
|
class="btn btn-sm variant-ghost-surface"
|
|
class:active={$page.url.pathname==='/events_speakers'}
|
|
href="/events_speakers">Speakers</a>
|
|
|
|
<a
|
|
class="btn btn-sm variant-ghost-surface"
|
|
class:active={$page.url.pathname==='/events_badges'}
|
|
href="/events_badges">Badges</a>
|
|
|
|
<a
|
|
class="btn btn-sm variant-ghost-surface"
|
|
class:active={$page.url.pathname==='/events_leads'}
|
|
href="/events_leads">Leads</a>
|
|
{/if} -->
|
|
</svelte:fragment>
|
|
</AppBar>
|
|
|
|
|
|
<!-- <AppBar>
|
|
<svelte:fragment slot="lead">
|
|
<strong class="text-xl uppercase">Skeleton</strong>
|
|
</svelte:fragment>
|
|
<svelte:fragment slot="trail">
|
|
<a
|
|
class="btn btn-sm variant-ghost-surface"
|
|
href="https://discord.gg/EXqV7W8MtY"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Discord
|
|
</a>
|
|
<a
|
|
class="btn btn-sm variant-ghost-surface"
|
|
href="https://twitter.com/SkeletonUI"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Twitter
|
|
</a>
|
|
<a
|
|
class="btn btn-sm variant-ghost-surface"
|
|
href="https://github.com/skeletonlabs/skeleton"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
GitHub
|
|
</a>
|
|
</svelte:fragment>
|
|
</AppBar> -->
|
|
</svelte:fragment>
|
|
|
|
|
|
<!-- Page Route Content -->
|
|
<slot />
|
|
|
|
|
|
<svelte:fragment slot="footer">
|
|
<div
|
|
class="flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1"
|
|
class:ae_debug={$ae_loc.debug}
|
|
>
|
|
<!-- {@html $ae_loc.ds['hub__site__appshell_footer']} -->
|
|
<Element_data_store
|
|
ds_code="hub__site__appshell_footer"
|
|
ds_type="html"
|
|
display="block"
|
|
class_li="grow flex flex-row justify-between"
|
|
/>
|
|
|
|
<button
|
|
on:click={() => {
|
|
console.log('Debug:', $ae_loc);
|
|
$ae_loc.debug = !$ae_loc.debug;
|
|
}}
|
|
id="AE-Quick-Debug"
|
|
class="ae_quick_debug btn btn-sm variant-glass-surface"
|
|
title="Turn debug content and styles off and on"
|
|
>
|
|
π
|
|
</button>
|
|
</div>
|
|
</svelte:fragment>
|
|
|
|
|
|
</AppShell>
|
|
|
|
|
|
{#if $ae_loc.hub.show_element__access_type}
|
|
<Element_access_type />
|
|
{/if}
|
|
|
|
|
|
<span
|
|
class:hidden={!$ae_loc.hub.show_element__cfg}
|
|
>
|
|
<!-- {#if $ae_loc.hub.show_element__cfg} -->
|
|
<Element_app_cfg set_theme_mode={true} set_theme_name={true} />
|
|
<!-- {/if} -->
|
|
</span>
|
|
|
|
|
|
<style lang="postcss">
|
|
/* BEGIN: AE's Svelte Quick Debug component */
|
|
#AE-Quick-Debug {
|
|
/* position: absolute; */
|
|
position: fixed;
|
|
/* position: relative; */
|
|
/* position: static; */
|
|
/* position: sticky; */
|
|
/* top: 1em; */
|
|
bottom: 0rem;
|
|
right: 0rem;
|
|
|
|
padding: .0rem;
|
|
|
|
/* lightyellow */
|
|
/* background-color: hsla(60,100%,90%,.30); */
|
|
/* background-color: rgba(var(--color-surface-500) / .5); */
|
|
|
|
border: none;
|
|
|
|
border-top: solid thin hsla(0,0%,0%,.25);
|
|
border-left: solid thin hsla(0,0%,0%,.25);
|
|
border-bottom: solid thin hsla(0,0%,0%,.25);
|
|
/* border-top-left-radius: .5em; */
|
|
/* border-bottom-left-radius: .5em; */
|
|
|
|
opacity: .15;
|
|
/* opacity: 1; */
|
|
|
|
font-size: .75rem;
|
|
|
|
z-index: 5;
|
|
|
|
/* NOTE: transition when no longer hovering */
|
|
transition-property: opacity, background-color;
|
|
transition-delay: 1.25s;
|
|
transition-duration: .5s;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
|
|
#AE-Quick-Debug:hover {
|
|
/* lightyellow */
|
|
/* background-color: hsla(60,100%,90%,.95); */
|
|
/* background-color: rgba(var(--color-surface-500) / 1); */
|
|
|
|
border-top: solid thin hsla(0,0%,0%,.95);
|
|
border-left: solid thin hsla(0,0%,0%,.95);
|
|
border-bottom: solid thin hsla(0,0%,0%,.95);
|
|
|
|
opacity: 1;
|
|
|
|
padding: .5rem;
|
|
|
|
font-size: 1.75rem;
|
|
/* Need to zoom 3.5 when hovering */
|
|
/* transform: scale(3.5); */
|
|
|
|
/* NOTE: transition when hover starts */
|
|
transition-property: opacity, background-color;
|
|
transition-delay: .5s;
|
|
transition-duration: .10s;
|
|
transition-timing-function: ease-in;
|
|
}
|
|
</style>
|