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

Auto-set hotswap slot number based on the screen width.

Browse Source
This commit is contained in:
Cohee
2023-09-14 15:56:01 +03:00
parent 688551ffa6
commit 17a5d629ea
5 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/scripts/RossAscends-mods.js
View File

@@ -279,10 +279,16 @@ export async function favsToHotswap() {
const entities = getEntitiesList({ doFilter: false });
const container = $('#right-nav-panel .hotswap');
const template = $('#hotswap_template .hotswapAvatar');
container.empty();
const maxCount = 6;
const DEFAULT_COUNT = 6;
const WIDTH_PER_ITEM = 60; // 50px + 5px gap + 5px padding
const containerWidth = container.outerWidth();
const maxCount = containerWidth > 0 ? Math.floor(containerWidth / WIDTH_PER_ITEM) : DEFAULT_COUNT;
let count = 0;
const promises = [];
const newContainer = container.clone();
newContainer.empty();
for (const entity of entities) {
if (count >= maxCount) {
break;
@@ -315,13 +321,18 @@ export async function favsToHotswap() {
}
if (isCharacter) {
const avatarUrl = getThumbnailUrl('avatar', entity.item.avatar);
$(slot).find('img').attr('src', avatarUrl);
$(slot).attr('title', entity.item.avatar);
const imgLoadPromise = new Promise((resolve) => {
const avatarUrl = getThumbnailUrl('avatar', entity.item.avatar);
$(slot).find('img').attr('src', avatarUrl).on('load', resolve);
$(slot).attr('title', entity.item.avatar);
});
// if the image doesn't load in 500ms, resolve the promise anyway
promises.push(Promise.race([imgLoadPromise, delay(500)]));
}
$(slot).css('cursor', 'pointer');
container.append(slot);
newContainer.append(slot);
count++;
}
@@ -329,9 +340,12 @@ export async function favsToHotswap() {
if (count < maxCount) { //if any are left over
let leftOverSlots = maxCount - count;
for (let i = 1; i <= leftOverSlots; i++) {
container.append(template.clone());
newContainer.append(template.clone());
}
}
await Promise.allSettled(promises);
container.replaceWith(newContainer);
}
//changes input bar and send button display depending on connection status