Skip to content

meteora-digital/equalizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

74 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Equalizer

Equalizer is an es6 Class which can be used to easily match the height of multiple elements using names to isolate matching groups.

Note: version 1.0.0 has breaking changes. Please update your code, or lock your version to 0.1.9 to avoid errors

Installation

yarn add @meteora-digital/equalizer
npm i @meteora-digital/equalizer

HTML Usage

<section data-equalize>
  <div data-equalize-watch></div>
  <div data-equalize-watch></div>
</section>
<section data-equalize="selector">
  <div data-equalize-watch="selector"></div>
  <div data-equalize-watch="selector"></div>
</section>
<section data-equalize="selector1, selector2">
  <div data-equalize-watch="selector1">
    <div data-equalize-watch="selector2"></div>
  </div>
  <div data-equalize-watch="selector1">
    <div data-equalize-watch="selector2"></div>
  </div>
</section>
import Equalizer from '@meteora-digital/equalizer';

document.addEventListener('DOMContentLoaded', () => {
    const equalizers = document.querySelectorAll('[data-equalize]');

    for (let index = 0; index < equalizers.length; index++) {
        const container = equalizers[index];

        new Equalizer({
            container,
            identifiers: container.getAttribute('data-equalize'),
            rows: true,
        });
    }
});

Usage

When you create a new Equalizer, you need to pass 3 arguments

Argument Description
container The container is the element that is holding the items we want to resize
identifiers The identifiers is a string of comma separated values that are used to match the elements we want to resize. The identifiers can be a selector, or a comma separated list of selectors. The container will be searched for child elements that have a matching identifier within a data-equalize-watch attribute.
rows The rows is a boolean that determines whether we want to resize the elements in rows or not. If not all elements will be the same height regardless of their position on the page.
throttle The throttle is a number that determines how often the equalizer will check for changes per update(). The default is 0.
debounce The debounce is a number that determines how long the equalizer will wait after the last resize event before updating. The default is 100.
mutations Settings that will be injected into the MutationObserver. The default is { childList: true, subtree: false }
## Events

You can call an `on` method on the Equalizer instance to listen for events.

```es6
equalizer.on('resize', () => {
    console.log('resize');
});
Event Description
resize This event is fired when the Equalizer is resized.
beforeResize This event is fired before the Equalizer is resized
update This event is fired when the Equalizer is updated.
beforeUpdate This event is fired before the Equalizer is updated.

License

MIT

About

keep elements equal heights

Resources

Stars

Watchers

Forks

Packages

No packages published