npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@morev/equal-heights

v2.0.1

Published

JavaScript plugin allows setting the equal height for different elements.

Downloads

128

Readme

@morev/equal-heights

Stability of "master" branch License: MIT Last commit Release version GitHub Release Date Keywords

JavaScript plugin to make elements the same height across different containers.
In fact, this is a crutch, but it's necessary until we get CSS Subgrid ready.

If you can use CSS Subgrid - use it.
This plugin tries to do literally the same, but, of course, is less performant than browsers can do.

Plugin is written in pure JavaScript, so it can be called "framework agnostic".
There is already a version for Vue 2 and 3 done via directives.

Table of contents

Installation

Using yarn

yarn add @morev/equal-heights

Using npm

npm install @morev/equal-heights

Using pnpm

pnpm add @morev/equal-heights

Usage

import { EqualHeights } from '@morev/equal-heights';

const equalHeights = new EqualHeights({
  /* custom options for all groups of elements (optional) */
});

equalHeights.add([
  { selector: '.some-selector', options: { /* custom options for this group of elements (optional) */ } },
  { selector: '.another-selector' },
]);

Options

Whether only the elements in the same row should have equal height, instead of all the elements in stack.

// Default: true
export type OptionByRows = boolean;

A function to test whether the elements should have the equal height. Accepts the window object as the argument.
Returns a value that coerces to true to set equal height, or to false otherwise.

// Default: () => true
export type OptionIsEnabled = (window: Window) => boolean;

A function to test whether the elements should not have the equal height. Accepts the window object as the argument.
Returns a value that coerces to true to unset equal height, or to false otherwise.

// Default: () => false
export type OptionIsDisabled = (window: Window) => boolean;

Whether to observe resizing of the elements using the ResizeObserver.

// Default: true
export type OptionResizeObserver = boolean;

Whether to observe adding/removing of the elements using the MutationObserver.

// Default: true
export type OptionMutationObserver = boolean;

Common parent element of a given elements.

// Default: document.body
export type OptionMutationObserver = HTMLElement;

Methods

Adds a new group(s) of elements and (optionally) its specific options.

Parameters:

| Name | Type | Description | |--------|--------------------------------------|-------------------------------------------------------------------------------------------------------------------| | input* | string\|string[]\|object\|object[] | Elements selector, an object structured of { selector: string, options?: object }, or an array of such objects. |

Returns:

EqualHeights - The class instance.

Example:

import { EqualHeights } from '@morev/equal-heights';

const equalHeights = new EqualHeights();

equalHeights.add('.selector-one');
equalHeights.add({ selector: '.selector-two', options: { /* custom options (optional) */ } });
equalHeights.add([
  { selector: '.selector-three', options: { /* custom options (optional) */ } },
  { selector: '.selector-four' },
]);

Removes the elements from the stack.

Parameters:

| Name | Type | Description | |-----------|--------------------------|-----------------------------------------------| | selector* | string | Selector of the elements being de-registered. | | parent | HTMLElement\|undefined | Common parent element. |

Returns:

EqualHeights - The class instance.

Example:

import { EqualHeights } from '@morev/equal-heights';

const equalHeights = new EqualHeights();

equalHeights.add([
  { selector: '.some-selector', options: { parent: document.querySelector('.parent-selector') } },
  { selector: '.another-selector' },
]);

// ...

equalHeights.remove('.some-selector', document.querySelector('.parent-selector'));
// only the `.another-selector` elements are being processed now

Returns:

EqualHeights - The class instance.

Example:

import { EqualHeights } from '@morev/equal-heights';

const equalHeights = new EqualHeights();

equalHeights.add([
  { selector: '.some-selector' },
  { selector: '.another-selector' },
]);

// ...

equalHeights.update(); // manually update all the registered elements sizes

Restores the initial state of all the registered elements and removes it from the stack.

Returns:

EqualHeights - The class instance.

Example:

import { EqualHeights } from '@morev/equal-heights';

const equalHeights = new EqualHeights();

equalHeights.add([
  { selector: '.some-selector' },
  { selector: '.another-selector' },
]);

// ...

equalHeights.reset(); // there are no elements being processed now

Vue module

The Vue module (2 and 3 both) distributes in the same package and avaliable via a named export called /vue.

In fact, there are three exports: /vue, /vue2 and /vue3, and main /vue export is dynamical - it mapped to version of Vue used in your project.

Underhood, it utilized the postinstall npm hook.
After installing the package, the script will start to check the installed Vue version and redirect the exports to based on the local Vue version.
If no Vue installation is found, the script will install the version for Vue 3 as default.

It feels pretty robust, but if you're worried about, prefer an explicit named import according to the version you're using.

There are also CLI to switch mapping of main export:
yarn equal-heights-vue-version <version>, where <version> is "2" of "3"

For environments that can't resolve exports field (such as Nuxt 2) just replace import with direct path to file:

import { plugin as EqualHeights } from '@morev/equal-heights/dist/vue.cjs';

Global registration

Vue 2

import Vue from 'vue';
import { plugin as EqualHeights } from '@morev/equal-heights/vue';

Vue.use(EqualHeights);

Vue 3

import { createApp } from 'vue';
import { plugin as EqualHeights } from '@morev/equal-heights/vue';

const app = createApp(App);
app.use(EqualHeights);

Local registration

<template>
  <ul class="list" v-equal-heights="'.item-title'">
    // ...
  </ul>
</template>

<script>
  import { directive as equalHeights } from '@morev/equal-heights/vue';

  export default {
    name: 'some-component',
    directives: { equalHeights },
    // ...
  }
</script>

Examples

Single selector

<template>
  <ul v-equal-heights="'.item-tags'">
    <li v-for="item in items" :key="item.id">
      <div class="item-tags">...</div>
      <img class="item-image" src="..." alt="Product image" />
      <div class="item-title">...</div>
    </li>
  </ul>
</template>

Multiple selectors

<template>
  <ul v-equal-heights="['.item-tags', '.item-title']">
    <li v-for="item in items" :key="item.id">
      <div class="item-tags">...</div>
      <img class="item-image" src="..." alt="Product image" />
      <div class="item-title">...</div>
    </li>
  </ul>
</template>

Custom options

<template>
  <ul
    v-equal-heights="{
      selector: '.item-tags', // May also be an array of strings
      options: {
        isEnabled: (window) => window.innerWidth >= 768,
      }
    }"
  >
    <li v-for="item in items" :key="item.id">
      <div class="item-tags">...</div>
      <img class="item-image" src="..." alt="Product image" />
      <div class="item-title">...</div>
    </li>
  </ul>
</template>

Multiple groups with custom options

<template>
  <ul
    v-equal-heights="[
      {
        selector: '.item-tags', // May also be an array of strings
        options: {
          isEnabled: (window) => window.innerWidth >= 768,
        }
      },
      {
        selector: '.item-title', // May also be an array of strings
        options: {
          isEnabled: (window) => isAligned && window.innerWidth >= 360,
        }
      }
    ]"
  >
    <li v-for="item in items" :key="item.id">
      <div class="item-tags">...</div>
      <img class="item-image" src="..." alt="Product image" />
      <div class="item-title">...</div>
    </li>
  </ul>
</template>