Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Equal heights: Improve row detection (exclude hidden elements) #9639

Merged
merged 2 commits into from
Aug 15, 2023
Merged

Equal heights: Improve row detection (exclude hidden elements) #9639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e44a6ae
Equal heights: Improve row detection (exclude hidden elements)
EricDunsworth Jul 27, 2023
00b0b64
Equal heights - PR 9639 - Add test cases examples
duboisp Aug 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/plugins/equalheight/equalheight-en.hbs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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>