Extract templates, replace pagination format

a08972759178c9704583c46a0820ce512c3ea32c

Cohee <18619528+Cohee1207@users.noreply.github.com>

5 files changed, +33 -46Showing whitespace changes
public/script.js+16 -18
@@ -1426,30 +1426,26 @@ function getBackBlock() {
1426 return template;1426 return template;
1427}1427}
14281428
1429function getEmptyBlock() {1429async 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}
14411440
1442/**1441/**
1443 * @param {number} hidden Number of hidden characters1442 * @param {number} hidden Number of hidden characters
1444 */1443 */
1445function getHiddenBlock(hidden) {1444async 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}
14551451
@@ -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) {
15691566
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'));
15751573
public/scripts/templates/emptyBlock.html+7 -0
@@ -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>
public/scripts/templates/hiddenBlock.html+6 -0
@@ -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>
public/scripts/textgen-models.js+3 -14
@@ -5,9 +5,9 @@ import { textgenerationwebui_settings as textgen_settings, textgen_types } from
5import { tokenizers } from './tokenizers.js';5import { tokenizers } from './tokenizers.js';
6import { renderTemplateAsync } from './templates.js';6import { renderTemplateAsync } from './templates.js';
7import { POPUP_TYPE, callGenericPopup } from './popup.js';7import { POPUP_TYPE, callGenericPopup } from './popup.js';
8import { t, translate } from './i18n.js';8import { t } from './i18n.js';
9import { accountStorage } from './util/AccountStorage.js';9import { accountStorage } from './util/AccountStorage.js';
10import { localizePagination } from './utils.js';10import { localizePagination, PAGINATION_TEMPLATE } from './utils.js';
1111
12let mancerModels = [];12let mancerModels = [];
13let togetherModels = [];13let 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 = '';
public/scripts/utils.js+1 -14
@@ -18,21 +18,8 @@ import { getCurrentLocale, t, translate } from './i18n.js';
1818
19/**19/**
20 * Function returning pagination status string template.20 * Function returning pagination status string template.
21 * @type {function}
22 */21 */
23export const PAGINATION_TEMPLATE = function() {22export 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};
3623
37export const localizePagination = function(container) {24export const localizePagination = function(container) {
38 let options = container.find('option');25 let options = container.find('option');