UNPKG

flipbook-vue

Version:

3D page flip effect for Vue.js

ts1.github.io/flipbook-vue/

ts1/flipbook-vue

30 lines (25 loc) • 27.2 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-beta.4 * Copyright © 2023 Takeshi Sone. * Released under the MIT License. */ !function(t){"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 e(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=[],e=0;e<16;e++)e%5==0?t.push(1):t.push(0);return t}var n,o,r,s=function(){function t(t){t?t.m?this.m=[].concat(t.m):this.m=[].concat(t):this.m=i()}return t.prototype.clone=function(){return new t(this)},t.prototype.multiply=function(t){return this.m=function(t,i){for(var n=e(t),o=e(i),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,t)},t.prototype.perspective=function(t){return this.multiply((e=t,(n=i())[11]=-1/e,n));var e,n},t.prototype.transformX=function(t){return(t*this.m[0]+this.m[12])/(t*this.m[3]+this.m[15])},t.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},t.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},t.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},t.prototype.toString=function(){return"matrix3d("+e(this.m).join(", ")+")"},t}();n=function(t){return Math.pow(t,2)},r=function(t){return 1-n(1-t)},o=function(t){return t<.5?n(2*t)/2:.5+r(2*(t-.5))/2};var a={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,e,i;return(t=(e=this.viewWidth/this.displayedPages/this.imageWidth)<(i=this.viewHeight/this.imageHeight)?e:i)<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,e){var i;return void 0===e&&(e=!1),e&&this.zoom>1&&!this.zooming&&(i=this.pagesHiRes[t])?i:this.pages[t]||null},pageUrlLoading:function(t,e){var i;return void 0===e&&(e=!1),i=this.pageUrl(t,e),e&&this.zoom>1&&!this.zooming?i:i&&this.loadImage(i)},flipLeft:function(){if(this.canFlipLeft)return this.flipStart("left",!0)},flipRight:function(){if(this.canFlipRight)return this.flipStart("right",!0)},makePolygonArray:function(t){var e,i,n,o,r,a,h,l,u,c,g,f,p,d,m,v,y,w,P,b,M,z,I,x,T,k;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 s).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===(z=m<.5?2*m*Math.PI:(1-2*(m-.5))*Math.PI)&&(z=1e-9),w=this.pageWidth/z,y=0,M=(i=z/this.nPolygons)/2/Math.PI*180,n=i/Math.PI*180,c&&(M=-z/Math.PI*180+n/2),"back"===t&&(M=-M,n=-n),this.minX=Infinity,this.maxX=-Infinity,b=[],r=h=0,P=this.nPolygons;0<=P?h<P:h>P;r=0<=P?++h:--h)e=r/(this.nPolygons-1)*100+"% 0px",u=g.clone(),v=c?z-y:y,I=Math.sin(v)*w,c&&(I=this.pageWidth-I),k=(1-Math.cos(v))*w,"back"===t&&(k=-k),u.translate3d(I,0,k),u.rotateY(-M),x=u.transformX(0),T=u.transformX(d),this.maxX=Math.max(Math.max(x,T),this.maxX),this.minX=Math.min(Math.min(x,T),this.minX),l=this.computeLighting(f-M,n),y+=i,M+=n,b.push([t+r,a,l,e,u.toString(),Math.abs(Math.round(k))]);return b},computeLighting:function(t,e){var i,n,o,r,s;return o=[],r=[-.5,-.25,0,.25,.5],this.ambient<1&&(i=1-this.ambient,n=r.map((function(n){return(1-Math.cos((t-e*n)/180*Math.PI))*i})),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(i){return Math.max(Math.pow(Math.cos((t+30-e*i)/180*Math.PI),200),Math.pow(Math.cos((t-30-e*i)/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,e){var i=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(i.flip.direction!==i.forwardDirection?2===i.displayedPages&&(i.firstPage=i.currentPage-i.displayedPages):1===i.displayedPages?i.firstPage=i.currentPage+i.displayedPages:i.secondPage=i.currentPage+1+i.displayedPages,e)return i.flipAuto(!0)}))}))},flipAuto:function(t){var e,i,n,r,s=this;return r=Date.now(),i=this.flipDuration*(1-this.flip.progress),n=this.flip.progress,this.flip.auto=!0,this.$emit("flip-"+this.flip.direction+"-start",this.page),e=function(){return requestAnimationFrame((function(){var a,h;return h=Date.now()-r,(a=n+h/i)>1&&(a=1),s.flip.progress=t?o(a):a,a<1?e():(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)}))},e()},flipRevert:function(){var t,e,i,n,o=this;return n=Date.now(),e=this.flipDuration*this.flip.progress,i=this.flip.progress,this.flip.auto=!0,t=function(){return requestAnimationFrame((function(){var r,s;return s=Date.now()-n,(r=i-i*s/e)<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)}))},t()},onImageLoad:function(t,e){return this.nImageLoad=0,this.nImageLoadTrigger=t,this.imageLoadCallback=e},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,e){var i,n,r,s,a,h,l,u,c,g,f,p,d=this;if(void 0===e&&(e=null),p=this.$refs.viewport,e?(l=p.getBoundingClientRect(),a=e.pageX-l.left,h=e.pageY-l.top):(a=p.clientWidth/2,h=p.clientHeight/2),u=this.zoom,n=t,c=p.scrollLeft,g=p.scrollTop,r=(a+c)/u*n-a,s=(h+g)/u*n-h,f=Date.now(),this.zooming=!0,this.$emit("zoom-start",t),i=function(){return requestAnimationFrame((function(){var e,a;return((e=(a=Date.now()-f)/d.zoomDuration)>1||d.IE)&&(e=1),e=o(e),d.zoom=u+(n-u)*e,d.scrollLeft=c+(r-c)*e,d.scrollTop=g+(s-g)*e,a<d.zoomDuration?i():(d.$emit("zoom-end",t),d.zooming=!1,d.zoom=t,d.scrollLeft=r,d.scrollTop=s)}))},i(),n>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 e,i;if(null!=this.touchStartX)if(e=t.pageX-this.touchStartX,i=t.pageY-this.touchStartY,this.maxMove=Math.max(this.maxMove,Math.abs(e)),this.maxMove=Math.max(this.maxMove,Math.abs(i)),this.zoom>1)this.dragToScroll&&this.dragScroll(e,i);else if(this.dragToFlip&&!(Math.abs(i)>Math.abs(e)))return this.activeCursor="grabbing",e>0?(null===this.flip.direction&&this.canFlipLeft&&e>=this.swipeMin&&this.flipStart("left",!1),"left"===this.flip.direction&&(this.flip.progress=e/this.pageWidth,this.flip.progress>1&&(this.flip.progress=1))):(null===this.flip.direction&&this.canFlipRight&&e<=-this.swipeMin&&this.flipStart("right",!1),"right"===this.flip.direction&&(this.flip.progress=-e/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,e){return this.scrollLeft=this.startScrollLeft-t,this.scrollTop=this.startScrollTop-e},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 e,i,n,o,r,s,a,h;for(void 0===t&&(t=!1),e=i=o=this.currentPage-3,r=this.currentPage+3;o<=r?i<=r:i>=r;e=o<=r?++i:--i)this.pageUrlLoading(e);if(t)for(e=n=s=this.currentPage,a=this.currentPage+this.displayedPages;s<=a?n<a:n>a;e=s<=a?++n:--n)(h=this.pagesHiRes[e])&&((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 e,i=this;return null===this.imageWidth||this.loadedImages[t]?t:((e=new Image).onload=function(){return i.$set?i.$set(i.loadedImages,t,!0):i.loadedImages[t]=!0},e.src=t,this.loadingImage)}},watch:{currentPage:function(){return this.firstPage=this.currentPage,this.secondPage=this.currentPage+1,this.preloadImages()},centerOffset:function(){var t,e=this;if(!this.animatingCenter)return t=function(){return requestAnimationFrame((function(){var i;return.1,i=e.centerOffset-e.currentCenterOffset,Math.abs(i)<.5?(e.currentCenterOffset=e.centerOffset,e.animatingCenter=!1):(e.currentCenterOffset+=.1*i,t())}))},this.animatingCenter=!0,t()},scrollLeftLimited:function(t){var e=this;return this.IE?requestAnimationFrame((function(){return e.$refs.viewport.scrollLeft=t})):this.$refs.viewport.scrollLeft=t},scrollTopLimited:function(t){var e=this;return this.IE?requestAnimationFrame((function(){return e.$refs.viewport.scrollTop=t})):this.$refs.viewport.scrollTop=t},pages:function(t,e){if(this.fixFirstPage(),!(null!=e?e.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)}}},h=["src"],l=["src"];var u=[],c=[];var g;!function(t,e){if(t&&"undefined"!=typeof document){var i,n=!0===e.prepend?"prepend":"append",o=!0===e.singleTag,r="string"==typeof e.container?document.querySelector(e.container):document.getElementsByTagName("head")[0];if(o){var s=u.indexOf(r);-1===s&&(s=u.push(r)-1,c[s]={}),i=c[s]&&c[s][n]?c[s][n]:c[s][n]=a()}else i=a();65279===t.charCodeAt(0)&&(t=t.substring(1)),i.styleSheet?i.styleSheet.cssText+=t:i.appendChild(document.createTextNode(t))}function a(){var t=document.createElement("style");if(t.setAttribute("type","text/css"),e.attributes)for(var i=Object.keys(e.attributes),o=0;o<i.length;o++)t.setAttribute(i[o],e.attributes[i[o]]);var s="prepend"===n?"afterbegin":"beforeend";return r.insertAdjacentElement(s,t),t}}(".viewport[data-v-5c04eecf]{-webkit-overflow-scrolling:touch;height:100%;width:100%}.viewport.zoom[data-v-5c04eecf]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-5c04eecf]{overflow:hidden}.flipbook-container[data-v-5c04eecf]{height:100%;position:relative;-webkit-transform-origin:top left;transform-origin:top left;-webkit-user-select:none;user-select:none;width:100%}.click-to-flip[data-v-5c04eecf]{height:100%;position:absolute;top:0;-webkit-user-select:none;user-select:none;width:50%}.click-to-flip.left[data-v-5c04eecf]{left:0}.click-to-flip.right[data-v-5c04eecf]{right:0}.bounding-box[data-v-5c04eecf]{position:absolute;-webkit-user-select:none;user-select:none}.page[data-v-5c04eecf],.polygon[data-v-5c04eecf]{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.polygon[data-v-5c04eecf]{background-repeat:no-repeat;left:0;top:0;-webkit-transform-origin:center left;transform-origin:center left}.polygon.blank[data-v-5c04eecf]{background-color:#ddd}.polygon .lighting[data-v-5c04eecf]{height:100%;width:100%}",{}),a.render=function(e,i){return t.openBlock(),t.createElementBlock("div",null,[t.renderSlot(e.$slots,"default",t.normalizeProps(t.guardReactiveProps({canFlipLeft:e.canFlipLeft,canFlipRight:e.canFlipRight,canZoomIn:e.canZoomIn,canZoomOut:e.canZoomOut,page:e.page,numPages:e.numPages,flipLeft:e.flipLeft,flipRight:e.flipRight,zoomIn:e.zoomIn,zoomOut:e.zoomOut}))),t.createElementVNode("div",{class:t.normalizeClass(["viewport",{zoom:e.zooming||e.zoom>1,"drag-to-scroll":e.dragToScroll}]),ref:"viewport",style:t.normalizeStyle({cursor:"grabbing"==e.cursor?"grabbing":"auto"}),onTouchmove:i[7]||(i[7]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onTouchMove&&e.onTouchMove.apply(e,t)}),onPointermove:i[8]||(i[8]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onPointerMove&&e.onPointerMove.apply(e,t)}),onMousemove:i[9]||(i[9]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onMouseMove&&e.onMouseMove.apply(e,t)}),onTouchend:i[10]||(i[10]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onTouchEnd&&e.onTouchEnd.apply(e,t)}),onTouchcancel:i[11]||(i[11]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onTouchEnd&&e.onTouchEnd.apply(e,t)}),onPointerup:i[12]||(i[12]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onPointerUp&&e.onPointerUp.apply(e,t)}),onPointercancel:i[13]||(i[13]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onPointerUp&&e.onPointerUp.apply(e,t)}),onMouseup:i[14]||(i[14]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onMouseUp&&e.onMouseUp.apply(e,t)}),onWheel:i[15]||(i[15]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onWheel&&e.onWheel.apply(e,t)})},[t.createElementVNode("div",{class:"flipbook-container",style:t.normalizeStyle({transform:"scale("+e.zoom+")"})},[t.createElementVNode("div",{class:"click-to-flip left",style:t.normalizeStyle({cursor:e.canFlipLeft?"pointer":"auto"}),onClick:i[0]||(i[0]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.flipLeft&&e.flipLeft.apply(e,t)})},null,4),t.createElementVNode("div",{class:"click-to-flip right",style:t.normalizeStyle({cursor:e.canFlipRight?"pointer":"auto"}),onClick:i[1]||(i[1]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.flipRight&&e.flipRight.apply(e,t)})},null,4),t.createElementVNode("div",{style:t.normalizeStyle({transform:"translateX("+e.centerOffsetSmoothed+"px)"})},[e.showLeftPage?(t.openBlock(),t.createElementBlock("img",{key:0,class:"page fixed",style:t.normalizeStyle({width:e.pageWidth+"px",height:e.pageHeight+"px",left:e.xMargin+"px",top:e.yMargin+"px"}),src:e.pageUrlLoading(e.leftPage,!0),onLoad:i[2]||(i[2]=function(t){return e.didLoadImage(t)})},null,44,h)):t.createCommentVNode("v-if",!0),e.showRightPage?(t.openBlock(),t.createElementBlock("img",{key:1,class:"page fixed",style:t.normalizeStyle({width:e.pageWidth+"px",height:e.pageHeight+"px",left:e.viewWidth/2+"px",top:e.yMargin+"px"}),src:e.pageUrlLoading(e.rightPage,!0),onLoad:i[3]||(i[3]=function(t){return e.didLoadImage(t)})},null,44,l)):t.createCommentVNode("v-if",!0),t.createElementVNode("div",{style:t.normalizeStyle({opacity:e.flip.opacity})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.polygonArray,(function(i){var n=i[0],o=i[1],r=i[2],s=i[3],a=i[4],h=i[5];return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["polygon",{blank:!o}]),key:n,style:t.normalizeStyle({backgroundImage:o&&"url("+e.loadImage(o)+")",backgroundSize:e.polygonBgSize,backgroundPosition:s,width:e.polygonWidth,height:e.polygonHeight,transform:a,zIndex:h})},[t.withDirectives(t.createElementVNode("div",{class:"lighting",style:t.normalizeStyle({backgroundImage:r})},null,4),[[t.vShow,r.length]])],6)})),128))],4),t.createElementVNode("div",{class:"bounding-box",style:t.normalizeStyle({left:e.boundingLeft+"px",top:e.yMargin+"px",width:e.boundingRight-e.boundingLeft+"px",height:e.pageHeight+"px",cursor:e.cursor}),onTouchstart:i[4]||(i[4]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onTouchStart&&e.onTouchStart.apply(e,t)}),onPointerdown:i[5]||(i[5]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onPointerDown&&e.onPointerDown.apply(e,t)}),onMousedown:i[6]||(i[6]=function(){for(var t=[],i=arguments.length;i--;)t[i]=arguments[i];return e.onMouseDown&&e.onMouseDown.apply(e,t)})},null,36)],4)],4)],38)])},a.__scopeId="data-v-5c04eecf",a.__file="src/Flipbook.vue",(null!=(g=window.Vue)?g.component:void 0)?Vue.component("flipbook",a):window.Flipbook=a}(Vue);