rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adjust style and add magnification to zoomed avatar

This commit is contained in:
Kristan Schlikow 2024-04-14 02:57:57 +02:00
parent facc5d078a
commit 0c4da602ab
No known key found for this signature in database
GPG Key ID: B92ED0CBF4AD31EA
4 changed files with 245 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html
View File

@ -49,6 +49,7 @@
<script src="lib/svg-inject.js"></script>
<script src="lib/Readability.js"></script>
<script src="lib/Readability-readerable.js"></script>
<script src="lib/jquery.izoomify.js"></script>
<script type="module" src="lib/structured-clone/monkey-patch.js"></script>
<script type="module" src="lib/swiped-events.js"></script>
<script type="module" src="lib/eventemitter.js"></script>
@ -5941,8 +5942,13 @@
</div>
<div id="zoomed_avatar_template" class="template_element">
<div class="zoomed_avatar">
<div id="" class="fa-solid fa-grip drag-grabber"></div>
<img class="zoomed_avatar_img" src="">
<div class="fa-solid fa-grip drag-grabber"></div>
<div class="zoomed_avatar_container">
<img class="zoomed_avatar_img" src=""
data-izoomify-url=""
data-izoomify-magnify="1.8"
data-izoomify-duration="300" alt="">
</div>
</div>
</div>
<template id="generic_draggable_template">

216
public/lib/jquery.izoomify.js Normal file
View File

@ -0,0 +1,216 @@
/*!
* @name: jquery-izoomify
* @version: 1.0
* @author: Carl Lomer Abia
*/
(function ($) {
var defaults = {
callback: false,
target: false,
duration: 120,
magnify: 1.2,
touch: true,
url: false
};
var _izoomify = function (target, duration, magnify, url) {
var xPos,
yPos,
$elTarget = $(target),
$imgTarget = $elTarget.find('img:first'),
imgOrigSrc = $imgTarget.attr('src'),
imgSwapSrc,
defaultOrigin = 'center top ' + 0 + 'px',
resultOrigin,
dUrl = 'data-izoomify-url',
dMagnify = 'data-izoomify-magnify',
dDuration = 'data-izoomify-duration',
eClass = 'izoomify-in',
eMagnify,
eDuration;
function imageSource(imgSource) {
var _img = new Image();
_img.src = imgSource;
return _img.src;
}
function getImageAttribute($img, dataAttribute, defaultAttribute) {
if ($img.attr(dataAttribute)) {
return $img.attr(dataAttribute);
}
return defaultAttribute;
}
function getImageSource($img, dataImageSource, defaultImageSource) {
if ($img.attr(dataImageSource)) {
return imageSource($img.attr(dataImageSource));
}
return defaultImageSource ? imageSource(defaultImageSource) : false;
}
function getTouches(e) {
return e.touches || e.originalEvent.touches;
}
imgSwapSrc = getImageSource($imgTarget, dUrl, url);
eMagnify = getImageAttribute($imgTarget, dMagnify, magnify);
eDuration = getImageAttribute($imgTarget, dDuration, duration);
$elTarget
.addClass(eClass)
.css({
'position': 'relative',
'overflow': 'hidden'
});
$imgTarget.css({
'-webkit-transition-property': '-webkit-transform',
'transition-property': '-webkit-transform',
'-o-transition-property': 'transform',
'transition-property': 'transform',
'transition-property': 'transform, -webkit-transform',
'-webkit-transition-timing-function': 'ease',
'-o-transition-timing-function': 'ease',
'transition-timing-function': 'ease',
'-webkit-transition-duration': eDuration + 'ms',
'-o-transition-duration': eDuration + 'ms',
'transition-duration': eDuration + 'ms',
'-webkit-transform': 'scale(1)',
'-ms-transform': 'scale(1)',
'transform': 'scale(1)',
'-webkit-transform-origin': defaultOrigin,
'-ms-transform-origin': defaultOrigin,
'transform-origin': defaultOrigin
});
return {
moveStart: function (e, hasTouch) {
var o = $(target).offset();
if (hasTouch) {
e.preventDefault();
xPos = getTouches(e)[0].clientX - o.left;
yPos = getTouches(e)[0].clientY - o.top;
} else {
xPos = e.pageX - o.left;
yPos = e.pageY - o.top;
}
resultOrigin = xPos + 'px ' + yPos + 'px ' + 0 + 'px';
$imgTarget
.css({
'-webkit-transform': 'scale(' + eMagnify + ')',
'-ms-transform': 'scale(' + eMagnify + ')',
'transform': 'scale(' + eMagnify + ')',
'-webkit-transform-origin': resultOrigin,
'-ms-transform-origin': resultOrigin,
'transform-origin': resultOrigin
})
.attr('src', imgSwapSrc || imgOrigSrc);
},
moveEnd: function () {
this.reset();
},
reset: function () {
resultOrigin = defaultOrigin;
$imgTarget
.css({
'-webkit-transform': 'scale(1)',
'-ms-transform': 'scale(1)',
'transform': 'scale(1)',
'-webkit-transform-origin': resultOrigin,
'-ms-transform-origin': resultOrigin,
'transform-origin': resultOrigin
})
.attr('src', imgOrigSrc);
}
}
};
$.fn.izoomify = function (options) {
return this.each(function () {
var settings = $.extend({}, defaults, options || {}),
$target = settings.target && $(settings.target)[0] || this,
src = this,
$src = $(src),
mouseStartEvents = 'mouseover.izoomify mousemove.izoomify',
mouseEndEvents = 'mouseleave.izoomify mouseout.izoomify',
touchStartEvents = 'touchstart.izoomify touchmove.izoomify',
touchEndEvents = 'touchend.izoomify';
var izoomify = _izoomify($target, settings.duration, settings.magnify, settings.url);
function startEvent(e, hasTouch) {
izoomify.moveStart(e, hasTouch);
}
function endEvent($src) {
izoomify.moveEnd();
if ($src) {
$src
.off(touchStartEvents)
.off(touchEndEvents);
}
}
function resetImage() {
izoomify.reset();
}
$src.one('izoomify.destroy', function () {
$src.removeClass('izoomify-in');
resetImage();
$src
.off(mouseStartEvents)
.off(mouseEndEvents);
if (settings.touch) {
$src
.off(touchStartEvents)
.off(touchStartEvents);
}
$target.style.position = '';
$target.style.overflow = '';
}.bind(this));
$src
.on(mouseStartEvents, function (e) {
startEvent(e);
})
.on(mouseEndEvents, function () {
endEvent();
});
if (settings.touch) {
$src
.on(touchStartEvents, function (e) {
e.preventDefault();
startEvent(e, true);
})
.on(touchEndEvents, function () {
endEvent();
});
}
if ($.isFunction(settings.callback)) {
settings.callback.call($src);
}
});
};
$.fn.izoomify.defaults = defaults;
}(window.jQuery));

