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.
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);
$events_slct.event_file_id = obj_id;
let modal_title = null;
if (!modal_title) {
modal_title = '*'; // event_file_obj.filename;
}
$events_sess.launcher.modal__title = modal_title;
$events_sess.launcher.modal__title = $events_sess.launcher.modal__title ?? '*';
$events_sess.launcher.modal__open_event_file_id = $events_slct.event_file_id;
// $events_sess.launcher.modal__event_file_obj = event_file_obj;
@@ -1105,19 +1103,24 @@ $effect(() => {
<!-- 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. -->
<!-- bind:open={$events_sess.launcher.modal__open_event_file_id} -->
<!-- {#if $events_sess.launcher.modal__open_event_file_id} -->
<!-- **NOTE:** The modal size is intentionally set to "". This makes it undefined and allows the modal to be as large as the content. **NOTE** -->
<!-- title={$events_sess.launcher?.modal__title} -->
<Modal
title={$events_sess.launcher?.modal__title}
open={$events_sess.launcher?.modal__open_event_file_id}
autoclose={false}
placement="top-center"
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"
dialogClass="fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-0 flex"
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"
bodyClass='p-0 flex-1 overflow-y-auto overscroll-contain'
classBody="flex flex-col items-center p-0 md:px-0 py-0"
class="
bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
rounded-lg border-gray-200 dark:border-gray-700
divide-y divide-gray-200 dark:divide-gray-700 shadow-md
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 () => {
$events_sess.launcher.modal__open_event_file_id = null;
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">
<div class="flex flex-row items-center justify-between">
<h3 class="text-lg font-semibold">
@@ -1156,7 +1179,7 @@ $effect(() => {
<span class="fas fa-times m-1"></span>
Close Remote Poster Display Only
</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 -->
<!-- <span class="aspect-9/16 max-h-96"> -->
{#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 Element_ae_crud from '$lib/element_ae_crud.svelte';
import { modal } from 'flowbite-svelte';
// *** Functions and Logic
@@ -384,12 +383,13 @@ async function handle_open_file() {
>
{#if (screen_saver_exts.includes(event_file_obj.extension))}
<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}
<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})}
{/if}
{$events_sess.launcher.modal__open_event_file_id ?? '-- not set --'}
<!-- {$events_sess.launcher.modal__open_event_file_id ?? '-- not set --'} -->
</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'}
open_method={event_file_obj?.event_session_type_code == 'poster' ? 'modal' : null}
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>
{/each}

View File

@@ -2,9 +2,13 @@
interface Props {
// 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.
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 { ae_util } from '$lib/ae_utils/ae_utils';
@@ -39,7 +43,9 @@ let lq__event_file_obj_li = $derived(liveQuery(async () => {
</script>
<strong>
<strong
class:hidden={hide_name}
>
{#if lq__event_presenter_obj?.given_name && lq__event_presenter_obj?.given_name != 'Group'}
<span class="fas fa-user"></span>
{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>
<!-- </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>
<!-- The presenter list -->
{#if $lq__event_presenter_obj_li && $lq__event_presenter_obj_li.length}
<ul class="event_presentation_presenter_list">
{#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'}
<Launcher_presenter_view_posters
lq__event_presenter_obj={event_presenter_obj}
hide_name={true}
/>
{:else}
<Launcher_presenter_view
lq__event_presenter_obj={event_presenter_obj}
/>
{/if}
<!-- {index} -->
</li>
{/if}
{/each}