Added functionality for pagination with buttons

wet-boew · Apr 29, 2024 · 39de39b · 39de39b
1 parent 3dc0afd
commit 39de39b
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 37 deletions.
diff --git a/site/pages/docs/ref/paginate/paginate-en.hbs b/site/pages/docs/ref/paginate/paginate-en.hbs
@@ -6,7 +6,7 @@
 	"categoryfile": "plugins",
 	"description": "Adds pagination at the bottom of a list of items.",
 	"altLangPrefix": "paginate",
-	"dateModified": "2023-05-15"
+	"dateModified": "2024-04-25"
 }
 ---
 
@@ -118,6 +118,12 @@
 					</dl>
 				</td>
 			</tr>
+			<tr>
+				<td><code>buttonsUI</code></td>
+				<td>Sets the list of items to be created as buttons instead of anchor tags.</td>
+				<td>Boolean</td>
+				<td><code>true</code></td>
+			</tr>
 		</tbody>
 	</table>
 </section>

diff --git a/site/pages/docs/ref/paginate/paginate-fr.hbs b/site/pages/docs/ref/paginate/paginate-fr.hbs
@@ -6,7 +6,7 @@
 "categoryfile": "plugins",
 "description": "Ajoute une pagination à la fin d'une liste d'items.",
 "altLangPrefix": "paginate",
-"dateModified": "2023-05-15"
+"dateModified": "2024-04-25"
 }
 ---
 
@@ -127,6 +127,12 @@
 					</dl>
 				</td>
 			</tr>
+			<tr>
+				<td><code>buttonsUI</code></td>
+				<td>Définit la liste des éléments à créer sous forme de boutons au lieu de balises d'ancrage.</td>
+				<td>Booléen</td>
+				<td><code>true</code></td>
+			</tr>
 		</tbody>
 	</table>
 </section>

diff --git a/src/plugins/paginate/_base.scss b/src/plugins/paginate/_base.scss
@@ -24,6 +24,67 @@
 		border-bottom-right-radius: 4px;
 		border-top-right-radius: 4px;
 	}
+
+	li.active:nth-last-child(2) button {
+		border-bottom-right-radius: 4px;
+		border-top-right-radius: 4px;
+	}
+
+	.pagination > li > button, .pagination > li > span {
+		background-color: #eaebed;
+		border: 1px solid #dcdee1;
+		color: #335075;
+		float: left;
+		line-height: 1.4375;
+		margin-left: -1px;
+		position: relative;
+		text-decoration: none;
+	}
+
+	.pagination > .active > button, .pagination > .active > button:focus, .pagination > .active > button:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
+		background-color: #2572b4;
+		border-color: #2572b4;
+		color: #fff;
+		cursor: default;
+		z-index: 3;
+	}
+
+
+	.pagination > li:first-child > button, .pagination > li:first-child > span {
+		border-bottom-left-radius: 4px;
+		border-top-left-radius: 4px;
+		margin-left: 0;
+	}
+
+	.pagination > li:last-child > button, .pagination > li:last-child > span {
+		border-bottom-right-radius: 4px;
+		border-top-right-radius: 4px;
+	}
+
+	.pagination > li > button:hover, .pagination > li > button:focus,
+	.pagination > li > span:hover,
+	.pagination > li > span:focus {
+		background-color: #d4d6da;
+		border-color: #bbbfc5;
+		color: #335075;
+		z-index: 2;
+	}
+
+	.pager > li > button, .pagination > li > button {
+		cursor: pointer;
+		display: inline-block;
+		margin-bottom: .5em;
+		padding: 10px 16px;
+	}
+
+	.pager > li.disabled + li > button, .pagination > li.disabled + li > button {
+		border-bottom-left-radius: 4px;
+		border-top-left-radius: 4px;
+	}
+
+	.pager > li.active > button, .pagination > li.active > button {
+		cursor: default;
+	}
 }
 
 html:not(.wb-disable) .wb-pgfltr-out {

diff --git a/src/plugins/paginate/paginate-en.hbs b/src/plugins/paginate/paginate-en.hbs
@@ -7,7 +7,7 @@
 	"tag": "paginate",
 	"parentdir": "paginate",
 	"altLangPrefix": "paginate",
-	"dateModified": "2023-05-15"
+	"dateModified": "2024-04-25"
 }
 ---
 
