Height Equalizer

HTML

Hypertext Markup Language

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.

HTML on Wikipedia

CSS

Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

CSS on Wikipedia

JavaScript

JavaScript often abbreviated as JS, is a high-level, interpreted programming language.

JavaScript on Wikipedia

WCAG

Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.

WCAG on Wikipedia

HTML

Note: classes and empty divs omitted for simplicity

<section>
        <div>
            <h2 data-equalize-height="container-title-acronymn">HTML</h2>
            <div data-equalize-height="container-title" data-equalize-md-up>
                <p>Hypertext Markup Language</p>
            </div>
            <div data-equalize-height="container-details" data-equalize-md-up>
                <p>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.</p>
            </div>
            <p>Related article:</p>
            <div data-equalize-height="container-links" data-equalize-md-up>
                <a class="anchor:blue" href="">HTML on Wikipedia</a>
            </div>
        </div>
        <div>
            <h2 data-equalize-height="container-title-acronymn">CSS</h2>
            <div data-equalize-height="container-title" data-equalize-md-up>
                <p>Cascading Style Sheets</p>
            </div>
            <div data-equalize-height="container-details" data-equalize-md-up>
                <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.</p>
            </div>
            <p>Related article:</p>
            <div data-equalize-height="container-links" data-equalize-md-up>
                <a class="anchor:blue" href="">CSS on Wikipedia</a>
            </div>
        </div>
        <div>
            <h2 data-equalize-height="container-title-acronymn">JavaScript</h2>
            <div data-equalize-height="container-title" data-equalize-md-up>
                <p></p>
            </div>
            <div data-equalize-height="container-details" data-equalize-md-up>
                <p>JavaScript often abbreviated as JS, is a high-level, interpreted programming language.</p>
            </div>
            <p>Related article:</p>
            <div data-equalize-height="container-links" data-equalize-md-up>
                <a class="anchor:blue" href="">JavaScript on Wikipedia</a>
            </div>
        </div>
        <div>
            <h2 data-equalize-height="container-title-acronymn">WCAG</h2>
            <div data-equalize-height="container-title" data-equalize-md-up>
                <p>Web Content Accessibility Guidelines</p>
            </div>
            <div data-equalize-height="container-details" data-equalize-md-up>
                <p>The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.</p>
            </div>
            <p>Related article:</p>
            <div data-equalize-height="container-links" data-equalize-md-up>
                <a class="anchor:blue" href="">WCAG on Wikipedia</a>
            </div>
        </div>
    </section>

JavaScript

/**
 * Allows the height of various block level HTML elements to be the same by taking the largest height and applying it to all items.
 * This will occur for any item regardless of viewport. To affect medium size and up, see Options.
 *
 * How to use this:
 * Add the attribute 'data-equalize-height="(key)"' to any block level HTML element where key is a value you use to link the items you want to height equalize. All the items with the same 'key' will have the same height.
 *
 * Options:
 * If you only want height equalizing to occur on medium size up, add 'data-equalize-md-up' to the HTML element as well
 * If you only want height equalizing to occur on small size only, add 'data-equalize-sm-only' to the HTML element as well
 */
storm_eagle.module('equalize_heights', () => {
  'use strict';

let self;
  let _data_equal_height_array = [];

/*
   * Sorts items in array from smallest to largest
   */
  let sort_number = (a, b) => {
    return a - b;
  };

/*
   * For each "key", determine the largest height and apply to all items with that key
   */
  let max_height = () => {
    _data_equal_height_array.forEach((index, value) => {
      let _highest = 0;
      let _heights = [];
      document.querySelectorAll(`[data-equalize-height=${index}]`).forEach(el => {
        /* get the height including the padding of an item */
        el.style.height = "auto";
        _heights.push(el.getBoundingClientRect().height);
      });
      _heights = _heights.sort(sort_number).reverse();
      _highest = _heights[0];
      document.querySelectorAll(`[data-equalize-height=${index}]`).forEach(el => {
        el.style.height = `${_highest}px`;
      });
    });
  };

return {
    initialize: () => {
      self = storm_eagle.equalize_heights;
      self.get_data_equal_height_items();
      self.resize_listener();
    },
    ready: () => {
      self.force_resize();
    },
    /*
    * Checks all the items that need to equalize height, and add keys to array
    */
    get_data_equal_height_items: () => {
      document.querySelectorAll('[data-equalize-height]').forEach(el => {
        let newItem = el.dataset['equalizeHeight'];
        if (_data_equal_height_array.indexOf(newItem) < 0) {
         _data_equal_height_array.push(newItem);
        }
      });
    },
    /*
    * Re-evaluate the equalizing of the height when the page loads or is resized
    */
    resize_listener: () => {
      const force_resize = () => {
        return self.force_resize();
      }
      storm_eagle.resize_observer(document.querySelector("body"), force_resize);
    },
    /*
    * Check for any new items to equalize, and then equalize them
    * Do not equalize height for small size if the item contains [data-equalize-md-up] data attribute
    */
    force_resize: () => {
      self.get_data_equal_height_items();
      max_height();
      if (storm_eagle.client.viewport.is_sm_only()) {
        document.querySelectorAll('[data-equalize-height][data-equalize-md-up]').forEach(el => {
          el.style.height = "auto";
        });
      }
      if (storm_eagle.client.viewport.is_md_up()) {
        document.querySelectorAll('[data-equalize-height][data-equalize-sm-only]').forEach(el => {
          el.style.height = "auto";
        });
      }
    }
  };
});