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