@@ -25,15 +25,16 @@
 
 <h2>On this page:</h2>
 <ul>
-	<li><a href="#paginatedList">Example 1 - List</a></li>
+	<li><a href="#paginatedList">Example 1 - List with buttons</a></li>
 	<li><a href="#paginatedTable">Example 2 - Table</a></li>
 	<li><a href="#paginatedArticles">Example 3 - Articles</a></li>
 	<li><a href="#filteredEventsList">Example 4 - Events list</a></li>
 </ul>
 
 <section id="paginatedList">
-	<h2>Example 1 - List</h2>
-	<ul class="wb-paginate provisional">
+	<h2>Example 1 - List with buttons</h2>
+	<ul class="wb-paginate provisional" data-wb-paginate='{
+		"buttonsUI": true }'>
 		<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>
@@ -119,7 +120,8 @@
 	</ul>
 	<details>
 		<summary>Source code</summary>
-		<pre><code>&lt;ul class="wb-paginate provisional">
+		<pre><code>&lt;ul class="wb-paginate provisional" data-wb-paginate='{
+		"buttonsUI": true }'>
 	&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>
@@ -428,7 +430,8 @@
 	<h2>Example 3 - Articles</h2>
 	<p>This example leverages the following option: <code>itemsPerPage</code></p>
 	<div class="wb-paginate provisional row wb-eqht-grd" data-wb-paginate='{
-		"itemsPerPage": 12
+		"itemsPerPage": 12,
+		"buttonsUI": true
 	}'>
 		<article class="col-sm-6 col-md-4 col-lg-3">
 			<div class="well">

diff --git a/src/plugins/paginate/paginate-fr.hbs b/src/plugins/paginate/paginate-fr.hbs
@@ -7,7 +7,7 @@
 "tag": "paginate",
 "parentdir": "paginate",
 "altLangPrefix": "paginate",
-"dateModified": "2023-05-15"
+"dateModified": "2024-04-25"
 }
 ---
 
@@ -22,15 +22,16 @@
 
 <h2>Sur cette page:</h2>
 <ul>
-	<li><a href="#paginatedList">Exemple 1 - Liste</a></li>
+	<li><a href="#paginatedList">Exemple 1 - Liste avec des boutons</a></li>
 	<li><a href="#paginatedTable">Exemple 2 - Tableau</a></li>
 	<li><a href="#paginatedArticles">Exemple 3 - Articles</a></li>
 	<li><a href="#filteredEventsList">Exemple 4 - Liste d'événements</a></li>
 </ul>
 
 <section id="paginatedList">
-	<h2>Exemple 1 - Liste</h2>
-	<ul class="wb-paginate provisional">
+	<h2>Exemple 1 - Liste avec des boutons</h2>
+	<ul class="wb-paginate provisional" data-wb-paginate='{
+		"buttonsUI": true }'>
 		<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>
@@ -116,7 +117,8 @@
 	</ul>
 	<details>
 		<summary>Code source</summary>
-		<pre><code>&lt;ul class="wb-paginate provisional">
+		<pre><code>&lt;ul class="wb-paginate provisional" data-wb-paginate='{
+		"buttonsUI": true }'>
 	&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>

diff --git a/src/plugins/paginate/paginate.js b/src/plugins/paginate/paginate.js
@@ -69,6 +69,7 @@ const componentName = "wb-paginate",
 			elm.pgSettings.currPage = 1;
 			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
