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

Adjust style and add magnification to zoomed avatar

Browse Source
This commit is contained in:
Kristan Schlikow
2024-04-14 02:57:57 +02:00
parent facc5d078a
commit 0c4da602ab
4 changed files with 245 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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));