photo-browser.js
13.3 KB
define(["mk7/modals","mk7/swiper","css!cmpts/photo-browser/photo-browser.css"],function(){var o=Template7,e=Dom7,a=function(a){var t=this,n={photos:[],initialSlide:0,spaceBetween:20,speed:300,zoom:!0,maxZoom:3,minZoom:1,exposition:!0,expositionHideCaptions:!1,type:"standalone",navbar:!0,toolbar:!0,theme:"light",swipeToClose:!0,backLinkText:"关闭",ofText:"of",loop:!1,lazyLoading:!1,lazyLoadingInPrevNext:!1,lazyLoadingOnTransitionStart:!1,material:0,materialPreloaderSvg:app.params.materialPreloaderSvg,materialPreloaderHtml:app.params.materialPreloaderHtml};a=a||{},!a.backLinkText,1;for(var s in n)"undefined"==typeof a[s]&&(a[s]=n[s]);t.params=a,t.params.iconsColorClass=t.params.iconsColor?"color-"+t.params.iconsColor:"dark"===t.params.theme?"color-white":"",t.params.preloaderColorClass="dark"===t.params.theme?"preloader-white":"";var i=t.params.photoTemplate||'<div class="photo-browser-slide swiper-slide"><span class="photo-browser-zoom-container"><img src="{{js "this.url || this"}}"></span></div>',r=t.params.lazyPhotoTemplate||'<div class="photo-browser-slide photo-browser-slide-lazy swiper-slide"><div class="preloader {{@root.preloaderColorClass}}">{{#if @root.material}}{{@root.materialPreloaderHtml}}{{/if}}</div><span class="photo-browser-zoom-container"><img data-src="{{js "this.url || this"}}" class="swiper-lazy"></span></div>',p=t.params.objectTemplate||'<div class="photo-browser-slide photo-browser-object-slide swiper-slide">{{js "this.html || this"}}</div>',l=t.params.captionTemplate||'<div class="photo-browser-caption" data-caption-index="{{@index}}">{{caption}}</div>',d=t.params.navbarTemplate||'<div class="navbar"><div class="navbar-inner"><div class="left sliding"><a href="javascript:void(0)" class="link close-popup photo-browser-close-link {{#unless backLinkText}}icon-only{{/unless}} {{js "this.type === \'page\' ? \'back\' : \'\'"}}"><i class="icon icon-back {{iconsColorClass}}"></i>{{#if backLinkText}}<span>{{backLinkText}}</span>{{/if}}</a></div><div class="center sliding"><span class="photo-browser-current"></span> <span class="photo-browser-of">{{ofText}}</span> <span class="photo-browser-total"></span></div><div class="right"></div></div></div>',c=t.params.toolbarTemplate||'<div class="toolbar tabbar"><div class="toolbar-inner"><a href="javascript:void(0)" class="link photo-browser-prev"><i class="icon icon-prev {{iconsColorClass}}"></i></a><a href="javascript:void(0)" class="link photo-browser-next"><i class="icon icon-next {{iconsColorClass}}"></i></a></div></div>',m=o.compile('<div class="photo-browser photo-browser-{{theme}}"><div class="view navbar-fixed toolbar-fixed">{{#unless material}}{{#if navbar}}'+d+'{{/if}}{{/unless}}<div class="page no-toolbar {{#unless navbar}}no-navbar{{/unless}} toolbar-fixed navbar-fixed" data-page="photo-browser-slides">{{#if material}}{{#if navbar}}'+d+"{{/if}}{{/if}}{{#if toolbar}}"+c+'{{/if}}<div class="photo-browser-captions photo-browser-captions-{{js "this.captionsTheme || this.theme"}}">{{#each photos}}{{#if caption}}'+l+"{{/if}}{{/each}}</div><div class=\"photo-browser-swiper-container swiper-container\"><div class=\"photo-browser-swiper-wrapper swiper-wrapper\">{{#each photos}}{{#js_compare \"this.html || ((typeof this === 'string' || this instanceof String) && (this.indexOf('<') >= 0 || this.indexOf('>') >= 0))\"}}"+p+"{{else}}{{#if @root.lazyLoading}}"+r+"{{else}}"+i+"{{/if}}{{/js_compare}}{{/each}}</div></div></div></div></div>")(t.params);t.activeIndex=t.params.initialSlide,t.openIndex=t.activeIndex,t.opened=!1,t.open=function(o){return"undefined"==typeof o&&(o=t.activeIndex),o=parseInt(o,10),t.opened&&t.swiper?void t.swiper.slideTo(o):(t.opened=!0,t.openIndex=o,"standalone"===t.params.type&&e("body").append(m),"popup"===t.params.type&&(t.popup=app.popup('<div class="popup photo-browser-popup">'+m+"</div>"),e(t.popup).on("closed",t.onPopupClose)),"page"===t.params.type?(e(document).on("pageBeforeInit",t.onPageBeforeInit),e(document).on("pageBeforeRemove",t.onPageBeforeRemove),t.params.view||(t.params.view=app.mainView),void t.params.view.loadContent(m)):(t.layout(t.openIndex),void(t.params.onOpen&&t.params.onOpen(t))))},t.close=function(){t.opened=!1,t.swiperContainer&&0!==t.swiperContainer.length&&(t.params.onClose&&t.params.onClose(t),t.attachEvents(!0),"standalone"===t.params.type&&t.container.removeClass("photo-browser-in").addClass("photo-browser-out").animationEnd(function(){t.container.remove()}),t.swiper.destroy(),t.swiper=t.swiperContainer=t.swiperWrapper=t.slides=h=v=f=void 0)},t.onPopupClose=function(o){t.close(),e(t.popup).off("pageBeforeInit",t.onPopupClose)},t.onPageBeforeInit=function(o){"photo-browser-slides"===o.detail.page.name&&t.layout(t.openIndex),e(document).off("pageBeforeInit",t.onPageBeforeInit)},t.onPageBeforeRemove=function(o){"photo-browser-slides"===o.detail.page.name&&t.close(),e(document).off("pageBeforeRemove",t.onPageBeforeRemove)},t.onSliderTransitionStart=function(o){t.activeIndex=o.activeIndex;var a=o.activeIndex+1,n=o.slides.length;if(t.params.loop&&(n-=2,a-=o.loopedSlides,a<1&&(a=n+a),a>n&&(a-=n)),t.container.find(".photo-browser-current").text(a),t.container.find(".photo-browser-total").text(n),e(".photo-browser-prev, .photo-browser-next").removeClass("photo-browser-link-inactive"),o.isBeginning&&!t.params.loop&&e(".photo-browser-prev").addClass("photo-browser-link-inactive"),o.isEnd&&!t.params.loop&&e(".photo-browser-next").addClass("photo-browser-link-inactive"),t.captions.length>0){t.captionsContainer.find(".photo-browser-caption-active").removeClass("photo-browser-caption-active");var s=t.params.loop?o.slides.eq(o.activeIndex).attr("data-swiper-slide-index"):t.activeIndex;t.captionsContainer.find('[data-caption-index="'+s+'"]').addClass("photo-browser-caption-active")}var i=o.slides.eq(o.previousIndex).find("video");i.length>0&&"pause"in i[0]&&i[0].pause(),t.params.onTransitionStart&&t.params.onTransitionStart(o)},t.onSliderTransitionEnd=function(o){t.params.zoom&&h&&o.previousIndex!==o.activeIndex&&(v.transform("translate3d(0,0,0) scale(1)"),f.transform("translate3d(0,0,0)"),h=v=f=void 0,w=u=1),t.params.onTransitionEnd&&t.params.onTransitionEnd(o)},t.layout=function(o){"page"===t.params.type?t.container=e(".photo-browser-swiper-container").parents(".view"):t.container=e(".photo-browser"),"standalone"===t.params.type&&(t.container.addClass("photo-browser-in"),app.sizeNavbars(t.container)),t.swiperContainer=t.container.find(".photo-browser-swiper-container"),t.swiperWrapper=t.container.find(".photo-browser-swiper-wrapper"),t.slides=t.container.find(".photo-browser-slide"),t.captionsContainer=t.container.find(".photo-browser-captions"),t.captions=t.container.find(".photo-browser-caption");var a={nextButton:t.params.nextButton||".photo-browser-next",prevButton:t.params.prevButton||".photo-browser-prev",indexButton:t.params.indexButton,initialSlide:o,spaceBetween:t.params.spaceBetween,speed:t.params.speed,loop:t.params.loop,lazyLoading:t.params.lazyLoading,lazyLoadingInPrevNext:t.params.lazyLoadingInPrevNext,lazyLoadingOnTransitionStart:t.params.lazyLoadingOnTransitionStart,preloadImages:!t.params.lazyLoading,onTap:function(o,e){t.params.onTap&&t.params.onTap(o,e)},onClick:function(o,e){t.params.exposition&&t.toggleExposition(),t.params.onClick&&t.params.onClick(o,e)},onDoubleTap:function(o,e){t.toggleZoom(e),t.params.onDoubleTap&&t.params.onDoubleTap(o,e)},onTransitionStart:function(o){t.onSliderTransitionStart(o)},onTransitionEnd:function(o){t.onSliderTransitionEnd(o)},onSlideChangeStart:t.params.onSlideChangeStart,onSlideChangeEnd:t.params.onSlideChangeEnd,onLazyImageLoad:function(o,e,a){t.params.onLazyImageLoad&&t.params.onLazyImageLoad(t,e,a)},onLazyImageReady:function(o,a,n){e(a).removeClass("photo-browser-slide-lazy"),t.params.onLazyImageReady&&t.params.onLazyImageReady(t,a,n)}};t.params.swipeToClose&&"page"!==t.params.type&&(a.onTouchStart=t.swipeCloseTouchStart,a.onTouchMoveOpposite=t.swipeCloseTouchMove,a.onTouchEnd=t.swipeCloseTouchEnd),t.swiper=app.swiper(t.swiperContainer,a),0===o&&t.onSliderTransitionStart(t.swiper),t.attachEvents()},t.attachEvents=function(o){var e=o?"off":"on";if(t.params.zoom){var a=t.params.loop?t.swiper.slides:t.slides;a[e]("gesturestart",t.onSlideGestureStart),a[e]("gesturechange",t.onSlideGestureChange),a[e]("gestureend",t.onSlideGestureEnd),a[e](app.touchEvents.start,t.onSlideTouchStart),a[e](app.touchEvents.move,t.onSlideTouchMove),a[e](app.touchEvents.end,t.onSlideTouchEnd)}t.container.find(".photo-browser-close-link")[e]("click",t.close)};t.exposed=!1,t.toggleExposition=function(){t.container&&t.container.toggleClass("photo-browser-exposed"),t.params.expositionHideCaptions&&t.captionsContainer.toggleClass("photo-browser-captions-exposed"),t.exposed=!t.exposed},t.enableExposition=function(){t.container&&t.container.addClass("photo-browser-exposed"),t.params.expositionHideCaptions&&t.captionsContainer.addClass("photo-browser-captions-exposed"),t.exposed=!0},t.disableExposition=function(){t.container&&t.container.removeClass("photo-browser-exposed"),t.params.expositionHideCaptions&&t.captionsContainer.removeClass("photo-browser-captions-exposed"),t.exposed=!1};var h,v,f,w=1,u=1,g=!1;t.onSlideGestureStart=function(o){return h&&h.length||(h=e(this),0===h.length&&(h=t.swiper.slides.eq(t.swiper.activeIndex)),v=h.find("img, svg, canvas"),f=v.parent(".photo-browser-zoom-container"),0!==f.length)?(v.transition(0),void(g=!0)):void(v=void 0)},t.onSlideGestureChange=function(o){v&&0!==v.length&&(w=o.scale*u,w>t.params.maxZoom&&(w=t.params.maxZoom-1+Math.pow(w-t.params.maxZoom+1,.5)),w<t.params.minZoom&&(w=t.params.minZoom+1-Math.pow(t.params.minZoom-w+1,.5)),v.transform("translate3d(0,0,0) scale("+w+")"))},t.onSlideGestureEnd=function(o){v&&0!==v.length&&(w=Math.max(Math.min(w,t.params.maxZoom),t.params.minZoom),v.transition(t.params.speed).transform("translate3d(0,0,0) scale("+w+")"),u=w,g=!1,1===w&&(h=void 0))},t.toggleZoom=function(o){if(h||(h=t.swiper.slides.eq(t.swiper.activeIndex),v=h.find("img, svg, canvas"),f=v.parent(".photo-browser-zoom-container")),v&&0!==v.length){var e,a,n,s,i,r,p,l,d,c,m,g,b,x,C,T;"undefined"==typeof H.x&&o?(e="touchend"===o.type?o.changedTouches[0].pageX:o.pageX,a="touchend"===o.type?o.changedTouches[0].pageY:o.pageY):(e=H.x,a=H.y),w&&1!==w?(w=u=1,f.transition(300).transform("translate3d(0,0,0)"),v.transition(300).transform("translate3d(0,0,0) scale(1)"),h=void 0):(w=u=t.params.maxZoom,o?(n=t.container.offset().left,s=t.container.offset().top,i=n+t.container[0].offsetWidth/2-e,r=s+t.container[0].offsetHeight/2-a,d=v[0].offsetWidth,c=v[0].offsetHeight,m=d*w,g=c*w,b=Math.min(t.swiper.width/2-m/2,0),x=Math.min(t.swiper.height/2-g/2,0),C=-b,T=-x,p=i*w,l=r*w,p<b&&(p=b),p>C&&(p=C),l<x&&(l=x),l>T&&(l=T)):(p=0,l=0),f.transition(300).transform("translate3d("+p+"px, "+l+"px,0)"),v.transition(300).transform("translate3d(0,0,0) scale("+w+")"))}};var b,x,C,T,y,S,I,M,k,z,E,L,B,P,D,Z,j,H={},Y={};t.onSlideTouchStart=function(o){v&&0!==v.length&&(b||("android"===app.device.os&&o.preventDefault(),b=!0,H.x="touchstart"===o.type?o.targetTouches[0].pageX:o.pageX,H.y="touchstart"===o.type?o.targetTouches[0].pageY:o.pageY))},t.onSlideTouchMove=function(o){if(v&&0!==v.length&&(t.swiper.allowClick=!1,b&&h)){x||(k=v[0].offsetWidth,z=v[0].offsetHeight,E=e.getTranslate(f[0],"x")||0,L=e.getTranslate(f[0],"y")||0,f.transition(0));var a=k*w,n=z*w;if(!(a<t.swiper.width&&n<t.swiper.height)){if(y=Math.min(t.swiper.width/2-a/2,0),I=-y,S=Math.min(t.swiper.height/2-n/2,0),M=-S,Y.x="touchmove"===o.type?o.targetTouches[0].pageX:o.pageX,Y.y="touchmove"===o.type?o.targetTouches[0].pageY:o.pageY,!x&&!g&&(Math.floor(y)===Math.floor(E)&&Y.x<H.x||Math.floor(I)===Math.floor(E)&&Y.x>H.x))return void(b=!1);o.preventDefault(),o.stopPropagation(),x=!0,C=Y.x-H.x+E,T=Y.y-H.y+L,C<y&&(C=y+1-Math.pow(y-C+1,.8)),C>I&&(C=I-1+Math.pow(C-I+1,.8)),T<S&&(T=S+1-Math.pow(S-T+1,.8)),T>M&&(T=M-1+Math.pow(T-M+1,.8)),B||(B=Y.x),Z||(Z=Y.y),P||(P=Date.now()),D=(Y.x-B)/(Date.now()-P)/2,j=(Y.y-Z)/(Date.now()-P)/2,Math.abs(Y.x-B)<2&&(D=0),Math.abs(Y.y-Z)<2&&(j=0),B=Y.x,Z=Y.y,P=Date.now(),f.transform("translate3d("+C+"px, "+T+"px,0)")}}},t.onSlideTouchEnd=function(o){if(v&&0!==v.length){if(!b||!x)return b=!1,void(x=!1);b=!1,x=!1;var e=300,a=300,n=D*e,s=C+n,i=j*a,r=T+i;0!==D&&(e=Math.abs((s-C)/D)),0!==j&&(a=Math.abs((r-T)/j));var p=Math.max(e,a);C=s,T=r;var l=k*w,d=z*w;y=Math.min(t.swiper.width/2-l/2,0),I=-y,S=Math.min(t.swiper.height/2-d/2,0),M=-S,C=Math.max(Math.min(C,I),y),T=Math.max(Math.min(T,M),S),f.transition(p).transform("translate3d("+C+"px, "+T+"px,0)")}};var O,R,G,X,q,W=!1,N=!0,_=!1;return t.swipeCloseTouchStart=function(o,e){N&&(W=!0)},t.swipeCloseTouchMove=function(o,e){if(W){_||(_=!0,R="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,X=t.swiper.slides.eq(t.swiper.activeIndex),q=(new Date).getTime()),e.preventDefault(),G="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,O=R-G;var a=1-Math.abs(O)/300;X.transform("translate3d(0,"+-O+"px,0)"),t.swiper.container.css("opacity",a).transition(0)}},t.swipeCloseTouchEnd=function(o,e){if(W=!1,!_)return void(_=!1);_=!1,N=!1;var a=Math.abs(O),n=(new Date).getTime()-q;return n<300&&a>20||n>=300&&a>100?void setTimeout(function(){"standalone"===t.params.type&&t.close(),"popup"===t.params.type&&app.closeModal(t.popup),t.params.onSwipeToClose&&t.params.onSwipeToClose(t),N=!0},0):(0!==a?X.addClass("transitioning").transitionEnd(function(){N=!0,X.removeClass("transitioning")}):N=!0,t.swiper.container.css("opacity","").transition(""),void X.transform(""))},t};app.photoBrowser=function(o){return new a(o)}});