shaw/SillyTavern
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Feat: add first and last buttons to pagination component (#4560)

Browse Source 
* add first and last buttons to pagination

* Add i18n support

* Update pagination buttons font

---------

Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
This commit is contained in:
André M Piva
2025-09-25 14:42:47 -03:00
committed by GitHub
parent a3e47ce0a6
commit 0f49a059e3
3 changed files with 73 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/lib/pagination.js
+69 -3
View File
@@ -139,9 +139,9 @@
return el;
},
getPageLinkTag: function(index) {
getPageLinkTag: function(text) {
var pageLink = attributes.pageLink;
return pageLink ? `<a href="${pageLink}">${index}</a>` : `<a>${index}</a>`;
return pageLink ? `<a href="${pageLink}">${text}</a>` : `<a>${text}</a>`;
},
// Generate HTML for page numbers
@@ -233,6 +233,8 @@
var prevText = attributes.prevText;
var nextText = attributes.nextText;
var firstText = attributes.firstText;
var lastText = attributes.lastText;
var goButtonText = attributes.goButtonText;
var classPrefix = attributes.classPrefix;
@@ -240,6 +242,8 @@
var ulClassName = attributes.ulClassName || '';
var prevClassName = attributes.prevClassName || '';
var nextClassName = attributes.nextClassName || '';
var firstClassName = attributes.firstClassName || '';
var lastClassName = attributes.lastClassName || '';
var html = '';
var sizeSelect = `<select class="J-paginationjs-size-select">`;
@@ -295,9 +299,11 @@
if (showPrevious) {
if (currentPage <= 1) {
if (!autoHidePrevious) {
html += `<li class="${classPrefix}-first ${disableClassName} ${firstClassName}"><a>${firstText}</a></li>`;
html += `<li class="${classPrefix}-prev ${disableClassName} ${prevClassName}"><a>${prevText}</a></li>`;
}
} else {
html += `<li class="${classPrefix}-first J-paginationjs-first ${firstClassName}" data-num="1" title="First page">${getPageLinkTag(firstText)}</li>`;
html += `<li class="${classPrefix}-prev J-paginationjs-previous ${prevClassName}" data-num="${currentPage - 1}" title="Previous page">${getPageLinkTag(prevText)}</li>`;
}
}
@@ -312,9 +318,11 @@
if (currentPage >= totalPage) {
if (!autoHideNext) {
html += `<li class="${classPrefix}-next ${disableClassName} ${nextClassName}"><a>${nextText}</a></li>`;
html += `<li class="${classPrefix}-last ${disableClassName} ${lastClassName}"><a>${lastText}</a></li>`;
}
} else {
html += `<li class="${classPrefix}-next J-paginationjs-next ${nextClassName}" data-num="${currentPage + 1}" title="Next page">${getPageLinkTag(nextText)}</li>`;
html += `<li class="${classPrefix}-last J-paginationjs-last ${lastClassName}" data-num="${totalPage}" title="Last page">${getPageLinkTag(lastText)}</li>`;
}
}
html += `</ul></div>`;
@@ -542,6 +550,14 @@
this.go(this.model.pageNumber + 1, callback);
},
first: function(callback) {
this.go(1, callback);
},
last: function(callback) {
this.go(this.model.totalPage, callback);
},
disable: function() {
var self = this;
var source = self.isAsync ? 'async' : 'sync';
@@ -774,6 +790,38 @@
if (!attributes.pageLink) return false;
});
// First button click listener
el.on('click', '.J-paginationjs-first', function(event) {
var current = $(event.currentTarget);
var pageNumber = current.attr('data-num').trim();
if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
if (self.callHook('beforeFirstOnClick', event, pageNumber) === false) return false;
self.go(pageNumber);
self.callHook('afterFirstOnClick', event, pageNumber);
if (!attributes.pageLink) return false;
});
// Last button click listener
el.on('click', '.J-paginationjs-last', function(event) {
var current = $(event.currentTarget);
var pageNumber = current.attr('data-num').trim();
if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
if (self.callHook('beforeLastOnClick', event, pageNumber) === false) return false;
self.go(pageNumber);
self.callHook('afterLastOnClick', event, pageNumber);
if (!attributes.pageLink) return false;
});
// Go button click listener
el.on('click', '.J-paginationjs-go-button', function(event) {
var pageNumber = $('.J-paginationjs-go-pagenumber', el).val();
@@ -833,6 +881,16 @@
self.next(done);
});
// First page
container.on(eventPrefix + 'first', function(event, done) {
self.first(done);
});
// Last page
container.on(eventPrefix + 'last', function(event, done) {
self.last(done);
});
// Disable
container.on(eventPrefix + 'disable', function() {
self.disable();
@@ -892,6 +950,8 @@
switch (options) {
case 'previous':
case 'next':
case 'first':
case 'last':
case 'go':
case 'disable':
case 'enable':
@@ -991,6 +1051,12 @@
// 'Next' text
nextText: '&rsaquo;',
// 'First' text
firstText: '&laquo;',
// 'Last' text
lastText: '&raquo;',
// Ellipsis text
ellipsisText: '...',
@@ -1149,7 +1215,7 @@
// uninstall plugin
function uninstallPlugin(target) {
var events = ['go', 'previous', 'next', 'disable', 'enable', 'refresh', 'show', 'hide', 'destroy'];
var events = ['go', 'previous', 'next', 'first', 'last', 'disable', 'enable', 'refresh', 'show', 'hide', 'destroy'];
// off all events
$.each(events, function(index, value) {
public/scripts/utils.js
+2
View File
@@ -25,6 +25,8 @@ export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= tot
export const localizePagination = function(container) {
container.find('[title="Next page"]').attr('title', t`Next page`);
container.find('[title="Previous page"]').attr('title', t`Previous page`);
container.find('[title="First page"]').attr('title', t`First page`);
container.find('[title="Last page"]').attr('title', t`Last page`);
};
/**
public/style.css
+2 -1
View File
@@ -5741,7 +5741,8 @@ body:not(.movingUI) .drawer-content.maximized {
}
.paginationjs-pages ul li a {
padding: 0.05em 0.5em;
padding: 0.25em;
font-family: 'Font Awesome 6 Free';
text-decoration: none;
color: var(--SmartThemeBodyColor);
border: 1px solid var(--SmartThemeBorderColor);