Things are looking and working better. Note the Modal size is set to "". This allows it to stretch to the full width of the screen.

This commit is contained in:
Scott Idem
2025-10-13 18:17:32 -04:00
parent 8f7c1bf428
commit 0bc04bf899
5 changed files with 77 additions and 21 deletions

View File

@@ -437,15 +437,13 @@ function handle_ws_recv(ws_recv_status: any) {
// NOTE: This is not finished yet. // NOTE: This is not finished yet.
if (obj_type == 'event_file') { if (obj_type == 'event_file') {
// We are assuming this is for digital posters and needs to be opened in the modal.
$events_sess.launcher.modal__open_event_file_id = null;
clearInterval(idle_timer_interval); clearInterval(idle_timer_interval);
$events_slct.event_file_id = obj_id; $events_slct.event_file_id = obj_id;
$events_sess.launcher.modal__title = $events_sess.launcher.modal__title ?? '*';
let modal_title = null;
if (!modal_title) {
modal_title = '*'; // event_file_obj.filename;
}
$events_sess.launcher.modal__title = modal_title;
$events_sess.launcher.modal__open_event_file_id = $events_slct.event_file_id; $events_sess.launcher.modal__open_event_file_id = $events_slct.event_file_id;
// $events_sess.launcher.modal__event_file_obj = event_file_obj; // $events_sess.launcher.modal__event_file_obj = event_file_obj;
@@ -1105,19 +1103,24 @@ $effect(() => {
<!-- Main modal --> <!-- Main modal -->
<!-- NOTE: The modal size is intentionally set to "". This makes it undefined and allows the modal to be as large as the content. --> <!-- **NOTE:** The modal size is intentionally set to "". This makes it undefined and allows the modal to be as large as the content. **NOTE** -->
<!-- bind:open={$events_sess.launcher.modal__open_event_file_id} --> <!-- title={$events_sess.launcher?.modal__title} -->
<!-- {#if $events_sess.launcher.modal__open_event_file_id} -->
<Modal <Modal
title={$events_sess.launcher?.modal__title}
open={$events_sess.launcher?.modal__open_event_file_id} open={$events_sess.launcher?.modal__open_event_file_id}
autoclose={false} autoclose={false}
placement="top-center"
size="" size=""
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 m-0" class="
dialogClass="fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-0 flex" bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
classHeader="px-1 py-0 md:px-1 md:py-0 absolute top-0 start-0 end-0 bg-gray-200 dark:bg-gray-800 opacity-50 hover:opacity-75" rounded-lg border-gray-200 dark:border-gray-700
bodyClass='p-0 flex-1 overflow-y-auto overscroll-contain' divide-y divide-gray-200 dark:divide-gray-700 shadow-md
classBody="flex flex-col items-center p-0 md:px-0 py-0" relative
flex flex-col
"
bodyClass='p-0 overflow-y-auto overscroll-contain'
headerClass='p-1 md:p-2 flex flex-row items-center justify-between'
footerClass='text-center'
onclose={async () => { onclose={async () => {
$events_sess.launcher.modal__open_event_file_id = null; $events_sess.launcher.modal__open_event_file_id = null;
if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') { if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
@@ -1135,6 +1138,26 @@ $effect(() => {
}} }}
> >
{#snippet header()}
<!-- <div class="flex flex-row items-center justify-between"> -->
<h3 class="text-lg font-semibold">
{$events_sess.launcher?.modal__title ?? 'Digital Poster Display'}
</h3>
<button
type="button"
onclick={() => {
$events_sess.launcher.modal__open_event_file_id = null;
if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
}
}}
title="Close Modal"
>
<span class="fas fa-times m-1"></span>
<span class="hidden ">Close</span>
</button>
<!-- </div> -->
{/snippet}
<!-- <svelte:fragment slot="header"> <!-- <svelte:fragment slot="header">
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<h3 class="text-lg font-semibold"> <h3 class="text-lg font-semibold">
@@ -1156,7 +1179,7 @@ $effect(() => {
<span class="fas fa-times m-1"></span> <span class="fas fa-times m-1"></span>
Close Remote Poster Display Only Close Remote Poster Display Only
</button> </button>
Open: {$ae_api.base_url} {$events_sess.launcher.modal__open_event_file_id} <!-- Open: {$ae_api.base_url} {$events_sess.launcher.modal__open_event_file_id} -->
<!-- /event/file/{$events_slct.event_file_obj.event_file_id_random}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download --> <!-- /event/file/{$events_slct.event_file_obj.event_file_id_random}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download -->
<!-- <span class="aspect-9/16 max-h-96"> --> <!-- <span class="aspect-9/16 max-h-96"> -->
{#if $events_sess.launcher.modal__open_event_file_id} {#if $events_sess.launcher.modal__open_event_file_id}

View File

@@ -60,7 +60,6 @@ import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_ev
import { events_func } from '$lib/ae_events_functions'; import { events_func } from '$lib/ae_events_functions';
import Element_ae_crud from '$lib/element_ae_crud.svelte'; import Element_ae_crud from '$lib/element_ae_crud.svelte';
import { modal } from 'flowbite-svelte';
// *** Functions and Logic // *** Functions and Logic
@@ -384,12 +383,13 @@ async function handle_open_file() {
> >
{#if (screen_saver_exts.includes(event_file_obj.extension))} {#if (screen_saver_exts.includes(event_file_obj.extension))}
<span class="fas fa-chart-bar m-1" class:hidden="{hide_launch_icon}"></span> <span class="fas fa-chart-bar m-1" class:hidden="{hide_launch_icon}"></span>
Open Poster {event_file_id} Open Poster
<!-- {event_file_id} -->
{:else} {:else}
<span class="fas fa-paper-plane m-1" class:hidden="{hide_launch_icon}"></span> <span class="fas fa-paper-plane m-1" class:hidden="{hide_launch_icon}"></span>
{ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})} {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
{/if} {/if}
{$events_sess.launcher.modal__open_event_file_id ?? '-- not set --'} <!-- {$events_sess.launcher.modal__open_event_file_id ?? '-- not set --'} -->
</button> </button>

View File

@@ -85,6 +85,10 @@ let lq__event_file_obj_li = $derived(liveQuery(async () => {
session_type={event_file_obj?.event_session_type_code ?? 'oral'} session_type={event_file_obj?.event_session_type_code ?? 'oral'}
open_method={event_file_obj?.event_session_type_code == 'poster' ? 'modal' : null} open_method={event_file_obj?.event_session_type_code == 'poster' ? 'modal' : null}
modal_title={lq__event_presenter_obj?.event_presentation_name} modal_title={lq__event_presenter_obj?.event_presentation_name}
bind:modal__title={$events_sess.launcher.modal__title}
bind:modal__open_event_file_id={$events_sess.launcher.modal__open_event_file_id}
bind:modal__event_file_obj={$events_sess.launcher.modal__event_file_obj}
/> />
</li> </li>
{/each} {/each}

View File

@@ -2,9 +2,13 @@
interface Props { interface Props {
// export let slct_event_presenter_id: string; // export let slct_event_presenter_id: string;
lq__event_presenter_obj: any; // This is not actually the LiveQuery object. This was pulled from the list of presenters for a presentation. With Svelte 5 this should not matter. lq__event_presenter_obj: any; // This is not actually the LiveQuery object. This was pulled from the list of presenters for a presentation. With Svelte 5 this should not matter.
hide_name?: boolean;
} }
let { lq__event_presenter_obj }: Props = $props(); let {
lq__event_presenter_obj,
hide_name = false
}: Props = $props();
import type { key_val } from '$lib/ae_stores'; import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils'; // import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -39,7 +43,9 @@ let lq__event_file_obj_li = $derived(liveQuery(async () => {
</script> </script>
<strong> <strong
class:hidden={hide_name}
>
{#if lq__event_presenter_obj?.given_name && lq__event_presenter_obj?.given_name != 'Group'} {#if lq__event_presenter_obj?.given_name && lq__event_presenter_obj?.given_name != 'Group'}
<span class="fas fa-user"></span> <span class="fas fa-user"></span>
{lq__event_presenter_obj?.full_name} {lq__event_presenter_obj?.full_name}

View File

@@ -404,9 +404,30 @@ let ae_promises: key_val = $state({});
<span class="event_presentation_name grow">{event_presentation_obj?.name}</span> <span class="event_presentation_name grow">{event_presentation_obj?.name}</span>
<!-- </div> --> <!-- </div> -->
<!-- Yes, this is kind of inefficient, but it works for now. -->
{#if $lq__event_presenter_obj_li}
{#each $lq__event_presenter_obj_li as event_presenter_obj, index}
{#if event_presenter_obj.event_presentation_id_random == event_presentation_obj.event_presentation_id_random}
<span class="event_presentation_single_presenter italic text-sm text-gray-500">
{#if $lq__event_presenter_obj_li[index]?.given_name && $lq__event_presenter_obj_li[index]?.given_name != 'Group'}
<span class="fas fa-user"></span>
{$lq__event_presenter_obj_li[index]?.full_name}
{:else if $lq__event_presenter_obj_li[index]?.given_name == 'Group'}
<span class="fas fa-users"></span>
{$lq__event_presenter_obj_li[index]?.affiliations}
{:else}
--not set--
{/if }
</span>
{/if}
{/each}
{/if}
</div> </div>
<!-- The presenter list --> <!-- The presenter list -->
{#if $lq__event_presenter_obj_li && $lq__event_presenter_obj_li.length} {#if $lq__event_presenter_obj_li && $lq__event_presenter_obj_li.length}
<ul class="event_presentation_presenter_list"> <ul class="event_presentation_presenter_list">
{#each $lq__event_presenter_obj_li as event_presenter_obj, index} {#each $lq__event_presenter_obj_li as event_presenter_obj, index}
@@ -424,12 +445,14 @@ let ae_promises: key_val = $state({});
{#if type_code == 'poster'} {#if type_code == 'poster'}
<Launcher_presenter_view_posters <Launcher_presenter_view_posters
lq__event_presenter_obj={event_presenter_obj} lq__event_presenter_obj={event_presenter_obj}
hide_name={true}
/> />
{:else} {:else}
<Launcher_presenter_view <Launcher_presenter_view
lq__event_presenter_obj={event_presenter_obj} lq__event_presenter_obj={event_presenter_obj}
/> />
{/if} {/if}
<!-- {index} -->
</li> </li>
{/if} {/if}
{/each} {/each}