@@ -121,13 +122,8 @@ const componentName = "wb-paginate",
 			prevLI += "<li" + ( i === currPage ? " class=\"disabled\"" : "" ) + ">";
 
 			if ( buttonsUI ) {
-				prevLI += "<button href=\"#" + elm.id + "\" " + pageData + "=\"" + i + "\" aria-controls=\"" + elm.id + "\"><span class=\"wb-inv\">Page </span>" + i + "</button>";
-				// var prevButton = document.createElement( "button" );
-				// prevButton.setAttribute( "class", "paginate-prev" );
-				// prevButton.setAttribute( "aria-controls", elm.id );
-				// prevButton.setAttribute( "href", "#" + elm.id );
-				// prevButton.textContent = i18nText.prv;
-				// prevLI += prevButton;
+				prevLI += "<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>";
 			}
@@ -142,13 +138,7 @@ const componentName = "wb-paginate",
 				pageButtonLI += "<li class=\"" + returnItemClass( currPage, pagesCount, i ) + "\"" + ( i === currPage ? " aria-current=\"page\"" : "" ) + ">";
 
 				if ( buttonsUI ) {
-					pageButtonLI += "<button href=\"#" + elm.id + "\" " + pageData + "=\"" + i + "\" aria-controls=\"" + elm.id + "\"><span class=\"wb-inv\">Page </span>" + i + "</button>";
-					// var pageButton = document.createElement( "button" );
-					// pageButton.setAttribute( "href", "#" + elm.id );
-					// pageButton.setAttribute( pageData, i );
-					// pageButton.setAttribute( "aria-controls", elm.id );
-					// pageButton.textContent = "<span class=\"wb-inv\">Page </span>" + i;
-					// pageButtonLI += pageButton;
+					pageButtonLI += "<button " + pageData + "=\"" + i + "\" aria-controls=\"" + elm.id + "\"><span class=\"wb-inv\">Page </span>" + i + "</button>";
 				} else {
 					pageButtonLI += "<a href=\"#" + elm.id + "\" " + pageData + "=\"" + i + "\" aria-controls=\"" + elm.id + "\"><span class=\"wb-inv\">Page </span>" + i + "</a>";
 				}
@@ -162,13 +152,7 @@ const componentName = "wb-paginate",
 			nextLI += "<li" + ( i === currPage ? " class=\"disabled\"" : "" ) + ">";
 
 			if ( buttonsUI ) {
-				nextLI += "<button href=\"#" + elm.id + "\" " + pageData + "=\"" + i + "\" aria-controls=\"" + elm.id + "\"><span class=\"wb-inv\">Page </span>" + i + "</button>";
-				// var nextButton = document.createElement( "button" );
-				// nextButton.setAttribute( "class", "paginate-next" );
-				// nextButton.setAttribute( "aria-controls", elm.id );
-				// nextButton.setAttribute( "href", "#" + elm.id );
-				// nextButton.textContent = i18nText.nxt;
-				// nextLI += nextButton;
+				nextLI += "<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>";
 			}
@@ -206,10 +190,16 @@ const componentName = "wb-paginate",
 			itemClass,
 			pageLink,
 			currPage = elm.pgSettings.currPage,
-			pagesCount = elm.pgSettings.pagesCount;
+			pagesCount = elm.pgSettings.pagesCount,
+			buttonsUI = elm.pgSettings.buttonsUI;
 
 		pageItems.forEach( function( pageItem, i ) {
-			pageLink = pageItem.querySelector( "a" );
+			if ( buttonsUI ) {
+				pageLink = pageItem.querySelector( "button" );
+			} else {
+				pageLink = pageItem.querySelector( "a" );
+			}
+
 
 			if ( pageLink.classList.contains( "paginate-prev" ) ) {
 				if ( currPage > 1 ) {
@@ -284,7 +274,7 @@ const componentName = "wb-paginate",
 	};
 
 // When a filter is updated
-$document.on( "click", "." + pagerClass + " a", function()  {
+$document.on( "click", "." + pagerClass + " a, ." + pagerClass + " button", function()  {
 	let elm = document.querySelector( "#" + this.getAttribute( "aria-controls" ) ),
 		pageDest = ( ( this.getAttribute( pageData ) ) * 1 ) || elm.pgSettings.currPage;