Skip to content

Commit

Permalink
Minor - Equal heights: Improve row detection (exclude hidden elements) (
Browse files Browse the repository at this point in the history 
#9639)

* Equal heights: Improve row detection (exclude hidden elements)

The plugin detects new "virtual" rows by comparing the vertical offsets of each element designated to be equalized. New rows are established when back-to-back elements are detected as having different offsets.

#9589 fixed a bug that prevented it from working properly on deeply-nested elements using the eqht-trgt class. How? By changing how offsets were detected into a calculation representing the viewport's vertical scroll position + each element's top offset relative to the viewport.

The new calculation logic worked fine for visible elements, but not on hidden (display: none;) ones. Why? Because hidden elements don't have a top viewport offset. So inconsistent offsets were getting used when comparing visible elements against hidden ones.

End result was that if a visible element was followed by a hidden one, the plugin would end the current row and establish a new one... even if a subsequent visible element was still on the old row. That caused mismatched equalization and potentially-broken float layouts.

This fixes it by modifying the row detection logic to exclude hidden elements (i.e. anything with an offsetHeight of 0).

Partially addresses #9607.

* Equal heights - PR 9639 - Add test cases examples

---------

* Minor: Equal heights: Improve row detection by excluding hidden elements


Co-authored-by: Pierre Dubois <pierre.dubois@servicecanada.gc.ca>
  • Loading branch information
@EricDunsworth @duboisp
EricDunsworth and duboisp committed Aug 15, 2023
1 parent 43d7cd2 commit 8fd8e09
Show file tree
Hide file tree
Showing 5 changed files with 208 additions and 14 deletions.
5 changes: 5 additions & 0 deletions src/plugins/equalheight/equalheight-en.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,3 +369,8 @@
&lt;/div&gt;</code></pre>
</section>
</section>

<section>
<h2>Special test case examples</h2>
<p><a href="test-case-en.html">Consult the special test case examples webpage</a></p>
</section>
5 changes: 5 additions & 0 deletions src/plugins/equalheight/equalheight-fr.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,3 +369,8 @@
&lt;/div&gt;</code></pre>
</section>
</section>

<section>
<h2>Exemple d'essaie spéciale</h2>
<p><a href="test-case-fr.html">Consulter la page d'exemple d'essaie spéciale</a></p>
</section>
33 changes: 19 additions & 14 deletions src/plugins/equalheight/equalheight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,24 +115,29 @@ var componentName = "wb-eqht",
currentChildTop = currentChild.getBoundingClientRect().top + window.pageYOffset;
currentChildHeight = currentChild.offsetHeight;

if ( currentChildTop !== rowTop ) {
// if the current element is visible...
// note: hidden elements need to be excluded since they have a different top offset than visible ones
if ( currentChildHeight ) {

// as soon as we find an element not on this row (not the same top offset)
// we need to equalize each items in that row to align the next row.
equalize( row, tallestHeight );
// as soon as we find an element not on this row (not the same top offset)...
if ( currentChildTop !== rowTop ) {

// since the elements of the previous row was equalized
// we need to get the new top offset of the current element
currentChildTop = currentChild.getBoundingClientRect().top + window.pageYOffset;
// we need to equalize each item in that row to align the next row
equalize( row, tallestHeight );

// reset the row, rowTop and tallestHeight
row.length = 0;
rowTop = currentChildTop;
tallestHeight = currentChildHeight;
}
// since the elements of the previous row was equalized
// we need to get the new top offset of the current element
currentChildTop = currentChild.getBoundingClientRect().top + window.pageYOffset;

// reset the row, rowTop and tallestHeight
row.length = 0;
rowTop = currentChildTop;
tallestHeight = currentChildHeight;
}

tallestHeight = Math.max( currentChildHeight, tallestHeight );
row.push( $children.eq( j ) );
tallestHeight = Math.max( currentChildHeight, tallestHeight );
row.push( $children.eq( j ) );
}
}

