UNPKG

flipbook-vue2

Version:

3D page flip effect for Vue.js; support Vue Version 2

ts1.github.io/flipbook-vue/

ts1/flipbook-vue

30 lines (25 loc) • 26 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*! * @license * flipbook-vue v1.0.0 * Copyright © 2023 Takeshi Sone. * Released under the MIT License. */ !function(){"use strict"; /*! @license Rematrix v0.7.2 Copyright 2021 Julian Lloyd. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */function t(t){if(t&&t.constructor===Array){var e=t.filter((function(t){return"number"==typeof t})).filter((function(t){return!isNaN(t)}));if(6===t.length&&6===e.length){var n=i();return n[0]=e[0],n[1]=e[1],n[4]=e[2],n[5]=e[3],n[12]=e[4],n[13]=e[5],n}if(16===t.length&&16===e.length)return t}throw new TypeError("Expected a `number[]` with length 6 or 16.")}function i(){for(var t=[],i=0;i<16;i++)i%5==0?t.push(1):t.push(0);return t}var e,n,o,r=function(){function e(t){t?t.m?this.m=[].concat(t.m):this.m=[].concat(t):this.m=i()}return e.prototype.clone=function(){return new e(this)},e.prototype.multiply=function(i){return this.m=function(i,e){for(var n=t(i),o=t(e),r=[],s=0;s<4;s++)for(var a=[n[s],n[s+4],n[s+8],n[s+12]],h=0;h<4;h++){var l=4*h,u=[o[l],o[l+1],o[l+2],o[l+3]],c=a[0]*u[0]+a[1]*u[1]+a[2]*u[2]+a[3]*u[3];r[s+l]=c}return r}(this.m,i)},e.prototype.perspective=function(t){return this.multiply((e=t,(n=i())[11]=-1/e,n));var e,n},e.prototype.transformX=function(t){return(t*this.m[0]+this.m[12])/(t*this.m[3]+this.m[15])},e.prototype.translate=function(t,e){return this.multiply((n=t,o=e,(r=i())[12]=n,o&&(r[13]=o),r));var n,o,r},e.prototype.translate3d=function(t,e,n){return this.multiply((o=t,r=e,s=n,a=i(),void 0!==o&&void 0!==r&&void 0!==s&&(a[12]=o,a[13]=r,a[14]=s),a));var o,r,s,a},e.prototype.rotateY=function(t){return this.multiply((e=t,n=Math.PI/180*e,(o=i())[0]=o[10]=Math.cos(n),o[2]=o[8]=Math.sin(n),o[2]*=-1,o));var e,n,o},e.prototype.toString=function(){return"matrix3d("+t(this.m).join(", ")+")"},e}();e=function(t){return Math.pow(t,2)},o=function(t){return 1-e(1-t)},n=function(t){return t<.5?e(2*t)/2:.5+o(2*(t-.5))/2};var s={props:{pages:{type:Array,required:!0},pagesHiRes:{type:Array,default:function(){return[]}},flipDuration:{type:Number,default:1e3},zoomDuration:{type:Number,default:500},zooms:{type:Array,default:function(){return[1,2,4]}},perspective:{type:Number,default:2400},nPolygons:{type:Number,default:10},ambient:{type:Number,default:.4},gloss:{type:Number,default:.6},swipeMin:{type:Number,default:3},singlePage:{type:Boolean,default:!1},forwardDirection:{validator:function(t){return"right"===t||"left"===t},default:"right"},centering:{type:Boolean,default:!0},startPage:{type:Number,default:null},loadingImage:{type:String,default:"data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%22500%22%20viewBox%3D%220%200%20500%20500%22%20fill%3D%22transparent%22%20style%3D%22background-color%3A%20%23fff%22%3E%20%20%3Ccircle%20%20%20%20cx%3D%22250%22%20%20%20%20cy%3D%22250%22%20%20%20%20r%3D%2248%22%20%20%20%20stroke%3D%22%23333%22%20%20%20%20stroke-width%3D%222%22%20%20%20%20stroke-dasharray%3D%22271%2030%22%20%20%3E%20%20%20%20%3CanimateTransform%20%20%20%20%20%20attributeName%3D%22transform%22%20%20%20%20%20%20attributeType%3D%22XML%22%20%20%20%20%20%20type%3D%22rotate%22%20%20%20%20%20%20from%3D%220%20250%20250%22%20%20%20%20%20%20to%3D%22360%20250%20250%22%20%20%20%20%20%20dur%3D%221s%22%20%20%20%20%20%20repeatCount%3D%22indefinite%22%20%20%20%20%2F%3E%20%20%3C%2Fcircle%3E%3C%2Fsvg%3E"},clickToZoom:{type:Boolean,default:!0},dragToFlip:{type:Boolean,default:!0},wheel:{type:String,default:"scroll"}},data:function(){return{viewWidth:0,viewHeight:0,imageWidth:null,imageHeight:null,displayedPages:1,nImageLoad:0,nImageLoadTrigger:0,imageLoadCallback:null,currentPage:0,firstPage:0,secondPage:1,zoomIndex:0,zoom:1,zooming:!1,touchStartX:null,touchStartY:null,maxMove:0,activeCursor:null,hasTouchEvents:!1,hasPointerEvents:!1,minX:Infinity,maxX:-Infinity,preloadedImages:{},flip:{progress:0,direction:null,frontImage:null,backImage:null,auto:!1,opacity:1},currentCenterOffset:null,animatingCenter:!1,startScrollLeft:0,startScrollTop:0,scrollLeft:0,scrollTop:0,loadedImages:{}}},computed:{IE:function(){return"undefined"!=typeof navigator&&/Trident/.test(navigator.userAgent)},canFlipLeft:function(){return"left"===this.forwardDirection?this.canGoForward:this.canGoBack},canFlipRight:function(){return"right"===this.forwardDirection?this.canGoForward:this.canGoBack},canZoomIn:function(){return!this.zooming&&this.zoomIndex<this.zooms_.length-1},canZoomOut:function(){return!this.zooming&&this.zoomIndex>0},numPages:function(){return null===this.pages[0]?this.pages.length-1:this.pages.length},page:function(){return null!==this.pages[0]?this.currentPage+1:Math.max(1,this.currentPage)},zooms_:function(){return this.zooms||[1]},canGoForward:function(){return!this.flip.direction&&this.currentPage<this.pages.length-this.displayedPages},canGoBack:function(){return!this.flip.direction&&this.currentPage>=this.displayedPages&&!(1===this.displayedPages&&!this.pageUrl(this.firstPage-1))},leftPage:function(){return"right"===this.forwardDirection||1===this.displayedPages?this.firstPage:this.secondPage},rightPage:function(){return"left"===this.forwardDirection?this.firstPage:this.secondPage},showLeftPage:function(){return this.pageUrl(this.leftPage)},showRightPage:function(){return this.pageUrl(this.rightPage)&&2===this.displayedPages},cursor:function(){return this.activeCursor?this.activeCursor:this.IE?"auto":this.clickToZoom&&this.canZoomIn?"zoom-in":this.clickToZoom&&this.canZoomOut?"zoom-out":this.dragToFlip?"grab":"auto"},pageScale:function(){var t,i,e;return(t=(i=this.viewWidth/this.displayedPages/this.imageWidth)<(e=this.viewHeight/this.imageHeight)?i:e)<1?t:1},pageWidth:function(){return Math.round(this.imageWidth*this.pageScale)},pageHeight:function(){return Math.round(this.imageHeight*this.pageScale)},xMargin:function(){return(this.viewWidth-this.pageWidth*this.displayedPages)/2},yMargin:function(){return(this.viewHeight-this.pageHeight)/2},polygonWidth:function(){var t;return t=this.pageWidth/this.nPolygons,(t=Math.ceil(t+1/this.zoom))+"px"},polygonHeight:function(){return this.pageHeight+"px"},polygonBgSize:function(){return this.pageWidth+"px "+this.pageHeight+"px"},polygonArray:function(){return this.makePolygonArray("front").concat(this.makePolygonArray("back"))},boundingLeft:function(){var t;return 1===this.displayedPages?this.xMargin:(t=this.pageUrl(this.leftPage)?this.xMargin:this.viewWidth/2)<this.minX?t:this.minX},boundingRight:function(){var t;return 1===this.displayedPages?this.viewWidth-this.xMargin:(t=this.pageUrl(this.rightPage)?this.viewWidth-this.xMargin:this.viewWidth/2)>this.maxX?t:this.maxX},centerOffset:function(){var t;return t=this.centering?Math.round(this.viewWidth/2-(this.boundingLeft+this.boundingRight)/2):0,null===this.currentCenterOffset&&null!==this.imageWidth&&(this.currentCenterOffset=t),t},centerOffsetSmoothed:function(){return Math.round(this.currentCenterOffset)},dragToScroll:function(){return!this.hasTouchEvents},scrollLeftMin:function(){var t;return(t=(this.boundingRight-this.boundingLeft)*this.zoom)<this.viewWidth?(this.boundingLeft+this.centerOffsetSmoothed)*this.zoom-(this.viewWidth-t)/2:(this.boundingLeft+this.centerOffsetSmoothed)*this.zoom},scrollLeftMax:function(){var t;return(t=(this.boundingRight-this.boundingLeft)*this.zoom)<this.viewWidth?(this.boundingLeft+this.centerOffsetSmoothed)*this.zoom-(this.viewWidth-t)/2:(this.boundingRight+this.centerOffsetSmoothed)*this.zoom-this.viewWidth},scrollTopMin:function(){var t;return(t=this.pageHeight*this.zoom)<this.viewHeight?this.yMargin*this.zoom-(this.viewHeight-t)/2:this.yMargin*this.zoom},scrollTopMax:function(){var t;return(t=this.pageHeight*this.zoom)<this.viewHeight?this.yMargin*this.zoom-(this.viewHeight-t)/2:(this.yMargin+this.pageHeight)*this.zoom-this.viewHeight},scrollLeftLimited:function(){return Math.min(this.scrollLeftMax,Math.max(this.scrollLeftMin,this.scrollLeft))},scrollTopLimited:function(){return Math.min(this.scrollTopMax,Math.max(this.scrollTopMin,this.scrollTop))}},mounted:function(){return window.addEventListener("resize",this.onResize,{passive:!0}),this.onResize(),this.zoom=this.zooms_[0],this.goToPage(this.startPage)},beforeDestroy:function(){return window.removeEventListener("resize",this.onResize,{passive:!0})},methods:{onResize:function(){var t;if(t=this.$refs.viewport)return this.viewWidth=t.clientWidth,this.viewHeight=t.clientHeight,this.displayedPages=this.viewWidth>this.viewHeight&&!this.singlePage?2:1,2===this.displayedPages&&(this.currentPage&=-2),this.fixFirstPage(),this.minX=Infinity,this.maxX=-Infinity},fixFirstPage:function(){if(1===this.displayedPages&&0===this.currentPage&&this.pages.length&&!this.pageUrl(0))return this.currentPage++},pageUrl:function(t,i){var e;return void 0===i&&(i=!1),i&&this.zoom>1&&!this.zooming&&(e=this.pagesHiRes[t])?e:this.pages[t]||null},pageUrlLoading:function(t,i){var e;return void 0===i&&(i=!1),e=this.pageUrl(t,i),i&&this.zoom>1&&!this.zooming?e:e&&this.loadImage(e)},flipLeft:function(){if(this.canFlipLeft)return this.flipStart("left",!0)},flipRight:function(){if(this.canFlipRight)return this.flipStart("right",!0)},makePolygonArray:function(t){var i,e,n,o,s,a,h,l,u,c,g,f,p,d,m,v,y,w,P,b,M,I,z,x,L,T;if(!this.flip.direction)return[];for(m=this.flip.progress,o=this.flip.direction,1===this.displayedPages&&o!==this.forwardDirection&&(m=1-m,o=this.forwardDirection),this.flip.opacity=1===this.displayedPages&&m>.7?1-(m-.7)/.3:1,a="front"===t?this.flip.frontImage:this.flip.backImage,d=this.pageWidth/this.nPolygons,p=this.xMargin,c=!1,1===this.displayedPages?"right"===this.forwardDirection?"back"===t&&(c=!0,p=this.xMargin-this.pageWidth):"left"===o?"back"===t?p=this.pageWidth-this.xMargin:c=!0:"front"===t?p=this.pageWidth-this.xMargin:c=!0:"left"===o?"back"===t?p=this.viewWidth/2:c=!0:"front"===t?p=this.viewWidth/2:c=!0,(g=new r).translate(this.viewWidth/2),g.perspective(this.perspective),g.translate(-this.viewWidth/2),g.translate(p,this.yMargin),f=0,m>.5&&(f=2*-(m-.5)*180),"left"===o&&(f=-f),"back"===t&&(f+=180),f&&(c&&g.translate(this.pageWidth),g.rotateY(f),c&&g.translate(-this.pageWidth)),0===(I=m<.5?2*m*Math.PI:(1-2*(m-.5))*Math.PI)&&(I=1e-9),w=this.pageWidth/I,y=0,M=(e=I/this.nPolygons)/2/Math.PI*180,n=e/Math.PI*180,c&&(M=-I/Math.PI*180+n/2),"back"===t&&(M=-M,n=-n),this.minX=Infinity,this.maxX=-Infinity,b=[],s=h=0,P=this.nPolygons;0<=P?h<P:h>P;s=0<=P?++h:--h)i=s/(this.nPolygons-1)*100+"% 0px",u=g.clone(),v=c?I-y:y,z=Math.sin(v)*w,c&&(z=this.pageWidth-z),T=(1-Math.cos(v))*w,"back"===t&&(T=-T),u.translate3d(z,0,T),u.rotateY(-M),x=u.transformX(0),L=u.transformX(d),this.maxX=Math.max(Math.max(x,L),this.maxX),this.minX=Math.min(Math.min(x,L),this.minX),l=this.computeLighting(f-M,n),y+=e,M+=n,b.push([t+s,a,l,i,u.toString(),Math.abs(Math.round(T))]);return b},computeLighting:function(t,i){var e,n,o,r,s;return o=[],r=[-.5,-.25,0,.25,.5],this.ambient<1&&(e=1-this.ambient,n=r.map((function(n){return(1-Math.cos((t-i*n)/180*Math.PI))*e})),o.push("linear-gradient(to right,\n rgba(0, 0, 0, "+n[0]+"),\n rgba(0, 0, 0, "+n[1]+") 25%,\n rgba(0, 0, 0, "+n[2]+") 50%,\n rgba(0, 0, 0, "+n[3]+") 75%,\n rgba(0, 0, 0, "+n[4]+"))")),this.gloss>0&&!this.IE&&(30,200,s=r.map((function(e){return Math.max(Math.pow(Math.cos((t+30-i*e)/180*Math.PI),200),Math.pow(Math.cos((t-30-i*e)/180*Math.PI),200))})),o.push("linear-gradient(to right,\n rgba(255, 255, 255, "+s[0]*this.gloss+"),\n rgba(255, 255, 255, "+s[1]*this.gloss+") 25%,\n rgba(255, 255, 255, "+s[2]*this.gloss+") 50%,\n rgba(255, 255, 255, "+s[3]*this.gloss+") 75%,\n rgba(255, 255, 255, "+s[4]*this.gloss+"))")),o.join(",")},flipStart:function(t,i){var e=this;return t!==this.forwardDirection?1===this.displayedPages?(this.flip.frontImage=this.pageUrl(this.currentPage-1),this.flip.backImage=null):(this.flip.frontImage=this.pageUrl(this.firstPage),this.flip.backImage=this.pageUrl(this.currentPage-this.displayedPages+1)):1===this.displayedPages?(this.flip.frontImage=this.pageUrl(this.currentPage),this.flip.backImage=null):(this.flip.frontImage=this.pageUrl(this.secondPage),this.flip.backImage=this.pageUrl(this.currentPage+this.displayedPages)),this.flip.direction=t,this.flip.progress=0,requestAnimationFrame((function(){return requestAnimationFrame((function(){if(e.flip.direction!==e.forwardDirection?2===e.displayedPages&&(e.firstPage=e.currentPage-e.displayedPages):1===e.displayedPages?e.firstPage=e.currentPage+e.displayedPages:e.secondPage=e.currentPage+1+e.displayedPages,i)return e.flipAuto(!0)}))}))},flipAuto:function(t){var i,e,o,r,s=this;return r=Date.now(),e=this.flipDuration*(1-this.flip.progress),o=this.flip.progress,this.flip.auto=!0,this.$emit("flip-"+this.flip.direction+"-start",this.page),(i=function(){return requestAnimationFrame((function(){var a,h;return h=Date.now()-r,(a=o+h/e)>1&&(a=1),s.flip.progress=t?n(a):a,a<1?i():(s.flip.direction!==s.forwardDirection?s.currentPage-=s.displayedPages:s.currentPage+=s.displayedPages,s.$emit("flip-"+s.flip.direction+"-end",s.page),1===s.displayedPages&&s.flip.direction===s.forwardDirection?s.flip.direction=null:s.onImageLoad(1,(function(){return s.flip.direction=null})),s.flip.auto=!1)}))})()},flipRevert:function(){var t,i,e,n,o=this;return n=Date.now(),i=this.flipDuration*this.flip.progress,e=this.flip.progress,this.flip.auto=!0,(t=function(){return requestAnimationFrame((function(){var r,s;return s=Date.now()-n,(r=e-e*s/i)<0&&(r=0),o.flip.progress=r,r>0?t():(o.firstPage=o.currentPage,o.secondPage=o.currentPage+1,1===o.displayedPages&&o.flip.direction!==o.forwardDirection?o.flip.direction=null:o.onImageLoad(1,(function(){return o.flip.direction=null})),o.flip.auto=!1)}))})()},onImageLoad:function(t,i){return this.nImageLoad=0,this.nImageLoadTrigger=t,this.imageLoadCallback=i},didLoadImage:function(t){if(null===this.imageWidth&&(this.imageWidth=(t.target||t.path[0]).naturalWidth,this.imageHeight=(t.target||t.path[0]).naturalHeight,this.preloadImages()),this.imageLoadCallback)return++this.nImageLoad>=this.nImageLoadTrigger?(this.imageLoadCallback(),this.imageLoadCallback=null):void 0},zoomIn:function(t){if(void 0===t&&(t=null),this.canZoomIn)return this.zoomIndex+=1,this.zoomTo(this.zooms_[this.zoomIndex],t)},zoomOut:function(t){if(void 0===t&&(t=null),this.canZoomOut)return this.zoomIndex-=1,this.zoomTo(this.zooms_[this.zoomIndex],t)},zoomTo:function(t,i){var e,o,r,s,a,h,l,u,c,g,f,p,d=this;if(void 0===i&&(i=null),p=this.$refs.viewport,i?(l=p.getBoundingClientRect(),a=i.pageX-l.left,h=i.pageY-l.top):(a=p.clientWidth/2,h=p.clientHeight/2),u=this.zoom,o=t,c=p.scrollLeft,g=p.scrollTop,r=(a+c)/u*o-a,s=(h+g)/u*o-h,f=Date.now(),this.zooming=!0,this.$emit("zoom-start",t),(e=function(){return requestAnimationFrame((function(){var i,a;return((i=(a=Date.now()-f)/d.zoomDuration)>1||d.IE)&&(i=1),i=n(i),d.zoom=u+(o-u)*i,d.scrollLeft=c+(r-c)*i,d.scrollTop=g+(s-g)*i,a<d.zoomDuration?e():(d.$emit("zoom-end",t),d.zooming=!1,d.zoom=t,d.scrollLeft=r,d.scrollTop=s)}))})(),o>1)return this.preloadImages(!0)},zoomAt:function(t){return this.zoomIndex=(this.zoomIndex+1)%this.zooms_.length,this.zoomTo(this.zooms_[this.zoomIndex],t)},swipeStart:function(t){return this.touchStartX=t.pageX,this.touchStartY=t.pageY,this.maxMove=0,this.zoom<=1?this.dragToFlip?this.activeCursor="grab":void 0:(this.startScrollLeft=this.$refs.viewport.scrollLeft,this.startScrollTop=this.$refs.viewport.scrollTop,this.activeCursor="all-scroll")},swipeMove:function(t){var i,e;if(null!=this.touchStartX)if(i=t.pageX-this.touchStartX,e=t.pageY-this.touchStartY,this.maxMove=Math.max(this.maxMove,Math.abs(i)),this.maxMove=Math.max(this.maxMove,Math.abs(e)),this.zoom>1)this.dragToScroll&&this.dragScroll(i,e);else if(this.dragToFlip&&!(Math.abs(e)>Math.abs(i)))return this.activeCursor="grabbing",i>0?(null===this.flip.direction&&this.canFlipLeft&&i>=this.swipeMin&&this.flipStart("left",!1),"left"===this.flip.direction&&(this.flip.progress=i/this.pageWidth,this.flip.progress>1&&(this.flip.progress=1))):(null===this.flip.direction&&this.canFlipRight&&i<=-this.swipeMin&&this.flipStart("right",!1),"right"===this.flip.direction&&(this.flip.progress=-i/this.pageWidth,this.flip.progress>1&&(this.flip.progress=1))),!0},swipeEnd:function(t){if(null!=this.touchStartX)return this.clickToZoom&&this.maxMove<this.swipeMin&&this.zoomAt(t),null===this.flip.direction||this.flip.auto||(this.flip.progress>1/4?this.flipAuto(!1):this.flipRevert()),this.touchStartX=null,this.activeCursor=null},onTouchStart:function(t){return this.hasTouchEvents=!0,this.swipeStart(t.changedTouches[0])},onTouchMove:function(t){if(this.swipeMove(t.changedTouches[0])&&t.cancelable)return t.preventDefault()},onTouchEnd:function(t){return this.swipeEnd(t.changedTouches[0])},onPointerDown:function(t){if(this.hasPointerEvents=!0,!(this.hasTouchEvents||t.which&&1!==t.which)){this.swipeStart(t);try{return t.target.setPointerCapture(t.pointerId)}catch(t){}}},onPointerMove:function(t){if(!this.hasTouchEvents)return this.swipeMove(t)},onPointerUp:function(t){if(!this.hasTouchEvents){this.swipeEnd(t);try{return t.target.releasePointerCapture(t.pointerId)}catch(t){}}},onMouseDown:function(t){if(!(this.hasTouchEvents||this.hasPointerEvents||t.which&&1!==t.which))return this.swipeStart(t)},onMouseMove:function(t){if(!this.hasTouchEvents&&!this.hasPointerEvents)return this.swipeMove(t)},onMouseUp:function(t){if(!this.hasTouchEvents&&!this.hasPointerEvents)return this.swipeEnd(t)},dragScroll:function(t,i){return this.scrollLeft=this.startScrollLeft-t,this.scrollTop=this.startScrollTop-i},onWheel:function(t){if("scroll"===this.wheel&&this.zoom>1&&this.dragToScroll&&(this.scrollLeft=this.$refs.viewport.scrollLeft+t.deltaX,this.scrollTop=this.$refs.viewport.scrollTop+t.deltaY,t.cancelable&&t.preventDefault()),"zoom"===this.wheel){if(t.deltaY>=100)return this.zoomOut(t),t.preventDefault();if(t.deltaY<=-100)return this.zoomIn(t),t.preventDefault()}},preloadImages:function(t){var i,e,n,o,r,s,a,h;for(void 0===t&&(t=!1),i=e=o=this.currentPage-3,r=this.currentPage+3;o<=r?e<=r:e>=r;i=o<=r?++e:--e)this.pageUrlLoading(i);if(t)for(i=n=s=this.currentPage,a=this.currentPage+this.displayedPages;s<=a?n<a:n>a;i=s<=a?++n:--n)(h=this.pagesHiRes[i])&&((new Image).src=h)},goToPage:function(t){if(null!==t&&t!==this.page)return null===this.pages[0]?2===this.displayedPages&&1===t?this.currentPage=0:this.currentPage=t:this.currentPage=t-1,this.minX=Infinity,this.maxX=-Infinity,this.currentCenterOffset=this.centerOffset},loadImage:function(t){var i,e=this;return null===this.imageWidth||this.loadedImages[t]?t:((i=new Image).onload=function(){return e.$set?e.$set(e.loadedImages,t,!0):e.loadedImages[t]=!0},i.src=t,this.loadingImage)}},watch:{currentPage:function(){return this.firstPage=this.currentPage,this.secondPage=this.currentPage+1,this.preloadImages()},centerOffset:function(){var t,i=this;if(!this.animatingCenter)return t=function(){return requestAnimationFrame((function(){var e;return.1,e=i.centerOffset-i.currentCenterOffset,Math.abs(e)<.5?(i.currentCenterOffset=i.centerOffset,i.animatingCenter=!1):(i.currentCenterOffset+=.1*e,t())}))},this.animatingCenter=!0,t()},scrollLeftLimited:function(t){var i=this;return this.IE?requestAnimationFrame((function(){return i.$refs.viewport.scrollLeft=t})):this.$refs.viewport.scrollLeft=t},scrollTopLimited:function(t){var i=this;return this.IE?requestAnimationFrame((function(){return i.$refs.viewport.scrollTop=t})):this.$refs.viewport.scrollTop=t},pages:function(t,i){if(this.fixFirstPage(),!(null!=i?i.length:void 0)&&(null!=t?t.length:void 0)&&this.startPage>1&&null===t[0])return this.currentPage++},startPage:function(t){return this.goToPage(t)}}};function a(t,i,e,n,o,r,s,a,h,l){"boolean"!=typeof s&&(h=a,a=s,s=!1);var u,c="function"==typeof e?e.options:e;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),n&&(c._scopeId=n),r?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,h(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=u):i&&(u=s?function(t){i.call(this,l(t,this.$root.$options.shadowRoot))}:function(t){i.call(this,a(t))}),u)if(c.functional){var g=c.render;c.render=function(t,i){return u.call(i),g(t,i)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,u):[u]}return e}var h,l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function u(t){return function(t,i){return function(t,i){var e=l?i.media||"default":t,n=c[e]||(c[e]={ids:new Set,styles:[]});if(!n.ids.has(t)){n.ids.add(t);var o=i.source;if(i.map&&(o+="\n/*# sourceURL="+i.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",i.media&&n.element.setAttribute("media",i.media),void 0===h&&(h=document.head||document.getElementsByTagName("head")[0]),h.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(o),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{var r=n.ids.size-1,s=document.createTextNode(o),a=n.element.childNodes;a[r]&&n.element.removeChild(a[r]),a.length?n.element.insertBefore(s,a[r]):n.element.appendChild(s)}}}(t,i)}}var c={};var g,f=a({render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",[t._t("default",null,null,{canFlipLeft:t.canFlipLeft,canFlipRight:t.canFlipRight,canZoomIn:t.canZoomIn,canZoomOut:t.canZoomOut,page:t.page,numPages:t.numPages,flipLeft:t.flipLeft,flipRight:t.flipRight,zoomIn:t.zoomIn,zoomOut:t.zoomOut}),t._v(" "),e("div",{ref:"viewport",staticClass:"viewport",class:{zoom:t.zooming||t.zoom>1,"drag-to-scroll":t.dragToScroll},style:{cursor:"grabbing"==t.cursor?"grabbing":"auto"},on:{touchmove:t.onTouchMove,pointermove:t.onPointerMove,mousemove:t.onMouseMove,touchend:t.onTouchEnd,touchcancel:t.onTouchEnd,pointerup:t.onPointerUp,pointercancel:t.onPointerUp,mouseup:t.onMouseUp,wheel:t.onWheel}},[e("div",{staticClass:"flipbook-container",style:{transform:"scale("+t.zoom+")"}},[e("div",{staticClass:"click-to-flip left",style:{cursor:t.canFlipLeft?"pointer":"auto"},on:{click:t.flipLeft}}),t._v(" "),e("div",{staticClass:"click-to-flip right",style:{cursor:t.canFlipRight?"pointer":"auto"},on:{click:t.flipRight}}),t._v(" "),e("div",{style:{transform:"translateX("+t.centerOffsetSmoothed+"px)"}},[t.showLeftPage?e("img",{staticClass:"page fixed",style:{width:t.pageWidth+"px",height:t.pageHeight+"px",left:t.xMargin+"px",top:t.yMargin+"px"},attrs:{src:t.pageUrlLoading(t.leftPage,!0)},on:{load:function(i){return t.didLoadImage(i)}}}):t._e(),t._v(" "),t.showRightPage?e("img",{staticClass:"page fixed",style:{width:t.pageWidth+"px",height:t.pageHeight+"px",left:t.viewWidth/2+"px",top:t.yMargin+"px"},attrs:{src:t.pageUrlLoading(t.rightPage,!0)},on:{load:function(i){return t.didLoadImage(i)}}}):t._e(),t._v(" "),e("div",{style:{opacity:t.flip.opacity}},t._l(t.polygonArray,(function(i){var n=i[0],o=i[1],r=i[2],s=i[3],a=i[4],h=i[5];return e("div",{key:n,staticClass:"polygon",class:{blank:!o},style:{backgroundImage:o&&"url("+t.loadImage(o)+")",backgroundSize:t.polygonBgSize,backgroundPosition:s,width:t.polygonWidth,height:t.polygonHeight,transform:a,zIndex:h}},[e("div",{directives:[{name:"show",rawName:"v-show",value:r.length,expression:"lighting.length"}],staticClass:"lighting",style:{backgroundImage:r}})])})),0),t._v(" "),e("div",{staticClass:"bounding-box",style:{left:t.boundingLeft+"px",top:t.yMargin+"px",width:t.boundingRight-t.boundingLeft+"px",height:t.pageHeight+"px",cursor:t.cursor},on:{touchstart:t.onTouchStart,pointerdown:t.onPointerDown,mousedown:t.onMouseDown}})])])])],2)},staticRenderFns:[]},(function(t){t&&t("data-v-e3f0fbe2_0",{source:".viewport[data-v-e3f0fbe2]{-webkit-overflow-scrolling:touch;width:100%;height:100%}.viewport.zoom[data-v-e3f0fbe2]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-e3f0fbe2]{overflow:hidden}.flipbook-container[data-v-e3f0fbe2]{position:relative;width:100%;height:100%;transform-origin:top left;user-select:none}.click-to-flip[data-v-e3f0fbe2]{position:absolute;width:50%;height:100%;top:0;user-select:none}.click-to-flip.left[data-v-e3f0fbe2]{left:0}.click-to-flip.right[data-v-e3f0fbe2]{right:0}.bounding-box[data-v-e3f0fbe2]{position:absolute;user-select:none}.page[data-v-e3f0fbe2]{position:absolute;backface-visibility:hidden}.polygon[data-v-e3f0fbe2]{position:absolute;top:0;left:0;background-repeat:no-repeat;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-e3f0fbe2]{background-color:#ddd}.polygon .lighting[data-v-e3f0fbe2]{width:100%;height:100%}",map:void 0,media:void 0})}),s,"data-v-e3f0fbe2",false,undefined,!1,u,void 0,void 0);(null!=(g=window.Vue)?g.component:void 0)?Vue.component("flipbook",f):window.Flipbook=f}();