lightgallery/plugins/zoom/lg-zoom.min.js

lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile

/**
 * lightgallery | 2.1.7 | July 1st 2021
 * http://www.lightgalleryjs.com/
 * Copyright (c) 2020 Sachin Neravath;
 * @license GPLv3
 */

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgZoom=e()}(this,function(){"use strict";var o=function(){return(o=Object.assign||function(t){for(var e,o=1,a=arguments.length;o<a;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},a={scale:1,zoom:!0,actualSize:!0,showZoomInOutIcons:!1,actualSizeIcons:{zoomIn:"lg-zoom-in",zoomOut:"lg-zoom-out"},enableZoomAfter:300},t="lgContainerResize",e="lgBeforeOpen",i="lgSlideItemLoad",s="lgAfterSlide";function r(t,e){return this.core=t,this.$LG=e,this.settings=o(o({},a),this.core.settings),this}return r.prototype.buildTemplates=function(){var t=this.settings.showZoomInOutIcons?'<button id="'+this.core.getIdName("lg-zoom-in")+'" type="button" aria-label="Zoom in" class="lg-zoom-in lg-icon"></button><button id="'+this.core.getIdName("lg-zoom-out")+'" type="button" aria-label="Zoom out" class="lg-zoom-out lg-icon"></button>':"";this.settings.actualSize&&(t+='<button id="'+this.core.getIdName("lg-actual-size")+'" type="button" aria-label="View actual size" class="'+this.settings.actualSizeIcons.zoomIn+' lg-icon"></button>'),this.core.outer.addClass("lg-use-transition-for-zoom"),this.core.$toolbar.first().append(t)},r.prototype.enableZoom=function(t){var e=this,o=this.settings.enableZoomAfter+t.detail.delay;this.$LG("body").first().hasClass("lg-from-hash")&&t.detail.delay?o=0:this.$LG("body").first().removeClass("lg-from-hash"),this.zoomableTimeout=setTimeout(function(){e.core.getSlideItem(t.detail.index).addClass("lg-zoomable")},o+30)},r.prototype.enableZoomOnSlideItemLoad=function(){this.core.LGel.on(i+".zoom",this.enableZoom.bind(this))},r.prototype.getModifier=function(t,e,o){var a=t;t=Math.abs(t);var i=this.getCurrentTransform(o);if(!i)return 1;var s,o=1;return"X"===e?(s=Math.sign(parseFloat(i[0])),0===t||180===t?o=1:90===t&&(o=-90===a&&1===s||90===a&&-1===s?-1:1),o*=s):(s=Math.sign(parseFloat(i[3])),0===t||180===t?o=1:90===t&&(t=parseFloat(i[1]),i=parseFloat(i[2]),o=Math.sign(t*i*a*s)),o*=s),o},r.prototype.getImageSize=function(t,e,o){return 90===e&&(o="x"===o?"y":"x"),t[{y:"offsetHeight",x:"offsetWidth"}[o]]},r.prototype.getDragCords=function(t,e){return 90===e?{x:t.pageY,y:t.pageX}:{x:t.pageX,y:t.pageY}},r.prototype.getSwipeCords=function(t,e){var o=t.targetTouches[0].pageX,t=t.targetTouches[0].pageY;return 90===e?{x:t,y:o}:{x:o,y:t}},r.prototype.getDragAllowedAxises=function(t,e){var o=this.core.$lgContent.get(),a=parseFloat(t.attr("data-scale"))||1,i=t.get(),t=this.getImageSize(i,e,"y")*a>o.clientHeight,o=this.getImageSize(i,e,"x")*a>o.clientWidth;return 90===e?{allowX:t,allowY:o}:{allowX:o,allowY:t}},r.prototype.getCurrentTransform=function(t){if(t){t=window.getComputedStyle(t,null),t=t.getPropertyValue("-webkit-transform")||t.getPropertyValue("-moz-transform")||t.getPropertyValue("-ms-transform")||t.getPropertyValue("-o-transform")||t.getPropertyValue("transform")||"none";return"none"!==t?t.split("(")[1].split(")")[0].split(","):void 0}},r.prototype.getCurrentRotation=function(t){if(!t)return 0;t=this.getCurrentTransform(t);return t?Math.round(Math.atan2(parseFloat(t[1]),parseFloat(t[0]))*(180/Math.PI)):0},r.prototype.zoomImage=function(t){var e,o,a=this.core.getSlideItem(this.core.index).find(".lg-image").first(),i=a.get();i&&(o=((e=this.core.outer.get().getBoundingClientRect()).width-i.offsetWidth)/2+e.left,i=(e.height-i.offsetHeight)/2+this.$LG(window).scrollTop()+e.top,1===t&&(this.positionChanged=!1),this.positionChanged&&(e=parseFloat(a.parent().attr("data-x"))/(parseFloat(a.attr("data-scale"))-1),a=parseFloat(a.parent().attr("data-y"))/(parseFloat(a.attr("data-scale"))-1),this.pageX=e+o,this.pageY=a+i,this.positionChanged=!1),o=(t-1)*(this.pageX-o),i=(t-1)*(this.pageY-i),this.setZoomStyles({x:o,y:i,scale:t}))},r.prototype.setZoomStyles=function(t){var e=this.core.getSlideItem(this.core.index).find(".lg-image").first(),o=this.core.outer.find(".lg-current .lg-dummy-img").first(),a=e.parent();e.attr("data-scale",t.scale+"").css("transform","scale3d("+t.scale+", "+t.scale+", 1)"),o.css("transform","scale3d("+t.scale+", "+t.scale+", 1)");o="translate3d(-"+t.x+"px, -"+t.y+"px, 0)";a.css("transform",o),a.attr("data-x",t.x).attr("data-y",t.y)},r.prototype.setActualSize=function(t,e){var o,a=this;this.core.galleryItems[this.core.index].src&&!this.core.outer.hasClass("lg-first-slide-loading")&&(o=this.getCurrentImageActualSizeScale(),this.core.outer.hasClass("lg-zoomed")?this.scale=1:this.scale=this.getScale(o),this.setPageCords(e),this.beginZoom(this.scale),this.zoomImage(this.scale),setTimeout(function(){a.core.outer.removeClass("lg-grabbing").addClass("lg-grab")},10))},r.prototype.getNaturalWidth=function(t){var e=this.core.getSlideItem(t).find(".lg-image").first(),t=this.core.galleryItems[t].width;return t?parseFloat(t):e.get().naturalWidth},r.prototype.getActualSizeScale=function(t,e){e=e<t?t/e||2:1;return e},r.prototype.getCurrentImageActualSizeScale=function(){var t=this.core.getSlideItem(this.core.index).find(".lg-image").first().get().offsetWidth,e=this.getNaturalWidth(this.core.index)||t;return this.getActualSizeScale(e,t)},r.prototype.getPageCords=function(t){var e={};return t?(e.x=t.pageX||t.targetTouches[0].pageX,e.y=t.pageY||t.targetTouches[0].pageY):(t=this.core.outer.get().getBoundingClientRect(),e.x=t.width/2+t.left,e.y=t.height/2+this.$LG(window).scrollTop()+t.top),e},r.prototype.setPageCords=function(t){t=this.getPageCords(t);this.pageX=t.x,this.pageY=t.y},r.prototype.beginZoom=function(t){return this.core.outer.removeClass("lg-zoom-drag-transition lg-zoom-dragging"),1<t?(this.core.outer.addClass("lg-zoomed"),this.core.getElementById("lg-actual-size").removeClass(this.settings.actualSizeIcons.zoomIn).addClass(this.settings.actualSizeIcons.zoomOut)):this.resetZoom(),1<t},r.prototype.getScale=function(t){var e=this.getCurrentImageActualSizeScale();return t<1?t=1:e<t&&(t=e),t},r.prototype.init=function(){var o,a=this;this.settings.zoom&&(this.buildTemplates(),this.enableZoomOnSlideItemLoad(),o=null,this.core.outer.on("dblclick.lg",function(t){a.$LG(t.target).hasClass("lg-image")&&a.setActualSize(a.core.index,t)}),this.core.outer.on("touchstart.lg",function(t){var e=a.$LG(t.target);1===t.targetTouches.length&&e.hasClass("lg-image")&&(o?(clearTimeout(o),o=null,a.setActualSize(a.core.index,t)):o=setTimeout(function(){o=null},300),t.preventDefault())}),this.core.LGel.on(t+".zoom",function(){a.core.lgOpened&&(a.setPageCords(),a.zoomImage(a.scale))}),this.core.getElementById("lg-zoom-out").on("click.lg",function(){a.core.outer.find(".lg-current .lg-image").get()&&(a.scale-=a.settings.scale,a.scale=a.getScale(a.scale),a.beginZoom(a.scale),a.zoomImage(a.scale))}),this.core.getElementById("lg-zoom-in").on("click.lg",function(){a.zoomIn()}),this.core.getElementById("lg-actual-size").on("click.lg",function(){a.setActualSize(a.core.index)}),this.core.LGel.on(e+".zoom",function(){a.core.outer.find(".lg-item").removeClass("lg-zoomable")}),this.core.LGel.on(s+".zoom",function(t){t=t.detail.prevIndex;a.scale=1,a.positionChanged=!1,a.resetZoom(t)}),this.zoomDrag(),this.pinchZoom(),this.zoomSwipe(),this.zoomableTimeout=!1,this.positionChanged=!1,this.pageX=this.core.outer.width()/2,this.pageY=this.core.outer.height()/2+this.$LG(window).scrollTop(),this.scale=1)},r.prototype.zoomIn=function(t){this.core.galleryItems[this.core.index].src&&(t?this.scale=t:this.scale+=this.settings.scale,this.scale=this.getScale(this.scale),this.beginZoom(this.scale),this.zoomImage(this.scale))},r.prototype.resetZoom=function(t){this.core.outer.removeClass("lg-zoomed lg-zoom-drag-transition");var e=this.core.getElementById("lg-actual-size"),t=this.core.getSlideItem(void 0!==t?t:this.core.index);e.removeClass(this.settings.actualSizeIcons.zoomOut).addClass(this.settings.actualSizeIcons.zoomIn),t.find(".lg-img-wrap").first().removeAttr("style data-x data-y"),t.find(".lg-image").first().removeAttr("style data-scale"),this.setPageCords()},r.prototype.getTouchDistance=function(t){return Math.sqrt((t.targetTouches[0].pageX-t.targetTouches[1].pageX)*(t.targetTouches[0].pageX-t.targetTouches[1].pageX)+(t.targetTouches[0].pageY-t.targetTouches[1].pageY)*(t.targetTouches[0].pageY-t.targetTouches[1].pageY))},r.prototype.pinchZoom=function(){var e=this,o=0,a=!1,i=1,s=this.core.getSlideItem(this.core.index);this.core.$inner.on("touchstart.lg",function(t){s=e.core.getSlideItem(e.core.index),t.preventDefault(),2===t.targetTouches.length&&(e.$LG(t.target).hasClass("lg-item")||s.get().contains(t.target))&&(i=e.scale||1,e.core.outer.removeClass("lg-zoom-drag-transition lg-zoom-dragging"),e.core.touchAction="pinch",o=e.getTouchDistance(t))}),this.core.$inner.on("touchmove.lg",function(t){t.preventDefault(),2===t.targetTouches.length&&"pinch"===e.core.touchAction&&(e.$LG(t.target).hasClass("lg-item")||s.get().contains(t.target))&&(t=e.getTouchDistance(t),t=o-t,!a&&5<Math.abs(t)&&(a=!0),a&&(e.scale=Math.max(1,i+.008*-t),e.zoomImage(e.scale)))}),this.core.$inner.on("touchend.lg",function(t){"pinch"===e.core.touchAction&&(e.$LG(t.target).hasClass("lg-item")||s.get().contains(t.target))&&(a=!1,o=0,e.scale<=1?e.resetZoom():(e.scale=e.getScale(e.scale),e.zoomImage(e.scale),e.core.outer.addClass("lg-zoomed")),e.core.touchAction=void 0)})},r.prototype.touchendZoom=function(t,e,o,a,i,s){var r=this.core.getSlideItem(this.core.index).find(".lg-img-rotate").first().get(),n=e.x-t.x,l=e.y-t.y,g=Math.abs(n)/i+1,c=Math.abs(l)/i+1;2<g&&(g+=1),2<c&&(c+=1),n*=g,l*=c;e=this.core.getSlideItem(this.core.index).find(".lg-img-wrap").first(),t=this.core.getSlideItem(this.core.index).find(".lg-object").first(),i=parseFloat(e.attr("data-x"))||0,g=parseFloat(e.attr("data-y"))||0,c={};c.x=-Math.abs(i)+n*this.getModifier(s,"X",r),c.y=-Math.abs(g)+l*this.getModifier(s,"Y",r);s=this.getPossibleSwipeDragCords(t,s);(15<Math.abs(n)||15<Math.abs(l))&&(a&&(c.y<=-s.maxY?c.y=-s.maxY:c.y>=-s.minY&&(c.y=-s.minY)),o&&(c.x<=-s.maxX?c.x=-s.maxX:c.x>=-s.minX&&(c.x=-s.minX)),a?e.attr("data-y",Math.abs(c.y)):(a=parseFloat(e.attr("data-y"))||0,c.y=-Math.abs(a)),o?e.attr("data-x",Math.abs(c.x)):(o=parseFloat(e.attr("data-x"))||0,c.x=-Math.abs(o)),this.setZoomSwipeStyles(e,c),this.positionChanged=!0)},r.prototype.getZoomSwipeCords=function(t,e,o,a,i,s,r,n,l){var g,c,h={};return a?(h.y=-Math.abs(s)+(e.y-t.y)*this.getModifier(n,"Y",l),h.y<=-i.maxY?(g=-i.maxY-h.y,h.y=-i.maxY-g/6):h.y>=-i.minY&&(g=h.y- -i.minY,h.y=-i.minY+g/6)):h.y=-Math.abs(s),o?(h.x=-Math.abs(r)+(e.x-t.x)*this.getModifier(n,"X",l),h.x<=-i.maxX?(c=-i.maxX-h.x,h.x=-i.maxX-c/6):h.x>=-i.minX&&(c=h.x- -i.minX,h.x=-i.minX+c/6)):h.x=-Math.abs(r),h},r.prototype.getPossibleSwipeDragCords=function(t,e){var o=this.core.$lgContent,a=o.height(),i=o.width(),s=this.getImageSize(t.get(),e,"y"),r=this.getImageSize(t.get(),e,"x"),o=parseFloat(t.attr("data-scale"))||1,t=Math.abs(o),o=(a-s)/2,s=Math.abs(s*t-a+o),a=(i-r)/2,i=Math.abs(r*t-i+a);return 90===e?{minY:a,maxY:i,minX:o,maxX:s}:{minY:o,maxY:s,minX:a,maxX:i}},r.prototype.setZoomSwipeStyles=function(t,e){t.css("transform","translate3d("+e.x+"px, "+e.y+"px, 0)")},r.prototype.zoomSwipe=function(){var a,i,s=this,r={},e={},o=!1,n=!1,l=!1,g=new Date,c=(new Date,0),h=0,m=null,u=0,d=this.core.getSlideItem(this.core.index);this.core.$inner.on("touchstart.lg",function(t){var e,o;t.preventDefault(),s.core.galleryItems[s.core.index].src&&(d=s.core.getSlideItem(s.core.index),(s.$LG(t.target).hasClass("lg-item")||d.get().contains(t.target))&&1===t.targetTouches.length&&s.core.outer.hasClass("lg-zoomed")&&(g=new Date,s.core.touchAction="zoomSwipe",e=s.core.getSlideItem(s.core.index).find(".lg-object").first(),i=s.core.getSlideItem(s.core.index).find(".lg-img-wrap").first(),m=s.core.getSlideItem(s.core.index).find(".lg-img-rotate").first().get(),u=s.getCurrentRotation(m),o=s.getDragAllowedAxises(e,Math.abs(u)),l=o.allowY,((n=o.allowX)||l)&&(r=s.getSwipeCords(t,Math.abs(u))),h=parseFloat(i.attr("data-y")),c=parseFloat(i.attr("data-x")),a=s.getPossibleSwipeDragCords(e,u),s.core.outer.addClass("lg-zoom-dragging lg-zoom-drag-transition")))}),this.core.$inner.on("touchmove.lg",function(t){t.preventDefault(),1===t.targetTouches.length&&"zoomSwipe"===s.core.touchAction&&(s.$LG(t.target).hasClass("lg-item")||d.get().contains(t.target))&&(s.core.touchAction="zoomSwipe",e=s.getSwipeCords(t,Math.abs(u)),t=s.getZoomSwipeCords(r,e,n,l,a,h,c,u,m),(15<Math.abs(e.x-r.x)||15<Math.abs(e.y-r.y))&&(o=!0,s.setZoomSwipeStyles(i,t)))}),this.core.$inner.on("touchend.lg",function(t){"zoomSwipe"===s.core.touchAction&&(s.$LG(t.target).hasClass("lg-item")||d.get().contains(t.target))&&(s.core.touchAction=void 0,s.core.outer.removeClass("lg-zoom-dragging"),o&&(o=!1,t=(new Date).valueOf()-g.valueOf(),s.touchendZoom(r,e,n,l,t,u)))})},r.prototype.zoomDrag=function(){var a,e,i,s,r,n,l=this,g={},o={},c=!1,h=!1,m=null,u=0,d=!1,p=!1;this.core.outer.on("mousedown.lg.zoom",function(t){var e,o;l.core.galleryItems[l.core.index].src&&(o=l.core.getSlideItem(l.core.index),(l.$LG(t.target).hasClass("lg-item")||o.get().contains(t.target))&&(a=new Date,e=l.core.getSlideItem(l.core.index).find(".lg-object").first(),n=l.core.getSlideItem(l.core.index).find(".lg-img-wrap").first(),m=l.core.getSlideItem(l.core.index).find(".lg-img-rotate").get(),u=l.getCurrentRotation(m),o=l.getDragAllowedAxises(e,Math.abs(u)),p=o.allowY,d=o.allowX,l.core.outer.hasClass("lg-zoomed")&&l.$LG(t.target).hasClass("lg-object")&&(d||p)&&(t.preventDefault(),g=l.getDragCords(t,Math.abs(u)),i=l.getPossibleSwipeDragCords(e,u),c=!0,s=parseFloat(n.attr("data-y")),r=parseFloat(n.attr("data-x")),l.core.outer.get().scrollLeft+=1,--l.core.outer.get().scrollLeft,l.core.outer.removeClass("lg-grab").addClass("lg-grabbing lg-zoom-drag-transition lg-zoom-dragging"))))}),this.$LG(window).on("mousemove.lg.zoom.global"+this.core.lgId,function(t){c&&(h=!0,o=l.getDragCords(t,Math.abs(u)),t=l.getZoomSwipeCords(g,o,d,p,i,s,r,u,m),l.setZoomSwipeStyles(n,t))}),this.$LG(window).on("mouseup.lg.zoom.global"+this.core.lgId,function(t){c&&(e=new Date,c=!1,l.core.outer.removeClass("lg-zoom-dragging"),!h||g.x===o.x&&g.y===o.y||(o=l.getDragCords(t,Math.abs(u)),t=e.valueOf()-a.valueOf(),l.touchendZoom(g,o,d,p,t,u)),h=!1),l.core.outer.removeClass("lg-grabbing").addClass("lg-grab")})},r.prototype.closeGallery=function(){this.resetZoom()},r.prototype.destroy=function(){this.$LG(window).off(".lg.zoom.global"+this.core.lgId),this.core.LGel.off(".lg.zoom"),this.core.LGel.off(".zoom"),clearTimeout(this.zoomableTimeout),this.zoomableTimeout=!1},r});