Feat: add first and last buttons to pagination component (#4560) * add first and last buttons to pagination * Add i18n support * Update pagination buttons font --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

0f49a059e3c4459820e0ced5d36ffedcd5be0190

André M Piva <55606913+andrempiva@users.noreply.github.com>

Signed
Parents: a3e47ce0a6e7b5b80ce660a03fa58557137299e6
3 files changed, +73 -4Ignore whitespace
public/lib/pagination.js+69 -3
@@ -139,9 +139,9 @@
139 return el;139 return el;
140 },140 },
141141
142 getPageLinkTag: function(index) {142 getPageLinkTag: function(text) {
143 var pageLink = attributes.pageLink;143 var pageLink = attributes.pageLink;
144 return pageLink ? `<a href="${pageLink}">${index}</a>` : `<a>${index}</a>`;144 return pageLink ? `<a href="${pageLink}">${text}</a>` : `<a>${text}</a>`;
145 },145 },
146146
147 // Generate HTML for page numbers147 // Generate HTML for page numbers
@@ -233,6 +233,8 @@
233233
234 var prevText = attributes.prevText;234 var prevText = attributes.prevText;
235 var nextText = attributes.nextText;235 var nextText = attributes.nextText;
236 var firstText = attributes.firstText;
237 var lastText = attributes.lastText;
236 var goButtonText = attributes.goButtonText;238 var goButtonText = attributes.goButtonText;
237239
238 var classPrefix = attributes.classPrefix;240 var classPrefix = attributes.classPrefix;
@@ -240,6 +242,8 @@
240 var ulClassName = attributes.ulClassName || '';242 var ulClassName = attributes.ulClassName || '';
241 var prevClassName = attributes.prevClassName || '';243 var prevClassName = attributes.prevClassName || '';
242 var nextClassName = attributes.nextClassName || '';244 var nextClassName = attributes.nextClassName || '';
245 var firstClassName = attributes.firstClassName || '';
246 var lastClassName = attributes.lastClassName || '';
243247
244 var html = '';248 var html = '';
245 var sizeSelect = `<select class="J-paginationjs-size-select">`;249 var sizeSelect = `<select class="J-paginationjs-size-select">`;
@@ -295,9 +299,11 @@
295 if (showPrevious) {299 if (showPrevious) {
296 if (currentPage <= 1) {300 if (currentPage <= 1) {
297 if (!autoHidePrevious) {301 if (!autoHidePrevious) {
302 html += `<li class="${classPrefix}-first ${disableClassName} ${firstClassName}"><a>${firstText}</a></li>`;
298 html += `<li class="${classPrefix}-prev ${disableClassName} ${prevClassName}"><a>${prevText}</a></li>`;303 html += `<li class="${classPrefix}-prev ${disableClassName} ${prevClassName}"><a>${prevText}</a></li>`;
299 }304 }
300 } else {305 } else {
306 html += `<li class="${classPrefix}-first J-paginationjs-first ${firstClassName}" data-num="1" title="First page">${getPageLinkTag(firstText)}</li>`;
301 html += `<li class="${classPrefix}-prev J-paginationjs-previous ${prevClassName}" data-num="${currentPage - 1}" title="Previous page">${getPageLinkTag(prevText)}</li>`;307 html += `<li class="${classPrefix}-prev J-paginationjs-previous ${prevClassName}" data-num="${currentPage - 1}" title="Previous page">${getPageLinkTag(prevText)}</li>`;
302 }308 }
303 }309 }
@@ -312,9 +318,11 @@
312 if (currentPage >= totalPage) {318 if (currentPage >= totalPage) {
313 if (!autoHideNext) {319 if (!autoHideNext) {
314 html += `<li class="${classPrefix}-next ${disableClassName} ${nextClassName}"><a>${nextText}</a></li>`;320 html += `<li class="${classPrefix}-next ${disableClassName} ${nextClassName}"><a>${nextText}</a></li>`;
321 html += `<li class="${classPrefix}-last ${disableClassName} ${lastClassName}"><a>${lastText}</a></li>`;
315 }322 }
316 } else {323 } else {
317 html += `<li class="${classPrefix}-next J-paginationjs-next ${nextClassName}" data-num="${currentPage + 1}" title="Next page">${getPageLinkTag(nextText)}</li>`;324 html += `<li class="${classPrefix}-next J-paginationjs-next ${nextClassName}" data-num="${currentPage + 1}" title="Next page">${getPageLinkTag(nextText)}</li>`;
325 html += `<li class="${classPrefix}-last J-paginationjs-last ${lastClassName}" data-num="${totalPage}" title="Last page">${getPageLinkTag(lastText)}</li>`;
318 }326 }
319 }327 }
320 html += `</ul></div>`;328 html += `</ul></div>`;
@@ -542,6 +550,14 @@
542 this.go(this.model.pageNumber + 1, callback);550 this.go(this.model.pageNumber + 1, callback);
543 },551 },
544552
553 first: function(callback) {
554 this.go(1, callback);
555 },
556
557 last: function(callback) {
558 this.go(this.model.totalPage, callback);
559 },
560
545 disable: function() {561 disable: function() {
546 var self = this;562 var self = this;
547 var source = self.isAsync ? 'async' : 'sync';563 var source = self.isAsync ? 'async' : 'sync';
@@ -774,6 +790,38 @@
774 if (!attributes.pageLink) return false;790 if (!attributes.pageLink) return false;
775 });791 });
776792
793 // First button click listener
794 el.on('click', '.J-paginationjs-first', function(event) {
795 var current = $(event.currentTarget);
796 var pageNumber = current.attr('data-num').trim();
797
798 if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
799
800 if (self.callHook('beforeFirstOnClick', event, pageNumber) === false) return false;
801
802 self.go(pageNumber);
803
804 self.callHook('afterFirstOnClick', event, pageNumber);
805
806 if (!attributes.pageLink) return false;
807 });
808
809 // Last button click listener
810 el.on('click', '.J-paginationjs-last', function(event) {
811 var current = $(event.currentTarget);
812 var pageNumber = current.attr('data-num').trim();
813
814 if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
815
816 if (self.callHook('beforeLastOnClick', event, pageNumber) === false) return false;
817
818 self.go(pageNumber);
819
820 self.callHook('afterLastOnClick', event, pageNumber);
821
822 if (!attributes.pageLink) return false;
823 });
824
777 // Go button click listener825 // Go button click listener
778 el.on('click', '.J-paginationjs-go-button', function(event) {826 el.on('click', '.J-paginationjs-go-button', function(event) {
779 var pageNumber = $('.J-paginationjs-go-pagenumber', el).val();827 var pageNumber = $('.J-paginationjs-go-pagenumber', el).val();
@@ -833,6 +881,16 @@
833 self.next(done);881 self.next(done);
834 });882 });
835883
884 // First page
885 container.on(eventPrefix + 'first', function(event, done) {
886 self.first(done);
887 });
888
889 // Last page
890 container.on(eventPrefix + 'last', function(event, done) {
891 self.last(done);
892 });
893
836 // Disable894 // Disable
837 container.on(eventPrefix + 'disable', function() {895 container.on(eventPrefix + 'disable', function() {
838 self.disable();896 self.disable();
@@ -892,6 +950,8 @@
892 switch (options) {950 switch (options) {
893 case 'previous':951 case 'previous':
894 case 'next':952 case 'next':
953 case 'first':
954 case 'last':
895 case 'go':955 case 'go':
896 case 'disable':956 case 'disable':
897 case 'enable':957 case 'enable':
@@ -991,6 +1051,12 @@
991 // 'Next' text1051 // 'Next' text
992 nextText: '&rsaquo;',1052 nextText: '&rsaquo;',
9931053
1054 // 'First' text
1055 firstText: '&laquo;',
1056
1057 // 'Last' text
1058 lastText: '&raquo;',
1059
994 // Ellipsis text1060 // Ellipsis text
995 ellipsisText: '...',1061 ellipsisText: '...',
9961062
@@ -1149,7 +1215,7 @@
11491215
1150 // uninstall plugin1216 // uninstall plugin
1151 function uninstallPlugin(target) {1217 function uninstallPlugin(target) {
1152 var events = ['go', 'previous', 'next', 'disable', 'enable', 'refresh', 'show', 'hide', 'destroy'];1218 var events = ['go', 'previous', 'next', 'first', 'last', 'disable', 'enable', 'refresh', 'show', 'hide', 'destroy'];
11531219
1154 // off all events1220 // off all events
1155 $.each(events, function(index, value) {1221 $.each(events, function(index, value) {
public/scripts/utils.js+2 -0
@@ -25,6 +25,8 @@ export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= tot
25export const localizePagination = function(container) {25export const localizePagination = function(container) {
26 container.find('[title="Next page"]').attr('title', t`Next page`);26 container.find('[title="Next page"]').attr('title', t`Next page`);
27 container.find('[title="Previous page"]').attr('title', t`Previous page`);27 container.find('[title="Previous page"]').attr('title', t`Previous page`);
28 container.find('[title="First page"]').attr('title', t`First page`);
29 container.find('[title="Last page"]').attr('title', t`Last page`);
28};30};
2931
30/**32/**
public/style.css+2 -1
@@ -5741,7 +5741,8 @@ body:not(.movingUI) .drawer-content.maximized {
5741}5741}
57425742
5743.paginationjs-pages ul li a {5743.paginationjs-pages ul li a {
5744 padding: 0.05em 0.5em;5744 padding: 0.25em;
5745 font-family: 'Font Awesome 6 Free';
5745 text-decoration: none;5746 text-decoration: none;
5746 color: var(--SmartThemeBodyColor);5747 color: var(--SmartThemeBodyColor);
5747 border: 1px solid var(--SmartThemeBorderColor);5748 border: 1px solid var(--SmartThemeBorderColor);