rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use objects for pagination select creation

Browse Source
This commit is contained in:
Cohee
2025-05-04 12:56:23 +03:00
parent b9383ace1e
commit 1e57342639
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/scripts/utils.js
View File

@ -14,7 +14,7 @@ import { Popup, POPUP_RESULT, POPUP_TYPE } from './popup.js';
import { SlashCommandClosure } from './slash-commands/SlashCommandClosure.js'; import { SlashCommandClosure } from './slash-commands/SlashCommandClosure.js';
import { getTagsList } from './tags.js'; import { getTagsList } from './tags.js';
import { groups, selected_group } from './group-chats.js'; import { groups, selected_group } from './group-chats.js';
import { getCurrentLocale, t, translate } from './i18n.js'; import { getCurrentLocale, t } from './i18n.js';
/** /**
* Function returning pagination status string template. * Function returning pagination status string template.
@ -22,21 +22,36 @@ import { getCurrentLocale, t, translate } from './i18n.js';
export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= totalNumber %>'; export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= totalNumber %>';
export const localizePagination = function(container) { export const localizePagination = function(container) {
container.find('[title="Next page"]').attr('title', translate('Next page')); container.find('[title="Next page"]').attr('title', t`Next page`);
container.find('[title="Previous page"]').attr('title', translate('Previous page')); container.find('[title="Previous page"]').attr('title', t`Previous page`);
}; };
/**
* Renders a dropdown for selecting page size in pagination.
* @param {number} pageSize Page size
* @param {number[]} sizeChangerOptions Array of page size options
* @returns {string} The rendered dropdown element as a string
*/
export const renderPaginationDropdown = function(pageSize, sizeChangerOptions) { export const renderPaginationDropdown = function(pageSize, sizeChangerOptions) {
let sizeSelect = '<select class="J-paginationjs-size-select">'; const sizeSelect = document.createElement('select');
sizeSelect.classList.add('J-paginationjs-size-select');
if (sizeChangerOptions.indexOf(pageSize) === -1) { if (sizeChangerOptions.indexOf(pageSize) === -1) {
sizeChangerOptions.unshift(pageSize); sizeChangerOptions.unshift(pageSize);
sizeChangerOptions.sort((a, b) => a - b); sizeChangerOptions.sort((a, b) => a - b);
} }
for (let i = 0; i < sizeChangerOptions.length; i++) { for (let i = 0; i < sizeChangerOptions.length; i++) {
sizeSelect += `<option value="${sizeChangerOptions[i]}"${(sizeChangerOptions[i] === pageSize ? ' selected' : '')}>${sizeChangerOptions[i]} ` + t`/ page` + '</option>'; const option = document.createElement('option');
option.value = `${sizeChangerOptions[i]}`;
option.textContent = `${sizeChangerOptions[i]} ${t`/ page`}`;
if (sizeChangerOptions[i] === pageSize) {
option.setAttribute('selected', 'selected');
}
sizeSelect.appendChild(option);
} }
sizeSelect += '</select>';
return sizeSelect; return sizeSelect.outerHTML;
}; };
export const paginationDropdownChangeHandler = function(event, size) { export const paginationDropdownChangeHandler = function(event, size) {

1
public/style.css
View File

@ -5715,6 +5715,7 @@ body:not(.movingUI) .drawer-content.maximized {
width: unset; width: unset;
margin: 0; margin: 0;
font-size: calc(var(--mainFontSize) * 0.85); font-size: calc(var(--mainFontSize) * 0.85);
padding-right: 20px;
} }
.paginationjs-pages ul li a { .paginationjs-pages ul li a {