Fixes liferay#1268 - Emit pageClicked event when a page is clicked or…

… a range is selcted
bryceosterhaus · Nov 5, 2018 · 3430a97 · 3430a97
1 parent 941ed90
commit 3430a97
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/packages/clay-pagination/src/ClayPagination.js b/packages/clay-pagination/src/ClayPagination.js
@@ -1,18 +1,34 @@
 import 'clay-link';
 // eslint-disable-next-line
-import { ClayDropdownBase } from 'clay-dropdown';
+import ClayComponent from 'clay-component';
+import {ClayDropdownBase} from 'clay-dropdown';
 import {Config} from 'metal-state';
-import Component from 'metal-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 
 import templates from './ClayPagination.soy.js';
 
 /**
  * Metal ClayPagination component.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayPagination extends Component {}
+class ClayPagination extends ClayComponent {
+	/**
+	 * Continues the propagation of the page clicked event
+	 * @param {!Event} event
+	 * @protected
+	 * @return {Boolean} If the event has been prevented or not.
+	 */
+	_handlePageClick(event) {
+		return !this.emit({
+			data: {
+				page: event.target.getAttribute('data-page'),
+			},
+			name: 'pageClicked',
+			originalEvent: event,
+		});
+	}
+}
 
 /**
  * State definition.

diff --git a/packages/clay-pagination/src/ClayPagination.soy b/packages/clay-pagination/src/ClayPagination.soy
@@ -4,6 +4,7 @@
  * This renders the component's whole content.
  */
 {template .render}
+	{@param? _handlePageClick: any}
 	{@param currentPage: int}
 	{@param spritemap: string}
 	{@param totalPages: int}
@@ -25,6 +26,7 @@
 
 	<ul {$attributes}>
 		{call .item}
+			{param _handlePageClick: $_handlePageClick /}
 			{param ariaLabel kind="text"}
 				{msg desc="Help text to indicate that this link goes to the previous page"}
 					previous-page
@@ -40,6 +42,7 @@
 		{if $totalPages <= 5}
 			{for $page in range(1, $totalPages+1)}
 				{call .item}
+					{param _handlePageClick: $_handlePageClick /}
 					{param active: $page == $currentPage /}
 					{param baseHref: $baseHref /}
 					{param label: '' + $page/}
@@ -51,6 +54,7 @@
 			{let $fromCurrentToLast: $totalPages - $currentPage /}
 
 			{call .item}
+				{param _handlePageClick: $_handlePageClick /}
 				{param active: $currentPage == 1 /}
 				{param baseHref: $baseHref /}
 				{param label: '1' /}
@@ -60,13 +64,15 @@
 			{if $fromOneToCurrent < 4}
 				{for $page in range(2, $currentPage == 1 ? 4 : $currentPage)}
 					{call .item}
+						{param _handlePageClick: $_handlePageClick /}
 						{param baseHref: $baseHref /}
 						{param label: '' + $page/}
 						{param page: $page/}
 					{/call}
 				{/for}
 			{else}
 				{call .range}
+					{param _handlePageClick: $_handlePageClick /}
 					{param baseHref: $baseHref /}
 					{param endPage: $currentPage == $totalPages ? $currentPage - 3 : $currentPage - 1 /}
 					{param initPage: 2 /}
@@ -79,6 +85,7 @@
 
 				{for $page in range($currentRangeInit, $currentRangeEnd)}
 					{call .item}
+						{param _handlePageClick: $_handlePageClick /}
 						{param active: $page == $currentPage /}
 						{param baseHref: $baseHref /}
 						{param label: '' + $page /}
@@ -90,13 +97,15 @@
 			{if $fromCurrentToLast <= 3}
 				{for $page in range($currentPage + 1, $totalPages)}
 					{call .item}
+						{param _handlePageClick: $_handlePageClick /}
 						{param baseHref: $baseHref /}
 						{param label: '' + $page/}
 						{param page: $page/}
 					{/call}
 				{/for}
 			{else}
 				{call .range}
+					{param _handlePageClick: $_handlePageClick /}
 					{param baseHref: $baseHref /}
 					{param endPage: $totalPages /}
 					{param initPage: $currentPage == 1 ? 4 : $currentPage + 2 /}
@@ -105,6 +114,7 @@
 
 			{for $page in range($currentPage == $totalPages ? $totalPages -3 : $totalPages, $totalPages + 1)}
 				{call .item}
+					{param _handlePageClick: $_handlePageClick /}
 					{param active: $page == $currentPage /}
 					{param baseHref: $baseHref /}
 					{param label: '' + $page/}
@@ -114,6 +124,7 @@
 		{/if}
 
 		{call .item}
+			{param _handlePageClick: $_handlePageClick /}
 			{param ariaLabel kind="text"}
 				{msg desc="Help text to indicate that this link goes to the next page"}
 					next-page
@@ -132,6 +143,7 @@
  * Renders a page item
  */
 {template .item}
+	{@param? _handlePageClick: any}
 	{@param? active: bool}
 	{@param? ariaLabel: string}
 	{@param? baseHref: string}
@@ -166,7 +178,9 @@
 	<li class="{$classes}">
 		{call ClayLink.render}
 			{param ariaLabel: $ariaLabel /}
+			{param data: [ 'page': $page ] /}
 			{param elementClasses: 'page-link' /}
+			{param events: ['click': $_handlePageClick] /}
 			{param href: $href /}
 			{param icon: $icon /}
 			{param label: $label /}
@@ -179,12 +193,14 @@
  * Renders a page range dropdown
  */
 {template .range}
+	{@param? _handlePageClick: any}
 	{@param endPage: int}
 	{@param initPage: int}
 	{@param? baseHref: string}
 
 	<li>
 		{call ClayDropdownBase.render}
+			{param _handleItemClick: $_handlePageClick /}
 			{param contentRenderer: 'paginationdropdownitems' /}
 			{param elementClasses: 'page-item' /}
 			{param items: [[
@@ -219,6 +235,8 @@
 		<ul class="list-unstyled">
 			{for $page in range($initPage, $endPage)}
 				{delcall ClayDropdownBase.Item variant="'item'"}
+					{param _handleItemClick: $_handleItemClick /}
+					{param data: [ 'page': $page ] /}
 					{param href: $baseHref + $page /}
 					{param label: '' + $page /}
 				{/delcall}