More work on tl

public/index.html

@@ -6707,7 +6707,7 @@
                 </div>
                 <div class="flex-container wide100pLess70px character_select_container height100p alignitemscenter">
                     <div class="wide100p character_name_block">
-                        <span class="ch_name">Go back</span>
+                        <span class="ch_name" data-i18n="Go back">Go back</span>
                     </div>
                 </div>
             </div>

public/locales/ru-ru.json

@@ -2403,7 +2403,6 @@
     "Croak it": "Только кваканье лягушек и стрёкот сверчков",
     "${0} character hidden.": "Персонажей скрыто: ${0}.",
     "${0} characters hidden.": "Персонажей скрыто: ${0}.",
-    "pagination_of": "из",
     "/ page": "/ стр.",
     "Context Length": "Размер контекста",
     "Added On": "Добавлена",
@@ -2421,5 +2420,6 @@
     "Text Completion Preset": "Пресет для режима Text Completion",
     "Update enabled": "Обновить включенные",
     "Could not connect to API": "Не удалось подключиться к API",
-    "Connected to API": "Соединение с API установлено"
+    "Connected to API": "Соединение с API установлено",
+    "Go back": "Назад"
 }

public/script.js

@@ -177,6 +177,8 @@ import {
     uuidv4,
     equalsIgnoreCaseAndAccents,
     localizePagination,
+    renderPaginationDropdown,
+    paginationDropdownChangeHandler,
 } from './scripts/utils.js';
 import { debounce_timeout, IGNORE_SYMBOL } from './scripts/constants.js';
 
