En este artículo vamos a aprender a bindear propiedades boleanas, algo frecuente en el código de los templates de Lit.

En este artículo aprenderemos a crear un componente de carga con una animación CSS, de esos que se usan para representar de manera visual al usuario que la página está esperando por algún proceso, generalmente una llamada al servidor por Ajax. Luego usaremos otro componente donde bindearemos una propiedad boleana para activar o desactivar la animación de carga.

Sintaxis de binding a propiedades boleanas

La verdad es que el objetivo real de este artículo representa algo muy fácil, que se podría explicar en pocas líneas. Nos alargaremos algo más porque lo vamos a ver con nuevos ejemplos de componentes, que nos permitirán practicar más con Lit. Aún así, para los impacientes dejamos aquí la sintaxis del binding a propiedad boleana, de modo que no necesites leer el artículo entero si no quieres.

<input type="text" name="campotexto" ?disabled=${this.disabled}>

Estamos haciendo uso de una propiedad boleana de un elemento nativo del HTML como es un campo input. Para poder usar esa propiedad del elemento input colocamos un interrogante ? delante del nombre del atributo y luego le asignamos el valor de una expresión, que puede ser simplemente el valor de una propiedad del componente.

Animación CSS de carga

En este artículo no interesa tanto cómo hemos preparado la animación CSS que el propio componente en sí, que simplemente la usará para aplicársela al elemento a animar. De hecho te recomendamos otros artículos si quieres aprender a hacer animaciones CSS.

Básicamente para hacer un loader con CSS tienes que crear un CSS que generalmente aplicarás a un elemento mediante una clase (class de CSS). Tenemos un artículo práctico para explicar cómo hacer tu propio loader CSS.

Componente de animación de carga

Este componente lo vamos a desarrollar con una propiedad llamada "active", que se encargará de mantener el estado del elemento. Por supuesto, se tratará de una propiedad boleana.

• Si está activo (active = true) quiere decir que se mostrará la animación de carga
• Si no está activo (active = false) querrá decir que no debe mostrarse ninguna animación

import { LitElement, html, css } from 'lit';

export class DwLoader extends LitElement {
    static styles = [
        css`
            .loader {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 60px;
                height: 50px;
            }
            .loader div {
                width: 12px;
                background: #888;
                animation: loader 1.8s linear infinite;
            }
            .loader div:nth-child(2) {
                animation-delay: -0.25s;
            }
            @keyframes loader {
                0% {
                    height: 12px;
                }
                25% {
                    height: 50px;
                }
                50% {
                    height: 10px;
                }
                75% {
                    height: 25px;
                }
                100% {
                    height: 12px;
                }
            }
        `
    ];

    static properties = {
        active: { type: Boolean }
    }

    render() {
        return html`
            ${this.active
              ? html`
                <div class="loader">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
              `
              : ''
            }
            
        `;
    }
}
customElements.define('dw-loader', DwLoader);

Salvo el CSS, que se explicó en el mencionado artículo de creación de un loader y que no forma parte del objetivo principal de este artículo, todo el código de este componente lo deberías entender perfectamente, porque no estamos usando nada que no se haya explicado ya en el Manual de Lit.

Cómo enviar al componente un valor boleano en el código HTML

A menudo los custom elements que desarrollamos con Lit los podemos usar directamente en una página web, dentro de su código HTML, sin necesidad de cargarlos en un template de Lit, así que vamos a detenernos un instante en remarcar cómo se usan propiedades boleanas desde fuera del componente, en el HTML de la etiqueta.

Así el loader estaría activo y por tanto aparecería la animación. Ten en cuenta que los atributos de propiedades boleanas no se necesitan igualar a ningún valor. Simplemente los colocas o no los colocas.

<dw-loader active></dw-loader>

En el siguiente caso simplemente quitamos el atributo active para que la propiedad boleana del componente tenga el valor false. Así ocurrirá que el loader estaría desactivado y por tanto no veríamos la animación.

