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

Add background image fitting options

Browse Source 
Closes #3133
This commit is contained in:
Cohee
2024-12-24 23:32:31 +02:00
parent 540d93592b
commit 0b43717931
3 changed files with 65 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/scripts/backgrounds.js
View File

@ -12,6 +12,7 @@ const LIST_METADATA_KEY = 'chat_backgrounds';
export let background_settings = {
name: '__transparent.png',
url: generateUrlParameter('__transparent.png', false),
fitting: 'classic',
};
export function loadBackgroundSettings(settings) {
@ -19,7 +20,12 @@ export function loadBackgroundSettings(settings) {
if (!backgroundSettings || !backgroundSettings.name || !backgroundSettings.url) {
backgroundSettings = background_settings;
}
if (!backgroundSettings.fitting) {
backgroundSettings.fitting = 'classic';
}
setBackground(backgroundSettings.name, backgroundSettings.url);
setFittingClass(backgroundSettings.fitting);
$('#background_fitting').val(backgroundSettings.fitting);
}
/**
@ -470,6 +476,18 @@ function highlightNewBackground(bg) {
flashHighlight(newBg);
}
/**
* Sets the fitting class for the background element
* @param {string} fitting Fitting type
*/
function setFittingClass(fitting) {
const backgrounds = $('#bg1, #bg_custom');
backgrounds.toggleClass('cover', fitting === 'cover');
backgrounds.toggleClass('contain', fitting === 'contain');
backgrounds.toggleClass('stretch', fitting === 'stretch');
backgrounds.toggleClass('center', fitting === 'center');
}
function onBackgroundFilterInput() {
const filterValue = String($(this).val()).toLowerCase();
$('#bg_menu_content > div').each(function () {
@ -510,4 +528,9 @@ export function initBackgrounds() {
helpString: 'Automatically changes the background based on the chat context using the AI request prompt',
}));
$('#background_fitting').on('input', function () {
background_settings.fitting = String($(this).val());
setFittingClass(background_settings.fitting);
saveSettingsDebounced();
});
}