Componentes Interactivos

A menudo, querrá activar componentes interactivos además de cualquier contenido/animación que tenga en una página determinada. Dependiendo de la naturaleza de su extensión, puede querer definir elementos interactivos personalizados o reutilizar o extender los existentes.

All components and utilities from Flarum core and bundled extensions are exported, making them available for reuse in other extensions. Una lista completa está disponible en nuestra documentación de la API.

Alertas

Las alertas son gestionadas por una instancia global de AlertManagerState, a la que se puede acceder a través de app.alerts en los frontends forum y admin. Tiene 3 métodos de acceso público:

• La aplicación app.alerts.show añadirá una nueva alerta, y devolverá una clave que puede ser utilizada posteriormente para descartar esa alerta. Tiene 3 sobrecargas:
  • app.alerts.show(children)
  • app.alerts.show(attrs, children)
  • app.alerts.show(componentClass, attrs, children)
• app.alerts.dismiss(key) desechará una alerta activa con la clave dada, si es que existe.
• app.alerts.clear() descartará todas las alertas.

Normalmente, no necesitará un componente personalizado para las alertas; sin embargo, si lo desea, puede proporcionar uno. Probablemente querrá que herede de flarum/components/Alert.

Los siguientes atrs son útiles para tener en cuenta:

• El attr type aplicará la clase css Alert--{type}. Si la alerta es success, la alerta será verde, si es error, roja, y si está vacía type, amarilla.
• El attr dismiss dictará si se mostrará un botón de desestimación.
• El attr ondismiss se puede utilizar para proporcionar una llamada de retorno que se ejecutará cuando la alerta sea descartada.
• Los componentes proporcionados en el attr controls se mostrarán después de los hijos de la alerta.

Modales

Los modales son gestionados por una instancia global de ModalManagerState, a la que se puede acceder a través de app.modal en los frontends foro y admin. Tiene 2 métodos de acceso público:

• app.modal.show(componentClass, attrs) mostrará un modal usando la clase de componente y los attrs dados. Si se llama mientras un modal ya está abierto, reemplazará el modal actualmente abierto.
• El comando app.modal.close() cerrará el modal si hay uno activo.

A diferencia de las alertas, la mayoría de los modales utilizarán una clase personalizada, heredando flarum/components/Modal. Por ejemplo:

import Modal from 'flarum/components/Modal';

export default class CustomModal extends Modal {
  // Verdadero por defecto, dicta si el modal puede ser descartado haciendo clic en el fondo o en la esquina superior derecha.
  static isDismissible = true;

  className() {
    // Clases CSS personalizadas para aplicar al modal
    return 'custom-modal-class';
  }

  title() {
    // Contenido a mostrar en la barra de título del modal
    return <p>Custom Modal</p>;
  }

  content() {
    // Contenido a mostrar en el cuerpo del modal
    return <p>Hello World!</p>;
  }

  onsubmit() {
    // Si tu modal contiene un formulario, puedes añadir aquí la lógica de procesamiento del mismo.
  }
}

Hay más información sobre los métodos disponibles para anular en nuestra documentación de la API.

Flarum CLI

You can use the CLI to automatically generate a modal:

$ flarum-cli make frontend modal

Composer

Como Flarum es un foro, necesitamos herramientas para que los usuarios puedan crear y editar mensajes y discusiones. Flarum logra esto a través del componente compositor flotante.

El compositor es gestionado por una instancia global de ComposerState, que es accesible a través de app.composer en el frontend de forum. Sus métodos públicos más importantes son:

• app.composer.load(componentClass, attrs) cargará un nuevo tipo de compositor. Si un compositor ya está activo, será reemplazado.
• app.composer.show() mostrará el compositor si está actualmente oculto.
• app.composer.close() cerrará y reiniciará el compositor después de confirmar con el usuario.
• app.composer.hide() cerrará y reiniciará el compositor sin confirmar con el usuario.
• app.composer.bodyMatches(componentClass, attrs) comprobará si el compositor actualmente activo es de un tipo determinado, y si sus atts coinciden con los attrs proporcionados opcionalmente.

The full list of public methods is documented in the API docs linked above.

Debido a que el compositor puede ser utilizado para varias acciones diferentes (iniciar una discusión, editar un mensaje, responder a una discusión, etc.), sus campos pueden variar dependiendo del uso. Esto se hace dividiendo el código para cada uso en una subclase de flarum/components/ComposerBody. Esta clase de componente debe ser proporcionada cuando se carga un compositor.

Editor del Composer

El editor actual es otro componente, flarum/components/TextEditor. Its state can be programatically accessed via an "editor driver", which implements EditorDriverInterface. Está disponible globalmente para el compositor actual a través de app.composer.editor. Tiene una variedad de métodos públicos que permiten a las extensiones insertar y modificar mediante programación el contenido actual, las selecciones y la posición del cursor del editor de texto del compositor activo.