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

Expressions: Fix sprite fade on mobile

Browse Source 
Absolute positioning was causing an issue on both mobile and PC in
terms of expression image sizing. Dynamically set image width and
height along with fixing absolute position anchors.

This is not a fix for groups.

Signed-off-by: kingbri <bdashore3@proton.me>
This commit is contained in:
kingbri
2023-07-10 23:03:55 -04:00
parent 9ebb1cfe90
commit e5fab05309
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -724,10 +724,18 @@ async function setExpression(character, expression, force) {
//add animation flags to both images
//to prevent multiple expression changes happening simultaneously
img.addClass('expression-animating')
img.addClass('expression-animating');
// Set the parent container's min width and height before running the transition
const imgWidth = img.width();
const imgHeight = img.height();
const expressionHolder = img.parent();
expressionHolder.css('min-width', imgWidth > 100 ? imgWidth : 100);
expressionHolder.css('min-height', imgHeight > 100 ? imgHeight : 100);
//position absolute prevent the original from jumping around during transition
img.css('position', 'absolute')
expressionClone.addClass('expression-animating')
img.css('position', 'absolute');
expressionClone.addClass('expression-animating');
//fade the clone in
expressionClone.css({
opacity: 0
@@ -742,8 +750,12 @@ async function setExpression(character, expression, force) {
//remove old expression
img.remove();
//replace ID so it becomes the new 'original' expression for next change
expressionClone.attr('id', 'expression-image')
expressionClone.removeClass('expression-animating')
expressionClone.attr('id', 'expression-image');
expressionClone.removeClass('expression-animating');
// Reset the expression holder min height and width
expressionHolder.css('min-width', 100);
expressionHolder.css('min-height', 100);
});