1 line
16 KiB
JavaScript
Executable File
1 line
16 KiB
JavaScript
Executable File
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).lgZoom=t()}(this,function(){"use strict";var o=function(){return(o=Object.assign||function(e){for(var t,o=1,i=arguments.length;o<i;o++)for(var s in t=arguments[o])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},i={scale:1,zoom:!0,infiniteZoom:!0,actualSize:!0,showZoomInOutIcons:!1,actualSizeIcons:{zoomIn:"lg-zoom-in",zoomOut:"lg-zoom-out"},enableZoomAfter:300,zoomPluginStrings:{zoomIn:"Zoom in",zoomOut:"Zoom out",viewActualSize:"View actual size"}},e="lgContainerResize",t="lgBeforeOpen",s="lgAfterOpen",n="lgSlideItemLoad",a="lgAfterSlide",r="lgRotateLeft",l="lgRotateRight",g="lgFlipHorizontal",c="lgFlipVertical";function h(e,t){return this.core=e,this.$LG=t,this.settings=o(o({},i),this.core.settings),this}return h.prototype.buildTemplates=function(){var e=this.settings.showZoomInOutIcons?'<button id="'+this.core.getIdName("lg-zoom-in")+'" type="button" aria-label="'+this.settings.zoomPluginStrings.zoomIn+'" class="lg-zoom-in lg-icon"></button><button id="'+this.core.getIdName("lg-zoom-out")+'" type="button" aria-label="'+this.settings.zoomPluginStrings.zoomIn+'" class="lg-zoom-out lg-icon"></button>':"";this.settings.actualSize&&(e+='<button id="'+this.core.getIdName("lg-actual-size")+'" type="button" aria-label="'+this.settings.zoomPluginStrings.viewActualSize+'" class="'+this.settings.actualSizeIcons.zoomIn+' lg-icon"></button>'),this.core.outer.addClass("lg-use-transition-for-zoom"),this.core.$toolbar.first().append(e)},h.prototype.enableZoom=function(e){var t=this,o=this.settings.enableZoomAfter+e.detail.delay;this.$LG("body").first().hasClass("lg-from-hash")&&e.detail.delay?o=0:this.$LG("body").first().removeClass("lg-from-hash"),this.zoomableTimeout=setTimeout(function(){t.isImageSlide(t.core.index)&&(t.core.getSlideItem(e.detail.index).addClass("lg-zoomable"),e.detail.index===t.core.index&&t.setZoomEssentials())},o+30)},h.prototype.enableZoomOnSlideItemLoad=function(){this.core.LGel.on(n+".zoom",this.enableZoom.bind(this))},h.prototype.getDragCords=function(e){return{x:e.pageX,y:e.pageY}},h.prototype.getSwipeCords=function(e){return{x:e.touches[0].pageX,y:e.touches[0].pageY}},h.prototype.getDragAllowedAxises=function(e,t){var o=this.core.getSlideItem(this.core.index).find(".lg-image").first().get(),i=0,s=0,n=o.getBoundingClientRect(),s=e?(i=o.offsetHeight*e,o.offsetWidth*e):t?(i=n.height+t*n.height,n.width+t*n.width):(i=n.height,n.width),o=i>this.containerRect.height;return{allowX:s>this.containerRect.width,allowY:o}},h.prototype.setZoomEssentials=function(){this.containerRect=this.core.$content.get().getBoundingClientRect()},h.prototype.zoomImage=function(e,t,o,i){var s,n,a,r,l,g,c,h;Math.abs(t)<=0||(l=this.containerRect.width/2+this.containerRect.left,c=this.containerRect.height/2+this.containerRect.top+this.scrollTop,1===e&&(this.positionChanged=!1),s=(n=this.getDragAllowedAxises(0,t)).allowY,n=n.allowX,this.positionChanged&&(a=this.left/(this.scale-t),r=this.top/(this.scale-t),this.pageX=l-a,this.pageY=c-r,this.positionChanged=!1),a=this.getPossibleSwipeDragCords(t),r=l-this.pageX,l=c-this.pageY,c=1<e-t?(h=(e-t)/Math.abs(t),g=(r=(t<0?-r:r)+this.left*(h+(t<0?-1:1)))/h,(l=(t<0?-l:l)+this.top*(h+(t<0?-1:1)))/h):(g=r*(h=(e-t)*t),l*h),o&&(n?this.isBeyondPossibleLeft(g,a.minX)?g=a.minX:this.isBeyondPossibleRight(g,a.maxX)&&(g=a.maxX):1<e&&(g<a.minX?g=a.minX:g>a.maxX&&(g=a.maxX)),s?this.isBeyondPossibleTop(c,a.minY)?c=a.minY:this.isBeyondPossibleBottom(c,a.maxY)&&(c=a.maxY):1<e&&(c<a.minY?c=a.minY:c>a.maxY&&(c=a.maxY))),this.setZoomStyles({x:g,y:c,scale:e}),this.left=g,this.top=c,i&&this.setZoomImageSize())},h.prototype.resetImageTranslate=function(e){var t;this.isImageSlide(e)&&(t=this.core.getSlideItem(e).find(".lg-image").first(),this.imageReset=!1,t.removeClass("reset-transition reset-transition-y reset-transition-x"),this.core.outer.removeClass("lg-actual-size"),t.css("width","auto").css("height","auto"),setTimeout(function(){t.removeClass("no-transition")},10))},h.prototype.setZoomImageSize=function(){var t=this,o=this.core.getSlideItem(this.core.index).find(".lg-image").first();setTimeout(function(){var e=t.getCurrentImageActualSizeScale();t.scale>=e&&(o.addClass("no-transition"),t.imageReset=!0)},500),setTimeout(function(){var e=t.getCurrentImageActualSizeScale();t.scale>=e&&(e=t.getDragAllowedAxises(t.scale),o.css("width",o.get().naturalWidth+"px").css("height",o.get().naturalHeight+"px"),t.core.outer.addClass("lg-actual-size"),e.allowX&&e.allowY?o.addClass("reset-transition"):e.allowX&&!e.allowY?o.addClass("reset-transition-x"):!e.allowX&&e.allowY&&o.addClass("reset-transition-y"))},550)},h.prototype.setZoomStyles=function(e){var t=this.core.getSlideItem(this.core.index).find(".lg-img-wrap").first(),o=this.core.getSlideItem(this.core.index).find(".lg-image").first(),i=this.core.outer.find(".lg-current .lg-dummy-img").first(),o=(this.scale=e.scale,o.css("transform","scale3d("+e.scale+", "+e.scale+", 1)"),i.css("transform","scale3d("+e.scale+", "+e.scale+", 1)"),"translate3d("+e.x+"px, "+e.y+"px, 0)");t.css("transform",o)},h.prototype.setActualSize=function(e,o){var i,s=this;this.zoomInProgress||(this.zoomInProgress=!0,i=this.core.galleryItems[this.core.index],this.resetImageTranslate(e),setTimeout(function(){var e,t;i.src&&!s.core.outer.hasClass("lg-first-slide-loading")&&(e=s.getCurrentImageActualSizeScale(),t=s.scale,s.core.outer.hasClass("lg-zoomed")?s.scale=1:s.scale=s.getScale(e),s.setPageCords(o),s.beginZoom(s.scale),s.zoomImage(s.scale,s.scale-t,!0,!0))},50),setTimeout(function(){s.core.outer.removeClass("lg-grabbing").addClass("lg-grab")},60),setTimeout(function(){s.zoomInProgress=!1},610))},h.prototype.getNaturalWidth=function(e){var t=this.core.getSlideItem(e).find(".lg-image").first(),e=this.core.galleryItems[e].width;return e?parseFloat(e):t.get().naturalWidth},h.prototype.getActualSizeScale=function(e,t){e=t<=e?e/t||2:1;return e},h.prototype.getCurrentImageActualSizeScale=function(){var e=this.core.getSlideItem(this.core.index).find(".lg-image").first().get().offsetWidth,t=this.getNaturalWidth(this.core.index)||e;return this.getActualSizeScale(t,e)},h.prototype.getPageCords=function(e){var t={};return e?(t.x=e.pageX||e.touches[0].pageX,t.y=e.pageY||e.touches[0].pageY):(e=this.core.$content.get().getBoundingClientRect(),t.x=e.width/2+e.left,t.y=e.height/2+this.scrollTop+e.top),t},h.prototype.setPageCords=function(e){e=this.getPageCords(e);this.pageX=e.x,this.pageY=e.y},h.prototype.manageActualPixelClassNames=function(){this.core.getElementById("lg-actual-size").removeClass(this.settings.actualSizeIcons.zoomIn).addClass(this.settings.actualSizeIcons.zoomOut)},h.prototype.beginZoom=function(e){return this.core.outer.removeClass("lg-zoom-drag-transition lg-zoom-dragging"),1<e?(this.core.outer.addClass("lg-zoomed"),this.manageActualPixelClassNames()):this.resetZoom(),1<e},h.prototype.getScale=function(e){var t=this.getCurrentImageActualSizeScale();return e<1?e=1:t<e&&(e=t),e},h.prototype.init=function(){var o,i=this;this.settings.zoom&&(this.buildTemplates(),this.enableZoomOnSlideItemLoad(),o=null,this.core.outer.on("dblclick.lg",function(e){i.$LG(e.target).hasClass("lg-image")&&i.setActualSize(i.core.index,e)}),this.core.outer.on("touchstart.lg",function(e){var t=i.$LG(e.target);1===e.touches.length&&t.hasClass("lg-image")&&(o?(clearTimeout(o),o=null,e.preventDefault(),i.setActualSize(i.core.index,e)):o=setTimeout(function(){o=null},300))}),this.core.LGel.on(e+".zoom "+l+".zoom "+r+".zoom "+g+".zoom "+c+".zoom",function(){var e;i.core.lgOpened&&i.isImageSlide(i.core.index)&&!i.core.touchAction&&(e=i.core.getSlideItem(i.core.index).find(".lg-img-wrap").first(),i.top=0,i.left=0,i.setZoomEssentials(),i.setZoomSwipeStyles(e,{x:0,y:0}),i.positionChanged=!0)}),this.$LG(window).on("scroll.lg.zoom.global"+this.core.lgId,function(){i.core.lgOpened&&(i.scrollTop=i.$LG(window).scrollTop())}),this.core.getElementById("lg-zoom-out").on("click.lg",function(){var e;i.isImageSlide(i.core.index)&&(e=0,i.imageReset&&(i.resetImageTranslate(i.core.index),e=50),setTimeout(function(){var e=i.scale-i.settings.scale;i.beginZoom(e=e<1?1:e),i.zoomImage(e,-i.settings.scale,!0,!i.settings.infiniteZoom)},e))}),this.core.getElementById("lg-zoom-in").on("click.lg",function(){i.zoomIn()}),this.core.getElementById("lg-actual-size").on("click.lg",function(){i.setActualSize(i.core.index)}),this.core.LGel.on(t+".zoom",function(){i.core.outer.find(".lg-item").removeClass("lg-zoomable")}),this.core.LGel.on(s+".zoom",function(){i.scrollTop=i.$LG(window).scrollTop(),i.pageX=i.core.outer.width()/2,i.pageY=i.core.outer.height()/2+i.scrollTop,i.scale=1}),this.core.LGel.on(a+".zoom",function(e){e=e.detail.prevIndex;i.scale=1,i.positionChanged=!1,i.zoomInProgress=!1,i.resetZoom(e),i.resetImageTranslate(e),i.isImageSlide(i.core.index)&&i.setZoomEssentials()}),this.zoomDrag(),this.pinchZoom(),this.zoomSwipe(),this.zoomableTimeout=!1,this.positionChanged=!1,this.zoomInProgress=!1)},h.prototype.zoomIn=function(){var e;this.isImageSlide(this.core.index)&&(e=this.scale+this.settings.scale,this.settings.infiniteZoom||(e=this.getScale(e)),this.beginZoom(e),this.zoomImage(e,Math.min(this.settings.scale,e-this.scale),!0,!this.settings.infiniteZoom))},h.prototype.resetZoom=function(e){this.core.outer.removeClass("lg-zoomed lg-zoom-drag-transition");var t=this.core.getElementById("lg-actual-size"),e=this.core.getSlideItem(void 0!==e?e:this.core.index);t.removeClass(this.settings.actualSizeIcons.zoomOut).addClass(this.settings.actualSizeIcons.zoomIn),e.find(".lg-img-wrap").first().removeAttr("style"),e.find(".lg-image").first().removeAttr("style"),this.scale=1,this.left=0,this.top=0,this.setPageCords()},h.prototype.getTouchDistance=function(e){return Math.sqrt((e.touches[0].pageX-e.touches[1].pageX)*(e.touches[0].pageX-e.touches[1].pageX)+(e.touches[0].pageY-e.touches[1].pageY)*(e.touches[0].pageY-e.touches[1].pageY))},h.prototype.pinchZoom=function(){var t,o=this,i=0,s=!1,n=1,a=this.core.getSlideItem(this.core.index);this.core.outer.on("touchstart.lg",function(e){a=o.core.getSlideItem(o.core.index),o.isImageSlide(o.core.index)&&2===e.touches.length&&(e.preventDefault(),o.core.outer.hasClass("lg-first-slide-loading")||(n=o.scale||1,o.core.outer.removeClass("lg-zoom-drag-transition lg-zoom-dragging"),o.setPageCords(e),o.resetImageTranslate(o.core.index),o.core.touchAction="pinch",i=o.getTouchDistance(e)))}),this.core.$inner.on("touchmove.lg",function(e){2===e.touches.length&&"pinch"===o.core.touchAction&&(o.$LG(e.target).hasClass("lg-item")||a.get().contains(e.target))&&(e.preventDefault(),e=o.getTouchDistance(e),e=i-e,(s=!s&&5<Math.abs(e)?!0:s)&&(t=o.scale,e=Math.max(1,n+.02*-e),o.scale=Math.round(100*(e+Number.EPSILON))/100,e=o.scale-t,o.zoomImage(o.scale,Math.round(100*(e+Number.EPSILON))/100,!1,!1)))}),this.core.$inner.on("touchend.lg",function(e){var t;"pinch"===o.core.touchAction&&(o.$LG(e.target).hasClass("lg-item")||a.get().contains(e.target))&&(s=!1,i=0,o.scale<=1?o.resetZoom():(e=o.getCurrentImageActualSizeScale(),o.scale>=e&&(t=e-o.scale,o.zoomImage(e,t=0===t?.01:t,!1,!0)),o.manageActualPixelClassNames(),o.core.outer.addClass("lg-zoomed")),o.core.touchAction=void 0)})},h.prototype.touchendZoom=function(e,t,o,i,s){var n=t.x-e.x,t=t.y-e.y,e=Math.abs(n)/s+1,s=Math.abs(t)/s+1,e=(2<e&&(e+=1),2<s&&(s+=1),n*=e,t*=s,this.core.getSlideItem(this.core.index).find(".lg-img-wrap").first()),s={},a=(s.x=this.left+n,s.y=this.top+t,this.getPossibleSwipeDragCords());(15<Math.abs(n)||15<Math.abs(t))&&(i&&(this.isBeyondPossibleTop(s.y,a.minY)?s.y=a.minY:this.isBeyondPossibleBottom(s.y,a.maxY)&&(s.y=a.maxY)),o&&(this.isBeyondPossibleLeft(s.x,a.minX)?s.x=a.minX:this.isBeyondPossibleRight(s.x,a.maxX)&&(s.x=a.maxX)),i?this.top=s.y:s.y=this.top,o?this.left=s.x:s.x=this.left,this.setZoomSwipeStyles(e,s),this.positionChanged=!0)},h.prototype.getZoomSwipeCords=function(e,t,o,i,s){var n={};return i?(n.y=this.top+(t.y-e.y),this.isBeyondPossibleTop(n.y,s.minY)?(i=s.minY-n.y,n.y=s.minY-i/6):this.isBeyondPossibleBottom(n.y,s.maxY)&&(i=n.y-s.maxY,n.y=s.maxY+i/6)):n.y=this.top,o?(n.x=this.left+(t.x-e.x),this.isBeyondPossibleLeft(n.x,s.minX)?(i=s.minX-n.x,n.x=s.minX-i/6):this.isBeyondPossibleRight(n.x,s.maxX)&&(o=n.x-s.maxX,n.x=s.maxX+o/6)):n.x=this.left,n},h.prototype.isBeyondPossibleLeft=function(e,t){return t<=e},h.prototype.isBeyondPossibleRight=function(e,t){return e<=t},h.prototype.isBeyondPossibleTop=function(e,t){return t<=e},h.prototype.isBeyondPossibleBottom=function(e,t){return e<=t},h.prototype.isImageSlide=function(e){e=this.core.galleryItems[e];return"image"===this.core.getSlideType(e)},h.prototype.getPossibleSwipeDragCords=function(e){var t=this.core.getSlideItem(this.core.index).find(".lg-image").first(),o=this.core.mediaContainerPosition.bottom,t=t.get().getBoundingClientRect(),i=t.height,t=t.width;return e&&(i+=e*i,t+=e*t),{minY:(i-this.containerRect.height)/2,maxY:(this.containerRect.height-i)/2+o,minX:(t-this.containerRect.width)/2,maxX:(this.containerRect.width-t)/2}},h.prototype.setZoomSwipeStyles=function(e,t){e.css("transform","translate3d("+t.x+"px, "+t.y+"px, 0)")},h.prototype.zoomSwipe=function(){var o,i,s=this,n={},t={},a=!1,r=!1,l=!1,g=new Date,c=(new Date,this.core.getSlideItem(this.core.index));this.core.$inner.on("touchstart.lg",function(e){var t;s.isImageSlide(s.core.index)&&(c=s.core.getSlideItem(s.core.index),(s.$LG(e.target).hasClass("lg-item")||c.get().contains(e.target))&&1===e.touches.length&&s.core.outer.hasClass("lg-zoomed")&&(e.preventDefault(),g=new Date,s.core.touchAction="zoomSwipe",i=s.core.getSlideItem(s.core.index).find(".lg-img-wrap").first(),t=s.getDragAllowedAxises(0),l=t.allowY,((r=t.allowX)||l)&&(n=s.getSwipeCords(e)),o=s.getPossibleSwipeDragCords(),s.core.outer.addClass("lg-zoom-dragging lg-zoom-drag-transition")))}),this.core.$inner.on("touchmove.lg",function(e){1===e.touches.length&&"zoomSwipe"===s.core.touchAction&&(s.$LG(e.target).hasClass("lg-item")||c.get().contains(e.target))&&(e.preventDefault(),s.core.touchAction="zoomSwipe",t=s.getSwipeCords(e),e=s.getZoomSwipeCords(n,t,r,l,o),(15<Math.abs(t.x-n.x)||15<Math.abs(t.y-n.y))&&(a=!0,s.setZoomSwipeStyles(i,e)))}),this.core.$inner.on("touchend.lg",function(e){"zoomSwipe"===s.core.touchAction&&(s.$LG(e.target).hasClass("lg-item")||c.get().contains(e.target))&&(e.preventDefault(),s.core.touchAction=void 0,s.core.outer.removeClass("lg-zoom-dragging"),a&&(a=!1,e=(new Date).valueOf()-g.valueOf(),s.touchendZoom(n,t,r,l,e)))})},h.prototype.zoomDrag=function(){var o,t,i,s,n=this,a={},r={},l=!1,g=!1,c=!1,h=!1;this.core.outer.on("mousedown.lg.zoom",function(e){var t;n.isImageSlide(n.core.index)&&(t=n.core.getSlideItem(n.core.index),(n.$LG(e.target).hasClass("lg-item")||t.get().contains(e.target))&&(o=new Date,s=n.core.getSlideItem(n.core.index).find(".lg-img-wrap").first(),t=n.getDragAllowedAxises(0),h=t.allowY,c=t.allowX,n.core.outer.hasClass("lg-zoomed")&&n.$LG(e.target).hasClass("lg-object")&&(c||h)&&(e.preventDefault(),a=n.getDragCords(e),i=n.getPossibleSwipeDragCords(),l=!0,n.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(e){l&&(g=!0,r=n.getDragCords(e),e=n.getZoomSwipeCords(a,r,c,h,i),n.setZoomSwipeStyles(s,e))}),this.$LG(window).on("mouseup.lg.zoom.global"+this.core.lgId,function(e){l&&(t=new Date,l=!1,n.core.outer.removeClass("lg-zoom-dragging"),!g||a.x===r.x&&a.y===r.y||(r=n.getDragCords(e),e=t.valueOf()-o.valueOf(),n.touchendZoom(a,r,c,h,e)),g=!1),n.core.outer.removeClass("lg-grabbing").addClass("lg-grab")})},h.prototype.closeGallery=function(){this.resetZoom(),this.zoomInProgress=!1},h.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},h}); |