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

Patch expressions by @RossAscends

Browse Source
This commit is contained in:
SillyLossy
2023-03-16 18:32:38 +02:00
parent 85da761244
commit 6b1b614045
2 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
public/scripts/extensions/expressions/index.js
View File

@ -26,13 +26,15 @@ function onExpressionsShowDefaultInput() {
showDefault = value;
saveSettings();
const existingImage = $('div.expression').css('background-image');
if (!value && existingImage.includes('data:image/png')) {
$('div.expression').css('background-image', 'unset');
lastMessage = null;
}
if (value) {
lastMessage = null;
const existingImageSrc = $('img.expression').prop('src');
if (existingImageSrc !== undefined) { //if we have an image in src
if (!value && existingImageSrc.includes('/img/default-expressions/')) { //and that image is from /img/ (default)
$('img.expression').prop('src', ''); //remove it
lastMessage = null;
}
if (value) {
lastMessage = null;
}
}
}
@ -136,10 +138,10 @@ async function validateImages() {
image.classList.add('debug-image');
image.width = '0px';
image.height = '0px';
image.onload = function() {
image.onload = function () {
$('#image_list').append(`<li id="${item}" class="success">${item} - OK</li>`);
}
image.onerror = function() {
image.onerror = function () {
$('#image_list').append(`<li id="${item}" class="failure">${item} - Missing</li>`);
}
$('#image_list').prepend(image);
@ -160,7 +162,7 @@ async function getExpressionsList() {
method: 'GET',
headers: { 'Bypass-Tunnel-Reminder': 'bypass' },
});
if (apiResult.ok) {
const data = await apiResult.json();
expressionsList = data.labels;
@ -175,26 +177,25 @@ async function getExpressionsList() {
async function setExpression(character, expression) {
const filename = `${expression}.png`;
const imgUrl = `url('/characters/${character}/${filename}')`;
$('div.expression').css('background-image', imgUrl);
const debugImageStatus = document.querySelector(`#image_list li[id="${filename}"]`);
if (showDefault && debugImageStatus && debugImageStatus.classList.contains('failure')) {
try {
const imgUrl = new URL(getApiUrl());
imgUrl.pathname = `/api/asset/${MODULE_NAME}/${filename}`;
const dataUri = await urlContentToDataUri(imgUrl.toString(), { method: 'GET', headers: { 'Bypass-Tunnel-Reminder': 'bypass' } });
$('div.expression').css('background-image', `url(${dataUri})`);
}
catch {
$('div.expression').css('background-image', 'unset');
if (debugImageStatus && !debugImageStatus.classList.contains('failure')) {
console.log('setting expression from character images folder');
const imgUrl = `/characters/${character}/${filename}`;
$('img.expression').prop('src', imgUrl);
} else {
if (showDefault) {
console.log('no character images, trying default expressions');
const defImgUrl = `/img/default-expressions/${filename}`;
console.log(defImgUrl);
$('img.expression').prop('src', defImgUrl);
}
}
}
(function () {
function addExpressionImage() {
const html = `<div class="expression"></div>`
const html = `<div class="expression-holder"><img class="expression"></div>`;
$('body').append(html);
}
function addSettings() {

24
public/scripts/extensions/expressions/style.css
View File

@ -1,20 +1,28 @@
div.expression {
background-image: unset;
background-repeat: no-repeat;
background-size: contain;
background-position-y: bottom;
.expression-helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.expression-holder {
max-height: 90vh;
max-width: calc((100vw - 800px)/2);
width: 100%;
height: 100%;
position: fixed;
left: 0;
bottom: 0;
margin-left: 10px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
filter: drop-shadow(2px 2px 2px #51515199);
transition: 500ms;
}
img.expression {
max-width: 100%;
max-height: 90vh;
}
.debug-image {
display: none;
visibility: collapse;
@ -60,4 +68,4 @@ div.expression {
div.expression {
display: none;
}
}
}