Viewing File: /home/xaimptsg/public_html/documentation/js/zoom.js
/** * zoom.js - It's the best way to zoom an image * @version v0.0.2 * @link https://github.com/fat/zoom.js * @license MIT */ + function (t) {
"use strict";
function o() {
this._activeZoom = this._initialScrollPosition = this._initialTouchPosition = this._touchMoveListener = null, this._$document = t(document), this._$window = t(window), this._$body = t(document.body), this._boundClick = t.proxy(this._clickHandler, this)
}
function i(o) {
this._fullHeight = this._fullWidth = this._overlay = this._targetImageWrap = null, this._targetImage = o, this._$body = t(document.body)
}
o.prototype.listen = function () {
this._$body.on("click", '[data-action="zoom"]', t.proxy(this._zoom, this))
}, o.prototype._zoom = function (o) {
var e = o.target;
if (e && "IMG" == e.tagName && !this._$body.hasClass("zoom-overlay-open")) return o.metaKey || o.ctrlKey ? window.open(o.target.getAttribute("data-original") || o.target.src, "_blank") : void(e.width >= t(window).width() - i.OFFSET || (this._activeZoomClose(!0), this._activeZoom = new i(e), this._activeZoom.zoomImage(), this._$window.on("scroll.zoom", t.proxy(this._scrollHandler, this)), this._$document.on("keyup.zoom", t.proxy(this._keyHandler, this)), this._$document.on("touchstart.zoom", t.proxy(this._touchStart, this)), document.addEventListener ? document.addEventListener("click", this._boundClick, !0) : document.attachEvent("onclick", this._boundClick, !0), "bubbles" in o ? o.bubbles && o.stopPropagation() : o.cancelBubble = !0))
}, o.prototype._activeZoomClose = function (t) {
this._activeZoom && (t ? this._activeZoom.dispose() : this._activeZoom.close(), this._$window.off(".zoom"), this._$document.off(".zoom"), document.removeEventListener("click", this._boundClick, !0), this._activeZoom = null)
}, o.prototype._scrollHandler = function (o) {
null === this._initialScrollPosition && (this._initialScrollPosition = t(window).scrollTop());
var i = this._initialScrollPosition - t(window).scrollTop();
Math.abs(i) >= 40 && this._activeZoomClose()
}, o.prototype._keyHandler = function (t) {
27 == t.keyCode && this._activeZoomClose()
}, o.prototype._clickHandler = function (t) {
t.preventDefault ? t.preventDefault() : event.returnValue = !1, "bubbles" in t ? t.bubbles && t.stopPropagation() : t.cancelBubble = !0, this._activeZoomClose()
}, o.prototype._touchStart = function (o) {
this._initialTouchPosition = o.touches[0].pageY, t(o.target).on("touchmove.zoom", t.proxy(this._touchMove, this))
}, o.prototype._touchMove = function (o) {
Math.abs(o.touches[0].pageY - this._initialTouchPosition) > 10 && (this._activeZoomClose(), t(o.target).off("touchmove.zoom"))
}, i.OFFSET = 80, i._MAX_WIDTH = 2560, i._MAX_HEIGHT = 4096, i.prototype.zoomImage = function () {
var o = document.createElement("img");
o.onload = t.proxy(function () {
this._fullHeight = Number(o.height), this._fullWidth = Number(o.width), this._zoomOriginal()
}, this), o.src = this._targetImage.src
}, i.prototype._zoomOriginal = function () {
this._targetImageWrap = document.createElement("div"), this._targetImageWrap.className = "zoom-img-wrap", this._targetImage.parentNode.insertBefore(this._targetImageWrap, this._targetImage), this._targetImageWrap.appendChild(this._targetImage), t(this._targetImage).addClass("zoom-img").attr("data-action", "zoom-out"), this._overlay = document.createElement("div"), this._overlay.className = "zoom-overlay", document.body.appendChild(this._overlay), this._calculateZoom(), this._triggerAnimation()
}, i.prototype._calculateZoom = function () {
this._targetImage.offsetWidth;
var o = this._fullWidth,
e = this._fullHeight,
a = (t(window).scrollTop(), o / this._targetImage.width),
s = t(window).height() - i.OFFSET,
r = t(window).width() - i.OFFSET,
n = o / e,
h = r / s;
this._imgScaleFactor = r > o && s > e ? a : h > n ? s / e * a : r / o * a
}, i.prototype._triggerAnimation = function () {
this._targetImage.offsetWidth;
var o = t(this._targetImage).offset(),
i = t(window).scrollTop(),
e = i + t(window).height() / 2,
a = t(window).width() / 2,
s = o.top + this._targetImage.height / 2,
r = o.left + this._targetImage.width / 2;
this._translateY = e - s, this._translateX = a - r;
var n = "scale(" + this._imgScaleFactor + ")",
h = "translate(" + this._translateX + "px, " + this._translateY + "px)";
t.support.transition && (h += " translateZ(0)"), t(this._targetImage).css({
"-webkit-transform": n,
"-ms-transform": n,
transform: n
}), t(this._targetImageWrap).css({
"-webkit-transform": h,
"-ms-transform": h,
transform: h
}), this._$body.addClass("zoom-overlay-open")
}, i.prototype.close = function () {
return this._$body.removeClass("zoom-overlay-open").addClass("zoom-overlay-transitioning"), t(this._targetImage).css({
"-webkit-transform": "",
"-ms-transform": "",
transform: ""
}), t(this._targetImageWrap).css({
"-webkit-transform": "",
"-ms-transform": "",
transform: ""
}), t.support.transition ? void t(this._targetImage).one(t.support.transition.end, t.proxy(this.dispose, this)).emulateTransitionEnd(300) : this.dispose()
}, i.prototype.dispose = function () {
this._targetImageWrap && this._targetImageWrap.parentNode && (t(this._targetImage).removeClass("zoom-img").attr("data-action", "zoom"), this._targetImageWrap.parentNode.replaceChild(this._targetImage, this._targetImageWrap), this._overlay.parentNode.removeChild(this._overlay), this._$body.removeClass("zoom-overlay-transitioning"))
}, t(function () {
(new o).listen()
})
}(jQuery);
Back to Directory