Skip to content

Commit

Permalink
Refactored code to support buttons only
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrahimMahadi
BrahimMahadi committed May 14, 2024
1 parent 74fd327 commit b39b41b
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 62 deletions.
8 changes: 1 addition & 7 deletions site/pages/docs/ref/paginate/paginate-en.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"categoryfile": "plugins",
"description": "Adds pagination at the bottom of a list of items.",
"altLangPrefix": "paginate",
"dateModified": "2024-04-25"
"dateModified": "2024-05-14"
}
---

Expand Down Expand Up @@ -118,12 +118,6 @@
</dl>
</td>
</tr>
<tr>
<td><code>buttonsUI</code></td>
<td>The pagination will use <code>&lt;button&gt;</code> tags instead of <code>&lt;a&gt;</code> tags.</td>
<td>Boolean</td>
<td><code>true</code></td>
</tr>
</tbody>
</table>
</section>
Expand Down
8 changes: 1 addition & 7 deletions site/pages/docs/ref/paginate/paginate-fr.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"categoryfile": "plugins",
"description": "Ajoute une pagination à la fin d'une liste d'items.",
"altLangPrefix": "paginate",
"dateModified": "2024-04-25"
"dateModified": "2024-05-14"
}
---

Expand Down Expand Up @@ -127,12 +127,6 @@
</dl>
</td>
</tr>
<tr>
<td><code>buttonsUI</code></td>
<td>La pagination utilisera des balises <code>&lt;button&gt;</code> au lieu de balises <code>&lt;a&gt;</code>.</td>
<td>Booléen</td>
<td><code>true</code></td>
</tr>
</tbody>
</table>
</section>
Expand Down
12 changes: 5 additions & 7 deletions src/plugins/paginate/paginate-en.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"tag": "paginate",
"parentdir": "paginate",
"altLangPrefix": "paginate",
"dateModified": "2024-05-07"
"dateModified": "2024-05-14"
}
---

Expand All @@ -28,7 +28,7 @@
<li><a href="#paginatedTable">Example 1 - Table</a></li>
<li><a href="#paginatedArticles">Example 2 - Articles</a></li>
<li><a href="#filteredEventsList">Example 3 - Events list</a></li>
<li><a href="#paginatedList">Example 4 - List with buttons</a></li>
<li><a href="#paginatedList">Example 4 - List</a></li>
</ul>

<section id="paginatedTable">
Expand Down Expand Up @@ -1091,9 +1091,8 @@
</section>

<section id="paginatedList">
<h2>Example 4 - List with buttons</h2>
<ul class="wb-paginate provisional" data-wb-paginate='{
"buttonsUI": true }'>
<h2>Example 4 - List</h2>
<ul class="wb-paginate provisional">
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!</li>
<li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?</li>
<li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.</li>
Expand Down Expand Up @@ -1179,8 +1178,7 @@
</ul>
<details>
<summary>Source code</summary>
<pre><code>&lt;ul class="wb-paginate provisional" data-wb-paginate='{
"buttonsUI": true }'>
<pre><code>&lt;ul class="wb-paginate provisional">
&lt;li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!&lt;/li>
&lt;li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?&lt;/li>
&lt;li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.&lt;/li>
Expand Down
12 changes: 5 additions & 7 deletions src/plugins/paginate/paginate-fr.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"tag": "paginate",
"parentdir": "paginate",
"altLangPrefix": "paginate",
"dateModified": "2024-05-07"
"dateModified": "2024-05-14"
}
---

Expand All @@ -25,7 +25,7 @@
<li><a href="#paginatedTable">Exemple 1 - Tableau</a></li>
<li><a href="#paginatedArticles">Exemple 2 - Articles</a></li>
<li><a href="#filteredEventsList">Exemple 3 - Liste d'événements</a></li>
<li><a href="#paginatedList">Exemple 4 - Liste avec des boutons</a></li>
<li><a href="#paginatedList">Exemple 4 - Liste</a></li>
</ul>

<section id="paginatedTable">
Expand Down Expand Up @@ -1083,9 +1083,8 @@
</section>

<section id="paginatedList">
<h2>Exemple 4 - Liste avec des boutons</h2>
<ul class="wb-paginate provisional" data-wb-paginate='{
"buttonsUI": true }'>
<h2>Exemple 4 - Liste</h2>
<ul class="wb-paginate provisional">
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!</li>
<li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?</li>
<li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.</li>
Expand Down Expand Up @@ -1171,8 +1170,7 @@
</ul>
<details>
<summary>Code source</summary>
<pre><code>&lt;ul class="wb-paginate provisional" data-wb-paginate='{
"buttonsUI": true }'>
<pre><code>&lt;ul class="wb-paginate provisional">
&lt;li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, at!&lt;/li>
&lt;li>Soluta maiores deserunt fugit dolorum ratione cum necessitatibus dolore ipsum?&lt;/li>
&lt;li>Libero debitis dicta porro modi nobis odit labore dolor eveniet.&lt;/li>
Expand Down
40 changes: 6 additions & 34 deletions src/plugins/paginate/paginate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,6 @@ const componentName = "wb-paginate",
elm.pgSettings.itemsPerPage = elm.pgSettings.itemsPerPage || defaults.itemsPerPage;
elm.pgSettings.items = elm.querySelectorAll( ( elm.pgSettings.section || ":scope" ) + " " + elm.pgSettings.selector + notFilterClassSel );

