Creación de un Modal para Compartir en Facebook con Svelte

¿Cómo se creó el componente de modal en Bootstragram?

Iniciar la creación de un modal en un proyecto como Bootstragram requiere definir una estructura clara en el código. Comenzamos con la identificación del lugar donde se integrará el modal: en la parte superior de la cart. Posteriormente:

• Creamos un archivo modal.svelte donde definimos la estructura del modal.
• Incluimos un div modal y div modal-overlay para generar la capa oscura que enfoca la caja de contenido a mostrar.
• Utilizamos slot para permitir que componentes hijos se integren, permitiendo flexibilidad en el contenido interno.

Para adicionar funcionalidad y estilo:

• Consultamos el documento de estilos existente y aplicamos los necesarios para el modal.

<div class="modal-overlay"></div>

¿Cómo se implementa el componente de compartir?

El componente de compartir es vital para integraciones externas. Para su desarrollo:

1. Se genera el archivo share.svelte donde se define el contenido del modal.
2. Dentro de él, se implementa un encabezado (H2) y un botón que permita cerrar el modal.
3. Integramos un ícono de Font Awesome para Facebook, y mostramos el título "Compartir en Facebook".
4. La lógica para compartir se ejecuta a través de una URL de la API de Facebook, con la posibilidad de personalizarla con el propio URL del proyecto al llegar a la etapa de despliegue.

Para mantener el modal atractivo y funcional:

• Importamos y aplicamos estilos desde el archivo de estilos común.

<div class="modal-header">
  <h2>Compartir</h2>
  <i class="fa fa-times-circle"></i>
</div>

¿Cómo se integra la lógica de acción del modal?

Para mejorar la interacción con el usuario, es crucial integrar el modal al sistema de eventos de la aplicación:

Creación de la lógica de clic

• Se declara una variable booleana isModal inicialmente en false, controlando si el modal se muestra.
• Implementamos la función handleClick para alternar el estado de isModal, permitiendo abrir y cerrar el modal con un clic.

Configuración de los eventos

• Los eventos se definen en el componente que activa el modal. Se detecta un evento de clic en el ícono de compartir (paper plane).
• A través de la declaración de onClick, vinculamos la función handleClick para gestionar la activación del modal.

Importante es destacar el uso de animaciones de transición para añadir un efecto visual atractivo, implementando la transición blur de Svelte. Esto no solo mejora la estética, sino también la experiencia del usuario.

let isModal = false;

function handleClick() {
  isModal = !isModal;
}

¿Cómo se aseguran las mejores prácticas?

Al finalizar la implementación, es crítico revisar todos los aspectos:

• Se asegura que no hay errores tipográficos ni sintácticos.
• Verificar que la apertura y cierre del modal funcionan correctamente.
• El uso de target="_blank" al compartir permite abrir en una nueva ventana, asegurando que el usuario no abandone la aplicación principal.

Finalmente, probamos la integridad de la aplicación, asegurando que los componentes dialoguen correctamente, brindando una experiencia interactiva y fluida al usuario. Esto es un incentivo para continuar explorando y desarrollando habilidades avanzadas de diseño y programación en nuestros proyectos Svelte.