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

Renamable backgrounds

Browse Source
This commit is contained in:
Cohee
2023-07-17 14:54:40 +03:00
parent 2e2ad6589e
commit 3af4598fc9
4 changed files with 99 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@@ -3107,6 +3107,15 @@
</div>
</div>
<div id="background_template" class="template_element">
<div class="bg_example flex-container" bgfile="" class="bg_example_img" title="">
<div title="Rename background" bgfile="" class="bg_button bg_example_edit fa-solid fa-pencil"></div>
<div title="Delete background" bgfile="" class="bg_button bg_example_cross fa-solid fa-circle-xmark"></div>
<div class="BGSampleTitle">
</div>
</div>
</div>
<!-- templates for JS to reuse when needed -->
<div id="context_editor_template" class="template_element">
<div class="context_editor">
@@ -3847,4 +3856,4 @@
</script>
</body>
</html>
</html>

68
public/script.js
View File

@@ -966,22 +966,25 @@ async function getBackgrounds() {
const getData = await response.json();
//background = getData;
//console.log(getData.length);
$("#bg_menu_content").empty();
for (const bg of getData) {
const thumbPath = getThumbnailUrl('bg', bg);
$("#bg_menu_content").append(
`<div class="bg_example flex-container" bgfile="${bg}" class="bg_example_img" title="${bg}" style="background-image: url('${thumbPath}');">
<div bgfile="${bg}" class="bg_example_cross fa-solid fa-circle-xmark"></div>
<div class="BGSampleTitle">
${bg
.replace('.png', '')
.replace('.jpg', '')
.replace('.webp', '')}
</div>
</div>`
);
const template = getBackgroundFromTemplate(bg);
$("#bg_menu_content").append(template);
}
}
}
function getBackgroundFromTemplate(bg) {
const thumbPath = getThumbnailUrl('bg', bg);
const template = $('#background_template .bg_example').clone();
template.attr('bgfile', bg);
template.attr('title', bg);
template.find('.bg_button').attr('bgfile', bg);
template.css('background-image', `url('${thumbPath}')`);
template.find('.BGSampleTitle').text(bg.slice(0, bg.lastIndexOf('.')));
return template;
}
async function isColab() {
is_checked_colab = true;
const response = await fetch("/iscolab", {
@@ -5673,11 +5676,7 @@ function read_bg_load(input) {
"background-image",
`url("${e.target.result}")`
);
$("#form_bg_download").after(
`<div class="bg_example" bgfile="${html}" style="background-image: url('${getThumbnailUrl('bg', html)}');">
<div class="bg_example_cross fa-solid fa-circle-xmark"></div>
</div>`
);
$("#form_bg_download").after(getBackgroundFromTemplate(html));
},
error: function (jqXHR, exception) {
console.log(exception);
@@ -7074,6 +7073,41 @@ $(document).ready(function () {
});
});
$(document).on('click', '.bg_example_edit', async function (e) {
e.stopPropagation();
const old_bg = $(this).attr('bgfile');
if (!old_bg) {
console.debug('no bgfile');
return;
}
const fileExtension = old_bg.split('.').pop();
const old_bg_extensionless = old_bg.replace(`.${fileExtension}`, '');
const new_bg_extensionless = await callPopup('<h3>Enter new background name:</h3>', 'input', old_bg_extensionless);
const new_bg = `${new_bg_extensionless}.${fileExtension}`;
if (old_bg_extensionless === new_bg_extensionless) {
console.debug('new_bg === old_bg');
return;
}
const data = { old_bg, new_bg };
const response = await fetch('/renamebackground', {
method: 'POST',
headers:getRequestHeaders(),
body: JSON.stringify(data),
cache: 'no-cache',
});
if (response.ok) {
await getBackgrounds();
} else {
toastr.warning('Failed to rename background');
}
});
$(document).on("click", ".bg_example_cross", function (e) {
e.stopPropagation();
bg_file_for_del = $(this);

22
public/style.css
View File

@@ -1626,6 +1626,7 @@ body.big-avatars .ch_description {
cursor: pointer;
aspect-ratio: 16/9;
justify-content: flex-end;
position: relative;
}
.BGSampleTitle {
@@ -1642,12 +1643,10 @@ body.big-avatars .ch_description {
font-size: calc(var(--fontScale) * 0.9em);
}
.bg_example_cross {
.bg_button {
width: 15px;
height: 15px;
position: relative;
/* float: right; */
right: 10px;
position: absolute;
top: 5px;
cursor: pointer;
opacity: 0.7;
@@ -1658,6 +1657,19 @@ body.big-avatars .ch_description {
padding: 0;
margin: 0;
filter: drop-shadow(0px 0px 3px white);
transition: opacity 0.2s ease-in-out;
}
.bg_button:hover {
opacity: 1;
}
.bg_example_cross {
right: 10px;
}
.bg_example_edit {
left: 10px;
}
.no-border {
@@ -5383,4 +5395,4 @@ body.waifuMode .zoomed_avatar {
background-color: var(--SmartThemeBlurTintColor);
text-align: center;
line-height: 14px;
}
}

21
server.js
View File

@@ -1338,6 +1338,27 @@ app.post("/delchat", jsonParser, function (request, response) {
return response.send('ok');
});
app.post('/renamebackground', jsonParser, function (request, response) {
if (!request.body) return response.sendStatus(400);
const oldFileName = path.join('public/backgrounds/', sanitize(request.body.old_bg));
const newFileName = path.join('public/backgrounds/', sanitize(request.body.new_bg));
if (!fs.existsSync(oldFileName)) {
console.log('BG file not found');
return response.sendStatus(400);
}
if (fs.existsSync(newFileName)) {
console.log('New BG file already exists');
return response.sendStatus(400);
}
fs.renameSync(oldFileName, newFileName);
invalidateThumbnail('bg', request.body.old_bg);
return response.send('ok');
});
app.post("/downloadbackground", urlencodedParser, function (request, response) {
response_dw_bg = response;
if (!request.body || !request.file) return response.sendStatus(400);