@gladesinger/flipbook-vue3/dist/flipbook-vue3.umd.cjs

Flipbook Vue 3 component

(function(u,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u.FlipbookVue3={},u.Vue))})(this,function(u,n){"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 x(t){if(t&&t.constructor===Array){var i=t.filter(function(a){return typeof a=="number"}).filter(function(a){return!isNaN(a)});if(t.length===6&&i.length===6){var s=P();return s[0]=i[0],s[1]=i[1],s[4]=i[2],s[5]=i[3],s[12]=i[4],s[13]=i[5],s}else if(t.length===16&&i.length===16)return t}throw new TypeError("Expected a `number[]` with length 6 or 16.")}function P(){for(var t=[],i=0;i<16;i++)i%5==0?t.push(1):t.push(0);return t}function D(t,i){for(var s=x(t),a=x(i),h=[],e=0;e<4;e++)for(var r=[s[e],s[e+4],s[e+8],s[e+12]],o=0;o<4;o++){var l=o*4,g=[a[l],a[l+1],a[l+2],a[l+3]],c=r[0]*g[0]+r[1]*g[1]+r[2]*g[2]+r[3]*g[3];h[e+l]=c}return h}function X(t){var i=P();return i[11]=-1/t,i}function O(t){var i=Math.PI/180*t,s=P();return s[0]=s[10]=Math.cos(i),s[2]=s[8]=Math.sin(i),s[2]*=-1,s}function C(t){return"matrix3d("+x(t).join(", ")+")"}function R(t,i){var s=P();return s[12]=t,i&&(s[13]=i),s}function H(t,i,s){var a=P();return t!==void 0&&i!==void 0&&s!==void 0&&(a[12]=t,a[13]=i,a[14]=s),a}class b{constructor(i){i?i.m?this.m=[...i.m]:this.m=[...i]:this.m=P()}clone(){return new b(this)}multiply(i){this.m=D(this.m,i)}perspective(i){this.multiply(X(i))}transformX(i){return(i*this.m[0]+this.m[12])/(i*this.m[3]+this.m[15])}translate(i,s){this.multiply(R(i,s))}translate3d(i,s,a){this.multiply(H(i,s,a))}rotateY(i){this.multiply(O(i))}toString(){return C(this.m)}}const U="data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%20viewBox='0%200%20500%20500'%20fill='transparent'%20style='background-color:%20%23fff'%3e%3ccircle%20cx='250'%20cy='250'%20r='48'%20stroke='%23333'%20stroke-width='2'%20stroke-dasharray='271%2030'%20%3e%3canimateTransform%20attributeName='transform'%20attributeType='XML'%20type='rotate'%20from='0%20250%20250'%20to='360%20250%20250'%20dur='1s'%20repeatCount='indefinite'%20/%3e%3c/circle%3e%3c/svg%3e",A=(t,i)=>{const s=t.__vccOpts||t;for(const[a,h]of i)s[a]=h;return s},T=t=>Math.pow(t,2),B=t=>1-T(1-t),L=t=>t<.5?T(t*2)/2:.5+B((t-.5)*2)/2,N={name:"FlipBook",props:{pages:{type:Array,required:!0},pagesHiRes:{type:Array,default:()=>[]},flipDuration:{type:Number,default:1e3},zoomDuration:{type:Number,default:500},zooms:{type:Array,default:()=>[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:t=>t==="right"||t==="left",default:"right"},centering:{type:Boolean,default:!0},startPage:{type:Number,default:null},loadingImage:{type:String,default:U},clickToZoom:{type:Boolean,default:!0},dragToFlip:{type:Boolean,default:!0},wheel:{type:String,default:"scroll"},alt:{type:String,default:""}},emits:["flip-left-start","flip-left-end","flip-right-start","flip-right-end","zoom-start","zoom-end"],data(){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,isFlipping:!1,minX:1/0,maxX:-1/0,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(){return typeof navigator<"u"&&/Trident/.test(navigator.userAgent)},canFlipLeft(){return this.forwardDirection==="left"?this.canGoForward:this.canGoBack},canFlipRight(){return this.forwardDirection==="right"?this.canGoForward:this.canGoBack},canZoomIn(){return!this.zooming&&this.zoomIndex<this.zooms_.length-1},canZoomOut(){return!this.zooming&&this.zoomIndex>0},numPages(){return this.pages[0]==null?this.pages.length-1:this.pages.length},page(){return this.pages[0]!=null?this.currentPage+1:Math.max(1,this.currentPage)},zooms_(){return this.zooms||[1]},canGoForward(){return!this.flip.direction&&this.currentPage<this.pages.length-this.displayedPages},canGoBack(){return!this.flip.direction&&this.currentPage>=this.displayedPages&&!(this.displayedPages===1&&!this.pageUrl(this.firstPage-1))},leftPage(){return this.forwardDirection==="right"||this.displayedPages===1?this.firstPage:this.secondPage},rightPage(){return this.forwardDirection==="left"?this.firstPage:this.secondPage},showLeftPage(){return this.pageUrl(this.leftPage)},showRightPage(){return this.pageUrl(this.rightPage)&&this.displayedPages===2},cursor(){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(){const i=this.viewWidth/this.displayedPages/this.imageWidth,s=this.viewHeight/this.imageHeight,a=i<s?i:s;return a<1?a:1},pageWidth(){return Math.round(this.imageWidth*this.pageScale)},pageHeight(){return Math.round(this.imageHeight*this.pageScale)},xMargin(){return(this.viewWidth-this.pageWidth*this.displayedPages)/2},yMargin(){return(this.viewHeight-this.pageHeight)/2},polygonWidth(){let t=this.pageWidth/this.nPolygons;return t=Math.ceil(t+1/this.zoom),t+"px"},polygonHeight(){return this.pageHeight+"px"},polygonBgSize(){return`${this.pageWidth}px ${this.pageHeight}px`},polygonArray(){return this.makePolygonArray("front").concat(this.makePolygonArray("back"))},boundingLeft(){if(this.displayedPages===1)return this.xMargin;const t=this.pageUrl(this.leftPage)?this.xMargin:this.viewWidth/2;return t<this.minX?t:this.minX},boundingRight(){if(this.displayedPages===1)return this.viewWidth-this.xMargin;const t=this.pageUrl(this.rightPage)?this.viewWidth-this.xMargin:this.viewWidth/2;return t>this.maxX?t:this.maxX},centerOffset(){const t=this.centering?Math.round(this.viewWidth/2-(this.boundingLeft+this.boundingRight)/2):0;return this.currentCenterOffset==null&&this.imageWidth!=null&&(this.currentCenterOffset=t),t},centerOffsetSmoothed(){return Math.round(this.currentCenterOffset)},dragToScroll(){return!this.hasTouchEvents},scrollLeftMin(){const t=(this.boundingRight-this.boundingLeft)*this.zoom;return t<this.viewWidth?(this.boundingLeft+this.centerOffsetSmoothed)*this.zoom-(this.viewWidth-t)/2:(this.boundingLeft+this.centerOffsetSmoothed)*this.zoom},scrollLeftMax(){const t=(this.boundingRight-this.boundingLeft)*this.zoom;return t<this.viewWidth?(this.boundingLeft+this.centerOffsetSmoothed)*this.zoom-(this.viewWidth-t)/2:(this.boundingRight+this.centerOffsetSmoothed)*this.zoom-this.viewWidth},scrollTopMin(){const t=this.pageHeight*this.zoom;return t<this.viewHeight?this.yMargin*this.zoom-(this.viewHeight-t)/2:this.yMargin*this.zoom},scrollTopMax(){const t=this.pageHeight*this.zoom;return t<this.viewHeight?this.yMargin*this.zoom-(this.viewHeight-t)/2:(this.yMargin+this.pageHeight)*this.zoom-this.viewHeight},scrollLeftLimited(){return Math.min(this.scrollLeftMax,Math.max(this.scrollLeftMin,this.scrollLeft))},scrollTopLimited(){return Math.min(this.scrollTopMax,Math.max(this.scrollTopMin,this.scrollTop))}},watch:{polygonArray(){const t=this.makePolygonArray("front"),i=this.makePolygonArray("back");this.minX=Math.min(t.minX||1/0,i.minX||1/0),this.maxX=Math.max(t.maxX||-1/0,i.maxX||-1/0),this.flip.opacity=Math.min(t.flipOpacity,i.flipOpacity)},currentPage(){this.firstPage=this.currentPage,this.secondPage=this.currentPage+1,this.preloadImages()},centerOffset(){if(this.animatingCenter)return;const t=()=>{requestAnimationFrame(()=>{const s=this.centerOffset-this.currentCenterOffset;Math.abs(s)<.5?(this.currentCenterOffset=this.centerOffset,this.animatingCenter=!1):(this.currentCenterOffset+=s*.1,t())})};this.animatingCenter=!0,t()},scrollLeftLimited(t){this.IE?requestAnimationFrame(()=>{this.$refs.viewport.scrollLeft=t}):this.$refs.viewport.scrollLeft=t},scrollTopLimited(t){this.IE?requestAnimationFrame(()=>{this.$refs.viewport.scrollTop=t}):this.$refs.viewport.scrollTop=t},pages(t,i){this.fixFirstPage(),!(i!=null&&i.length)&&(t!=null&&t.length)&&this.startPage>1&&t[0]===null&&(this.currentPage+=1)},startPage(t){this.goToPage(t)}},mounted(){window.addEventListener("resize",this.onResize,{passive:!0}),this.onResize(),this.zoom=this.zooms_[0],this.goToPage(this.startPage)},beforeUnmount(){window.removeEventListener("resize",this.onResize,{passive:!0})},methods:{onResize(){const{viewport:t}=this.$refs;t&&(this.viewWidth=t.clientWidth,this.viewHeight=t.clientHeight,this.displayedPages=this.viewWidth>this.viewHeight&&!this.singlePage?2:1,this.displayedPages===2&&(this.currentPage&=-2),this.fixFirstPage(),this.minX=1/0,this.maxX=-1/0)},fixFirstPage(){this.displayedPages===1&&this.currentPage===0&&this.pages.length&&!this.pageUrl(0)&&(this.currentPage+=1)},pageUrl(t,i=!1){if(i&&this.zoom>1&&!this.zooming){const s=this.pagesHiRes[t];if(s)return s}return this.pages[t]||null},pageUrlLoading(t,i=!1){const s=this.pageUrl(t,i);return i&&this.zoom>1&&!this.zooming?s:s&&this.loadImage(s)},flipLeft(){this.canFlipLeft&&this.flipStart("left",!0)},flipRight(){this.canFlipRight&&this.flipStart("right",!0)},makePolygonArray(t){if(!this.flip.direction)return[];let i=this.flip.progress,s=this.flip.direction;this.displayedPages===1&&s!==this.forwardDirection&&(i=1-i,s=this.forwardDirection),this.flip.opacity=this.displayedPages===1&&i>.7?1-(i-.7)/.3:1;const a=t==="front"?this.flip.frontImage:this.flip.backImage,h=this.pageWidth/this.nPolygons;let e=this.xMargin,r=!1;this.displayedPages===1?this.forwardDirection==="right"?t==="back"&&(r=!0,e=this.xMargin-this.pageWidth):s==="left"?t==="back"?e=this.pageWidth-this.xMargin:r=!0:t==="front"?e=this.pageWidth-this.xMargin:r=!0:s==="left"?t==="back"?e=this.viewWidth/2:r=!0:t==="front"?e=this.viewWidth/2:r=!0;const o=new b;o.translate(this.viewWidth/2),o.perspective(this.perspective),o.translate(-this.viewWidth/2),o.translate(e,this.yMargin);let l=0;i>.5&&(l=-(i-.5)*2*180),s==="left"&&(l=-l),t==="back"&&(l+=180),l&&(r&&o.translate(this.pageWidth),o.rotateY(l),r&&o.translate(-this.pageWidth));let g=i<.5?i*2*Math.PI:(1-(i-.5)*2)*Math.PI;g===0&&(g=1e-9);const c=this.pageWidth/g;let p=0;const w=g/this.nPolygons;let m=w/2/Math.PI*180,y=w/Math.PI*180;r&&(m=-g/Math.PI*180+y/2),t==="back"&&(m=-m,y=-y);let d=1/0,f=-1/0;const k=[];for(let z=0;z<this.nPolygons;z+=1){const q=`${z/(this.nPolygons-1)*100}% 0px`,M=o.clone(),W=r?g-p:p;let v=Math.sin(W)*c;r&&(v=this.pageWidth-v);let I=(1-Math.cos(W))*c;t==="back"&&(I=-I),M.translate3d(v,0,I),M.rotateY(-m);const E=M.transformX(0),F=M.transformX(h);f=Math.max(Math.max(E,F),f),d=Math.min(Math.min(E,F),d);const G=this.computeLighting(l-m,y);p+=w,m+=y,k.push([t+z,a,G,q,M.toString(),Math.abs(Math.round(I))])}return this.maxX=f,this.minX=d,k},computeLighting(t,i){const s=[],a=[-.5,-.25,0,.25,.5];if(this.ambient<1){const h=1-this.ambient,e=a.map(r=>(1-Math.cos((t-i*r)/180*Math.PI))*h);s.push(`
          linear-gradient(to right,
            rgba(0, 0, 0, ${e[0]}),
            rgba(0, 0, 0, ${e[1]}) 25%,
            rgba(0, 0, 0, ${e[2]}) 50%,
            rgba(0, 0, 0, ${e[3]}) 75%,
            rgba(0, 0, 0, ${e[4]}))
        `)}if(this.gloss>0&&!this.IE){const r=a.map(o=>Math.max(Math.cos((t+30-i*o)/180*Math.PI)**200,Math.cos((t-30-i*o)/180*Math.PI)**200));s.push(`
          linear-gradient(to right,
            rgba(255, 255, 255, ${r[0]*this.gloss}),
            rgba(255, 255, 255, ${r[1]*this.gloss}) 25%,
            rgba(255, 255, 255, ${r[2]*this.gloss}) 50%,
            rgba(255, 255, 255, ${r[3]*this.gloss}) 75%,
            rgba(255, 255, 255, ${r[4]*this.gloss}))
        `)}return s.join(",")},async flipStart(t,i){i&&this.isFlipping||(this.isFlipping=!0,t!==this.forwardDirection?this.displayedPages===1?(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)):this.displayedPages===1?(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,i&&await this.delay(100),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.flip.direction!==this.forwardDirection?this.displayedPages===2&&(this.firstPage=this.currentPage-this.displayedPages):this.displayedPages===1?this.firstPage=this.currentPage+this.displayedPages:this.secondPage=this.currentPage+1+this.displayedPages,i&&this.flipAuto(!0)})}),this.isFlipping=!1)},delay(t){return new Promise(i=>setTimeout(i,t))},flipAuto(t){const i=Date.now(),s=this.flipDuration*(1-this.flip.progress),a=this.flip.progress;if(this.flip.auto)return;this.flip.auto=!0,this.$emit(`flip-${this.flip.direction}-start`,this.page);let h=0;const e=500/60,r=()=>{requestAnimationFrame(()=>{const o=Date.now(),l=o-i;let g=a+l/s;g>1&&(g=1);const c=t?L(g):g;(o-h>=e||g>=1)&&(h=o,this.flip.progress=c),g<1?r():(this.flip.direction!==this.forwardDirection?this.currentPage-=this.displayedPages:this.currentPage+=this.displayedPages,this.$emit(`flip-${this.flip.direction}-end`,this.page),this.displayedPages===1&&this.flip.direction===this.forwardDirection?this.flip.direction=null:this.onImageLoad(1,()=>{this.flip.direction=null}),this.flip.auto=!1)})};r()},flipRevert(){const t=Date.now(),i=this.flipDuration*this.flip.progress,s=this.flip.progress;this.flip.auto=!0;const a=()=>{requestAnimationFrame(()=>{const h=Date.now()-t;let e=s-s*h/i;e<0&&(e=0),this.flip.progress=e,e>0?a():(this.firstPage=this.currentPage,this.secondPage=this.currentPage+1,this.displayedPages===1&&this.flip.direction!==this.forwardDirection?this.flip.direction=null:this.onImageLoad(1,()=>{this.flip.direction=null}),this.flip.auto=!1)})};a()},onImageLoad(t,i){this.nImageLoad=0,this.nImageLoadTrigger=t,this.imageLoadCallback=i},didLoadImage(t){this.imageWidth==null&&(this.imageWidth=(t.target||t.path[0]).naturalWidth,this.imageHeight=(t.target||t.path[0]).naturalHeight,this.preloadImages()),this.imageLoadCallback&&++this.nImageLoad>=this.nImageLoadTrigger&&(this.imageLoadCallback(),this.imageLoadCallback=null)},zoomIn(t=null){this.canZoomIn&&(this.zoomIndex+=1,this.zoomTo(this.zooms_[this.zoomIndex],t))},zoomOut(t=null){this.canZoomOut&&(this.zoomIndex-=1,this.zoomTo(this.zooms_[this.zoomIndex],t))},zoomTo(t,i=null){const{viewport:s}=this.$refs;if(!s){console.error("Viewport not found");return}let a,h;if(i){const d=s.getBoundingClientRect();a=i.pageX-d.left,h=i.pageY-d.top}else a=s.clientWidth/2,h=s.clientHeight/2;const e=this.zoom,r=t,o=s.scrollLeft,l=s.scrollTop,g=a+o,c=h+l,p=g/e*r-a,w=c/e*r-h,m=Date.now();this.zooming=!0,this.$emit("zoom-start",t);const y=()=>{requestAnimationFrame(()=>{const d=Date.now()-m;let f=d/this.zoomDuration;(f>1||this.IE)&&(f=1),f=L(f),this.zoom=e+(r-e)*f,this.scrollLeft=o+(p-o)*f,this.scrollTop=l+(w-l)*f,d<this.zoomDuration?y():(this.$emit("zoom-end",t),this.zooming=!1,this.zoom=t,this.scrollLeft=p,this.scrollTop=w)})};y(),r>1&&this.preloadImages(!0)},zoomAt(t){this.zoomIndex=(this.zoomIndex+1)%this.zooms_.length,this.zoomTo(this.zooms_[this.zoomIndex],t)},swipeStart(t){this.touchStartX=t.pageX,this.touchStartY=t.pageY,this.maxMove=0,this.zoom<=1?this.dragToFlip&&(this.activeCursor="grab"):(this.startScrollLeft=this.$refs.viewport.scrollLeft,this.startScrollTop=this.$refs.viewport.scrollTop,this.activeCursor="all-scroll")},swipeMove(t){if(!this.dragToFlip||this.touchStartX==null)return!1;const i=t.pageX-this.touchStartX,s=t.pageY-this.touchStartY;return this.maxMove=Math.max(this.maxMove,Math.abs(i)),this.maxMove=Math.max(this.maxMove,Math.abs(s)),this.zoom>1?(this.dragToScroll&&this.dragScroll(i,s),!1):Math.abs(s)>Math.abs(i)?!1:(this.activeCursor="grabbing",i>0?(this.flip.direction==null&&this.canFlipLeft&&i>=this.swipeMin&&this.flipStart("left",!1),this.flip.direction==="left"&&(this.flip.progress=i/this.pageWidth,this.flip.progress>1&&(this.flip.progress=1))):(this.flip.direction==null&&this.canFlipRight&&i<=-this.swipeMin&&this.flipStart("right",!1),this.flip.direction==="right"&&(this.flip.progress=-i/this.pageWidth,this.flip.progress>1&&(this.flip.progress=1))),!0)},swipeEnd(t){this.touchStartX!=null&&(this.clickToZoom&&this.maxMove<this.swipeMin&&this.zoomAt(t),this.flip.direction!=null&&!this.flip.auto&&(this.flip.progress>.25?this.flipAuto(!1):this.flipRevert()),this.touchStartX=null,this.activeCursor=null)},onTouchStart(t){this.hasTouchEvents=!0,this.swipeStart(t.changedTouches[0])},onTouchMove(t){this.swipeMove(t.changedTouches[0])&&t.cancelable&&t.preventDefault()},onTouchEnd(t){this.swipeEnd(t.changedTouches[0])},onPointerDown(t){if(this.hasPointerEvents=!0,!this.hasTouchEvents&&!(t.which&&t.which!==1)){this.swipeStart(t);try{t.target.setPointerCapture(t.pointerId)}catch{}}},onPointerMove(t){this.hasTouchEvents||this.swipeMove(t)},onPointerUp(t){if(!this.hasTouchEvents){this.swipeEnd(t);try{t.target.releasePointerCapture(t.pointerId)}catch{}}},onMouseDown(t){this.hasTouchEvents||this.hasPointerEvents||t.which&&t.which!==1||this.swipeStart(t)},onMouseMove(t){!this.hasTouchEvents&&!this.hasPointerEvents&&this.swipeMove(t)},onMouseUp(t){!this.hasTouchEvents&&!this.hasPointerEvents&&this.swipeEnd(t)},dragScroll(t,i){this.scrollLeft=this.startScrollLeft-t,this.scrollTop=this.startScrollTop-i},onWheel(t){this.wheel==="scroll"&&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()),this.wheel==="zoom"&&(t.deltaY>=100?(this.zoomOut(t),t.cancelable&&t.preventDefault()):t.deltaY<=-100&&(this.zoomIn(t),t.cancelable&&t.preventDefault()))},preloadImages(t=!1){for(let i=this.currentPage-3;i<=this.currentPage+3;i++)this.pageUrlLoading(i);if(t)for(let i=this.currentPage;i<this.currentPage+this.displayedPages;i++){const s=this.pagesHiRes[i];if(s){const a=new Image;a.src=s}}},goToPage(t){t==null||t===this.page||(this.pages[0]==null?this.displayedPages===2&&t===1?this.currentPage=0:this.currentPage=t:this.currentPage=t-1,this.minX=1/0,this.maxX=-1/0,this.currentCenterOffset=this.centerOffset)},loadImage(t){if(this.imageWidth==null||this.loadedImages[t])return t;const i=new Image;return i.onload=()=>{this.$set?this.$set(this.loadedImages,t,!0):this.loadedImages[t]=!0},i.src=t,this.loadingImage}}},Y=["src","alt"],V=["src","alt"];function Z(t,i,s,a,h,e){return n.openBlock(),n.createElementBlock("div",null,[n.renderSlot(t.$slots,"default",n.normalizeProps(n.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})),void 0,!0),n.createElementVNode("div",{ref:"viewport",class:n.normalizeClass(["viewport",{zoom:h.zooming||h.zoom>1,"drag-to-scroll":e.dragToScroll}]),style:n.normalizeStyle({cursor:e.cursor=="grabbing"?"grabbing":"auto"}),onTouchmove:i[7]||(i[7]=(...r)=>e.onTouchMove&&e.onTouchMove(...r)),onPointermove:i[8]||(i[8]=(...r)=>e.onPointerMove&&e.onPointerMove(...r)),onMousemove:i[9]||(i[9]=(...r)=>e.onMouseMove&&e.onMouseMove(...r)),onTouchend:i[10]||(i[10]=(...r)=>e.onTouchEnd&&e.onTouchEnd(...r)),onTouchcancel:i[11]||(i[11]=(...r)=>e.onTouchEnd&&e.onTouchEnd(...r)),onPointerup:i[12]||(i[12]=(...r)=>e.onPointerUp&&e.onPointerUp(...r)),onPointercancel:i[13]||(i[13]=(...r)=>e.onPointerUp&&e.onPointerUp(...r)),onMouseup:i[14]||(i[14]=(...r)=>e.onMouseUp&&e.onMouseUp(...r)),onWheel:i[15]||(i[15]=(...r)=>e.onWheel&&e.onWheel(...r))},[n.createElementVNode("div",{class:"flipbook-container",style:n.normalizeStyle({transform:`scale(${h.zoom})`})},[n.createElementVNode("div",{class:"click-to-flip left",style:n.normalizeStyle({cursor:e.canFlipLeft?"pointer":"auto"}),onClick:i[0]||(i[0]=(...r)=>e.flipLeft&&e.flipLeft(...r))},null,4),n.createElementVNode("div",{class:"click-to-flip right",style:n.normalizeStyle({cursor:e.canFlipRight?"pointer":"auto"}),onClick:i[1]||(i[1]=(...r)=>e.flipRight&&e.flipRight(...r))},null,4),n.createElementVNode("div",{style:n.normalizeStyle({transform:`translateX(${e.centerOffsetSmoothed}px)`})},[e.showLeftPage?(n.openBlock(),n.createElementBlock("img",{key:0,class:"page fixed",style:n.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]=r=>e.didLoadImage(r)),alt:s.alt},null,44,Y)):n.createCommentVNode("",!0),e.showRightPage?(n.openBlock(),n.createElementBlock("img",{key:1,class:"page fixed",style:n.normalizeStyle({width:e.pageWidth+"px",height:e.pageHeight+"px",left:h.viewWidth/2+"px",top:e.yMargin+"px"}),src:e.pageUrlLoading(e.rightPage,!0),onLoad:i[3]||(i[3]=r=>e.didLoadImage(r)),alt:s.alt},null,44,V)):n.createCommentVNode("",!0),n.createElementVNode("div",{style:n.normalizeStyle({opacity:h.flip.opacity})},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(e.polygonArray,([r,o,l,g,c,p])=>(n.openBlock(),n.createElementBlock("div",{key:r,class:n.normalizeClass(["polygon",{blank:!o}]),style:n.normalizeStyle({backgroundImage:o&&`url(${e.loadImage(o)})`,backgroundSize:e.polygonBgSize,backgroundPosition:g,width:e.polygonWidth,height:e.polygonHeight,transform:c,zIndex:p})},[n.withDirectives(n.createElementVNode("div",{class:"lighting",style:n.normalizeStyle({backgroundImage:l})},null,4),[[n.vShow,l.length]])],6))),128))],4),n.createElementVNode("div",{class:"bounding-box",style:n.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]=(...r)=>e.onTouchStart&&e.onTouchStart(...r)),onPointerdown:i[5]||(i[5]=(...r)=>e.onPointerDown&&e.onPointerDown(...r)),onMousedown:i[6]||(i[6]=(...r)=>e.onMouseDown&&e.onMouseDown(...r))},null,36)],4)],4)],38)])}const S=A(N,[["render",Z],["__scopeId","data-v-1b0295cb"]]);u.FlipBook=S,u.default=S,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});