Equal heights: Fix eqht-trgt row detection

[EricDunsworth]

The plugin had trouble detecting new rows when using the eqht-trgt class. That sometimes caused it to think all of its grids were on the same row and make them as tall as possible. That's undesirable and is inconsistent with "regular" implementations of the plugin.

For instance:

• The heights of linearized grid layouts were needlessly increased in smaller views.
• If a plugin container had enough grids to split across multiple rows, every grid's height was derived from the tallest row's tallest grid... as opposed to the current row's tallest grid.

The cause of this behaviour was the offsetTop property:

• Everything worked fine in "regular" equal heights implementations since all the equalized elements always have the same parent. The rowTop and currentChildTop variables that get compared to determine if a new row is starting were based on the offsetTop property. Since everything being compared are direct children of the plugin container, their offsetParents (which offsetTop is derived from) were always the same. So all the offsets in contention used the same baseline.
• eqht-trgt was flawed by comparison. Why? Because the "targeted" equalized elements can have different parents. As a result, the new row comparison logic wasn't always comparing the same "kinds" of offsetTops. If a new row was starting and rowTop + currentChildTop had the same offsetTop relative to their respective offsetParents... the comparison logic would get tricked into thinking everything was still on the same row. So it would treat all equalized elements as belonging to the same row.

This fixes the flaw by replacing offsetTop with a calculation representing each equalized element's top offset at the document-level. So the new row comparison logic should now function the "correct" way all the time.

Screenshots...

• Extra-small view:

  Before	After

• Small view:

  Before	After

[EricDunsworth]

FWIW we recently ran into a situation that could only be handled with eqht-trgt that was affected by this bug. Flexbox and grid CSS were unable to save the day.

Check out this page:
Canada and the Sustainable Development Goals

Somewhere in the middle of the content, there are two side-by-side sections containing headings and media players. The first heading is long (2 lines), whereas the other is super short (1 line).

eqht-trgt was used to equalize the headings to prevent their media players from looking misaligned in larger viewports. But the second heading's min-height wasn't decreasing on mobile... resulting in a large empty space appearing between that heading and its media player.

[duboisp]

Pre-approved upon testing and review

[duboisp]

Reviewed and tested locally,

Work as expected.

[duboisp]

@EricDunsworth have you tried with our pure CSS version of the equal height plugin? It does support the eqht-trgt feature and are more performant as it leverage CSS rather than JS.

[EricDunsworth]

@EricDunsworth have you tried with our pure CSS version of the equal height plugin? It does support the eqht-trgt feature and are more performant as it leverage CSS rather than JS.

@duboisp I finally got around to trying this out in a test page. It mostly-worked... but one of the hght-inhrt class' properties messed up the layout :(.

Here's a simplified code sample:

<div class="row wb-eqht-grd">
	<section class="col-md-6">
		<h4 class="eqht-trgt">Canada’s 2022 National Statement to the United Nations Canada’s 2022 National Statement to the United Nations Canada’s 2022 National Statement to the United Nations Canada’s 2022 National Statement to the United Nations Canada’s 2022 National Statement to the United Nations</h4>
		<p>Content</p>
	</section>
	<section class="col-md-6">
		<h4 class="eqht-trgt">Together|<span lang="fr">Ensemble</span></h4>
		<p>Content</p>
	</section>
</div>

Both H4 headings are using the eqht-trgt class.

The second heading ("Together|Ensemble") is bilingual. Therefore, "Ensemble" was placed within a <span lang="fr"> element.

So far, so good... except the hght-inhrt class' flex-direction: column; property causes the second H4's direct children to be vertically-stacked. So "Together|" and "Ensemble" end up appearing on separate lines.

The only good way I can think of to counteract it would be to backport Bootstrap 4-5's flex-row class into WET and use it alongside the eqht-trgt class.

Thoughts?