11
public/script.js
View File

@ -10213,7 +10213,8 @@ jQuery(async function () {
const avatarSrc = isDataURL(thumbURL) ? thumbURL : charsPath + targetAvatarImg;
if ($(`.zoomed_avatar[forChar="${charname}"]`).length) {
console.debug('removing container as it already existed');
$(`.zoomed_avatar[forChar="${charname}"]`).remove();
$(`.zoomed_avatar[forChar="${charname}"]`).fadeOut();
setTimeout(function() { $(`.zoomed_avatar[forChar="${charname}"]`).remove(); }, 410);
} else {
console.debug('making new container from template');
const template = $('#zoomed_avatar_template').html();
@ -10224,17 +10225,23 @@ jQuery(async function () {
newElement.find('.drag-grabber').attr('id', `zoomFor_${charname}header`);
$('body').append(newElement);
newElement.fadeIn();
if (messageElement.attr('is_user') == 'true') { //handle user avatars
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', thumbURL);
} else if (messageElement.attr('is_system') == 'true' && !isValidCharacter) { //handle system avatars
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', thumbURL);
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', thumbURL);
} else if (messageElement.attr('is_user') == 'false') { //handle char avatars
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('src', avatarSrc);
$(`.zoomed_avatar[forChar="${charname}"] img`).attr('data-izoomify-url', avatarSrc);
}
loadMovingUIState();
$(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'block');
$(`.zoomed_avatar[forChar="${charname}"]`).css('display', 'flex');
dragElement(newElement);
$('.zoomed_avatar_container').izoomify();
$(`.zoomed_avatar[forChar="${charname}"] img`).on('dragstart', (e) => {
console.log('saw drag on avatar!');
e.preventDefault();

15
public/style.css
View File

@ -3811,13 +3811,22 @@ body:not(.movingUI) .drawer-content.maximized {
background-color: transparent;
max-width: var(--maxWidth);
left: var(--leftPosition);
position: absolute;
height: 100%;
max-height: 100vh !important;
align-items: center;
}
.zoomed_avatar_container {
width: 100%;
margin-inline: 10px;
}
.zoomed_avatar img {
height: 100%;
height: unset !important;
width: 100%;
vertical-align: bottom;
object-fit: cover;
object-fit: contain !important;
border-radius: 10px;
}
/* Hide scrollbar for Chrome, Safari and Opera */