| 123 |
- !function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof exports?require("jquery"):jQuery)}(function(t){"use strict";function i(t){var i=t.match(/\d+/g);return parseFloat(i[0])}var e=t(window),o=t(document),a={draggable:!0,resizable:!0,movable:!0,keyboard:!0,title:!0,modalWidth:320,modalHeight:320,fixedContent:!1,fixedModalSize:!1,initMaximized:!1,gapThreshold:.02,ratioThreshold:.1,minRatio:.1,maxRatio:16,toolbar:["zoomIn","zoomOut","prev","fullscreen","next","actualSize","rotateRight"],icons:{maximize:"fa fa-window-maximize",close:"fa fa-close",zoomIn:"fa fa-search-plus",zoomOut:"fa fa-search-minus",prev:"fa fa-arrow-left",next:"fa fa-arrow-right",fullscreen:"fa fa-photo",actualSize:"fa fa-arrows-alt",rotateLeft:"fa fa-rotate-left",rotateRight:"fa fa-rotate-right"},lang:"en",i18n:{}},s=null,n=!1,h=!1,l=!1,r=0,f=function(i,e){this.options=t.extend(!0,{},a,e),e&&t.isArray(e.toolbar)&&(this.options.toolbar=e.toolbar),this.init(i,this.options),this.isOpened=!1,this.isMaximized=!1,this.isRotated=!1,this.rotateAngle=0};f.prototype={init:function(i,e){this.open();var a=this.getImgSrc(i);this.groupName=null;var n=t(i).attr("data-group"),h=o.find('[data-group="'+n+'"]');void 0!==n?(this.groupName=n,this.getImgGroup(h,a)):this.getImgGroup(s.not("[data-group]"),a),this.loadImg(a)},creatBtns:function(i){var e="";return t.each(this.options.toolbar,function(t,o){e+=i[o]}),e},creatDOM:function(){var t={maximize:'<button class="magnify-button magnify-button-maximize" title="maximize"> <i class="'+this.options.icons.maximize+'" aria-hidden="true"></i> </button>',close:'<button class="magnify-button magnify-button-close" title="close"> <i class="'+this.options.icons.close+'" aria-hidden="true"></i> </button>',zoomIn:'<button class="magnify-button magnify-button-zoom-in" title="zoom-in"> <i class="'+this.options.icons.zoomIn+'" aria-hidden="true"></i> </button>',zoomOut:'<button class="magnify-button magnify-button-zoom-out" title="zoom-out"> <i class="'+this.options.icons.zoomOut+'" aria-hidden="true"></i> </button>',prev:'<button class="magnify-button magnify-button-prev" title="prev"> <i class="'+this.options.icons.prev+'" aria-hidden="true"></i> </button>',next:'<button class="magnify-button magnify-button-next" title="next"> <i class="'+this.options.icons.next+'" aria-hidden="true"></i> </button>',fullscreen:'<button class="magnify-button magnify-button-fullscreen" title="fullscreen"> <i class="'+this.options.icons.fullscreen+'" aria-hidden="true"></i> </button>',actualSize:'<button class="magnify-button magnify-button-actual-size" title="actual-size"> <i class="'+this.options.icons.actualSize+'" aria-hidden="true"></i> </button>',rotateLeft:'<button class="magnify-button magnify-button-rotate-left" title="rotate-left"> <i class="'+this.options.icons.rotateLeft+'" aria-hidden="true"></i> </button>',rotateRight:'<button class="magnify-button magnify-button-rotate-right" title="rotate-right"> <i class="'+this.options.icons.rotateRight+'" aria-hidden="true"></i> </button>'};return'<div class="magnify-modal"> <div class="magnify-header"> <div class="magnify-title"></div> <div class="magnify-toolbar">'+t.maximize+t.close+'</div> </div> <div class="magnify-stage"> <img src="" alt="" title=""> </div> <div class="magnify-footer"> <div class="magnify-toolbar">'+this.creatBtns(t)+"</div> </div> </div>"},open:function(){t(".magnify-modal").length||t("html").css("overflow","hidden"),this.isOpened=l=!0,this.build(),this.addEvent(),this.resize()},build:function(){var i=this.creatDOM(),e=t(i);this.$magnify=e,this.$stage=e.find(".magnify-stage"),this.$title=e.find(".magnify-title"),this.$image=e.find(".magnify-stage img"),this.$close=e.find(".magnify-button-close"),this.$maximize=e.find(".magnify-button-maximize"),this.$zoomIn=e.find(".magnify-button-zoom-in"),this.$zoomOut=e.find(".magnify-button-zoom-out"),this.$actualSize=e.find(".magnify-button-actual-size"),this.$fullscreen=e.find(".magnify-button-fullscreen"),this.$rotateLeft=e.find(".magnify-button-rotate-left"),this.$rotateRight=e.find(".magnify-button-rotate-right"),this.$prev=e.find(".magnify-button-prev"),this.$next=e.find(".magnify-button-next"),t("body").append(e),this.setModalPos(e),this.options.draggable&&this.draggable(e),this.options.movable&&this.movable(this.$image,this.$stage),this.options.resizable&&this.resizable(e,this.$stage,this.$image,this.options.modalWidth,this.options.modalHeight)},close:function(i){this.$magnify.remove(),this.isMaximized=!1,this.isRotated=!1,this.rotateAngle=r=0,this.isOpened=l=!1,t(".magnify-modal").length||t("html").css("overflow","auto")},setModalPos:function(t){var i=e.width(),a=e.height(),s=o.scrollLeft(),n=o.scrollTop(),h=t.width(),l=t.height();t.css({left:(i-h)/2+s+"px",top:(a-l)/2+n+"px"})},setModalSize:function(t){var a=e.width(),s=e.height(),n=o.scrollLeft(),h=o.scrollTop(),l={left:this.$stage.css("left"),right:this.$stage.css("right"),top:this.$stage.css("top"),bottom:this.$stage.css("bottom"),borderLeft:this.$stage.css("border-left-width"),borderRight:this.$stage.css("border-right-width"),borderTop:this.$stage.css("border-top-width"),borderBottom:this.$stage.css("border-bottom-width")},r=t.width+i(l.left)+i(l.right)+i(l.borderLeft)+i(l.borderRight),f=t.height+i(l.top)+i(l.bottom)+i(l.borderTop)+i(l.borderBottom),c=(this.options.gapThreshold>0?this.options.gapThreshold:0)+1,d=Math.min(a/(r*c),s/(f*c),1),g=Math.max(r*d,this.options.modalWidth),m=Math.max(f*d,this.options.modalHeight);g=this.options.fixedModalSize?this.options.modalWidth:Math.ceil(g),m=this.options.fixedModalSize?this.options.modalHeight:Math.ceil(m),this.$magnify.css({width:g+"px",height:m+"px",left:(a-g)/2+n+"px",top:(s-m)/2+h+"px"}),this.setImageSize(t)},setImageSize:function(i){var e={w:this.$stage.width(),h:this.$stage.height()},o=1;o=this.isRotated?Math.min(e.w/i.height,e.h/i.width,1):Math.min(e.w/i.width,e.h/i.height,1),this.$image.css({width:Math.ceil(i.width*o)+"px",height:Math.ceil(i.height*o)+"px",left:(e.w-i.width*o)/2+"px",top:(e.h-i.height*o)/2+"px"}),t.extend(this.imageData,{width:i.width*o,height:i.height*o,left:(e.w-i.width*o)/2,top:(e.h-i.height*o)/2})},loadImg:function(t){var i=this;this.$image.attr("src",t),function(t,i){var e=new Image;window.ActiveXObject?e.onreadystatechange=function(){"complete"==this.readyState&&i(e)}:e.onload=function(){i(e)},e.src=t}(t,function(t){i.imageData={originalWidth:t.width,originalHeight:t.height},i.isMaximized?i.setImageSize(t):i.setModalSize(t)}),this.options.title&&this.setImgTitle(t)},getImgGroup:function(i,e){var o=this;o.groupData=[],t(i).each(function(i,a){var s=o.getImgSrc(this);o.groupData.push({src:s,caption:t(this).attr("data-caption")}),e===s&&(o.groupIndex=i)})},setImgTitle:function(t){var i=this.groupIndex,e=(e=this.groupData[i].caption)||function(t){return t.replace(/^.*?\/*([^/?]*)\.[a-z]+(\?.+|$)/gi,"$1")}(t);this.$title.text(e)},getImgSrc:function(i){return t(i).attr("data-src")?t(i).attr("data-src"):t(i).attr("href")},jump:function(t){this.groupIndex=this.groupIndex+t,this.jumpTo(this.groupIndex)},jumpTo:function(t){(t%=this.groupData.length)>=0?t%=this.groupData.length:t<0&&(t=(this.groupData.length+t)%this.groupData.length),this.groupIndex=t,this.loadImg(this.groupData[t].src)},wheel:function(t){t.preventDefault();var i=1;t.originalEvent.deltaY?i=t.originalEvent.deltaY>0?1:-1:t.originalEvent.wheelDelta?i=-t.originalEvent.wheelDelta/120:t.originalEvent.detail&&(i=t.originalEvent.detail>0?1:-1);var e=-i*this.options.ratioThreshold,o={x:t.originalEvent.clientX-this.$stage.offset().left,y:t.originalEvent.clientY-this.$stage.offset().top};this.zoom(e,o,t)},zoom:function(t,i,e){(t=t<0?1/(1-t):1+t)>.95&&t<1.05&&(t=1),t=this.$image.width()/this.imageData.originalWidth*t,t=Math.max(t,this.options.minRatio),t=Math.min(t,this.options.maxRatio),this.zoomTo(t,i,e)},zoomTo:function(i,e,o){var a=this.$image,s=this.$stage,n={w:this.imageData.width,h:this.imageData.height,x:this.imageData.left,y:this.imageData.top},h={w:s.width(),h:s.height(),x:s.offset().left,y:s.offset().top},l=this.imageData.originalWidth*i,r=this.imageData.originalHeight*i,f=e.x-(e.x-n.x)/n.w*l,c=e.y-(e.y-n.y)/n.h*r,d=h.w-l,g=h.h-r,m=h.w-(l+r)/2,u=h.h-(l+r)/2;this.isRotated?(
- // The conditions bellow drive me crazy alomst!
- c=l<=h.h?(h.h-r)/2:c>(l-r)/2?(l-r)/2:c>u?c:u,f=r<=h.w?(h.w-l)/2:f>(r-l)/2?(r-l)/2:f>m?f:m):(c=r<=h.h?(h.h-r)/2:c>0?0:c>g?c:g,f=l<=h.w?(h.w-l)/2:f>0?0:f>d?f:d),a.css({width:Math.ceil(l)+"px",height:Math.ceil(r)+"px",left:f+"px",top:c+"px"}),t.extend(this.imageData,{width:l,height:r,left:f,top:c})},rotate:function(t){this.rotateAngle=r+=t,this.isRotated=r/90%2!=0,this.rotateTo(r)},rotateTo:function(t){this.$image.css({transform:"rotate("+t+"deg)"}),this.setImageSize({width:this.imageData.originalWidth,height:this.imageData.originalHeight})},resize:function(){var t=this,i=function(t,i){var e=null;return function(){var o=this,a=arguments;clearTimeout(e),e=setTimeout(function(){t.apply(o,a)},i)}}(function(){l&&(t.isMaximized||t.setModalSize({width:t.imageData.originalWidth,height:t.imageData.originalHeight}),t.setImageSize({width:t.imageData.originalWidth,height:t.imageData.originalHeight}))},500);e.off("resize").on("resize",i)},maximize:function(){var t=o.scrollLeft(),i=o.scrollTop();this.isMaximized?(this.$magnify.removeClass("magnify-maximize"),this.$magnify.css({width:this.modalData.width,height:this.modalData.height,left:this.modalData.left,top:this.modalData.top}),this.isMaximized=!1):(this.modalData={width:this.$magnify.width(),height:this.$magnify.height(),left:this.$magnify.offset().left,top:this.$magnify.offset().top},this.$magnify.addClass("magnify-maximize"),this.$magnify.css({width:"100%",height:"100%",left:t,top:i}),this.isMaximized=!0),this.setImageSize({width:this.imageData.originalWidth,height:this.imageData.originalHeight})},fullscreen:function(){!function(t){t.requestFullscreen?t.requestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen()}(this.$magnify[0])},keydown:function(t){t.preventDefault();if(!this.options.keyboard)return!1;var i=t.keyCode||t.which||t.charCode,e=t.ctrlKey||t.metaKey,o=t.altKey||t.metaKey;switch(i){case 37:this.jump(-1);break;case 39:this.jump(1);break;case 187:this.zoom(3*this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 189:this.zoom(3*-this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 61:this.zoom(3*this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 173:this.zoom(3*-this.options.ratioThreshold,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 48:e&&o&&this.zoomTo(1,{x:this.$stage.width()/2,y:this.$stage.height()/2},t);break;case 188:e&&this.rotate(-90);break;case 190:e&&this.rotate(90)}},addEvent:function(){var t=this;this.$close.off("click").on("click",function(i){t.close()}),this.$stage.off("wheel mousewheel DOMMouseScroll").on("wheel mousewheel DOMMouseScroll",function(i){t.wheel(i)}),this.$zoomIn.off("click").on("click",function(i){t.zoom(3*t.options.ratioThreshold,{x:t.$stage.width()/2,y:t.$stage.height()/2},i)}),this.$zoomOut.off("click").on("click",function(i){t.zoom(3*-t.options.ratioThreshold,{x:t.$stage.width()/2,y:t.$stage.height()/2},i)}),this.$actualSize.off("click").on("click",function(i){t.zoomTo(1,{x:t.$stage.width()/2,y:t.$stage.height()/2},i)}),this.$prev.off("click").on("click",function(){t.jump(-1)}),this.$fullscreen.off("click").on("click",function(){t.fullscreen()}),this.$next.off("click").on("click",function(){t.jump(1)}),this.$rotateLeft.off("click").on("click",function(){t.rotate(-90)}),this.$rotateRight.off("click").on("click",function(){t.rotate(90)}),this.$maximize.off("click").on("click",function(){t.maximize()}),o.off("keydown").on("keydown",function(i){t.keydown(i)})}},t.magnify={instance:f.prototype},t.fn.magnify=function(i){return s=t(this),"string"==typeof i||s.off("click.magnify").on("click.magnify",function(e){e.isDefaultPrevented()||(e.preventDefault(),t(this).data("magnify",new f(this,i)))}),s},o.on("click.magnify","[data-magnify]",function(i){s=t("[data-magnify]"),i.isDefaultPrevented()||(i.preventDefault(),t(this).data("magnify",new f(this,{})))});t.extend(f.prototype,{draggable:function(i){var e=this,a=!1,s=0,l=0,r=0,f=0;t(i).on("mousedown",function(e){if((e=e||window.event).preventDefault(),t(e.target).closest(".magnify-button").length)return!0;a=!0,s=e.clientX,l=e.clientY,r=t(i).offset().left,f=t(i).offset().top}),o.on("mousemove",function(o){if((o=o||window.event).preventDefault(),a&&!n&&!h&&!e.isMaximized){var c=o.clientX,d=o.clientY,g=c-s,m=d-l;t(i).css({left:g+r+"px",top:m+f+"px"})}return!1}),o.on("mouseup",function(t){a=!1})}});t.extend(f.prototype,{movable:function(i,e){var a=this,s=!1,h=0,l=0,r=0,f=0,c=0,d=0,g=0;t(i).on("mousedown",function(o){(o=o||window.event).preventDefault();var m=t(i).width(),u=t(i).height(),p=t(e).width(),x=t(e).height();s=!0,n=!0,h=o.clientX,l=o.clientY,g=a.isRotated?(m-u)/2:0,c=a.isRotated?u-p:m-p,d=a.isRotated?m-x:u-x,r=t(i).position().left-g,f=t(i).position().top+g}),o.on("mousemove",function(e){if((e=e||window.event).preventDefault(),s){var o=e.clientX,n=e.clientY,m=o-h,u=n-l,p=m+r,x=u+f;d>0?u+f>g?x=g:u+f<-d+g&&(x=-d+g):x=f,c>0?m+r>-g?p=-g:m+r<-c-g&&(p=-c-g):p=r,t(i).css({left:p+"px",top:x+"px"}),t.extend(a.imageData,{left:p,top:x})}return!1}),o.on("mouseup",function(t){s=!1,n=!1})}});t.extend(f.prototype,{resizable:function(i,e,a,s,n){var l=this,r=t('<div class="resizable-handle resizable-handle-e"></div>'),f=t('<div class="resizable-handle resizable-handle-w"></div>'),c=t('<div class="resizable-handle resizable-handle-s"></div>'),d=t('<div class="resizable-handle resizable-handle-n"></div>'),g=t('<div class="resizable-handle resizable-handle-se"></div>'),m=t('<div class="resizable-handle resizable-handle-sw"></div>'),u=t('<div class="resizable-handle resizable-handle-ne"></div>'),p=t('<div class="resizable-handle resizable-handle-nw"></div>'),x={e:r,s:c,se:g,n:d,w:f,nw:p,ne:u,sw:m};t(i).append(r,f,c,d,g,m,u,p);var w=!1,b=0,v=0,y={w:0,h:0,l:0,t:0},z={w:0,h:0,l:0,t:0},$={w:0,h:0,l:0,t:0},D="",M=function(o,s){(s=s||window.event).preventDefault(),w=!0,h=!0,b=s.clientX,v=s.clientY,y={w:t(i).width(),h:t(i).height(),l:t(i).offset().left,t:t(i).offset().top},z={w:t(e).width(),h:t(e).height(),l:t(e).offset().left,t:t(e).offset().top},$={w:t(a).width(),h:t(a).height(),l:t(a).position().left,t:t(a).position().top},D=o};t.each(x,function(t,i){i.on("mousedown",function(i){M(t,i)})}),o.on("mousemove",function(e){if((e=e||window.event).preventDefault(),w&&!l.isMaximized){var o=e.clientX,h=e.clientY,r=o-b,f=h-v,c=function(t,i,e){var o=-i+y.w>s?i+y.l:y.l+y.w-s,a=-e+y.h>n?e+y.t:y.t+y.h-n;return{e:{width:Math.max(i+y.w,s)+"px"},s:{height:Math.max(e+y.h,n)+"px"},se:{width:Math.max(i+y.w,s)+"px",height:Math.max(e+y.h,n)+"px"},w:{width:Math.max(-i+y.w,s)+"px",left:o+"px"},n:{height:Math.max(-e+y.h,n)+"px",top:a+"px"},nw:{width:Math.max(-i+y.w,s)+"px",height:Math.max(-e+y.h,n)+"px",top:a+"px",left:o+"px"},ne:{width:Math.max(i+y.w,s)+"px",height:Math.max(-e+y.h,n)+"px",top:a+"px"},sw:{width:Math.max(-i+y.w,s)+"px",height:Math.max(e+y.h,n)+"px",left:o+"px"}}[t]}(D,r,f);t(i).css(c);var d=function(i,e,o){var h=l.isRotated?($.w-$.h)/2:0,r=l.isRotated?$.h:$.w,f=l.isRotated?$.w:$.h,c=e+y.w>s?z.w-r+e-h:s-(y.w-z.w)-r-h,d=o+y.h>n?z.h-f+o+h:n-(y.h-z.h)-f+h,g=-e+y.w>s?z.w-r-e-h:s-(y.w-z.w)-r-h,m=-o+y.h>n?z.h-f-o+h:n-(y.h-z.h)-f+h,u=t(a).position().left-h,p=t(a).position().top+h;return{e:{left:c>=-h?(c-h)/2+"px":u>c?u+"px":c+"px"},s:{top:d>=h?(d+h)/2+"px":p>d?p+"px":d+"px"},se:{top:d>=h?(d+h)/2+"px":p>d?p+"px":d+"px",left:c>=-h?(c-h)/2+"px":u>c?u+"px":c+"px"},w:{left:g>=-h?(g-h)/2+"px":u>g?u+"px":g+"px"},n:{top:m>=h?(m+h)/2+"px":p>m?p+"px":m+"px"},nw:{top:m>=h?(m+h)/2+"px":p>m?p+"px":m+"px",left:g>=-h?(g-h)/2+"px":u>g?u+"px":g+"px"},ne:{top:m>=h?(m+h)/2+"px":p>m?p+"px":m+"px",left:c>=-h?(c-h)/2+"px":u>c?u+"px":c+"px"},sw:{top:d>=h?(d+h)/2+"px":p>d?p+"px":d+"px",left:g>=-h?(g-h)/2+"px":u>g?u+"px":g+"px"}}[i]}(D,r,f);t(a).css(d)}return!1}),o.on("mouseup",function(t){w=!1,h=!1})}})});
|
