You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.0 KiB
81 lines
2.0 KiB
<script lang="ts">
|
|
import { afterNavigate } from '$app/navigation';
|
|
import { resolve } from '$app/paths';
|
|
import { page } from '$app/state';
|
|
import { busquedaModal } from '$lib/busqueda-modal.svelte';
|
|
import { leerFiltrosBusqueda } from '$lib/busqueda';
|
|
import FormularioBusqueda from './FormularioBusqueda.svelte';
|
|
import Icono from './Icono.svelte';
|
|
|
|
let dialogo = $state<HTMLDialogElement | null>(null);
|
|
const filtros = $derived(
|
|
leerFiltrosBusqueda(
|
|
page.url.pathname === resolve('/buscar') ? page.url.searchParams : new URLSearchParams()
|
|
)
|
|
);
|
|
|
|
afterNavigate(() => busquedaModal.cerrar(false));
|
|
$effect(() => {
|
|
if (!dialogo) return;
|
|
if (busquedaModal.abierto && !dialogo.open) {
|
|
dialogo.showModal();
|
|
dialogo.querySelector<HTMLInputElement>('input[type="search"]')?.focus();
|
|
} else if (!busquedaModal.abierto && dialogo.open) dialogo.close();
|
|
});
|
|
</script>
|
|
|
|
<dialog
|
|
bind:this={dialogo}
|
|
class="modal-screen"
|
|
aria-labelledby="titulo-busqueda-modal"
|
|
aria-describedby="descripcion-busqueda-modal"
|
|
onclose={() => busquedaModal.cerrar()}
|
|
onclick={(evento) => {
|
|
if (evento.target === dialogo) busquedaModal.cerrar();
|
|
}}
|
|
>
|
|
<div class="panel modal-surface">
|
|
<h2 id="titulo-busqueda-modal">Buscar en Senza Paura</h2>
|
|
<p id="descripcion-busqueda-modal">
|
|
Música, historias y recursos. Encuentra lo que buscas en todo el sitio.
|
|
</p>
|
|
{#if busquedaModal.abierto}
|
|
<FormularioBusqueda {filtros} prefijo="busqueda-modal" />
|
|
{/if}
|
|
<button
|
|
type="button"
|
|
class="cerrar modal-close"
|
|
aria-label="Cerrar búsqueda"
|
|
onclick={() => busquedaModal.cerrar()}
|
|
>
|
|
<Icono nombre="cerrar" />
|
|
</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<style>
|
|
.panel {
|
|
max-width: 44rem;
|
|
min-width: 0;
|
|
padding: var(--sp-6);
|
|
}
|
|
h2 {
|
|
margin: 0;
|
|
padding-right: var(--sp-5);
|
|
font-size: var(--fs-xl);
|
|
}
|
|
p {
|
|
margin: var(--sp-3) 0 var(--sp-5);
|
|
max-width: 52ch;
|
|
color: var(--c-text-muted);
|
|
}
|
|
@media (max-width: 34rem) {
|
|
dialog {
|
|
padding: var(--sp-3);
|
|
}
|
|
.panel {
|
|
padding: var(--sp-6) var(--sp-4) var(--sp-4);
|
|
}
|
|
}
|
|
</style>
|