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