mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2024-12-14 10:24:47 +01:00
216 lines
6.9 KiB
JavaScript
216 lines
6.9 KiB
JavaScript
/*!
|
|
* @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)); |