// equalize the last row
Expand Down
89 changes: 89 additions & 0 deletions src/plugins/equalheight/test-case-en.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
---
{
"title": "Equal height - Special test case examples",
"language": "en",
"description": "Test cases to ensure the stability of the equal height plugin.",
"tag": "equalheight",
"parentdir": "equalheight",
"altLangPrefix": "test-case",
"css": ["demo/equalheight"],
"dateModified": "2023-09-15"
}
---

<p>This page is dedicated to special test case to ensure the equal height plugin work as expected</p>

<h2>Row dectection with hidden column</h2>
<p>The following example is to validate and ensure the issue described in <a href="https://github.com/wet-boew/wet-boew/pull/9639">Github PR #9639</a> is fixed.</p>
<div class="row wb-eqht">
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grid 1</h3>
</div>
<div class="panel-body">
<p>Line 1</p>
</div>
</section>
</div>
<div class="col-sm-4" hidden>
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grid 2 (hidden)</h3>
</div>
<div class="panel-body">
<p>Line 1<br>Line 2</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grid 3</h3>
</div>
<div class="panel-body">
<p>Line 1<br>Line 2<br>Line 3</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grid 4</h3>
</div>
<div class="panel-body">
<p>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grid 5</h3>
</div>
<div class="panel-body">
<p>Line 1</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grid 6</h3>
</div>
<div class="panel-body">
<p>Line 1<br>Line 2<br>Line 3</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grid 7</h3>
</div>
<div class="panel-body">
<p>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</p>
</div>
</section>
</div>
</div>
90 changes: 90 additions & 0 deletions src/plugins/equalheight/test-case-fr.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
---
{
"title": "Égalisation des hauteurs - Exemple d'essaie spéciale",
"language": "fr",
"description": "Cas d'utilisation afin de s'assurer de la stabilité du plugiciel égalisation des hauteurs",
"tag": "equalheight",
"parentdir": "equalheight",
"altLangPrefix": "test-case",
"css": ["demo/equalheight"],
"dateModified": "2023-09-15"
}
---

<p>Cette page est dédié à des cas d'essaie spéciale afin de s'assurer que le plugiciel égalisation des hauteurs fonctionne correctement.</p>

<h2>Détection des ligne lorsqu'il y a des colonnes cachées</h2>
<p>The following example is to validate and ensure the issue described in <a href="https://github.com/wet-boew/wet-boew/pull/9639">Github PR #9639</a> is fixed.</p>
<p>L'example suivant est pour valider et de s'assurer que le problème décrit par la requête <a href="https://github.com/wet-boew/wet-boew/pull/9639" hreflang="en">Github #9639</a> est corrigé.</p>
<div class="row wb-eqht">
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grille 1</h3>
</div>
<div class="panel-body">
<p>Ligne 1</p>
</div>
</section>
</div>
<div class="col-sm-4" hidden>
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grille 2 (hidden)</h3>
</div>
<div class="panel-body">
<p>Ligne 1<br>Ligne 2</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grille 3</h3>
</div>
<div class="panel-body">
<p>Ligne 1<br>Ligne 2<br>Ligne 3</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grille 4</h3>
</div>
<div class="panel-body">
<p>Ligne 1<br>Ligne 2<br>Ligne 3<br>Ligne 4<br>Ligne 5</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grille 5</h3>
</div>
<div class="panel-body">
<p>Ligne 1</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grille 6</h3>
</div>
<div class="panel-body">
<p>Ligne 1<br>Ligne 2<br>Ligne 3</p>
</div>
</section>
</div>
<div class="col-sm-4">
<section class="panel panel-default hght-inhrt">
<div class="panel-heading">
<h3 class="panel-title">Grille 7</h3>
</div>
<div class="panel-body">
<p>Ligne 1<br>Ligne 2<br>Ligne 3<br>Ligne 4<br>Ligne 5</p>
</div>
</section>
</div>
</div>

0 comments on commit 8fd8e09

Please sign in to comment.