Plugin para barras de scroll

Cuando creamos una web en la que la apariencia sea tan importante como los contenidos (y, hoy en día, eso es así para casi cualquier web que vayamos a desarrollar), no podemos descuidar ningún detalle. El aspecto visual más ignorado siempre han sido las barras de scroll. Las que pone el navegador por defecto (salvo los navegadores de diseño de Mac) son toscas y feas. Son elementos que apenas han evolucionado mínimamente en su aspecto desde los primeros navegadores gráficos.

Los desarrolladores solemos dejar de lado este elemento, porque la forma habitual de configurarlo es por CSS. Sin embargo, eso da un problema. Los estilos que funcionan en un navegador no funcionan en otro, hay que andar recurriendo a prefijos, los navegadores de la infame serie de Internet Explorer siguen ignorando lo que hacemos, los resultados no son los mismos en Opera que en Chrome o Firefox… La lista de problemas con ese elemento es interminable. La consecuencia lógica es que configurar las barras de scroll con CSS ha quedado relegado a una mera curiosidad experimental pero, en desarrollos reales, se siguen dejando las barras de scroll por defecto de cada navegador.

Afortunadamente, eso ha cambiado. hoy día contamos con un plugin jQuery que nos permite optar por una gran cantidad de barras de scroll personalizadas e, incluso, crear las nuestras propias, y que hace que el resultado sea óptimo en cualquier navegador (evidentemente, en versiones actuales; si tu navegador tiene diez años, raro sería que funcionara, ni esto, ni nada). La página oficial de este plugin es http://manos.malihu.gr/jquery-custom-content-scroller/. Aquí puedes descargarlo e incorporarlo a tus proyectos. La documentación es amplia y detallada. Sin embargo, lo que no te dice la documentación, es como incorporar este plugin a un proyecto Angular. Eso es, exactamente, lo que vamos a aprender en este artículo. Para ello vamos a modficiar la barra de scroll de la lista de miembros de nuestro CRUD. Seguro que, en los anteriores ejemplos, te ha llamado la atención lo fea que quedaba la barra de scroll cuando veías la lista de socios. Parece un pastiche metido ahí a la fuerza, con pegamento. Vamos a ver como integrar este plugin en nuestro proyecto y cambiar totalmente la apariencia de la lista.

INSTALANDO EL PLUGIN

Esta es la parte más laboriosa, ya que requiere de varias tareas, como ocurre siempre que queremos instalar una librería externa en nuestro proyecto Angular. Afortunadamente, sólo la tendremos que llevar a cabo una vez. Lo primero que hacemos es descargarlo e incorporarlo a nuestro proyecto mediante NPM:

npm install ngx-malihu-scrollbar --save

A continuación, por supesto, deberemos referenciar los elementos de esta librería en angular.json, en concreto en las secciones styles y scripts, que ahora nos quedan (con todo lo que ya vamos teniendo instalado) así:

En las líneas resaltadas ves la referenciación del plugin.

Ahora tenemos que hacer una pequeña modificación en un fichero que, hasta ahora, no habíamos tocado. Se llama tsconfig.json, y se encuentra en la raíz del proyecto. Dentro de la clave compilerOptions tenemos que tener una clave llamada types. Si no la tenemos, debemos crearla. El archivo nos quedará así:

En las líneas resaltadas ves como debe quedar referenciado jQuery y el plugin que estamos instalando en este archivo. Con esto, terminamos la instalación de esta herramienta en nuestro proyecto Angular.

USANDO EL PLUGIN

Para usar el plugin lo primero que debemos hacer es importarlo en el módulo (fichero xxxx.module.ts) en el que haya uno o más componentes que vayan a hacer uso del pugin. Lo normal es que, en una aplicación, se personalicen todas las barras de scroll, por lo que, al final, tendrás que importarlo en (casi) todos los módulos. En nuestro ejemplo, como sólo vamos a hacer uso de esta funcionalidad en MembersListComponent, lo importaremos en MembersModule (archivo members.module.ts), que queda así:

Ahora tenemos que ir al componente donde haya una barra (o más de una, llegado el caso), que queramos personalizar. Lo primero que tenemos que hacer, en el controlador, es crear una variables con las opciones de las barras de scroll. Esto lo haremos, en nuestro ejemplo, en members-list.component.ts, así:

Lo normal es que estas opciones sean las mismas para todas las barras de scroll que vayamos a usar, por homogeneizar los elementos de la vista. En caso contrario, tendríamos que crear un conjunto de opciones para usar en cada barra, pero eso no suele hacerse (ni debería). Además, como en la lista de miembros sólo tenemos un elemento que muestre barra de scroll, en este caso ni siquiera tenemos que pensar en ello.

En nuestro caso sólo hemos definido dos opciones (axis y theme). Sin embargo, este plugin nos da muchísimas más, que podríamos usar si lo deseamos. La lista completa la tienes en la página oficial, en el enlace que te he indicado más arriba. Los temas que hay disponibles los encuentras en http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html.

Hay dos formas de emplear las barras de scroll personalizadas. Lo primero que tenemos que hacer es determinar los elementos que incluyen (o pueden incluir) barra de scroll y, por lo tanto, deben verse afectados por este proceso. En nuestro caso sólo es la capa envolvente global de la vista, que tiene la clase container asociada. Podemos hacer que se personalicen las barras de scroll desde el controlador. En ese caso, en el método ngAfterViewInit() deberemos incluir la instrucción para que el plugin afecte al elemento que nos interesa, así:

$('.container').mCustomScrollbar(this.OpcionesDeBarrasDeScroll);

La alternativa es indicarlo en la vista. En ese caso, no incluiremos la instrucción anterior en el controlador. En la vista sustituiremos la línea:

<div class="container">

por:

<div class="container" malihu-scrollbar [scrollbarOptions]="OpcionesDeBarrasDeScroll">

De cualquiera de las dos formas, funcionará. ¿Mi elección?. Si voy a tener en el componente un sólo elemento que pueda verse afectado por barras de scroll, me da lo mismo. Si voy a tener varios (cajas de texto, contenedores, DataTables, etc), lo que haré será añadirle a todos los elementos una clase con un nombre específico (scrollable, por ejemplo), y atacar a esa clase desde el controlador. En el ejemplo que te vas a descargar al final de este artículo, aunque sólo tengo un elemento afectado, he elegido esta última opción.

USO DE LA LIBRERÍA COMO SERVICIO

La librería también puede usarse en el componente inyectándola como un servicio. Para ello, en el constructor del controlador debe añadirse la creación de una variable que represente al servicio, así:

private mScrollbarService: MalihuScrollbarService

El servicio no debemos crearlo nosotros. La librería ya lo incorpora en sí misma. Lo que sí debemos hacer es incluir la importación del mismo en la cabecera del controlador del componente, así:

import { MalihuScrollbarService } from 'ngx-malihu-scrollbar';

ATENCIÓN. El hecho de que importemos el servicio en el controlador del componente no significa que no debamos importar la librería en el módulo (fichero xxxx.module.ts), tal como vimos en el apartado anterior. Esto debemos seguir haciéndolo.

Después, en el método ngAfterViewInit() incluiremos una línea como la siguiente:

this.mScrollbarService.initScrollbar('.scrollable', {axis: 'y', theme: 'rounded-dark'});

El método initScrollBar() es propio del servicio que estamos usando, y recibe dos argumentos. El primero es el selector del elemento o elementos a los que va a afectar. El segundo es la lista de opciones. El problema es que aquí no podemos emplear la variable de opciones que creamos anteriormente, sino que tenemos que detallar las opciones como ves en la línea de ejemplo, o no funcionará. Por esta razón, así como por el aumento de importaciones en el componente, no me gusta el uso como servicio. Como ves en el ejemplo que te dejo para descargar, yo no lo he empleado.

CONCLUYENDO

En este artículo hemos aprendido a incorporar a nuestro proyecto Angular una librería externa que nos permitirá mejorar nuestros diseños, logrando un mayor impacto visual en nuestras aplicaciones. En este enlace tienes la aplicación en su estado actual para descargarla. Analiza el código y verás lo simple que es usar este recurso.

   

Deja un comentario