Script para calcular la altura máxima entre un conjunto de elementos.
El objetivo de este script es comparar la altura de un conjunto de elementos/nodos en el DOM y obtener la altura que sea mayor, regresando ese valor en forma de variable CSS a cada uno de los elementos/nodos, con el fin de poder lograr una alineación horizontal perfecta (por ejemplo, muchos elementos en un slider, o un grid).
Hequalizer está disponible en NPM con el nombre de hequalizer, se puede instalar con Yarn o NPM:
yarn add hequalizer
npm i hequalizer
Solo se necesita hacer import del modulo y crear una instancia:
import Hequalizer from "hequalizer";
const hequalizer = new Hequalizer(...);
Configuración y propiedades predeterminadas para iniciar el plugin:
No necesita una configuracion determinada en html, solo necesita capturar un array de elementos y pasarlo a la configuracion del plugin. El siguiente ejemplo son las configuraciones predeterminadas, si opta por no pasar ninguna configuracion adicional, solo puede pasar un objeto vacio y las opciones predeterminadas son las que se tomaran.
import Hequalizer from "hequalizer";
const $elements = document.querySelectorAll(".titles");
const hequalizer = new Hequalizer($elements, {
cssVariable: '--height',
columns: "all",
initialIndex: 0,
resizeObserver: true,
classElementToOmit: '',
on: {
init: (data, instance) => {},
afterResize: (data, instance) => {},
afterChanges: (data, instance) => {},
afterUpdate: (data, instance) => {},
afterDestroy: (instance) => {},
},
responsive: {}
});
Lista de todas las parámetros que se pueden configurar:
const hequalizer = new Hequalizer($elements, options);
Array de todos los elementos para revisar su altura.
const $elements = document.querySelectorAll(".titles");
Objeto con todas las opciones posibles. Cada que agregues una opción esta sobrescribe la default.
const options = {
cssVariable: "--height",
...
};
Este campo sirve para colocar la variable la cual tendrá el valor del cálculo de todas las alturas de entre todos los elementos del array. Esta variable se coloca en todos los elementos examinados.
const options = {
cssVariable: "--height",
};
Con este campo se indica el numero de elementos (columnas) por fila en los que se realizarán los calculos, es decir, cada fila tendra cálculos independientes.
const options = {
columns: 3,
};
Si contamos que los elementos a calcular se encuentran en una lista horizontal continua (una sola fila) se puede usar "all" para que calcule todos los elementos independientemente de cuantos hay en total.
const options = {
columns: "all",
};
Este campo ayuda a que el script inicie en determinada posición del array, es decir, que inicie a partir de determinado index, así evitando configurar elementos que estén por detrás de esta posición inicial.
const options = {
initialIndex: 0,
};
Con este campo se puede manipular si se actualizaran los cambios con el resize de la ventana. Si coloca el valor en false, hara que ya no se actualizen los calculos al momento de hacer resize a la ventana.
const options = {
resizeObserver: true,
};
Este parámetro recibe el nombre de la clase que comparten los elementos en el array, es decir, esta clase se usa para saltar aquel elemento que contenga esta clase, así se omite y no es contemplado para checar su altura.
const options = {
classElementToOmit: " ",
};
Dentro de este objeto encontraremos los eventos que existen durante la vida de la instancia.
const options = {
on: {
init: (data, instance) => {},
afterResize: (data, instance) => {},
afterChanges: (data, instance) => {},
afterUpdate: (data, instance) => {},
afterDestroy: (instance) => {},
},
};
Propiedad para configuraciones en responsive, pasamos el breakpoint como "key" y le asignamos un objeto con las propiedades a cambiar. El funcionamiento del responsive es con base a "DesktopFirst".
Solo se pueden actualizar las siguientes propiedades:
- cssVariable
- columns
- initialIndex
- resizeObserver
- classElementToOmit
- on
const options = {
responsive: {
// window.innerWidth <= 834
834: {
columns: 3,
},
// window.innerWidth <= 680
680: {
columns: 2,
},
// window.innerWidth <= 500
500: {
columns: 1,
resizeObserver: false,
}
}
};
Lista de todos las métodos disponibles en la vida de la instancia:
Inicializa la configuración de manera manual. (este método puede usarse si anteriormente se usó el método destroy())
const hequalizer = new Hequalizer($elements, {})
hequalizer.init()
Remueve la configuración hecha por el plugin, remueve las variables css y cancela los eventos enlazados a los elementos. Si pasamos true como parametro, la instancia se destruira del registro y ya no se tendra acceso a ella ni a sus métodos.
Valor predeterminado false.
const hequalizer = new Hequalizer($elements, {})
hequalizer.destroy(false)
Actualiza de manera manual la configuración, esto hará que el evento de afterUpdate() se ejecute.
const hequalizer = new Hequalizer($elements, {})
hequalizer.update()
Eventos disponibles a los que podemos acceder mediante los parametros:
const hequalizer = new Hequalizer($elementsElements, {
// ...
on: {
init: (data, instance) => {},
afterResize: (data, instance) => {},
afterChanges: (data, instance) => {},
afterUpdate: (data, instance) => {},
afterDestroy: (instance) => {},
},
});
Evento lanzado cada vez que se inicia la instancia.
Los parámetros retornan los valores configurados y el objeto de la instancia.
const options = {
// ...
on: {
init: (data, instance) => {
console.log(data, instance);
},
};
})
Evento lanzado después de cada resize.
Los parámetros retornan los valores configurados y el objeto de la instancia.
const options = {
// ...
on: {
afterResize: (data, instance) => {
console.log(data, instance);
},
};
})
Evento lanzado después de un cambio en el DOM sobre los elementos del array.
Los parámetros retornan los valores configurados y el objeto de la instancia.
const options = {
// ...
on: {
afterChanges: (data, instance) => {
console.log(data, instance);
},
};
})
Evento lanzado después de ejecutar el método update() de la instancia.
Los parámetros retornan los valores configurados y el objeto de la instancia.
const options = {
// ...
on: {
afterUpdate: (data, instance) => {
console.log(data, instance);
},
};
})
Evento lanzado después de ejecutar el método destroy() de la instancia.
El parámetro retorna el objeto de la instancia.
const options = {
// ...
on: {
afterDestroy: (data, instance) => {
console.log(data, instance);
},
};
})
Contenido en formato de Slider/Carousel, donde todos los elementos están en una sola fila
Contenido en formato de grid con configuraciones adicionales para el responsive