Extract templates, replace pagination format
| @@ -1426,30 +1426,26 @@ function getBackBlock() { | |||
| 1426 | return template; | 1426 | return template; |
| 1427 | } | 1427 | } |
| 1428 | 1428 | ||
| 1429 | function getEmptyBlock() { | 1429 | async function getEmptyBlock() { |
| 1430 | const icons = ['fa-dragon', 'fa-otter', 'fa-kiwi-bird', 'fa-crow', 'fa-frog']; | 1430 | const icons = ['fa-dragon', 'fa-otter', 'fa-kiwi-bird', 'fa-crow', 'fa-frog']; |
| 1431 | const texts = [t`Here be dragons`, t`Otterly empty`, t`Kiwibunga`, t`Pump-a-Rum`, t`Croak it`]; | 1431 | const texts = [t`Here be dragons`, t`Otterly empty`, t`Kiwibunga`, t`Pump-a-Rum`, t`Croak it`]; |
| 1432 | const roll = new Date().getMinutes() % icons.length; | 1432 | const roll = new Date().getMinutes() % icons.length; |
| 1433 | const emptyBlock = ` | 1433 | const params = { |
| 1434 | <div class="text_block empty_block"> | 1434 | text: texts[roll], |
| 1435 | <i class="fa-solid ${icons[roll]} fa-4x"></i> | 1435 | icon: icons[roll], |
| 1436 | <h1>${texts[roll]}</h1> | 1436 | }; |
| 1437 | <p>` + t`There are no items to display.` + `</p> | 1437 | const emptyBlock = await renderTemplateAsync('emptyBlock', params); |
| 1438 | </div>`; | ||
| 1439 | return $(emptyBlock); | 1438 | return $(emptyBlock); |
| 1440 | } | 1439 | } |
| 1441 | 1440 | ||
| 1442 | /** | 1441 | /** |
| 1443 | * @param {number} hidden Number of hidden characters | 1442 | * @param {number} hidden Number of hidden characters |
| 1444 | */ | 1443 | */ |
| 1445 | function getHiddenBlock(hidden) { | 1444 | async function getHiddenBlock(hidden) { |
| 1446 | const hiddenBlock = ` | 1445 | const params = { |
| 1447 | <div class="text_block hidden_block"> | 1446 | text: (hidden > 1 ? t`${hidden} characters hidden.` : t`${hidden} character hidden.`), |
| 1448 | <small> | 1447 | }; |
| 1449 | <p>` + (hidden > 1 ? t`${hidden} characters hidden.` : t`${hidden} character hidden.`) + `</p> | 1448 | const hiddenBlock = await renderTemplateAsync('hiddenBlock', params); |
| 1450 | <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Characters and groups hidden by filters or closed folders" title="Characters and groups hidden by filters or closed folders"></div> | ||
| 1451 | </small> | ||
| 1452 | </div>`; | ||
| 1453 | return $(hiddenBlock); | 1449 | return $(hiddenBlock); |
| 1454 | } | 1450 | } |
| 1455 | 1451 | ||
| @@ -1542,13 +1538,14 @@ export async function printCharacters(fullRefresh = false) { | |||
| 1542 | nextText: '>', | 1538 | nextText: '>', |
| 1543 | formatNavigator: PAGINATION_TEMPLATE, | 1539 | formatNavigator: PAGINATION_TEMPLATE, |
| 1544 | showNavigator: true, | 1540 | showNavigator: true, |
| 1545 | callback: function (/** @type {Entity[]} */ data) { | 1541 | callback: async function (/** @type {Entity[]} */ data) { |
| 1546 | $(listId).empty(); | 1542 | $(listId).empty(); |
| 1547 | if (power_user.bogus_folders && isBogusFolderOpen()) { | 1543 | if (power_user.bogus_folders && isBogusFolderOpen()) { |
| 1548 | $(listId).append(getBackBlock()); | 1544 | $(listId).append(getBackBlock()); |
| 1549 | } | 1545 | } |
| 1550 | if (!data.length) { | 1546 | if (!data.length) { |
| 1551 | $(listId).append(getEmptyBlock()); | 1547 | const emptyBlock = await getEmptyBlock(); |
| 1548 | $(listId).append(emptyBlock); | ||
| 1552 | } | 1549 | } |
| 1553 | let displayCount = 0; | 1550 | let displayCount = 0; |
| 1554 | for (const i of data) { | 1551 | for (const i of data) { |
| @@ -1569,7 +1566,8 @@ export async function printCharacters(fullRefresh = false) { | |||
| 1569 | 1566 | ||
| 1570 | const hidden = (characters.length + groups.length) - displayCount; | 1567 | const hidden = (characters.length + groups.length) - displayCount; |
| 1571 | if (hidden > 0 && entitiesFilter.hasAnyFilter()) { | 1568 | if (hidden > 0 && entitiesFilter.hasAnyFilter()) { |
| 1572 | $(listId).append(getHiddenBlock(hidden)); | 1569 | const hiddenBlock = await getHiddenBlock(hidden); |
| 1570 | $(listId).append(hiddenBlock); | ||
| 1573 | } | 1571 | } |
| 1574 | localizePagination($('#rm_print_characters_pagination')); | 1572 | localizePagination($('#rm_print_characters_pagination')); |
| 1575 | 1573 | ||
| @@ -0,0 +1,7 @@ | |||
| 1 | <div class="text_block empty_block"> | ||
| 2 | <i class="fa-solid {{icon}} fa-4x"></i> | ||
| 3 | <h1>{{text}}</h1> | ||
| 4 | <p data-i18n="There are no items to display."> | ||
| 5 | There are no items to display. | ||
| 6 | </p> | ||
| 7 | </div> | ||
| @@ -0,0 +1,6 @@ | |||
| 1 | <div class="text_block hidden_block"> | ||
| 2 | <small> | ||
| 3 | <p>{{text}}</p> | ||
| 4 | <div class="fa-solid fa-circle-info opacity50p" data-i18n="[title]Characters and groups hidden by filters or closed folders" title="Characters and groups hidden by filters or closed folders"></div> | ||
| 5 | </small> | ||
| 6 | </div> | ||
| @@ -5,9 +5,9 @@ import { textgenerationwebui_settings as textgen_settings, textgen_types } from | |||
| 5 | import { tokenizers } from './tokenizers.js'; | 5 | import { tokenizers } from './tokenizers.js'; |
| 6 | import { renderTemplateAsync } from './templates.js'; | 6 | import { renderTemplateAsync } from './templates.js'; |
| 7 | import { POPUP_TYPE, callGenericPopup } from './popup.js'; | 7 | import { POPUP_TYPE, callGenericPopup } from './popup.js'; |
| 8 | import { t, translate } from './i18n.js'; | 8 | import { t } from './i18n.js'; |
| 9 | import { accountStorage } from './util/AccountStorage.js'; | 9 | import { accountStorage } from './util/AccountStorage.js'; |
| 10 | import { localizePagination } from './utils.js'; | 10 | import { localizePagination, PAGINATION_TEMPLATE } from './utils.js'; |
| 11 | 11 | ||
| 12 | let mancerModels = []; | 12 | let mancerModels = []; |
| 13 | let togetherModels = []; | 13 | let togetherModels = []; |
| @@ -362,18 +362,7 @@ export async function loadFeatherlessModels(data) { | |||
| 362 | showSizeChanger: false, | 362 | showSizeChanger: false, |
| 363 | prevText: '<', | 363 | prevText: '<', |
| 364 | nextText: '>', | 364 | nextText: '>', |
| 365 | formatNavigator: function (currentPage, totalPage) { | 365 | formatNavigator: PAGINATION_TEMPLATE, |
| 366 | let translated_of; | ||
| 367 | try { | ||
| 368 | translated_of = translate('pagination_of'); | ||
| 369 | if (translated_of == 'pagination_of') { | ||
| 370 | translated_of = 'of'; | ||
| 371 | } | ||
| 372 | } catch (e) { | ||
| 373 | translated_of = 'of'; | ||
| 374 | } | ||
| 375 | return (currentPage - 1) * perPage + 1 + ' - ' + currentPage * perPage + ` ${translated_of} ` + totalPage * perPage; | ||
| 376 | }, | ||
| 377 | showNavigator: true, | 366 | showNavigator: true, |
| 378 | callback: function (modelsOnPage, pagination) { | 367 | callback: function (modelsOnPage, pagination) { |
| 379 | modelCardBlock.innerHTML = ''; | 368 | modelCardBlock.innerHTML = ''; |
| @@ -18,21 +18,8 @@ import { getCurrentLocale, t, translate } from './i18n.js'; | |||
| 18 | 18 | ||
| 19 | /** | 19 | /** |
| 20 | * Function returning pagination status string template. | 20 | * Function returning pagination status string template. |
| 21 | * @type {function} | ||
| 22 | */ | 21 | */ |
| 23 | export const PAGINATION_TEMPLATE = function() { | 22 | export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= totalNumber %>'; |
| 24 | let translated_of; | ||
| 25 | try { | ||
| 26 | translated_of = translate('pagination_of'); | ||
| 27 | if (translated_of == 'pagination_of') { | ||
| 28 | translated_of = 'of'; | ||
| 29 | } | ||
| 30 | } catch (e) { | ||
| 31 | console.error(e); | ||
| 32 | translated_of = 'of'; | ||
| 33 | } | ||
| 34 | return `<%= rangeStart %>-<%= rangeEnd %> ${translated_of} <%= totalNumber %>`; | ||
| 35 | }; | ||
| 36 | 23 | ||
| 37 | export const localizePagination = function(container) { | 24 | export const localizePagination = function(container) { |
| 38 | let options = container.find('option'); | 25 | let options = container.find('option'); |