<dw-loader></dw-loader>

Cómo activar la animación de carga desde Javascript

Si tenemos un componente de loader en la página que no está activo, podríamos activarlo desde Javascript cuando lo necesitemos. Para ello simplemente habría que asignar el valor true a la propiedad active.

Por ejemplo tenemos este loader con un id para referirnos a él.

<dw-loader id="miLoader"></dw-loader>

Ahora simplemente tenemos que acceder a ese elemento del DOM y cambiar su propiedad active. Como Web Components es en el fondo Javascript nativo, lo hacremos igual que con cualquier elemento HTML nativo de la página.

document.getElementById('miLoader').active = true

Cómo bindear un valor boleano en un template Lit

Bien, ahora vamos a realizar el objetivo final de este artículo que consiste en bindear una propiedad boleana desde un template Lit.

A diferencia de los ejemplos anteriores, en los que estoy usando simplemente un componente, con un HTML, en este caso vamos a usar el componente desde un template de Lit y el valor de "active" será una propiedad del componente.

Para este ejemplo vamos a tener dos componentes.

1. El componente principal, que realizaría la acción de cargar un contenido mediante Ajax. Este componente tendrá su comportamiento de carga normal y cuando la carga comience entonces comenzaría la animación de carga.
2. El componente del loader, que hemos desarrollado al principio del artículo.

Vamos a hacer entonces el componente principal, simulando un comportamiento asíncrono, porque no nos queremos meter en temas de Ajax todavía.

Básicamente en este componente tendremos una propiedad boleana, que además se inicializará a false en el constructor:

static properties = {
  loading: { type: Boolean },
}

constructor() {
  super();
  this.loading = false;
}

El método render() se encargará de mostrar un botón que iniciaría el simulacro de Ajax y el componente dw-loader que acabamos de desarrollar.

render() {
  return html`
    <div>
      <span>
        <button @click="${this.simulate}">Simular Ajax</button>
      </span>
      <dw-loader ?active="${this.loading}"></dw-loader>
    </div>
  `;
}

En el código anterior es donde encontramos la clave de este ejercicio, el binding a una propiedad boleana, que tiene esta sintaxis:

<dw-loader ?active=${this.loading}></dw-loader>

Como puedes ver, la propiedad boleana a la que queremos bindear la propiedad "loading" del componente, viene precedida de un caracter "?" (?active). Este caracter de interrogación es esencial para bindear hacia propiedades boleanas. Básicamente usará la evaluación de una expresión, en este caso ${this.loading}.

• Si la evaluación de la expresión viene siendo positiva, entonces bindeará un true e la propiedad active del componente.
• Si la expresión se evalúa a false entonces bindeará un false a la propiedad boleana active.

Además el template del método render() anterior contenía también un botón que tiene un manejador de evento "click", que simplemente ejecutará este método.

simulate() {
  this.loading = true;
  setTimeout(() => {
    this.loading = false;
  }, 4000);
}

Quiere decir que, cuando se haga click en el botón, se pondrá el valor de this.loading a true y pasados 4 segundos la volveremos a setear a false.

Conclusión

Hemos creado un componente bastante útil, ya que nos permite aplicar una animación CSS para mostrar la carga de elementos de una manera sencilla y altamente reutilizable.

Todavía tenemos algunas futuras modificaciones en el tintero para este componente, sobre todo para lo que respecta a los estilos. Lo veremos más adelante cuando llegue el momento. Pero aún así, tal como lo hemos dejado es un componente que podrías usar a partir de ahora en todos tus proyectos, ya que los web components funcionan en todo lugar donde uses Javascript.

Para acabar dejo aquí un enlace al repo en GitHub donde encontrarás el código del componente y cómo lo hemos usado. Observarás que el componente es un poco diferente a lo que hemos visto en este artículo, ya que hemos incorporado una segunda alternativa de animación CSS, que puedes activar colocando un atributo shape="circle", y que hará que el loader se muestre con círculos en lugar de rectángulos.