// elm.pgSettings.buttonsUI = true;

// Setup pagination container
paginationElm = document.createElement( "div" );
paginationElm.id = componentName + "-" + elm.id;
Expand Down Expand Up @@ -105,7 +103,6 @@ const componentName = "wb-paginate",
currPage = elm.pgSettings.currPage,
pagesCount = elm.pgSettings.pagesCount,
paginationElm = document.querySelector( "#" + componentName + "-" + elm.id ),
buttonsUI = elm.pgSettings.buttonsUI,
i = 1;

// Make sure the defined current page is not bigger than the total pages
Expand All @@ -120,14 +117,7 @@ const componentName = "wb-paginate",
// Add Previous page button
var prevLI = "";
prevLI += "<li" + ( i === currPage ? " class=\"disabled\"" : "" ) + ">";

if ( buttonsUI ) {
prevLI += "<button type=\"button\" class=\"paginate-prev\" aria-controls=\"" + elm.id + "\"><span class=\"wb-inv\">Page </span>" + i18nText.prv + "</button>";

} else {
prevLI += "<a class=\"paginate-prev\" aria-controls=\"" + elm.id + "\" href=\"#" + elm.id + "\">" + i18nText.prv + "</a>";
}

prevLI += "<button type=\"button\" class=\"paginate-prev\" aria-controls=\"" + elm.id + "\"><span class=\"wb-inv\">Page </span>" + i18nText.prv + "</button>";
prevLI += "</li>";

paginationUI += prevLI;
Expand All @@ -136,27 +126,15 @@ const componentName = "wb-paginate",
for ( i; i <= pagesCount; i++ ) {
var pageButtonLI = "";
pageButtonLI += "<li class=\"" + returnItemClass( currPage, pagesCount, i ) + "\"" + ">";

if ( buttonsUI ) {
pageButtonLI += "<button type=\"button\" " + pageData + "=\"" + i + "\" aria-controls=\"" + elm.id + "\"" + ( i === currPage ? " aria-selected=\"true\"" : "" ) + "><span class=\"wb-inv\">Page </span>" + i + "</button>";
} else {
pageButtonLI += "<a href=\"#" + elm.id + "\" " + pageData + "=\"" + i + "\" aria-controls=\"" + elm.id + "\"" + ( i === currPage ? " aria-selected=\"true\"" : "" ) + "><span class=\"wb-inv\">Page </span>" + i + "</a>";
}

pageButtonLI += "<button type=\"button\" " + pageData + "=\"" + i + "\" aria-controls=\"" + elm.id + "\"" + ( i === currPage ? " aria-selected=\"true\"" : "" ) + "><span class=\"wb-inv\">Page </span>" + i + "</button>";
pageButtonLI += "</li>";
paginationUI += pageButtonLI;
}

// Add Next page button
var nextLI = "";
nextLI += "<li" + ( i === currPage ? " class=\"disabled\"" : "" ) + ">";

if ( buttonsUI ) {
nextLI += "<button type=\"button\" class=\"paginate-next\" aria-controls=\"" + elm.id + "\"><span class=\"wb-inv\">Page </span>" + i18nText.nxt + "</button>";
} else {
nextLI += "<a class=\"paginate-next\" aria-controls=\"" + elm.id + "\" href=\"#" + elm.id + "\">" + i18nText.nxt + "</a>";
}

nextLI += "<button type=\"button\" class=\"paginate-next\" aria-controls=\"" + elm.id + "\"><span class=\"wb-inv\">Page </span>" + i18nText.nxt + "</button>";
nextLI += "</li>";
paginationUI += nextLI;
paginationUI += "</ol>";
Expand Down Expand Up @@ -190,16 +168,10 @@ const componentName = "wb-paginate",
itemClass,
pageLink,
currPage = elm.pgSettings.currPage,
pagesCount = elm.pgSettings.pagesCount,
buttonsUI = elm.pgSettings.buttonsUI;
pagesCount = elm.pgSettings.pagesCount;

pageItems.forEach( function( pageItem, i ) {
if ( buttonsUI ) {
pageLink = pageItem.querySelector( "button" );
} else {
pageLink = pageItem.querySelector( "a" );
}

pageLink = pageItem.querySelector( "button" );

if ( pageLink.classList.contains( "paginate-prev" ) ) {
if ( currPage > 1 ) {
Expand Down Expand Up @@ -274,7 +246,7 @@ const componentName = "wb-paginate",
};

// When a page button is clicked
$document.on( "click", "." + pagerClass + " a, ." + pagerClass + " button", function( e ) {
$document.on( "click", "." + pagerClass + " button", function( e ) {
e.preventDefault();
let elm = document.querySelector( "#" + this.getAttribute( "aria-controls" ) ),
pageDest = ( ( this.getAttribute( pageData ) ) * 1 ) || elm.pgSettings.currPage;
Expand Down

0 comments on commit b39b41b

Please sign in to comment.