Auto-set hotswap slot number based on the screen width.
This commit is contained in:
parent
688551ffa6
commit
17a5d629ea
|
@ -3229,7 +3229,7 @@
|
|||
</div>
|
||||
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
|
||||
</div>
|
||||
<div name="HotSwapWrapper" class="alignitemscenter flex-container margin0auto">
|
||||
<div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto width100p">
|
||||
<div class="hotswap flex-container flex1"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -8506,6 +8506,7 @@ jQuery(async function () {
|
|||
jQuery(this).css('display', 'flex'); //flex needed to make charlist scroll
|
||||
},
|
||||
complete: async function () {
|
||||
favsToHotswap();
|
||||
await delay(50);
|
||||
$(this).closest('.drawer-content').removeClass('resizing');
|
||||
$("#rm_print_characters_block").trigger("scroll");
|
||||
|
|
|
@ -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 imgLoadPromise = new Promise((resolve) => {
|
||||
const avatarUrl = getThumbnailUrl('avatar', entity.item.avatar);
|
||||
$(slot).find('img').attr('src', avatarUrl);
|
||||
$(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
|
||||
|
|
|
@ -16,7 +16,7 @@ import {
|
|||
setEditedMessageId,
|
||||
renderTemplate,
|
||||
} from "../script.js";
|
||||
import { isMobile, initMovingUI } from "./RossAscends-mods.js";
|
||||
import { isMobile, initMovingUI, favsToHotswap } from "./RossAscends-mods.js";
|
||||
import {
|
||||
groups,
|
||||
resetSelectedGroup,
|
||||
|
@ -30,7 +30,7 @@ import {
|
|||
import { registerSlashCommand } from "./slash-commands.js";
|
||||
import { tokenizers } from "./tokenizers.js";
|
||||
|
||||
import { countOccurrences, delay, isOdd, resetScrollHeight, sortMoments, timestampToMoment } from "./utils.js";
|
||||
import { countOccurrences, debounce, delay, isOdd, resetScrollHeight, sortMoments, timestampToMoment } from "./utils.js";
|
||||
|
||||
export {
|
||||
loadPowerUserSettings,
|
||||
|
@ -242,6 +242,8 @@ const storage_keys = {
|
|||
let browser_has_focus = true;
|
||||
const debug_functions = [];
|
||||
|
||||
const setHotswapsDebounced = debounce(favsToHotswap, 500);
|
||||
|
||||
export function switchSimpleMode() {
|
||||
$('[data-newbie-hidden]').each(function () {
|
||||
$(this).toggleClass('displayNone', power_user.ui_mode === ui_mode.SIMPLE);
|
||||
|
@ -1740,6 +1742,7 @@ $(document).ready(() => {
|
|||
resetMovablePanels('resize');
|
||||
}
|
||||
// Adjust layout and styling here
|
||||
setHotswapsDebounced();
|
||||
});
|
||||
|
||||
// Settings that go to settings.json
|
||||
|
@ -1864,6 +1867,7 @@ $(document).ready(() => {
|
|||
power_user.chat_width = Number(e.target.value);
|
||||
localStorage.setItem(storage_keys.chat_width, power_user.chat_width);
|
||||
applyChatWidth();
|
||||
setHotswapsDebounced();
|
||||
});
|
||||
|
||||
$(`input[name="font_scale"]`).on('input', async function (e) {
|
||||
|
|
|
@ -789,6 +789,10 @@ hr {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#HotSwapWrapper .hotswap {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.hotswapAvatar,
|
||||
.hotswapAvatar .avatar {
|
||||
width: 50px !important;
|
||||
|
|
Loading…
Reference in New Issue