@@ -1525,10 +1527,12 @@ export async function printCharacters(fullRefresh = false) {
 
     const entities = getEntitiesList({ doFilter: true });
 
+    const pageSize = Number(accountStorage.getItem(storageKey)) || per_page_default;
+    console.log('pageSize for characters = ' + pageSize);
+    const sizeChangerOptions = [10, 25, 50, 100, 250, 500, 1000];
     $('#rm_print_characters_pagination').pagination({
         dataSource: entities,
-        pageSize: Number(accountStorage.getItem(storageKey)) || per_page_default,
+        pageSize,
-        sizeChangerOptions: [10, 25, 50, 100, 250, 500, 1000],
         pageRange: 1,
         pageNumber: saveCharactersPage || 1,
         position: 'top',
@@ -1537,6 +1541,7 @@ export async function printCharacters(fullRefresh = false) {
         prevText: '<',
         nextText: '>',
         formatNavigator: PAGINATION_TEMPLATE,
+        formatSizeChanger: renderPaginationDropdown(pageSize, sizeChangerOptions),
         showNavigator: true,
         callback: async function (/** @type {Entity[]} */ data) {
             $(listId).empty();
@@ -1573,8 +1578,10 @@ export async function printCharacters(fullRefresh = false) {
 
             eventSource.emit(event_types.CHARACTER_PAGE_LOADED);
         },
-        afterSizeSelectorChange: function (e) {
+        afterSizeSelectorChange: function (e, size) {
             accountStorage.setItem(storageKey, e.target.value);
+            console.log('pageSize for characters after getting updated = ' + accountStorage.getItem(storageKey));
+            paginationDropdownChangeHandler(e, size);
         },
         afterPaging: function (e) {
             saveCharactersPage = e;

public/scripts/group-chats.js

@@ -14,6 +14,8 @@ import {
     resetScrollHeight,
     initScrollHeight,
     localizePagination,
+    renderPaginationDropdown,
+    paginationDropdownChangeHandler,
 } from './utils.js';
 import { RA_CountCharTokens, humanizedDateTime, dragElement, favsToHotswap, getMessageTimeStamp } from './RossAscends-mods.js';
 import { power_user, loadMovingUIState, sortEntitiesList } from './power-user.js';
@@ -1375,6 +1377,8 @@ function getGroupCharacters({ doFilter, onlyMembers } = {}) {
 
 function printGroupCandidates() {
     const storageKey = 'GroupCandidates_PerPage';
+    const pageSize = Number(accountStorage.getItem(storageKey)) || 5;
+    const sizeChangerOptions = [5, 10, 25, 50, 100, 200, 500, 1000];
     $('#rm_group_add_members_pagination').pagination({
         dataSource: getGroupCharacters({ doFilter: true, onlyMembers: false }),
         pageRange: 1,
@@ -1383,12 +1387,13 @@ function printGroupCandidates() {
         prevText: '<',
         nextText: '>',
         formatNavigator: PAGINATION_TEMPLATE,
+        formatSizeChanger: renderPaginationDropdown(pageSize, sizeChangerOptions),
         showNavigator: true,
         showSizeChanger: true,
-        pageSize: Number(accountStorage.getItem(storageKey)) || 5,
+        pageSize,
-        sizeChangerOptions: [5, 10, 25, 50, 100, 200, 500, 1000],
+        afterSizeSelectorChange: function (e, size) {
-        afterSizeSelectorChange: function (e) {
             accountStorage.setItem(storageKey, e.target.value);
+            paginationDropdownChangeHandler(e, size);
         },
         callback: function (data) {
             $('#rm_group_add_members').empty();
@@ -1404,6 +1409,8 @@ function printGroupMembers() {
     const storageKey = 'GroupMembers_PerPage';
     $('.rm_group_members_pagination').each(function () {
         let that = this;
+        const pageSize = Number(accountStorage.getItem(storageKey)) || 5;
+        const sizeChangerOptions = [5, 10, 25, 50, 100, 200, 500, 1000];
         $(this).pagination({
             dataSource: getGroupCharacters({ doFilter: false, onlyMembers: true }),
             pageRange: 1,
@@ -1414,10 +1421,11 @@ function printGroupMembers() {
             formatNavigator: PAGINATION_TEMPLATE,
             showNavigator: true,
             showSizeChanger: true,
-            pageSize: Number(accountStorage.getItem(storageKey)) || 5,
+            formatSizeChanger: renderPaginationDropdown(pageSize, sizeChangerOptions),
-            sizeChangerOptions: [5, 10, 25, 50, 100, 200, 500, 1000],
+            pageSize,
-            afterSizeSelectorChange: function (e) {
+            afterSizeSelectorChange: function (e, size) {
                 accountStorage.setItem(storageKey, e.target.value);
+                paginationDropdownChangeHandler(e, size);
             },
             callback: function (data) {
                 $('.rm_group_members').empty();

public/scripts/personas.js

@@ -22,7 +22,7 @@ import {
 } from '../script.js';
 import { persona_description_positions, power_user } from './power-user.js';
 import { getTokenCountAsync } from './tokenizers.js';
-import { PAGINATION_TEMPLATE, clearInfoBlock, debounce, delay, download, ensureImageFormatSupported, flashHighlight, getBase64Async, getCharIndex, isFalseBoolean, isTrueBoolean, onlyUnique, parseJsonFile, setInfoBlock, localizePagination } from './utils.js';
+import { PAGINATION_TEMPLATE, clearInfoBlock, debounce, delay, download, ensureImageFormatSupported, flashHighlight, getBase64Async, getCharIndex, isFalseBoolean, isTrueBoolean, onlyUnique, parseJsonFile, setInfoBlock, localizePagination, renderPaginationDropdown, paginationDropdownChangeHandler } from './utils.js';
 import { debounce_timeout } from './constants.js';
 import { FILTER_TYPES, FilterHelper } from './filters.js';
 import { groups, selected_group } from './group-chats.js';
@@ -250,16 +250,18 @@ export async function getUserAvatars(doRender = true, openPageAt = '') {
         const storageKey = 'Personas_PerPage';
         const listId = '#user_avatar_block';
         const perPage = Number(accountStorage.getItem(storageKey)) || 5;
+        const sizeChangerOptions = [5, 10, 25, 50, 100, 250, 500, 1000];
 
         $('#persona_pagination_container').pagination({
             dataSource: entities,
             pageSize: perPage,
-            sizeChangerOptions: [5, 10, 25, 50, 100, 250, 500, 1000],
+            sizeChangerOptions,
             pageRange: 1,
             pageNumber: savePersonasPage || 1,
             position: 'top',
             showPageNumbers: false,
             showSizeChanger: true,
+            formatSizeChanger: renderPaginationDropdown(perPage, sizeChangerOptions),
             prevText: '<',
             nextText: '>',
             formatNavigator: PAGINATION_TEMPLATE,
@@ -272,8 +274,9 @@ export async function getUserAvatars(doRender = true, openPageAt = '') {
                 updatePersonaUIStates();
                 localizePagination($('#persona_pagination_container'));
             },
-            afterSizeSelectorChange: function (e) {
+            afterSizeSelectorChange: function (e, size) {
                 accountStorage.setItem(storageKey, e.target.value);
+                paginationDropdownChangeHandler(e, size);
             },
             afterPaging: function (e) {
                 savePersonasPage = e;

public/scripts/tags.js

@@ -318,7 +318,7 @@ function getTagBlock(tag, entities, hidden = 0, isUseless = false) {
     template.find('.avatar').css({ 'background-color': tag.color, 'color': tag.color2 }).attr('title', `[Folder] ${tag.name}`);
     template.find('.ch_name').text(tag.name).attr('title', `[Folder] ${tag.name}`);
     template.find('.bogus_folder_hidden_counter').text(hidden > 0 ? `${hidden} hidden` : '');
-    template.find('.bogus_folder_counter').text(`${count} ${count != 1 ? 'characters' : 'character'}`);
+    template.find('.bogus_folder_counter').text(`${count} ` + (count != 1 ? t`characters` : t`character`));
     template.find('.bogus_folder_icon').addClass(tagFolder.fa_icon);
     if (isUseless) template.addClass('useless');
 

public/scripts/utils.js

@@ -22,21 +22,29 @@ import { getCurrentLocale, t, translate } from './i18n.js';
 export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= totalNumber %>';
 
 export const localizePagination = function(container) {
-    let options = container.find('option');
-    for (let option of options) {
-        option = $(option);
-        try {
-            option.text(option.text().replace('/ page', translate('/ page')));
-        } catch (e) {
-            // means that i18n facilities aren't ready, so there's no point doing anything
-            console.error(e);
-            return;
-        }
-    }
     container.find('[title="Next page"]').attr('title', translate('Next page'));
     container.find('[title="Previous page"]').attr('title', translate('Previous page'));
 };
 
+export const renderPaginationDropdown = function(pageSize, sizeChangerOptions) {
+    let sizeSelect = `<select class="J-paginationjs-size-select">`;
+    if (sizeChangerOptions.indexOf(pageSize) === -1) {
+      sizeChangerOptions.unshift(pageSize);
+      sizeChangerOptions.sort((a, b) => a - b);
+    }
+    for (let i = 0; i < sizeChangerOptions.length; i++) {
+      sizeSelect += `<option value="${sizeChangerOptions[i]}"${(sizeChangerOptions[i] === pageSize ? ' selected' : '')}>${sizeChangerOptions[i]} ` + t`/ page` + `</option>`;
+    }
+    sizeSelect += `</select>`;
+    return sizeSelect;
+}
+
+export const paginationDropdownChangeHandler = function(event, size) {
+    let dropdown = $(event?.originalEvent?.currentTarget || event.delegateTarget).find('select');
+    dropdown.find('[selected]').removeAttr('selected');
+    dropdown.find(`[value=${size}]`).attr('selected', '');
+}
+
 /**
  * Navigation options for pagination.
  * @enum {number}