@mundogamernetwork/mgn-flipbook 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mgn-flipbook.cjs +127 -0
- package/dist/mgn-flipbook.css +1 -0
- package/dist/mgn-flipbook.js +2629 -0
- package/dist/types/MgnFlipbook.vue.d.ts +52 -0
- package/dist/types/components/FlipbookSkeleton.vue.d.ts +7 -0
- package/dist/types/components/FlipbookToolbar.vue.d.ts +44 -0
- package/dist/types/components/FlipbookWatermark.vue.d.ts +6 -0
- package/dist/types/composables/useAnalytics.d.ts +38 -0
- package/dist/types/composables/useFlipbook.d.ts +71 -0
- package/dist/types/composables/useKeyboard.d.ts +11 -0
- package/dist/types/composables/usePagePreloader.d.ts +15 -0
- package/dist/types/composables/usePdfRenderer.d.ts +72 -0
- package/dist/types/composables/useSound.d.ts +8 -0
- package/dist/types/composables/useTheme.d.ts +17 -0
- package/dist/types/composables/useZoom.d.ts +25 -0
- package/dist/types/index.d.ts +19 -0
- package/dist/types/themes/default.d.ts +2 -0
- package/dist/types/themes/light.d.ts +2 -0
- package/dist/types/themes/mgn.d.ts +2 -0
- package/dist/types/types/index.d.ts +63 -0
- package/package.json +64 -0
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
"use strict";var Ie=Object.create;var ge=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var Le=Object.getOwnPropertyNames;var Be=Object.getPrototypeOf,Ae=Object.prototype.hasOwnProperty;var Re=(h,p,l,d)=>{if(p&&typeof p=="object"||typeof p=="function")for(let c of Le(p))!Ae.call(h,c)&&c!==l&&ge(h,c,{get:()=>p[c],enumerable:!(d=De(p,c))||d.enumerable});return h};var Fe=(h,p,l)=>(l=h!=null?Ie(Be(h)):{},Re(p||!h||!h.__esModule?ge(l,"default",{value:h,enumerable:!0}):l,h));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue");var he={exports:{}},We=he.exports,pe;function He(){return pe||(pe=1,(function(h,p){(function(l,d){d(p)})(We,(function(l){class d{constructor(e,t){this.state={angle:0,area:[],position:{x:0,y:0},hardAngle:0,hardDrawingAngle:0},this.createdDensity=t,this.nowDrawingDensity=this.createdDensity,this.render=e}setDensity(e){this.createdDensity=e,this.nowDrawingDensity=e}setDrawingDensity(e){this.nowDrawingDensity=e}setPosition(e){this.state.position=e}setAngle(e){this.state.angle=e}setArea(e){this.state.area=e}setHardDrawingAngle(e){this.state.hardDrawingAngle=e}setHardAngle(e){this.state.hardAngle=e,this.state.hardDrawingAngle=e}setOrientation(e){this.orientation=e}getDrawingDensity(){return this.nowDrawingDensity}getDensity(){return this.createdDensity}getHardAngle(){return this.state.hardAngle}}class c extends d{constructor(e,t,n){super(e,n),this.image=null,this.isLoad=!1,this.loadingAngle=0,this.image=new Image,this.image.src=t}draw(e){const t=this.render.getContext(),n=this.render.convertToGlobal(this.state.position),s=this.render.getRect().pageWidth,o=this.render.getRect().height;t.save(),t.translate(n.x,n.y),t.beginPath();for(let r of this.state.area)r!==null&&(r=this.render.convertToGlobal(r),t.lineTo(r.x-n.x,r.y-n.y));t.rotate(this.state.angle),t.clip(),this.isLoad?t.drawImage(this.image,0,0,s,o):this.drawLoader(t,{x:0,y:0},s,o),t.restore()}simpleDraw(e){const t=this.render.getRect(),n=this.render.getContext(),s=t.pageWidth,o=t.height,r=e===1?t.left+t.pageWidth:t.left,y=t.top;this.isLoad?n.drawImage(this.image,r,y,s,o):this.drawLoader(n,{x:r,y},s,o)}drawLoader(e,t,n,s){e.beginPath(),e.strokeStyle="rgb(200, 200, 200)",e.fillStyle="rgb(255, 255, 255)",e.lineWidth=1,e.rect(t.x+1,t.y+1,n-1,s-1),e.stroke(),e.fill();const o={x:t.x+n/2,y:t.y+s/2};e.beginPath(),e.lineWidth=10,e.arc(o.x,o.y,20,this.loadingAngle,3*Math.PI/2+this.loadingAngle),e.stroke(),e.closePath(),this.loadingAngle+=.07,this.loadingAngle>=2*Math.PI&&(this.loadingAngle=0)}load(){this.isLoad||(this.image.onload=()=>{this.isLoad=!0})}newTemporaryCopy(){return this}getTemporaryCopy(){return this}hideTemporaryCopy(){}}class v{constructor(e,t){this.pages=[],this.currentPageIndex=0,this.currentSpreadIndex=0,this.landscapeSpread=[],this.portraitSpread=[],this.render=t,this.app=e,this.currentPageIndex=0,this.isShowCover=this.app.getSettings().showCover}destroy(){this.pages=[]}createSpread(){this.landscapeSpread=[],this.portraitSpread=[];for(let t=0;t<this.pages.length;t++)this.portraitSpread.push([t]);let e=0;this.isShowCover&&(this.pages[0].setDensity("hard"),this.landscapeSpread.push([e]),e++);for(let t=e;t<this.pages.length;t+=2)t<this.pages.length-1?this.landscapeSpread.push([t,t+1]):(this.landscapeSpread.push([t]),this.pages[t].setDensity("hard"))}getSpread(){return this.render.getOrientation()==="landscape"?this.landscapeSpread:this.portraitSpread}getSpreadIndexByPage(e){const t=this.getSpread();for(let n=0;n<t.length;n++)if(e===t[n][0]||e===t[n][1])return n;return null}getPageCount(){return this.pages.length}getPages(){return this.pages}getPage(e){if(e>=0&&e<this.pages.length)return this.pages[e];throw new Error("Invalid page number")}nextBy(e){const t=this.pages.indexOf(e);return t<this.pages.length-1?this.pages[t+1]:null}prevBy(e){const t=this.pages.indexOf(e);return t>0?this.pages[t-1]:null}getFlippingPage(e){const t=this.currentSpreadIndex;if(this.render.getOrientation()==="portrait")return e===0?this.pages[t].newTemporaryCopy():this.pages[t-1];{const n=e===0?this.getSpread()[t+1]:this.getSpread()[t-1];return n.length===1||e===0?this.pages[n[0]]:this.pages[n[1]]}}getBottomPage(e){const t=this.currentSpreadIndex;if(this.render.getOrientation()==="portrait")return e===0?this.pages[t+1]:this.pages[t-1];{const n=e===0?this.getSpread()[t+1]:this.getSpread()[t-1];return n.length===1?this.pages[n[0]]:e===0?this.pages[n[1]]:this.pages[n[0]]}}showNext(){this.currentSpreadIndex<this.getSpread().length&&(this.currentSpreadIndex++,this.showSpread())}showPrev(){this.currentSpreadIndex>0&&(this.currentSpreadIndex--,this.showSpread())}getCurrentPageIndex(){return this.currentPageIndex}show(e=null){if(e===null&&(e=this.currentPageIndex),e<0||e>=this.pages.length)return;const t=this.getSpreadIndexByPage(e);t!==null&&(this.currentSpreadIndex=t,this.showSpread())}getCurrentSpreadIndex(){return this.currentSpreadIndex}setCurrentSpreadIndex(e){if(!(e>=0&&e<this.getSpread().length))throw new Error("Invalid page");this.currentSpreadIndex=e}showSpread(){const e=this.getSpread()[this.currentSpreadIndex];e.length===2?(this.render.setLeftPage(this.pages[e[0]]),this.render.setRightPage(this.pages[e[1]])):this.render.getOrientation()==="landscape"&&e[0]===this.pages.length-1?(this.render.setLeftPage(this.pages[e[0]]),this.render.setRightPage(null)):(this.render.setLeftPage(null),this.render.setRightPage(this.pages[e[0]])),this.currentPageIndex=e[0],this.app.updatePageIndex(this.currentPageIndex)}}class B extends v{constructor(e,t,n){super(e,t),this.imagesHref=n}load(){for(const e of this.imagesHref){const t=new c(this.render,e,"soft");t.load(),this.pages.push(t)}this.createSpread()}}class w{static GetDistanceBetweenTwoPoint(e,t){return e===null||t===null?1/0:Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}static GetSegmentLength(e){return w.GetDistanceBetweenTwoPoint(e[0],e[1])}static GetAngleBetweenTwoLine(e,t){const n=e[0].y-e[1].y,s=t[0].y-t[1].y,o=e[1].x-e[0].x,r=t[1].x-t[0].x;return Math.acos((n*s+o*r)/(Math.sqrt(n*n+o*o)*Math.sqrt(s*s+r*r)))}static PointInRect(e,t){return t===null?null:t.x>=e.left&&t.x<=e.width+e.left&&t.y>=e.top&&t.y<=e.top+e.height?t:null}static GetRotatedPoint(e,t,n){return{x:e.x*Math.cos(n)+e.y*Math.sin(n)+t.x,y:e.y*Math.cos(n)-e.x*Math.sin(n)+t.y}}static LimitPointToCircle(e,t,n){if(w.GetDistanceBetweenTwoPoint(e,n)<=t)return n;const s=e.x,o=e.y,r=n.x,y=n.y;let M=Math.sqrt(Math.pow(t,2)*Math.pow(s-r,2)/(Math.pow(s-r,2)+Math.pow(o-y,2)))+s;n.x<0&&(M*=-1);let H=(M-s)*(o-y)/(s-r)+o;return s-r+o===0&&(H=t),{x:M,y:H}}static GetIntersectBetweenTwoSegment(e,t,n){return w.PointInRect(e,w.GetIntersectBeetwenTwoLine(t,n))}static GetIntersectBeetwenTwoLine(e,t){const n=e[0].y-e[1].y,s=t[0].y-t[1].y,o=e[1].x-e[0].x,r=t[1].x-t[0].x,y=e[0].x*e[1].y-e[1].x*e[0].y,M=t[0].x*t[1].y-t[1].x*t[0].y,H=n*M-s*y,q=o*M-r*y,N=-(y*r-M*o)/(n*r-s*o),Z=-(n*M-s*y)/(n*r-s*o);if(isFinite(N)&&isFinite(Z))return{x:N,y:Z};if(Math.abs(H-q)<.1)throw new Error("Segment included");return null}static GetCordsFromTwoPoint(e,t){const n=Math.abs(e.x-t.x),s=Math.abs(e.y-t.y),o=Math.max(n,s),r=[e];function y(M,H,q,N,Z){return H>M?M+Z*(q/N):H<M?M-Z*(q/N):M}for(let M=1;M<=o;M+=1)r.push({x:y(e.x,t.x,n,o,M),y:y(e.y,t.y,s,o,M)});return r}}class g extends d{constructor(e,t,n){super(e,n),this.copiedElement=null,this.temporaryCopy=null,this.isLoad=!1,this.element=t,this.element.classList.add("stf__item"),this.element.classList.add("--"+n)}newTemporaryCopy(){return this.nowDrawingDensity==="hard"?this:(this.temporaryCopy===null&&(this.copiedElement=this.element.cloneNode(!0),this.element.parentElement.appendChild(this.copiedElement),this.temporaryCopy=new g(this.render,this.copiedElement,this.nowDrawingDensity)),this.getTemporaryCopy())}getTemporaryCopy(){return this.temporaryCopy}hideTemporaryCopy(){this.temporaryCopy!==null&&(this.copiedElement.remove(),this.copiedElement=null,this.temporaryCopy=null)}draw(e){const t=e||this.nowDrawingDensity,n=this.render.convertToGlobal(this.state.position),s=this.render.getRect().pageWidth,o=this.render.getRect().height;this.element.classList.remove("--simple");const r=`
|
|
2
|
+
display: block;
|
|
3
|
+
z-index: ${this.element.style.zIndex};
|
|
4
|
+
left: 0;
|
|
5
|
+
top: 0;
|
|
6
|
+
width: ${s}px;
|
|
7
|
+
height: ${o}px;
|
|
8
|
+
`;t==="hard"?this.drawHard(r):this.drawSoft(n,r)}drawHard(e=""){const t=this.render.getRect().left+this.render.getRect().width/2,n=this.state.hardDrawingAngle,s=e+`
|
|
9
|
+
backface-visibility: hidden;
|
|
10
|
+
-webkit-backface-visibility: hidden;
|
|
11
|
+
clip-path: none;
|
|
12
|
+
-webkit-clip-path: none;
|
|
13
|
+
`+(this.orientation===0?`transform-origin: ${this.render.getRect().pageWidth}px 0;
|
|
14
|
+
transform: translate3d(0, 0, 0) rotateY(${n}deg);`:`transform-origin: 0 0;
|
|
15
|
+
transform: translate3d(${t}px, 0, 0) rotateY(${n}deg);`);this.element.style.cssText=s}drawSoft(e,t=""){let n="polygon( ";for(const o of this.state.area)if(o!==null){let r=this.render.getDirection()===1?{x:-o.x+this.state.position.x,y:o.y-this.state.position.y}:{x:o.x-this.state.position.x,y:o.y-this.state.position.y};r=w.GetRotatedPoint(r,{x:0,y:0},this.state.angle),n+=r.x+"px "+r.y+"px, "}n=n.slice(0,-2),n+=")";const s=t+`transform-origin: 0 0; clip-path: ${n}; -webkit-clip-path: ${n};`+(this.render.isSafari()&&this.state.angle===0?`transform: translate(${e.x}px, ${e.y}px);`:`transform: translate3d(${e.x}px, ${e.y}px, 0) rotate(${this.state.angle}rad);`);this.element.style.cssText=s}simpleDraw(e){const t=this.render.getRect(),n=t.pageWidth,s=t.height,o=e===1?t.left+t.pageWidth:t.left,r=t.top;this.element.classList.add("--simple"),this.element.style.cssText=`
|
|
16
|
+
position: absolute;
|
|
17
|
+
display: block;
|
|
18
|
+
height: ${s}px;
|
|
19
|
+
left: ${o}px;
|
|
20
|
+
top: ${r}px;
|
|
21
|
+
width: ${n}px;
|
|
22
|
+
z-index: ${this.render.getSettings().startZIndex+1};`}getElement(){return this.element}load(){this.isLoad=!0}setOrientation(e){super.setOrientation(e),this.element.classList.remove("--left","--right"),this.element.classList.add(e===1?"--right":"--left")}setDrawingDensity(e){this.element.classList.remove("--soft","--hard"),this.element.classList.add("--"+e),super.setDrawingDensity(e)}}class b extends v{constructor(e,t,n,s){super(e,t),this.element=n,this.pagesElement=s}load(){for(const e of this.pagesElement){const t=new g(this.render,e,e.dataset.density==="hard"?"hard":"soft");t.load(),this.pages.push(t)}this.createSpread()}}class V{constructor(e,t,n,s){this.direction=e,this.corner=t,this.topIntersectPoint=null,this.sideIntersectPoint=null,this.bottomIntersectPoint=null,this.pageWidth=parseInt(n,10),this.pageHeight=parseInt(s,10)}calc(e){try{return this.position=this.calcAngleAndPosition(e),this.calculateIntersectPoint(this.position),!0}catch{return!1}}getFlippingClipArea(){const e=[];let t=!1;return e.push(this.rect.topLeft),e.push(this.topIntersectPoint),this.sideIntersectPoint===null?t=!0:(e.push(this.sideIntersectPoint),this.bottomIntersectPoint===null&&(t=!1)),e.push(this.bottomIntersectPoint),(t||this.corner==="bottom")&&e.push(this.rect.bottomLeft),e}getBottomClipArea(){const e=[];return e.push(this.topIntersectPoint),this.corner==="top"?e.push({x:this.pageWidth,y:0}):(this.topIntersectPoint!==null&&e.push({x:this.pageWidth,y:0}),e.push({x:this.pageWidth,y:this.pageHeight})),this.sideIntersectPoint!==null?w.GetDistanceBetweenTwoPoint(this.sideIntersectPoint,this.topIntersectPoint)>=10&&e.push(this.sideIntersectPoint):this.corner==="top"&&e.push({x:this.pageWidth,y:this.pageHeight}),e.push(this.bottomIntersectPoint),e.push(this.topIntersectPoint),e}getAngle(){return this.direction===0?-this.angle:this.angle}getRect(){return this.rect}getPosition(){return this.position}getActiveCorner(){return this.direction===0?this.rect.topLeft:this.rect.topRight}getDirection(){return this.direction}getFlippingProgress(){return Math.abs((this.position.x-this.pageWidth)/(2*this.pageWidth)*100)}getCorner(){return this.corner}getBottomPagePosition(){return this.direction===1?{x:this.pageWidth,y:0}:{x:0,y:0}}getShadowStartPoint(){return this.corner==="top"?this.topIntersectPoint:this.sideIntersectPoint!==null?this.sideIntersectPoint:this.topIntersectPoint}getShadowAngle(){const e=w.GetAngleBetweenTwoLine(this.getSegmentToShadowLine(),[{x:0,y:0},{x:this.pageWidth,y:0}]);return this.direction===0?e:Math.PI-e}calcAngleAndPosition(e){let t=e;if(this.updateAngleAndGeometry(t),t=this.corner==="top"?this.checkPositionAtCenterLine(t,{x:0,y:0},{x:0,y:this.pageHeight}):this.checkPositionAtCenterLine(t,{x:0,y:this.pageHeight},{x:0,y:0}),Math.abs(t.x-this.pageWidth)<1&&Math.abs(t.y)<1)throw new Error("Point is too small");return t}updateAngleAndGeometry(e){this.angle=this.calculateAngle(e),this.rect=this.getPageRect(e)}calculateAngle(e){const t=this.pageWidth-e.x+1,n=this.corner==="bottom"?this.pageHeight-e.y:e.y;let s=2*Math.acos(t/Math.sqrt(n*n+t*t));n<0&&(s=-s);const o=Math.PI-s;if(!isFinite(s)||o>=0&&o<.003)throw new Error("The G point is too small");return this.corner==="bottom"&&(s=-s),s}getPageRect(e){return this.corner==="top"?this.getRectFromBasePoint([{x:0,y:0},{x:this.pageWidth,y:0},{x:0,y:this.pageHeight},{x:this.pageWidth,y:this.pageHeight}],e):this.getRectFromBasePoint([{x:0,y:-this.pageHeight},{x:this.pageWidth,y:-this.pageHeight},{x:0,y:0},{x:this.pageWidth,y:0}],e)}getRectFromBasePoint(e,t){return{topLeft:this.getRotatedPoint(e[0],t),topRight:this.getRotatedPoint(e[1],t),bottomLeft:this.getRotatedPoint(e[2],t),bottomRight:this.getRotatedPoint(e[3],t)}}getRotatedPoint(e,t){return{x:e.x*Math.cos(this.angle)+e.y*Math.sin(this.angle)+t.x,y:e.y*Math.cos(this.angle)-e.x*Math.sin(this.angle)+t.y}}calculateIntersectPoint(e){const t={left:-1,top:-1,width:this.pageWidth+2,height:this.pageHeight+2};this.corner==="top"?(this.topIntersectPoint=w.GetIntersectBetweenTwoSegment(t,[e,this.rect.topRight],[{x:0,y:0},{x:this.pageWidth,y:0}]),this.sideIntersectPoint=w.GetIntersectBetweenTwoSegment(t,[e,this.rect.bottomLeft],[{x:this.pageWidth,y:0},{x:this.pageWidth,y:this.pageHeight}]),this.bottomIntersectPoint=w.GetIntersectBetweenTwoSegment(t,[this.rect.bottomLeft,this.rect.bottomRight],[{x:0,y:this.pageHeight},{x:this.pageWidth,y:this.pageHeight}])):(this.topIntersectPoint=w.GetIntersectBetweenTwoSegment(t,[this.rect.topLeft,this.rect.topRight],[{x:0,y:0},{x:this.pageWidth,y:0}]),this.sideIntersectPoint=w.GetIntersectBetweenTwoSegment(t,[e,this.rect.topLeft],[{x:this.pageWidth,y:0},{x:this.pageWidth,y:this.pageHeight}]),this.bottomIntersectPoint=w.GetIntersectBetweenTwoSegment(t,[this.rect.bottomLeft,this.rect.bottomRight],[{x:0,y:this.pageHeight},{x:this.pageWidth,y:this.pageHeight}]))}checkPositionAtCenterLine(e,t,n){let s=e;const o=w.LimitPointToCircle(t,this.pageWidth,s);s!==o&&(s=o,this.updateAngleAndGeometry(s));const r=Math.sqrt(Math.pow(this.pageWidth,2)+Math.pow(this.pageHeight,2));let y=this.rect.bottomRight,M=this.rect.topLeft;if(this.corner==="bottom"&&(y=this.rect.topRight,M=this.rect.bottomLeft),y.x<=0){const H=w.LimitPointToCircle(n,r,M);H!==s&&(s=H,this.updateAngleAndGeometry(s))}return s}getSegmentToShadowLine(){const e=this.getShadowStartPoint();return[e,e!==this.sideIntersectPoint&&this.sideIntersectPoint!==null?this.sideIntersectPoint:this.bottomIntersectPoint]}}class x{constructor(e,t){this.flippingPage=null,this.bottomPage=null,this.calc=null,this.state="read",this.render=e,this.app=t}fold(e){this.setState("user_fold"),this.calc===null&&this.start(e),this.do(this.render.convertToPage(e))}flip(e){if(this.app.getSettings().disableFlipByClick&&!this.isPointOnCorners(e)||(this.calc!==null&&this.render.finishAnimation(),!this.start(e)))return;const t=this.getBoundsRect();this.setState("flipping");const n=t.height/10,s=this.calc.getCorner()==="bottom"?t.height-n:n,o=this.calc.getCorner()==="bottom"?t.height:0;this.calc.calc({x:t.pageWidth-n,y:s}),this.animateFlippingTo({x:t.pageWidth-n,y:s},{x:-t.pageWidth,y:o},!0)}start(e){this.reset();const t=this.render.convertToBook(e),n=this.getBoundsRect(),s=this.getDirectionByPoint(t),o=t.y>=n.height/2?"bottom":"top";if(!this.checkDirection(s))return!1;try{if(this.flippingPage=this.app.getPageCollection().getFlippingPage(s),this.bottomPage=this.app.getPageCollection().getBottomPage(s),this.render.getOrientation()==="landscape")if(s===1){const r=this.app.getPageCollection().nextBy(this.flippingPage);r!==null&&this.flippingPage.getDensity()!==r.getDensity()&&(this.flippingPage.setDrawingDensity("hard"),r.setDrawingDensity("hard"))}else{const r=this.app.getPageCollection().prevBy(this.flippingPage);r!==null&&this.flippingPage.getDensity()!==r.getDensity()&&(this.flippingPage.setDrawingDensity("hard"),r.setDrawingDensity("hard"))}return this.render.setDirection(s),this.calc=new V(s,o,n.pageWidth.toString(10),n.height.toString(10)),!0}catch{return!1}}do(e){if(this.calc!==null&&this.calc.calc(e)){const t=this.calc.getFlippingProgress();this.bottomPage.setArea(this.calc.getBottomClipArea()),this.bottomPage.setPosition(this.calc.getBottomPagePosition()),this.bottomPage.setAngle(0),this.bottomPage.setHardAngle(0),this.flippingPage.setArea(this.calc.getFlippingClipArea()),this.flippingPage.setPosition(this.calc.getActiveCorner()),this.flippingPage.setAngle(this.calc.getAngle()),this.calc.getDirection()===0?this.flippingPage.setHardAngle(90*(200-2*t)/100):this.flippingPage.setHardAngle(-90*(200-2*t)/100),this.render.setPageRect(this.calc.getRect()),this.render.setBottomPage(this.bottomPage),this.render.setFlippingPage(this.flippingPage),this.render.setShadowData(this.calc.getShadowStartPoint(),this.calc.getShadowAngle(),t,this.calc.getDirection())}}flipToPage(e,t){const n=this.app.getPageCollection().getCurrentSpreadIndex(),s=this.app.getPageCollection().getSpreadIndexByPage(e);try{s>n&&(this.app.getPageCollection().setCurrentSpreadIndex(s-1),this.flipNext(t)),s<n&&(this.app.getPageCollection().setCurrentSpreadIndex(s+1),this.flipPrev(t))}catch{}}flipNext(e){this.flip({x:this.render.getRect().left+2*this.render.getRect().pageWidth-10,y:e==="top"?1:this.render.getRect().height-2})}flipPrev(e){this.flip({x:10,y:e==="top"?1:this.render.getRect().height-2})}stopMove(){if(this.calc===null)return;const e=this.calc.getPosition(),t=this.getBoundsRect(),n=this.calc.getCorner()==="bottom"?t.height:0;e.x<=0?this.animateFlippingTo(e,{x:-t.pageWidth,y:n},!0):this.animateFlippingTo(e,{x:t.pageWidth,y:n},!1)}showCorner(e){if(!this.checkState("read","fold_corner"))return;const t=this.getBoundsRect(),n=t.pageWidth;if(this.isPointOnCorners(e))if(this.calc===null){if(!this.start(e))return;this.setState("fold_corner"),this.calc.calc({x:n-1,y:1});const s=50,o=this.calc.getCorner()==="bottom"?t.height-1:1,r=this.calc.getCorner()==="bottom"?t.height-s:s;this.animateFlippingTo({x:n-1,y:o},{x:n-s,y:r},!1,!1)}else this.do(this.render.convertToPage(e));else this.setState("read"),this.render.finishAnimation(),this.stopMove()}animateFlippingTo(e,t,n,s=!0){const o=w.GetCordsFromTwoPoint(e,t),r=[];for(const M of o)r.push(()=>this.do(M));const y=this.getAnimationDuration(o.length);this.render.startAnimation(r,y,()=>{this.calc&&(n&&(this.calc.getDirection()===1?this.app.turnToPrevPage():this.app.turnToNextPage()),s&&(this.render.setBottomPage(null),this.render.setFlippingPage(null),this.render.clearShadow(),this.setState("read"),this.reset()))})}getCalculation(){return this.calc}getState(){return this.state}setState(e){this.state!==e&&(this.app.updateState(e),this.state=e)}getDirectionByPoint(e){const t=this.getBoundsRect();if(this.render.getOrientation()==="portrait"){if(e.x-t.pageWidth<=t.width/5)return 1}else if(e.x<t.width/2)return 1;return 0}getAnimationDuration(e){const t=this.app.getSettings().flippingTime;return e>=1e3?t:e/1e3*t}checkDirection(e){return e===0?this.app.getCurrentPageIndex()<this.app.getPageCount()-1:this.app.getCurrentPageIndex()>=1}reset(){this.calc=null,this.flippingPage=null,this.bottomPage=null}getBoundsRect(){return this.render.getRect()}checkState(...e){for(const t of e)if(this.state===t)return!0;return!1}isPointOnCorners(e){const t=this.getBoundsRect(),n=t.pageWidth,s=Math.sqrt(Math.pow(n,2)+Math.pow(t.height,2))/5,o=this.render.convertToBook(e);return o.x>0&&o.y>0&&o.x<t.width&&o.y<t.height&&(o.x<s||o.x>t.width-s)&&(o.y<s||o.y>t.height-s)}}class _{constructor(e,t){this.leftPage=null,this.rightPage=null,this.flippingPage=null,this.bottomPage=null,this.direction=null,this.orientation=null,this.shadow=null,this.animation=null,this.pageRect=null,this.boundsRect=null,this.timer=0,this.safari=!1,this.setting=t,this.app=e;const n=new RegExp("Version\\/[\\d\\.]+.*Safari/");this.safari=n.exec(window.navigator.userAgent)!==null}render(e){if(this.animation!==null){const t=Math.round((e-this.animation.startedAt)/this.animation.durationFrame);t<this.animation.frames.length?this.animation.frames[t]():(this.animation.onAnimateEnd(),this.animation=null)}this.timer=e,this.drawFrame()}start(){this.update();const e=t=>{this.render(t),requestAnimationFrame(e)};requestAnimationFrame(e)}startAnimation(e,t,n){this.finishAnimation(),this.animation={frames:e,duration:t,durationFrame:t/e.length,onAnimateEnd:n,startedAt:this.timer}}finishAnimation(){this.animation!==null&&(this.animation.frames[this.animation.frames.length-1](),this.animation.onAnimateEnd!==null&&this.animation.onAnimateEnd()),this.animation=null}update(){this.boundsRect=null;const e=this.calculateBoundsRect();this.orientation!==e&&(this.orientation=e,this.app.updateOrientation(e))}calculateBoundsRect(){let e="landscape";const t=this.getBlockWidth(),n=t/2,s=this.getBlockHeight()/2,o=this.setting.width/this.setting.height;let r=this.setting.width,y=this.setting.height,M=n-r;return this.setting.size==="stretch"?(t<2*this.setting.minWidth&&this.app.getSettings().usePortrait&&(e="portrait"),r=e==="portrait"?this.getBlockWidth():this.getBlockWidth()/2,r>this.setting.maxWidth&&(r=this.setting.maxWidth),y=r/o,y>this.getBlockHeight()&&(y=this.getBlockHeight(),r=y*o),M=e==="portrait"?n-r/2-r:n-r):t<2*r&&this.app.getSettings().usePortrait&&(e="portrait",M=n-r/2-r),this.boundsRect={left:M,top:s-y/2,width:2*r,height:y,pageWidth:r},e}setShadowData(e,t,n,s){if(!this.app.getSettings().drawShadow)return;const o=100*this.getSettings().maxShadowOpacity;this.shadow={pos:e,angle:t,width:3*this.getRect().pageWidth/4*n/100,opacity:(100-n)*o/100/100,direction:s,progress:2*n}}clearShadow(){this.shadow=null}getBlockWidth(){return this.app.getUI().getDistElement().offsetWidth}getBlockHeight(){return this.app.getUI().getDistElement().offsetHeight}getDirection(){return this.direction}getRect(){return this.boundsRect===null&&this.calculateBoundsRect(),this.boundsRect}getSettings(){return this.app.getSettings()}getOrientation(){return this.orientation}setPageRect(e){this.pageRect=e}setDirection(e){this.direction=e}setRightPage(e){e!==null&&e.setOrientation(1),this.rightPage=e}setLeftPage(e){e!==null&&e.setOrientation(0),this.leftPage=e}setBottomPage(e){e!==null&&e.setOrientation(this.direction===1?0:1),this.bottomPage=e}setFlippingPage(e){e!==null&&e.setOrientation(this.direction===0&&this.orientation!=="portrait"?0:1),this.flippingPage=e}convertToBook(e){const t=this.getRect();return{x:e.x-t.left,y:e.y-t.top}}isSafari(){return this.safari}convertToPage(e,t){t||(t=this.direction);const n=this.getRect();return{x:t===0?e.x-n.left-n.width/2:n.width/2-e.x+n.left,y:e.y-n.top}}convertToGlobal(e,t){if(t||(t=this.direction),e==null)return null;const n=this.getRect();return{x:t===0?e.x+n.left+n.width/2:n.width/2-e.x+n.left,y:e.y+n.top}}convertRectToGlobal(e,t){return t||(t=this.direction),{topLeft:this.convertToGlobal(e.topLeft,t),topRight:this.convertToGlobal(e.topRight,t),bottomLeft:this.convertToGlobal(e.bottomLeft,t),bottomRight:this.convertToGlobal(e.bottomRight,t)}}}class m extends _{constructor(e,t,n){super(e,t),this.canvas=n,this.ctx=n.getContext("2d")}getContext(){return this.ctx}reload(){}drawFrame(){this.clear(),this.orientation!=="portrait"&&this.leftPage!=null&&this.leftPage.simpleDraw(0),this.rightPage!=null&&this.rightPage.simpleDraw(1),this.bottomPage!=null&&this.bottomPage.draw(),this.drawBookShadow(),this.flippingPage!=null&&this.flippingPage.draw(),this.shadow!=null&&(this.drawOuterShadow(),this.drawInnerShadow());const e=this.getRect();this.orientation==="portrait"&&(this.ctx.beginPath(),this.ctx.rect(e.left+e.pageWidth,e.top,e.width,e.height),this.ctx.clip())}drawBookShadow(){const e=this.getRect();this.ctx.save(),this.ctx.beginPath();const t=e.width/20;this.ctx.rect(e.left,e.top,e.width,e.height);const n={x:e.left+e.width/2-t/2,y:0};this.ctx.translate(n.x,n.y);const s=this.ctx.createLinearGradient(0,0,t,0);s.addColorStop(0,"rgba(0, 0, 0, 0)"),s.addColorStop(.4,"rgba(0, 0, 0, 0.2)"),s.addColorStop(.49,"rgba(0, 0, 0, 0.1)"),s.addColorStop(.5,"rgba(0, 0, 0, 0.5)"),s.addColorStop(.51,"rgba(0, 0, 0, 0.4)"),s.addColorStop(1,"rgba(0, 0, 0, 0)"),this.ctx.clip(),this.ctx.fillStyle=s,this.ctx.fillRect(0,0,t,2*e.height),this.ctx.restore()}drawOuterShadow(){const e=this.getRect();this.ctx.save(),this.ctx.beginPath(),this.ctx.rect(e.left,e.top,e.width,e.height);const t=this.convertToGlobal({x:this.shadow.pos.x,y:this.shadow.pos.y});this.ctx.translate(t.x,t.y),this.ctx.rotate(Math.PI+this.shadow.angle+Math.PI/2);const n=this.ctx.createLinearGradient(0,0,this.shadow.width,0);this.shadow.direction===0?(this.ctx.translate(0,-100),n.addColorStop(0,"rgba(0, 0, 0, "+this.shadow.opacity+")"),n.addColorStop(1,"rgba(0, 0, 0, 0)")):(this.ctx.translate(-this.shadow.width,-100),n.addColorStop(0,"rgba(0, 0, 0, 0)"),n.addColorStop(1,"rgba(0, 0, 0, "+this.shadow.opacity+")")),this.ctx.clip(),this.ctx.fillStyle=n,this.ctx.fillRect(0,0,this.shadow.width,2*e.height),this.ctx.restore()}drawInnerShadow(){const e=this.getRect();this.ctx.save(),this.ctx.beginPath();const t=this.convertToGlobal({x:this.shadow.pos.x,y:this.shadow.pos.y}),n=this.convertRectToGlobal(this.pageRect);this.ctx.moveTo(n.topLeft.x,n.topLeft.y),this.ctx.lineTo(n.topRight.x,n.topRight.y),this.ctx.lineTo(n.bottomRight.x,n.bottomRight.y),this.ctx.lineTo(n.bottomLeft.x,n.bottomLeft.y),this.ctx.translate(t.x,t.y),this.ctx.rotate(Math.PI+this.shadow.angle+Math.PI/2);const s=3*this.shadow.width/4,o=this.ctx.createLinearGradient(0,0,s,0);this.shadow.direction===0?(this.ctx.translate(-s,-100),o.addColorStop(1,"rgba(0, 0, 0, "+this.shadow.opacity+")"),o.addColorStop(.9,"rgba(0, 0, 0, 0.05)"),o.addColorStop(.7,"rgba(0, 0, 0, "+this.shadow.opacity+")"),o.addColorStop(0,"rgba(0, 0, 0, 0)")):(this.ctx.translate(0,-100),o.addColorStop(0,"rgba(0, 0, 0, "+this.shadow.opacity+")"),o.addColorStop(.1,"rgba(0, 0, 0, 0.05)"),o.addColorStop(.3,"rgba(0, 0, 0, "+this.shadow.opacity+")"),o.addColorStop(1,"rgba(0, 0, 0, 0)")),this.ctx.clip(),this.ctx.fillStyle=o,this.ctx.fillRect(0,0,s,2*e.height),this.ctx.restore()}clear(){this.ctx.fillStyle="white",this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height)}}class O{constructor(e,t,n){this.touchPoint=null,this.swipeTimeout=250,this.onResize=()=>{this.update()},this.onMouseDown=o=>{if(this.checkTarget(o.target)){const r=this.getMousePos(o.clientX,o.clientY);this.app.startUserTouch(r),o.preventDefault()}},this.onTouchStart=o=>{if(this.checkTarget(o.target)&&o.changedTouches.length>0){const r=o.changedTouches[0],y=this.getMousePos(r.clientX,r.clientY);this.touchPoint={point:y,time:Date.now()},setTimeout(()=>{this.touchPoint!==null&&this.app.startUserTouch(y)},this.swipeTimeout),this.app.getSettings().mobileScrollSupport||o.preventDefault()}},this.onMouseUp=o=>{const r=this.getMousePos(o.clientX,o.clientY);this.app.userStop(r)},this.onMouseMove=o=>{const r=this.getMousePos(o.clientX,o.clientY);this.app.userMove(r,!1)},this.onTouchMove=o=>{if(o.changedTouches.length>0){const r=o.changedTouches[0],y=this.getMousePos(r.clientX,r.clientY);this.app.getSettings().mobileScrollSupport?(this.touchPoint!==null&&(Math.abs(this.touchPoint.point.x-y.x)>10||this.app.getState()!=="read")&&o.cancelable&&this.app.userMove(y,!0),this.app.getState()!=="read"&&o.preventDefault()):this.app.userMove(y,!0)}},this.onTouchEnd=o=>{if(o.changedTouches.length>0){const r=o.changedTouches[0],y=this.getMousePos(r.clientX,r.clientY);let M=!1;if(this.touchPoint!==null){const H=y.x-this.touchPoint.point.x,q=Math.abs(y.y-this.touchPoint.point.y);Math.abs(H)>this.swipeDistance&&q<2*this.swipeDistance&&Date.now()-this.touchPoint.time<this.swipeTimeout&&(H>0?this.app.flipPrev(this.touchPoint.point.y<this.app.getRender().getRect().height/2?"top":"bottom"):this.app.flipNext(this.touchPoint.point.y<this.app.getRender().getRect().height/2?"top":"bottom"),M=!0),this.touchPoint=null}this.app.userStop(y,M)}},this.parentElement=e,e.classList.add("stf__parent"),e.insertAdjacentHTML("afterbegin",'<div class="stf__wrapper"></div>'),this.wrapper=e.querySelector(".stf__wrapper"),this.app=t;const s=this.app.getSettings().usePortrait?1:2;e.style.minWidth=n.minWidth*s+"px",e.style.minHeight=n.minHeight+"px",n.size==="fixed"&&(e.style.minWidth=n.width*s+"px",e.style.minHeight=n.height+"px"),n.autoSize&&(e.style.width="100%",e.style.maxWidth=2*n.maxWidth+"px"),e.style.display="block",window.addEventListener("resize",this.onResize,!1),this.swipeDistance=n.swipeDistance}destroy(){this.app.getSettings().useMouseEvents&&this.removeHandlers(),this.distElement.remove(),this.wrapper.remove()}getDistElement(){return this.distElement}getWrapper(){return this.wrapper}setOrientationStyle(e){this.wrapper.classList.remove("--portrait","--landscape"),e==="portrait"?(this.app.getSettings().autoSize&&(this.wrapper.style.paddingBottom=this.app.getSettings().height/this.app.getSettings().width*100+"%"),this.wrapper.classList.add("--portrait")):(this.app.getSettings().autoSize&&(this.wrapper.style.paddingBottom=this.app.getSettings().height/(2*this.app.getSettings().width)*100+"%"),this.wrapper.classList.add("--landscape")),this.update()}removeHandlers(){window.removeEventListener("resize",this.onResize),this.distElement.removeEventListener("mousedown",this.onMouseDown),this.distElement.removeEventListener("touchstart",this.onTouchStart),window.removeEventListener("mousemove",this.onMouseMove),window.removeEventListener("touchmove",this.onTouchMove),window.removeEventListener("mouseup",this.onMouseUp),window.removeEventListener("touchend",this.onTouchEnd)}setHandlers(){window.addEventListener("resize",this.onResize,!1),this.app.getSettings().useMouseEvents&&(this.distElement.addEventListener("mousedown",this.onMouseDown),this.distElement.addEventListener("touchstart",this.onTouchStart),window.addEventListener("mousemove",this.onMouseMove),window.addEventListener("touchmove",this.onTouchMove,{passive:!this.app.getSettings().mobileScrollSupport}),window.addEventListener("mouseup",this.onMouseUp),window.addEventListener("touchend",this.onTouchEnd))}getMousePos(e,t){const n=this.distElement.getBoundingClientRect();return{x:e-n.left,y:t-n.top}}checkTarget(e){return!this.app.getSettings().clickEventForward||!["a","button"].includes(e.tagName.toLowerCase())}}class E extends O{constructor(e,t,n,s){super(e,t,n),this.wrapper.insertAdjacentHTML("afterbegin",'<div class="stf__block"></div>'),this.distElement=e.querySelector(".stf__block"),this.items=s;for(const o of s)this.distElement.appendChild(o);this.setHandlers()}clear(){for(const e of this.items)this.parentElement.appendChild(e)}updateItems(e){this.removeHandlers(),this.distElement.innerHTML="";for(const t of e)this.distElement.appendChild(t);this.items=e,this.setHandlers()}update(){this.app.getRender().update()}}class C extends O{constructor(e,t,n){super(e,t,n),this.wrapper.innerHTML='<canvas class="stf__canvas"></canvas>',this.canvas=e.querySelectorAll("canvas")[0],this.distElement=this.canvas,this.resizeCanvas(),this.setHandlers()}resizeCanvas(){const e=getComputedStyle(this.canvas),t=parseInt(e.getPropertyValue("width"),10),n=parseInt(e.getPropertyValue("height"),10);this.canvas.width=t,this.canvas.height=n}getCanvas(){return this.canvas}update(){this.resizeCanvas(),this.app.getRender().update()}}class U extends _{constructor(e,t,n){super(e,t),this.outerShadow=null,this.innerShadow=null,this.hardShadow=null,this.hardInnerShadow=null,this.element=n,this.createShadows()}createShadows(){this.element.insertAdjacentHTML("beforeend",`<div class="stf__outerShadow"></div>
|
|
23
|
+
<div class="stf__innerShadow"></div>
|
|
24
|
+
<div class="stf__hardShadow"></div>
|
|
25
|
+
<div class="stf__hardInnerShadow"></div>`),this.outerShadow=this.element.querySelector(".stf__outerShadow"),this.innerShadow=this.element.querySelector(".stf__innerShadow"),this.hardShadow=this.element.querySelector(".stf__hardShadow"),this.hardInnerShadow=this.element.querySelector(".stf__hardInnerShadow")}clearShadow(){super.clearShadow(),this.outerShadow.style.cssText="display: none",this.innerShadow.style.cssText="display: none",this.hardShadow.style.cssText="display: none",this.hardInnerShadow.style.cssText="display: none"}reload(){this.element.querySelector(".stf__outerShadow")||this.createShadows()}drawHardInnerShadow(){const e=this.getRect(),t=this.shadow.progress>100?200-this.shadow.progress:this.shadow.progress;let n=(100-t)*(2.5*e.pageWidth)/100+20;n>e.pageWidth&&(n=e.pageWidth);let s=`
|
|
26
|
+
display: block;
|
|
27
|
+
z-index: ${(this.getSettings().startZIndex+5).toString(10)};
|
|
28
|
+
width: ${n}px;
|
|
29
|
+
height: ${e.height}px;
|
|
30
|
+
background: linear-gradient(to right,
|
|
31
|
+
rgba(0, 0, 0, ${this.shadow.opacity*t/100}) 5%,
|
|
32
|
+
rgba(0, 0, 0, 0) 100%);
|
|
33
|
+
left: ${e.left+e.width/2}px;
|
|
34
|
+
transform-origin: 0 0;
|
|
35
|
+
`;s+=this.getDirection()===0&&this.shadow.progress>100||this.getDirection()===1&&this.shadow.progress<=100?"transform: translate3d(0, 0, 0);":"transform: translate3d(0, 0, 0) rotateY(180deg);",this.hardInnerShadow.style.cssText=s}drawHardOuterShadow(){const e=this.getRect();let t=(100-(this.shadow.progress>100?200-this.shadow.progress:this.shadow.progress))*(2.5*e.pageWidth)/100+20;t>e.pageWidth&&(t=e.pageWidth);let n=`
|
|
36
|
+
display: block;
|
|
37
|
+
z-index: ${(this.getSettings().startZIndex+4).toString(10)};
|
|
38
|
+
width: ${t}px;
|
|
39
|
+
height: ${e.height}px;
|
|
40
|
+
background: linear-gradient(to left, rgba(0, 0, 0, ${this.shadow.opacity}) 5%, rgba(0, 0, 0, 0) 100%);
|
|
41
|
+
left: ${e.left+e.width/2}px;
|
|
42
|
+
transform-origin: 0 0;
|
|
43
|
+
`;n+=this.getDirection()===0&&this.shadow.progress>100||this.getDirection()===1&&this.shadow.progress<=100?"transform: translate3d(0, 0, 0) rotateY(180deg);":"transform: translate3d(0, 0, 0);",this.hardShadow.style.cssText=n}drawInnerShadow(){const e=this.getRect(),t=3*this.shadow.width/4,n=this.getDirection()===0?t:0,s=this.getDirection()===0?"to left":"to right",o=this.convertToGlobal(this.shadow.pos),r=this.shadow.angle+3*Math.PI/2,y=[this.pageRect.topLeft,this.pageRect.topRight,this.pageRect.bottomRight,this.pageRect.bottomLeft];let M="polygon( ";for(const q of y){let N=this.getDirection()===1?{x:-q.x+this.shadow.pos.x,y:q.y-this.shadow.pos.y}:{x:q.x-this.shadow.pos.x,y:q.y-this.shadow.pos.y};N=w.GetRotatedPoint(N,{x:n,y:100},r),M+=N.x+"px "+N.y+"px, "}M=M.slice(0,-2),M+=")";const H=`
|
|
44
|
+
display: block;
|
|
45
|
+
z-index: ${(this.getSettings().startZIndex+10).toString(10)};
|
|
46
|
+
width: ${t}px;
|
|
47
|
+
height: ${2*e.height}px;
|
|
48
|
+
background: linear-gradient(${s},
|
|
49
|
+
rgba(0, 0, 0, ${this.shadow.opacity}) 5%,
|
|
50
|
+
rgba(0, 0, 0, 0.05) 15%,
|
|
51
|
+
rgba(0, 0, 0, ${this.shadow.opacity}) 35%,
|
|
52
|
+
rgba(0, 0, 0, 0) 100%);
|
|
53
|
+
transform-origin: ${n}px 100px;
|
|
54
|
+
transform: translate3d(${o.x-n}px, ${o.y-100}px, 0) rotate(${r}rad);
|
|
55
|
+
clip-path: ${M};
|
|
56
|
+
-webkit-clip-path: ${M};
|
|
57
|
+
`;this.innerShadow.style.cssText=H}drawOuterShadow(){const e=this.getRect(),t=this.convertToGlobal({x:this.shadow.pos.x,y:this.shadow.pos.y}),n=this.shadow.angle+3*Math.PI/2,s=this.getDirection()===1?this.shadow.width:0,o=this.getDirection()===0?"to right":"to left",r=[{x:0,y:0},{x:e.pageWidth,y:0},{x:e.pageWidth,y:e.height},{x:0,y:e.height}];let y="polygon( ";for(const H of r)if(H!==null){let q=this.getDirection()===1?{x:-H.x+this.shadow.pos.x,y:H.y-this.shadow.pos.y}:{x:H.x-this.shadow.pos.x,y:H.y-this.shadow.pos.y};q=w.GetRotatedPoint(q,{x:s,y:100},n),y+=q.x+"px "+q.y+"px, "}y=y.slice(0,-2),y+=")";const M=`
|
|
58
|
+
display: block;
|
|
59
|
+
z-index: ${(this.getSettings().startZIndex+10).toString(10)};
|
|
60
|
+
width: ${this.shadow.width}px;
|
|
61
|
+
height: ${2*e.height}px;
|
|
62
|
+
background: linear-gradient(${o}, rgba(0, 0, 0, ${this.shadow.opacity}), rgba(0, 0, 0, 0));
|
|
63
|
+
transform-origin: ${s}px 100px;
|
|
64
|
+
transform: translate3d(${t.x-s}px, ${t.y-100}px, 0) rotate(${n}rad);
|
|
65
|
+
clip-path: ${y};
|
|
66
|
+
-webkit-clip-path: ${y};
|
|
67
|
+
`;this.outerShadow.style.cssText=M}drawLeftPage(){this.orientation!=="portrait"&&this.leftPage!==null&&(this.direction===1&&this.flippingPage!==null&&this.flippingPage.getDrawingDensity()==="hard"?(this.leftPage.getElement().style.zIndex=(this.getSettings().startZIndex+5).toString(10),this.leftPage.setHardDrawingAngle(180+this.flippingPage.getHardAngle()),this.leftPage.draw(this.flippingPage.getDrawingDensity())):this.leftPage.simpleDraw(0))}drawRightPage(){this.rightPage!==null&&(this.direction===0&&this.flippingPage!==null&&this.flippingPage.getDrawingDensity()==="hard"?(this.rightPage.getElement().style.zIndex=(this.getSettings().startZIndex+5).toString(10),this.rightPage.setHardDrawingAngle(180+this.flippingPage.getHardAngle()),this.rightPage.draw(this.flippingPage.getDrawingDensity())):this.rightPage.simpleDraw(1))}drawBottomPage(){if(this.bottomPage===null)return;const e=this.flippingPage!=null?this.flippingPage.getDrawingDensity():null;this.orientation==="portrait"&&this.direction===1||(this.bottomPage.getElement().style.zIndex=(this.getSettings().startZIndex+3).toString(10),this.bottomPage.draw(e))}drawFrame(){this.clear(),this.drawLeftPage(),this.drawRightPage(),this.drawBottomPage(),this.flippingPage!=null&&(this.flippingPage.getElement().style.zIndex=(this.getSettings().startZIndex+5).toString(10),this.flippingPage.draw()),this.shadow!=null&&this.flippingPage!==null&&(this.flippingPage.getDrawingDensity()==="soft"?(this.drawOuterShadow(),this.drawInnerShadow()):(this.drawHardOuterShadow(),this.drawHardInnerShadow()))}clear(){for(const e of this.app.getPageCollection().getPages())e!==this.leftPage&&e!==this.rightPage&&e!==this.flippingPage&&e!==this.bottomPage&&(e.getElement().style.cssText="display: none"),e.getTemporaryCopy()!==this.flippingPage&&e.hideTemporaryCopy()}update(){super.update(),this.rightPage!==null&&this.rightPage.setOrientation(1),this.leftPage!==null&&this.leftPage.setOrientation(0)}}class Y{constructor(){this._default={startPage:0,size:"fixed",width:0,height:0,minWidth:0,maxWidth:0,minHeight:0,maxHeight:0,drawShadow:!0,flippingTime:1e3,usePortrait:!0,startZIndex:0,autoSize:!0,maxShadowOpacity:1,showCover:!1,mobileScrollSupport:!0,swipeDistance:30,clickEventForward:!0,useMouseEvents:!0,showPageCorners:!0,disableFlipByClick:!1}}getSettings(e){const t=this._default;if(Object.assign(t,e),t.size!=="stretch"&&t.size!=="fixed")throw new Error('Invalid size type. Available only "fixed" and "stretch" value');if(t.width<=0||t.height<=0)throw new Error("Invalid width or height");if(t.flippingTime<=0)throw new Error("Invalid flipping time");return t.size==="stretch"?(t.minWidth<=0&&(t.minWidth=100),t.maxWidth<t.minWidth&&(t.maxWidth=2e3),t.minHeight<=0&&(t.minHeight=100),t.maxHeight<t.minHeight&&(t.maxHeight=2e3)):(t.minWidth=t.width,t.maxWidth=t.width,t.minHeight=t.height,t.maxHeight=t.height),t}}(function(u,e){e===void 0&&(e={});var t=e.insertAt;if(typeof document<"u"){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css",t==="top"&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=u:s.appendChild(document.createTextNode(u))}})(`.stf__parent {
|
|
68
|
+
position: relative;
|
|
69
|
+
display: block;
|
|
70
|
+
box-sizing: border-box;
|
|
71
|
+
transform: translateZ(0);
|
|
72
|
+
|
|
73
|
+
-ms-touch-action: pan-y;
|
|
74
|
+
touch-action: pan-y;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.sft__wrapper {
|
|
78
|
+
position: relative;
|
|
79
|
+
width: 100%;
|
|
80
|
+
box-sizing: border-box;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.stf__parent canvas {
|
|
84
|
+
position: absolute;
|
|
85
|
+
width: 100%;
|
|
86
|
+
height: 100%;
|
|
87
|
+
left: 0;
|
|
88
|
+
top: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.stf__block {
|
|
92
|
+
position: absolute;
|
|
93
|
+
width: 100%;
|
|
94
|
+
height: 100%;
|
|
95
|
+
box-sizing: border-box;
|
|
96
|
+
perspective: 2000px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.stf__item {
|
|
100
|
+
display: none;
|
|
101
|
+
position: absolute;
|
|
102
|
+
transform-style: preserve-3d;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.stf__outerShadow {
|
|
106
|
+
position: absolute;
|
|
107
|
+
left: 0;
|
|
108
|
+
top: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.stf__innerShadow {
|
|
112
|
+
position: absolute;
|
|
113
|
+
left: 0;
|
|
114
|
+
top: 0;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.stf__hardShadow {
|
|
118
|
+
position: absolute;
|
|
119
|
+
left: 0;
|
|
120
|
+
top: 0;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.stf__hardInnerShadow {
|
|
124
|
+
position: absolute;
|
|
125
|
+
left: 0;
|
|
126
|
+
top: 0;
|
|
127
|
+
}`),l.PageFlip=class extends class{constructor(){this.events=new Map}on(u,e){return this.events.has(u)?this.events.get(u).push(e):this.events.set(u,[e]),this}off(u){this.events.delete(u)}trigger(u,e,t=null){if(this.events.has(u))for(const n of this.events.get(u))n({data:t,object:e})}}{constructor(u,e){super(),this.isUserTouch=!1,this.isUserMove=!1,this.setting=null,this.pages=null,this.setting=new Y().getSettings(e),this.block=u}destroy(){this.ui.destroy(),this.block.remove()}update(){this.render.update(),this.pages.show()}loadFromImages(u){this.ui=new C(this.block,this,this.setting);const e=this.ui.getCanvas();this.render=new m(this,this.setting,e),this.flipController=new x(this.render,this),this.pages=new B(this,this.render,u),this.pages.load(),this.render.start(),this.pages.show(this.setting.startPage),setTimeout(()=>{this.ui.update(),this.trigger("init",this,{page:this.setting.startPage,mode:this.render.getOrientation()})},1)}loadFromHTML(u){this.ui=new E(this.block,this,this.setting,u),this.render=new U(this,this.setting,this.ui.getDistElement()),this.flipController=new x(this.render,this),this.pages=new b(this,this.render,this.ui.getDistElement(),u),this.pages.load(),this.render.start(),this.pages.show(this.setting.startPage),setTimeout(()=>{this.ui.update(),this.trigger("init",this,{page:this.setting.startPage,mode:this.render.getOrientation()})},1)}updateFromImages(u){const e=this.pages.getCurrentPageIndex();this.pages.destroy(),this.pages=new B(this,this.render,u),this.pages.load(),this.pages.show(e),this.trigger("update",this,{page:e,mode:this.render.getOrientation()})}updateFromHtml(u){const e=this.pages.getCurrentPageIndex();this.pages.destroy(),this.pages=new b(this,this.render,this.ui.getDistElement(),u),this.pages.load(),this.ui.updateItems(u),this.render.reload(),this.pages.show(e),this.trigger("update",this,{page:e,mode:this.render.getOrientation()})}clear(){this.pages.destroy(),this.ui.clear()}turnToPrevPage(){this.pages.showPrev()}turnToNextPage(){this.pages.showNext()}turnToPage(u){this.pages.show(u)}flipNext(u="top"){this.flipController.flipNext(u)}flipPrev(u="top"){this.flipController.flipPrev(u)}flip(u,e="top"){this.flipController.flipToPage(u,e)}updateState(u){this.trigger("changeState",this,u)}updatePageIndex(u){this.trigger("flip",this,u)}updateOrientation(u){this.ui.setOrientationStyle(u),this.update(),this.trigger("changeOrientation",this,u)}getPageCount(){return this.pages.getPageCount()}getCurrentPageIndex(){return this.pages.getCurrentPageIndex()}getPage(u){return this.pages.getPage(u)}getRender(){return this.render}getFlipController(){return this.flipController}getOrientation(){return this.render.getOrientation()}getBoundsRect(){return this.render.getRect()}getSettings(){return this.setting}getUI(){return this.ui}getState(){return this.flipController.getState()}getPageCollection(){return this.pages}startUserTouch(u){this.mousePosition=u,this.isUserTouch=!0,this.isUserMove=!1}userMove(u,e){this.isUserTouch||e||!this.setting.showPageCorners?this.isUserTouch&&w.GetDistanceBetweenTwoPoint(this.mousePosition,u)>5&&(this.isUserMove=!0,this.flipController.fold(u)):this.flipController.showCorner(u)}userStop(u,e=!1){this.isUserTouch&&(this.isUserTouch=!1,e||(this.isUserMove?this.flipController.stopMove():this.flipController.flip(u)))}},Object.defineProperty(l,"__esModule",{value:!0})}))})(he,he.exports)),he.exports}var $e=He();const Ve={width:550,height:733,size:"stretch",showCover:!0,flippingTime:450,usePortrait:!0,drawShadow:!0,maxShadowOpacity:.3,startPage:0,minWidth:200,maxWidth:1200,minHeight:300,maxHeight:1600};function me(h){const p=i.ref(null),l=i.ref(0),d=i.ref(0),c=i.ref(!1),v=i.ref(!1),B=i.ref(!1),w=i.ref(!0),g=i.ref(!0);let b=null,V=null,x=new Set;function _(){var F;const f=l.value,P=d.value,a=new Set,S=typeof((F=p.value)==null?void 0:F.getOrientation)=="function"?p.value.getOrientation():null;if(B.value||S==="portrait"||typeof window<"u"&&window.innerWidth<768)a.add(f);else if(g.value)if(f===0)a.add(0);else if(f>=P-1&&P%2===0)a.add(P-1);else{const A=f%2===1?f:f-1;a.add(A),A+1<P&&a.add(A+1)}else{const A=f%2===0?f:f-1;a.add(A),A+1<P&&a.add(A+1)}return a}function m(){if(typeof document>"u")return;const f="mgn-fb-critical-css";if(document.getElementById(f))return;const P=document.createElement("style");P.id=f,P.textContent=[".mgn-fb-flipbook .stf__item.mgn-fb-page-hidden{display:none!important;visibility:hidden!important}",".mgn-fb-flipbook>.mgn-flipbook-page{position:absolute;left:-9999px;opacity:0;pointer-events:none}"].join(""),document.head.appendChild(P)}let O=0,E=!1;function C(f){if(w.value)try{const P=f.getRender();if(!P){console.warn("[MgnFlipbook] getRender() returned null — patch skipped");return}const a=Object.getPrototypeOf(P),S=a.drawFrame;if(typeof S!="function"){console.warn("[MgnFlipbook] drawFrame not found on render prototype — patch skipped");return}const T=Object.getOwnPropertyNames(P),F=Object.getOwnPropertyNames(a),A=["animation","flippingPage","bottomPage","leftPage","rightPage","shadow"],G=A.filter(j=>T.includes(j)||F.includes(j)||j in P),ee=A.filter(j=>!G.includes(j));console.info("[MgnFlipbook] Render props found:",G,"| missing:",ee),console.info("[MgnFlipbook] Initial state — animation:",P.animation,"| flippingPage:",P.flippingPage,"| bottomPage:",P.bottomPage),P.drawFrame=function(){var j,Q;if(E=!0,!this.animation){this.flippingPage!=null&&(typeof this.setFlippingPage=="function"?this.setFlippingPage(null):this.flippingPage=null),this.bottomPage!=null&&(typeof this.setBottomPage=="function"?this.setBottomPage(null):this.bottomPage=null),this.shadow!=null&&(typeof this.clearShadow=="function"?this.clearShadow():this.shadow=null),c.value&&(c.value=!1),typeof this.clear=="function"&&this.clear(),typeof this.drawLeftPage=="function"&&this.drawLeftPage(),typeof this.drawRightPage=="function"&&this.drawRightPage();const te=(j=h.value)==null?void 0:j.querySelector(".stf__block");if(te){const K=te.querySelectorAll(":scope > .stf__item"),se=_();for(const J of K){const ie=parseInt(J.getAttribute("data-page-index")??"-1",10);ie>=0&&!se.has(ie)&&(J.style.setProperty("display","none","important"),J.style.setProperty("visibility","hidden"))}if(K.length>d.value)for(const J of K)x.has(J)||J.remove()}return}if(S.call(this),!this.animation){const te=(Q=h.value)==null?void 0:Q.querySelector(".stf__block");if(te){const K=te.querySelectorAll(":scope > .stf__item");let se=0;const J=[];for(const ie of K)ie.style.display!=="none"&&(se++,J.push(parseInt(ie.getAttribute("data-page-index")??"-1",10)));if(se>2){const ie=_();let re=0;for(const ne of K){const L=parseInt(ne.getAttribute("data-page-index")??"-1",10);L>=0&&!ie.has(L)&&ne.style.display!=="none"&&(ne.style.cssText="display:none!important",re++)}if(K.length>d.value)for(const ne of K)x.has(ne)||ne.remove();const oe=Date.now();oe-O>1e3&&(O=oe,console.warn(`[MgnFlipbook] LAYER 3 FIX: ${se} pages visible → hid ${re} | visible: [${J}] | active: [${Array.from(ie)}] | animation: ${typeof this.animation} (${this.animation}) | flippingPage: ${this.flippingPage!=null} | bottomPage: ${this.bottomPage!=null} | isFlipping: ${c.value}`))}}}},E=!0,console.info("[MgnFlipbook] drawFrame patch applied successfully")}catch(P){console.warn("[MgnFlipbook] Failed to patch drawFrame:",P)}}function U(f,P={}){if(!h.value)return;const a={...Ve,...P};x=new Set(f),B.value=!!a.forceSinglePage,w.value=a.enableVisibilityPatch!==!1,g.value=!!a.showCover,m();const S=new $e.PageFlip(h.value,{width:a.width,height:a.height,size:a.size,minWidth:a.minWidth,maxWidth:a.maxWidth,minHeight:a.minHeight,maxHeight:a.maxHeight,showCover:a.showCover,mobileScrollSupport:!1,drawShadow:a.drawShadow,flippingTime:a.flippingTime,usePortrait:a.usePortrait,startZIndex:0,autoSize:a.size==="stretch",maxShadowOpacity:a.maxShadowOpacity,showPageCorners:!1,disableFlipByClick:!0,startPage:a.startPage,clickEventForward:!0,swipeDistance:10,useMouseEvents:!0});S.loadFromHTML(f),C(S),d.value=S.getPageCount(),l.value=a.startPage??0,S.on("flip",T=>{l.value=T.data}),S.on("changeState",T=>{if(c.value=T.data!=="read",!!w.value){if(T.data!=="read"){H();return}try{const F=S;if(typeof F.getRender=="function"){const A=F.getRender();A&&(typeof A.setBottomPage=="function"&&A.setBottomPage(null),typeof A.setFlippingPage=="function"&&A.setFlippingPage(null),typeof A.clearShadow=="function"&&A.clearShadow())}}catch{}M(),q()}}),p.value=S,v.value=!0,N()}function Y(){var f;(f=p.value)==null||f.flipNext()}function u(){var f;(f=p.value)==null||f.flipPrev()}function e(f){var P;(P=p.value)==null||P.flip(f)}function t(f){var P;(P=p.value)==null||P.turnToPage(f)}function n(){var T;const f=l.value,P=typeof((T=p.value)==null?void 0:T.getOrientation)=="function"?p.value.getOrientation():null;if(B.value||P==="portrait"||(typeof window<"u"?window.innerWidth<768:!1))return[f,f];const S=(g.value,f%2===0?f:f-1);return[S,S+1]}function s(){var f,P;(P=p.value)==null||P.updateFromHTML(Array.from(((f=h.value)==null?void 0:f.querySelectorAll(".mgn-flipbook-page"))||[]))}function o(){var f;b!==null&&(cancelAnimationFrame(b),b=null),V&&(V.disconnect(),V=null),(f=p.value)==null||f.destroy(),p.value=null,v.value=!1,B.value=!1,w.value=!0,g.value=!0,x=new Set}function r(){var f,P;p.value&&((P=(f=p.value).update)==null||P.call(f))}function y(f){var P;p.value&&f&&p.value.updateFromHTML(Array.from(((P=h.value)==null?void 0:P.querySelectorAll(".mgn-flipbook-page"))||[]))}function M(){if(!w.value||!h.value||!p.value)return;const f=h.value.querySelector(".stf__block");if(!f)return;const P=_(),a=f.querySelectorAll(":scope > .stf__item");for(const S of a){const T=parseInt(S.getAttribute("data-page-index")??"-1",10);P.has(T)?S.classList.remove("mgn-fb-page-hidden"):(S.classList.add("mgn-fb-page-hidden"),S.style.setProperty("display","none","important"),S.style.setProperty("visibility","hidden"))}}function H(){if(!w.value||(b!==null&&(cancelAnimationFrame(b),b=null),!h.value))return;const f=h.value.querySelector(".stf__block");if(!f)return;const P=f.querySelectorAll(":scope > .stf__item");for(const a of P)a.classList.remove("mgn-fb-page-hidden"),a.style.removeProperty("display"),a.style.removeProperty("visibility")}function q(f=15){if(!w.value||typeof requestAnimationFrame>"u")return;b!==null&&cancelAnimationFrame(b);let P=f;const a=()=>{if(P--<=0||c.value){b=null;return}M(),b=requestAnimationFrame(a)};b=requestAnimationFrame(a)}function N(){if(!w.value||(V&&(V.disconnect(),V=null),typeof MutationObserver>"u"))return;const f=h.value;if(!f)return;const P=f.querySelector(".stf__block");P&&(V=new MutationObserver(a=>{var T;if(c.value)return;const S=_();for(const F of a){if(F.type!=="attributes"||F.attributeName!=="style")continue;const A=F.target;if(!((T=A.classList)!=null&&T.contains("stf__item")))continue;const G=parseInt(A.getAttribute("data-page-index")??"-1",10);G>=0&&!S.has(G)&&A.style.display!=="none"&&(A.style.setProperty("display","none","important"),A.style.setProperty("visibility","hidden"))}}),V.observe(P,{attributes:!0,attributeFilter:["style"],subtree:!0}))}function Z(){if(!w.value||!h.value||!p.value)return;const f=h.value.querySelector(".stf__block");if(!f)return;try{const T=p.value;if(typeof T.getRender=="function"){const F=T.getRender();F&&typeof F.finishAnimation=="function"&&F.finishAnimation(),typeof F.setBottomPage=="function"&&F.setBottomPage(null),typeof F.setFlippingPage=="function"&&F.setFlippingPage(null),typeof F.clearShadow=="function"&&F.clearShadow()}if(typeof T.getFlipController=="function"){const F=T.getFlipController()}}catch{}const P=d.value,a=f.querySelectorAll(":scope > .stf__item");if(a.length>P)for(const T of a)x.has(T)||T.remove();const S=f.querySelectorAll(":scope > .stf__item");for(const T of S)T.style.cssText="display: none";p.value.turnToPage(l.value),M(),N()}return i.onUnmounted(()=>{o()}),{pageFlip:p,currentPage:l,totalPages:d,isFlipping:c,isReady:v,init:U,flipNext:Y,flipPrev:u,goToPage:e,turnToPage:t,update:r,getCurrentSpread:n,updateSize:s,destroy:o,setInteractive:y,forceResetVisibility:Z,enforcePageVisibility:M,releasePageVisibility:H}}const Ne={minScale:1,maxScale:3,zoomStep:.25,wheelStep:.12,requireModifierForWheel:!0,wheelThrottleMs:90};function ve(h,p={}){const l={...Ne,...p},d=i.ref(!1),c=i.ref(1),v=i.ref(0),B=i.ref(0),w=i.ref(!1);let g=0,b=0,V=0,x=0,_=0,m=0,O=0;const E=i.computed(()=>d.value?`transform: scale(${c.value}) translate(${v.value}px, ${B.value}px); transform-origin: center center;`:"");function C(){d.value=!0,c.value=1.35,v.value=0,B.value=0}function U(){d.value=!1,c.value=1,v.value=0,B.value=0}function Y(){d.value||C(),c.value=Math.min(l.maxScale,c.value+l.zoomStep),n()}function u(){if(c.value=Math.max(l.minScale,c.value-l.zoomStep),c.value<=1){U();return}n()}function e(){c.value=1,v.value=0,B.value=0,U()}function t(a,S,T=2.5){const F=h.value;if(!F)return;const A=F.getBoundingClientRect(),G=a-A.left,ee=S-A.top,j=A.width,Q=A.height;d.value=!0,c.value=Math.min(l.maxScale,T),v.value=(j/2-G)/c.value,B.value=(Q/2-ee)/c.value,n()}function n(){const a=h.value;if(!a)return;const S=a.clientWidth||600,T=a.clientHeight||800,F=c.value,A=(F-1)/(2*F)*S,G=(F-1)/(2*F)*T;v.value=Math.max(-A,Math.min(A,v.value)),B.value=Math.max(-G,Math.min(G,B.value))}function s(a,S,T){const F=h.value;if(!F)return;const A=F.getBoundingClientRect(),G=a-A.left,ee=S-A.top,j=c.value,Q=Math.max(l.minScale,Math.min(l.maxScale,j+T*l.wheelStep));if(Q<=1){U();return}d.value||(d.value=!0);const te=(G-A.width/2)/j-v.value,K=(ee-A.height/2)/j-B.value;c.value=Q,v.value=(G-A.width/2)/Q-te,B.value=(ee-A.height/2)/Q-K,n()}function o(a){const S=a.ctrlKey||a.metaKey;if(l.requireModifierForWheel&&!S)return;a.preventDefault();const T=Date.now();if(O+=a.deltaY,T-m<l.wheelThrottleMs)return;m=T;const F=O<0?1:-1;O=0,!(!d.value&&F<0)&&s(a.clientX,a.clientY,F)}function r(a){!d.value||c.value<=1||(w.value=!0,b=a.clientX,V=a.clientY,x=v.value,_=B.value,a.preventDefault())}function y(a){if(!w.value)return;const S=(a.clientX-b)/c.value,T=(a.clientY-V)/c.value;v.value=x+S,B.value=_+T,n()}function M(){w.value=!1}function H(a){if(a.length<2)return 0;const S=a[0].clientX-a[1].clientX,T=a[0].clientY-a[1].clientY;return Math.sqrt(S*S+T*T)}function q(a){a.touches.length===2?(g=H(a.touches),a.preventDefault()):a.touches.length===1&&d.value&&c.value>1&&(w.value=!0,b=a.touches[0].clientX,V=a.touches[0].clientY,x=v.value,_=B.value)}function N(a){if(a.touches.length===2){a.preventDefault();const S=H(a.touches);if(g>0){const F=(S-g)*.005,A=Math.max(l.minScale,Math.min(l.maxScale,c.value+F));A>1&&!d.value&&(d.value=!0),c.value=A,c.value<=1&&U()}g=S}else if(a.touches.length===1&&w.value){const S=(a.touches[0].clientX-b)/c.value,T=(a.touches[0].clientY-V)/c.value;v.value=x+S,B.value=_+T,n(),a.preventDefault()}}function Z(a){a.touches.length<2&&(g=0),a.touches.length===0&&(w.value=!1)}function f(){const a=h.value;!a||typeof window>"u"||(a.addEventListener("wheel",o,{passive:!1}),a.addEventListener("mousedown",r),window.addEventListener("mousemove",y),window.addEventListener("mouseup",M),a.addEventListener("touchstart",q,{passive:!1}),a.addEventListener("touchmove",N,{passive:!1}),a.addEventListener("touchend",Z))}function P(){const a=h.value;!a||typeof window>"u"||(a.removeEventListener("wheel",o),a.removeEventListener("mousedown",r),window.removeEventListener("mousemove",y),window.removeEventListener("mouseup",M),a.removeEventListener("touchstart",q),a.removeEventListener("touchmove",N),a.removeEventListener("touchend",Z))}return i.onUnmounted(()=>{P()}),{isZoomed:d,scale:c,translateX:v,translateY:B,isDragging:w,transformStyle:E,enterZoom:C,exitZoom:U,zoomIn:Y,zoomOut:u,resetZoom:e,zoomToPoint:t,bindEvents:f,unbindEvents:P}}let ae=null,ce=null;function fe(){if(typeof window>"u")throw new Error("No window available");return(!ae||ae.state==="closed")&&(ae=new(window.AudioContext||window.webkitAudioContext)),ae.state==="suspended"&&ae.resume(),ae}function ze(h){if(ce&&ce.sampleRate===h.sampleRate)return ce;const p=.4,l=h.sampleRate,d=Math.floor(l*p),c=h.createBuffer(2,d,l),v=c.getChannelData(0),B=c.getChannelData(1),w=new Float32Array(d);let g=0,b=0,V=0;for(let x=0;x<d;x++){const _=Math.random()*2-1;g=.99765*g+_*.099046,b=.963*b+_*.2965164,V=.57*V+_*1.0526913;const m=(g+b+V+_*.1848)*.06;w[x]=m}for(let x=0;x<d;x++){const _=x/l,m=_/p;let O;m<.08?O=m/.08:m<.2?O=1-(m-.08)*.8:O=.9*Math.exp(-(m-.2)*4.5);const E=Math.min(m/.65,1),C=2800*Math.exp(-E*1.9),U=Math.sin(2*Math.PI*C*_)*.12,Y=Math.sin(2*Math.PI*C*2.1*_)*.04,u=Math.sin(2*Math.PI*C*.5*_)*.06,e=w[x]*.15,t=Math.max(0,(m-.6)/.2),n=t>0&&t<1?Math.sin(t*Math.PI)*.25:0,s=w[Math.min(x+200,d-1)]*n,o=(U+Y+u+e)*O+s,r=.55-m*.15;v[x]=o*(1-r*.12)*.85,B[x]=o*(.88+r*.12)*.85}return ce=c,c}function we(h,p){const l=i.ref(null),d=i.ref(!1),c=i.ref(!1),v=i.ref(.5);function B(){if(typeof window>"u")return;const x=new Audio;x.preload="auto",x.volume=v.value,p&&(x.src=p),x.addEventListener("canplaythrough",()=>{c.value=!0}),l.value=x}function w(){if(!(typeof window>"u"))try{const x=fe(),_=ze(x),m=x.createBufferSource();m.buffer=_;const O=x.createGain();O.gain.value=v.value*1.8;const E=x.createBiquadFilter();E.type="highpass",E.frequency.value=200,E.Q.value=.5;const C=x.createBiquadFilter();C.type="lowpass",C.frequency.value=6e3,C.Q.value=.7,m.connect(E),E.connect(C),C.connect(O),O.connect(x.destination),m.start()}catch{}}function g(){!h.value||d.value||(p&&l.value&&c.value?(l.value.currentTime=0,l.value.volume=v.value,l.value.play().catch(()=>{})):w())}function b(){d.value=!d.value}function V(x){v.value=Math.max(0,Math.min(1,x)),l.value&&(l.value.volume=v.value)}return i.onMounted(()=>{if(typeof window>"u")return;p&&B(),c.value=!0;const x=()=>{try{fe()}catch{}typeof document<"u"&&(document.removeEventListener("mousedown",x),document.removeEventListener("click",x),document.removeEventListener("touchstart",x))};typeof document<"u"&&(document.addEventListener("mousedown",x,{once:!0}),document.addEventListener("click",x,{once:!0}),document.addEventListener("touchstart",x,{once:!0}))}),i.onUnmounted(()=>{l.value&&(l.value.pause(),l.value.src="",l.value=null)}),{play:g,isMuted:d,canPlay:c,toggleMute:b,setVolume:V}}function ye(h,p,l={}){const d=l.bufferSize??3,c=i.ref(new Set),v=i.ref(new Set),B=i.ref(new Map);function w(m){return new Promise((O,E)=>{const C=new Image;C.onload=()=>O(),C.onerror=()=>E(new Error(`Failed to load: ${m}`)),C.src=m})}async function g(m){if(c.value.has(m)||v.value.has(m)||m<0||m>=h.value.length)return;const O=h.value[m];if(O){v.value.add(m);try{await w(O.imageUrl),c.value.add(m),B.value.delete(m)}catch(E){B.value.set(m,E.message)}finally{v.value.delete(m)}}}function b(m){const O=Math.max(0,m-d),E=Math.min(h.value.length-1,m+d),C=[m];for(let U=1;U<=d;U++)m+U<=E&&C.push(m+U),m-U>=O&&C.push(m-U);C.forEach(U=>{g(U)})}function V(m){return c.value.has(m)}function x(m){return v.value.has(m)}async function _(m){if(m<0||m>=h.value.length)return;const O=h.value[m];if(O!=null&&O.hiresUrl)try{await w(O.hiresUrl)}catch{}}return i.watch(p,m=>{b(m)},{immediate:!0}),i.watch(h,()=>{h.value.length>0&&b(p.value)},{immediate:!0}),{loadedPages:c,loadingPages:v,pageErrors:B,isPageLoaded:V,isPageLoading:x,preloadPage:g,preloadRange:b,preloadHires:_}}const _e={renderWidth:2e3,hiresWidth:3e3,thumbnailWidth:200,quality:.92,hiresQuality:.96};function be(){const h=i.ref([]),p=i.ref(!1),l=i.ref(null),d=i.ref(0),c=i.ref(0),v=i.ref(0),B=i.ref(0);let w=null;const g=[];function b(m,O){return new Promise((E,C)=>{m.toBlob(U=>{if(!U){C(new Error("Canvas toBlob failed"));return}const Y=URL.createObjectURL(U);g.push(Y),E(Y)},"image/webp",O)})}function V(){return new Promise(m=>setTimeout(m,0))}async function x(m,O){const E={..._e,...O};p.value=!0,l.value=null,d.value=0,h.value=[];try{const C=await import("pdfjs-dist"),U=C.version;C.GlobalWorkerOptions.workerSrc=`https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${U}/pdf.worker.min.mjs`,w=await C.getDocument({url:m,cMapUrl:`https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${U}/cmaps/`,cMapPacked:!0,rangeChunkSize:65536*4}).promise,c.value=w.numPages;const u=await w.getPage(1),e=u.getViewport({scale:1});v.value=Math.round(e.width),B.value=Math.round(e.height),u.cleanup();const t=[],n=document.createElement("canvas"),s=n.getContext("2d"),o=document.createElement("canvas"),r=o.getContext("2d"),y=document.createElement("canvas"),M=y.getContext("2d"),H=2;for(let q=1;q<=w.numPages;q++)try{const N=await w.getPage(q),Z=N.getViewport({scale:1}),f=E.renderWidth/Z.width,P=N.getViewport({scale:f});n.width=Math.floor(P.width),n.height=Math.floor(P.height),await N.render({canvasContext:s,viewport:P}).promise;const a=await b(n,E.quality),S=E.hiresWidth/Z.width,T=N.getViewport({scale:S});o.width=Math.floor(T.width),o.height=Math.floor(T.height),await N.render({canvasContext:r,viewport:T}).promise;const F=await b(o,E.hiresQuality),A=E.thumbnailWidth/Z.width,G=N.getViewport({scale:A});y.width=Math.floor(G.width),y.height=Math.floor(G.height),await N.render({canvasContext:M,viewport:G}).promise;const ee=await b(y,.65);t.push({index:q-1,thumbnailUrl:ee,imageUrl:a,hiresUrl:F}),N.cleanup(),d.value=Math.round(q/w.numPages*100),q%H===0&&await V()}catch(N){console.warn(`[MgnFlipbook] Failed to render page ${q}:`,N),t.push({index:q-1,thumbnailUrl:"",imageUrl:""}),d.value=Math.round(q/w.numPages*100)}return n.width=0,n.height=0,o.width=0,o.height=0,y.width=0,y.height=0,h.value=t,t}catch(C){throw l.value=C.message,C}finally{p.value=!1}}function _(){g.forEach(m=>{try{URL.revokeObjectURL(m)}catch{}}),g.length=0,w&&(w.destroy(),w=null),h.value=[]}return{pages:h,isLoading:p,error:l,progress:d,totalPages:c,pageWidth:v,pageHeight:B,loadPdf:x,destroy:_}}function xe(h){function p(l){if(!h.enabled.value)return;const d=l.target;if(!(d.tagName==="INPUT"||d.tagName==="TEXTAREA"||d.tagName==="SELECT"))switch(l.key){case"ArrowRight":case"PageDown":l.preventDefault(),h.onNext();break;case"ArrowLeft":case"PageUp":l.preventDefault(),h.onPrev();break;case"+":case"=":(l.ctrlKey||l.metaKey)&&(l.preventDefault(),h.onZoomIn());break;case"-":(l.ctrlKey||l.metaKey)&&(l.preventDefault(),h.onZoomOut());break;case"0":(l.ctrlKey||l.metaKey)&&(l.preventDefault(),h.onResetZoom());break;case"Escape":h.onResetZoom();break;case"f":case"F":!l.ctrlKey&&!l.metaKey&&h.onToggleFullscreen();break;case"Home":l.preventDefault();break;case"End":l.preventDefault();break}}i.onMounted(()=>{typeof window<"u"&&window.addEventListener("keydown",p)}),i.onUnmounted(()=>{typeof window<"u"&&window.removeEventListener("keydown",p)})}const de={backgroundColor:"#1a1a2e",toolbarColor:"#16213e",toolbarTextColor:"#e0e0e0",toolbarIconColor:"#ffffff",pageBackground:"#ffffff",shadowColor:"rgba(0, 0, 0, 0.5)",borderRadius:"4px",skeletonColor:"#2a2a3e",skeletonShineColor:"#3a3a4e"},Pe={backgroundColor:"#f5f5f5",toolbarColor:"#ffffff",toolbarTextColor:"#333333",toolbarIconColor:"#555555",pageBackground:"#ffffff",shadowColor:"rgba(0, 0, 0, 0.2)",borderRadius:"4px",skeletonColor:"#e0e0e0",skeletonShineColor:"#f0f0f0"},Se={backgroundColor:"#13161c",toolbarColor:"#1c1f26",toolbarTextColor:"#aaaaaa",toolbarIconColor:"#ff7700",pageBackground:"#ffffff",shadowColor:"rgba(0, 0, 0, 0.6)",borderRadius:"0px",skeletonColor:"#272930",skeletonShineColor:"#3a3d45"},Oe={default:de,light:Pe,mgn:Se};function ke(h,p){const l=i.computed(()=>{const c=h.value;return c?typeof c=="string"?Oe[c]??de:c:de}),d=i.computed(()=>{const c=l.value,v=p==null?void 0:p.value;return{"--mgn-fb-bg":c.backgroundColor,"--mgn-fb-toolbar-bg":c.toolbarColor,"--mgn-fb-toolbar-text":c.toolbarTextColor,"--mgn-fb-toolbar-icon":v??c.toolbarIconColor,"--mgn-fb-page-bg":c.pageBackground,"--mgn-fb-shadow":c.shadowColor,"--mgn-fb-radius":c.borderRadius,"--mgn-fb-skeleton":c.skeletonColor,"--mgn-fb-skeleton-shine":c.skeletonShineColor,"--mgn-fb-brand":v??c.toolbarIconColor}});return{resolvedTheme:l,cssVariables:d}}function Ce(h,p,l){const d=i.ref([]);let c=Date.now(),v=-1;function B(){if(v>=0){const b=Date.now()-c;p&&p(v,b),d.value.push({type:"page_view",page:v,timeSpent:b,timestamp:Date.now()})}}function w(b,V){l&&l(b,V),d.value.push({type:b,page:h.value,data:V,timestamp:Date.now()})}i.watch(h,b=>{B(),v=b,c=Date.now()});function g(){const b=d.value.filter(_=>_.type==="page_view"),V=b.reduce((_,m)=>_+(m.timeSpent??0),0),x=new Set(b.map(_=>_.page)).size;return{totalEvents:d.value.length,totalPageViews:b.length,uniquePagesViewed:x,totalTimeMs:V,averageTimePerPageMs:b.length>0?V/b.length:0,events:d.value}}return i.onUnmounted(()=>{B()}),{events:d,trackInteraction:w,getAnalyticsSummary:g}}const qe={class:"mgn-fb-toolbar"},Ue={class:"mgn-fb-toolbar-left"},Ze=["disabled"],Ge={class:"mgn-fb-page-indicator"},je=["disabled"],Xe={class:"mgn-fb-toolbar-right"},Ye=["title"],Ke={key:0,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},Qe={key:1,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},Je=["title"],et={key:0,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},tt={key:1,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},it=i.defineComponent({__name:"FlipbookToolbar",props:{currentPage:{},totalPages:{},isZoomed:{type:Boolean},isMuted:{type:Boolean},isFullscreen:{type:Boolean},enableZoom:{type:Boolean,default:!0},enableSound:{type:Boolean,default:!0},enableFullscreen:{type:Boolean,default:!0},enableDownload:{type:Boolean,default:!1},enableShare:{type:Boolean,default:!1}},emits:["prev","next","go-to-page","zoom-in","zoom-out","reset-zoom","toggle-zoom","toggle-mute","toggle-fullscreen","download","share"],setup(h,{emit:p}){const l=h,d=p,c=i.computed(()=>`${l.currentPage+1} / ${l.totalPages}`),v=i.computed(()=>l.currentPage>0),B=i.computed(()=>l.currentPage<l.totalPages-1);return(w,g)=>(i.openBlock(),i.createElementBlock("div",qe,[i.createElementVNode("div",Ue,[i.createElementVNode("button",{class:"mgn-fb-btn",disabled:!v.value,title:"Previous page",onClick:g[0]||(g[0]=b=>d("prev"))},[...g[8]||(g[8]=[i.createElementVNode("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},[i.createElementVNode("path",{d:"M12.5 15L7.5 10L12.5 5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])],8,Ze),i.createElementVNode("span",Ge,i.toDisplayString(c.value),1),i.createElementVNode("button",{class:"mgn-fb-btn",disabled:!B.value,title:"Next page",onClick:g[1]||(g[1]=b=>d("next"))},[...g[9]||(g[9]=[i.createElementVNode("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},[i.createElementVNode("path",{d:"M7.5 15L12.5 10L7.5 5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])],8,je)]),i.createElementVNode("div",Xe,[h.enableZoom?(i.openBlock(),i.createElementBlock(i.Fragment,{key:0},[h.isZoomed?(i.openBlock(),i.createElementBlock("button",{key:0,class:"mgn-fb-btn",title:"Exit zoom",onClick:g[2]||(g[2]=b=>d("reset-zoom"))},[...g[10]||(g[10]=[i.createElementVNode("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},[i.createElementVNode("path",{d:"M4 4L8 8M16 16L12 12M16 4L12 8M4 16L8 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"})],-1)])])):(i.openBlock(),i.createElementBlock("button",{key:1,class:"mgn-fb-btn",title:"Zoom in",onClick:g[3]||(g[3]=b=>d("zoom-in"))},[...g[11]||(g[11]=[i.createElementVNode("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},[i.createElementVNode("circle",{cx:"9",cy:"9",r:"5.5",stroke:"currentColor","stroke-width":"1.5"}),i.createElementVNode("path",{d:"M13.5 13.5L17 17",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"}),i.createElementVNode("path",{d:"M9 6.5V11.5M6.5 9H11.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"})],-1)])]))],64)):i.createCommentVNode("",!0),h.enableSound?(i.openBlock(),i.createElementBlock("button",{key:1,class:"mgn-fb-btn",title:h.isMuted?"Unmute":"Mute",onClick:g[4]||(g[4]=b=>d("toggle-mute"))},[h.isMuted?(i.openBlock(),i.createElementBlock("svg",Qe,[...g[13]||(g[13]=[i.createElementVNode("path",{d:"M3 8V12H6L10 15V5L6 8H3Z",fill:"currentColor"},null,-1),i.createElementVNode("path",{d:"M14 8L18 12M18 8L14 12",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1)])])):(i.openBlock(),i.createElementBlock("svg",Ke,[...g[12]||(g[12]=[i.createElementVNode("path",{d:"M3 8V12H6L10 15V5L6 8H3Z",fill:"currentColor"},null,-1),i.createElementVNode("path",{d:"M13 7.5C13.8 8.3 14.25 9.4 14.25 10.5C14.25 11.6 13.8 12.7 13 13.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),i.createElementVNode("path",{d:"M15.5 5.5C17 7 17.75 8.7 17.75 10.5C17.75 12.3 17 14 15.5 15.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1)])]))],8,Ye)):i.createCommentVNode("",!0),h.enableFullscreen?(i.openBlock(),i.createElementBlock("button",{key:2,class:"mgn-fb-btn",title:h.isFullscreen?"Exit fullscreen":"Fullscreen",onClick:g[5]||(g[5]=b=>d("toggle-fullscreen"))},[h.isFullscreen?(i.openBlock(),i.createElementBlock("svg",tt,[...g[15]||(g[15]=[i.createElementVNode("path",{d:"M7 3V7H3M17 7H13V3M13 17V13H17M3 13H7V17",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])])):(i.openBlock(),i.createElementBlock("svg",et,[...g[14]||(g[14]=[i.createElementVNode("path",{d:"M3 7V3H7M13 3H17V7M17 13V17H13M7 17H3V13",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])]))],8,Je)):i.createCommentVNode("",!0),h.enableDownload?(i.openBlock(),i.createElementBlock("button",{key:3,class:"mgn-fb-btn",title:"Download",onClick:g[6]||(g[6]=b=>d("download"))},[...g[16]||(g[16]=[i.createElementVNode("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none"},[i.createElementVNode("path",{d:"M10 3V13M10 13L6 9M10 13L14 9",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),i.createElementVNode("path",{d:"M3 15V17H17V15",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])])):i.createCommentVNode("",!0),h.enableShare?(i.openBlock(),i.createElementBlock("button",{key:4,class:"mgn-fb-btn",title:"Share",onClick:g[7]||(g[7]=b=>d("share"))},[...g[17]||(g[17]=[i.createStaticVNode('<svg width="20" height="20" viewBox="0 0 20 20" fill="none" data-v-a610554b><circle cx="14" cy="5" r="2" stroke="currentColor" stroke-width="1.5" data-v-a610554b></circle><circle cx="6" cy="10" r="2" stroke="currentColor" stroke-width="1.5" data-v-a610554b></circle><circle cx="14" cy="15" r="2" stroke="currentColor" stroke-width="1.5" data-v-a610554b></circle><path d="M8 9L12 6M8 11L12 14" stroke="currentColor" stroke-width="1.5" data-v-a610554b></path></svg>',1)])])):i.createCommentVNode("",!0)])]))}}),ue=(h,p)=>{const l=h.__vccOpts||h;for(const[d,c]of p)l[d]=c;return l},Me=ue(it,[["__scopeId","data-v-a610554b"]]),nt=["src"],st={key:1,class:"mgn-fb-watermark-text"},ot=i.defineComponent({__name:"FlipbookWatermark",props:{config:{}},setup(h){const p=h,l=i.computed(()=>{const d=p.config.position,c={position:"absolute",zIndex:"10",pointerEvents:"none",opacity:String(p.config.opacity)};return d.includes("top")&&(c.top="12px"),d.includes("bottom")&&(c.bottom="12px"),d.includes("left")&&(c.left="12px"),d.includes("right")&&(c.right="12px"),c});return(d,c)=>(i.openBlock(),i.createElementBlock("div",{class:"mgn-fb-watermark",style:i.normalizeStyle(l.value)},[h.config.imageUrl?(i.openBlock(),i.createElementBlock("img",{key:0,src:h.config.imageUrl,alt:"watermark",class:"mgn-fb-watermark-img"},null,8,nt)):h.config.text?(i.openBlock(),i.createElementBlock("span",st,i.toDisplayString(h.config.text),1)):i.createCommentVNode("",!0)],4))}}),Ee=ue(ot,[["__scopeId","data-v-53bf02f3"]]),at={key:0,class:"mgn-fb-debug-overlay"},rt={key:1,class:"mgn-fb-error"},lt={class:"mgn-fb-error-message"},ht={key:2,class:"mgn-fb-progress"},ct={class:"mgn-fb-progress-track"},dt={class:"mgn-fb-progress-text"},ut={key:3,class:"mgn-fb-toolbar-row"},Te=i.defineComponent({__name:"MgnFlipbook",props:{pages:{},pdfUrl:{},startPage:{default:0},totalPages:{},direction:{default:"ltr"},enableZoom:{type:Boolean,default:!0},enableSound:{type:Boolean,default:!0},enableFullscreen:{type:Boolean,default:!0},enableKeyboard:{type:Boolean,default:!0},enableDownload:{type:Boolean,default:!1},enableShare:{type:Boolean,default:!1},theme:{default:"default"},customSoundUrl:{},watermark:{},brandColor:{},embedMode:{type:Boolean,default:!1}},emits:["page-change","zoom-change","page-view","interaction","hotspot-click","ready","error","download","share"],setup(h,{emit:p}){const l=h,d=p,c=i.ref(null),v=i.ref(null),B=i.ref(null),w=i.ref("flip"),g=i.ref(!1),b=i.ref(!0),V=i.ref(!1),x=i.ref(""),_=i.ref(0),m=i.ref(0),{cssVariables:O}=ke(i.toRef(l,"theme"),i.toRef(l,"brandColor")),E=me(v),C=ve(B,{minScale:1,maxScale:3.5,zoomStep:.25,wheelStep:.12,requireModifierForWheel:!0,wheelThrottleMs:90}),U=i.toRef(l,"enableSound"),Y=we(U,l.customSoundUrl),u=i.ref([]),e=i.ref([]),t=be();ye(u,E.currentPage);const n=Ce(E.currentPage,(L,k)=>d("page-view",L,k),(L,k)=>d("interaction",L,k)),s=i.ref(!1),o=i.ref(!1),r=i.ref(!1),y=!1,M=y,H=i.ref({parentCount:0,wrapperCount:0,blockCount:0,itemCount:0,visibleCount:0,visibleIndices:[],currentPage:0,totalPages:0,orientation:"N/A"});function q(){o.value=typeof window<"u"?window.innerWidth<768:!1}let N=0;function Z(){if(!v.value||!B.value)return!1;const L=B.value.clientHeight,k=B.value.clientWidth;if(L<=0||k<=0)return!1;const z=a.value||595,I=S.value||842,R=z/I,$=Math.floor(2*L*R),X=Math.min($,k),D=X>=630;let W;if(D)W=X;else{const le=Math.floor(L*R);W=Math.min(le,k)}return W===N?!1:(N=W,m.value=W,v.value.style.setProperty("width",`${W}px`,"important"),v.value.style.setProperty("max-width",`${W}px`,"important"),v.value.style.setProperty("min-width","0","important"),!0)}function f(){if(!v.value||!B.value)return;const L=B.value.clientHeight,k=B.value.clientWidth;if(L<=0||k<=0)return;const z=a.value||595,I=S.value||842,R=z/I,$=Math.floor(2*L*R),X=Math.min($,k),D=X>=630;let W;if(D)W=X;else{const le=Math.floor(L*R);W=Math.min(le,k)}N=W,m.value=W,v.value.style.setProperty("width",`${W}px`,"important"),v.value.style.setProperty("max-width",`${W}px`,"important"),v.value.style.setProperty("min-width","0","important")}const P=i.computed(()=>{if(!s.value||o.value||r.value)return"";const L=E.currentPage.value,k=E.totalPages.value,z=m.value;if(z<=0)return"";const I=Math.round(z/4);return L===0?`transform: translateX(-${I}px)`:k>1&&L>=k-1?`transform: translateX(${I}px)`:""}),a=i.ref(595),S=i.ref(842);function T(L){return new Promise(k=>{if(typeof window>"u"){k({w:0,h:0});return}const z=new Image;z.onload=()=>k({w:z.naturalWidth,h:z.naturalHeight}),z.onerror=()=>k({w:0,h:0}),z.src=L})}function F(L,k){return k?L.flatMap((z,I)=>{const R=I*2;return[{...z,index:R,sourceIndex:I,spreadHalf:"left"},{...z,index:R+1,sourceIndex:I,spreadHalf:"right"}]}):L.map((z,I)=>({...z,index:I,sourceIndex:I}))}function A(L){const k=L.hotspots??[];if(!L.spreadHalf)return k.map(R=>({...R,mappedX:R.x,mappedWidth:R.width}));const z=L.spreadHalf==="left"?0:50,I=L.spreadHalf==="left"?50:100;return k.flatMap(R=>{const $=R.x,X=R.x+R.width,D=Math.max($,z),W=Math.min(X,I);return W<=D?[]:[{...R,mappedX:(D-z)*2,mappedWidth:(W-D)*2}]})}function G(L){const k=v.value;if(!k)return[];const z=L.reduce((I,R)=>Math.max(I,R.sourceIndex),-1);for(;k.firstChild;)k.removeChild(k.firstChild);return L.map((I,R)=>{const $=document.createElement("div");if($.className="mgn-flipbook-page",I.spreadHalf&&($.classList.add("mgn-fb-spread-page",`mgn-fb-spread-${I.spreadHalf}`),(I.sourceIndex===0||I.sourceIndex===z)&&$.classList.add("mgn-fb-spread-cover")),!r.value&&(R===0||R===L.length-1)&&$.classList.add("mgn-fb-cover-page"),$.setAttribute("data-page-index",String(R)),$.setAttribute("data-source-index",String(I.sourceIndex)),I.spreadHalf&&$.setAttribute("data-spread-half",I.spreadHalf),I.imageUrl)if(I.spreadHalf){const D=document.createElement("img");D.className="mgn-fb-spread-media",D.src=I.imageUrl,D.alt=`Page ${R+1}`,D.loading="lazy",D.draggable=!1,D.setAttribute("data-role","page-media"),$.appendChild(D)}else{const D=document.createElement("img");D.src=I.imageUrl,D.alt=`Page ${R+1}`,D.className="mgn-fb-page-img",D.loading="lazy",D.draggable=!1,D.setAttribute("data-role","page-media"),$.appendChild(D)}else{const D=document.createElement("div");D.className="mgn-fb-page-placeholder",$.appendChild(D)}const X=A(I);for(const D of X){const W=D.url?document.createElement("a"):document.createElement("button");W.className="mgn-fb-hotspot",W.setAttribute("data-hotspot-id",D.id),W.setAttribute("aria-label",D.title||D.id),W.setAttribute("title",D.title||""),W.style.left=`${D.mappedX}%`,W.style.top=`${D.y}%`,W.style.width=`${D.mappedWidth}%`,W.style.height=`${D.height}%`,W instanceof HTMLAnchorElement&&D.url?(W.href=D.url,W.target=D.target??"_blank",W.rel="noopener noreferrer"):W instanceof HTMLButtonElement&&(W.type="button"),W.addEventListener("click",le=>{le.stopPropagation(),d("hotspot-click",D.id,I.sourceIndex,D.data)}),$.appendChild(W)}return k.appendChild($),$})}function ee(L){}async function j(){var L,k;b.value=!0;try{if(l.pages&&l.pages.length>0){u.value=l.pages;const I=l.pages.length>1?1:0;if((L=l.pages[I])!=null&&L.imageUrl)try{const R=await T(l.pages[I].imageUrl);R.w>0&&R.h>0&&(a.value=R.w,S.value=R.h,r.value=R.w/R.h>1.2,r.value&&(a.value=Math.round(R.w/2)))}catch{}}else if(l.pdfUrl){i.watch(()=>t.progress.value,$=>{_.value=$},{immediate:!0});const I=await t.loadPdf(l.pdfUrl);u.value=I;const R=I.length>1?1:0;if((k=I[R])!=null&&k.imageUrl)try{const $=await T(I[R].imageUrl);$.w>0&&$.h>0&&(a.value=$.w,S.value=$.h,r.value=$.w/$.h>1.2,r.value&&(a.value=Math.round($.w/2)))}catch{t.pageWidth.value>0&&t.pageHeight.value>0&&(a.value=t.pageWidth.value,S.value=t.pageHeight.value,r.value=a.value/S.value>1.2,r.value&&(a.value=Math.round(a.value/2)))}else t.pageWidth.value>0&&t.pageHeight.value>0&&(a.value=t.pageWidth.value,S.value=t.pageHeight.value,r.value=a.value/S.value>1.2,r.value&&(a.value=Math.round(a.value/2)))}else{V.value=!0,x.value="No pages or PDF URL provided",b.value=!1,d("error",new Error("Either pages or pdfUrl prop is required"));return}e.value=F(u.value,r.value);const z=G(e.value);z.length>0?(q(),N=0,f(),E.init(z,{width:a.value,height:S.value,size:"stretch",showCover:!r.value,forceSinglePage:!1,enableVisibilityPatch:!r.value,usePortrait:!0,minWidth:100,maxWidth:2e3,minHeight:100,maxHeight:2e3,startPage:l.startPage,flippingTime:450,drawShadow:!0,maxShadowOpacity:.3}),s.value=!0,b.value=!1,await i.nextTick(),await new Promise(I=>requestAnimationFrame(I)),N=0,Z()&&(await new Promise(I=>requestAnimationFrame(I)),E.update()),E.forceResetVisibility(),typeof requestAnimationFrame=="function"&&requestAnimationFrame(()=>{var $;if(E.enforcePageVisibility(),!y)return;const I=($=v.value)==null?void 0:$.querySelector(".stf__block"),R=I==null?void 0:I.querySelectorAll(":scope > .stf__item");if(R){let X=0;const D=[];for(const W of R)W.style.display!=="none"&&(X++,D.push(parseInt(W.getAttribute("data-page-index")??"-1",10)));console.warn(`[DIAG 4] FINAL STATE: .stf__item total = ${R.length}, visible = ${X}, indices = [${D}]`),console.warn("═══════ [MgnFlipbook DIAG] End Audit ═══════")}}),l.enableZoom&&C.bindEvents(),d("ready")):(V.value=!0,x.value="Pages rendered but DOM elements not found",b.value=!1)}catch(z){b.value=!1,V.value=!0,x.value=z.message||"Failed to load flipbook",console.error("[MgnFlipbook] Init error:",z),d("error",z)}}function Q(){V.value=!1,x.value="",u.value=[],j()}i.watch(()=>E.currentPage.value,(L,k)=>{k!==void 0&&L!==k&&(Y.play(),d("page-change",L))}),i.watch(()=>C.isZoomed.value,L=>{if(w.value=L?"zoom":"flip",d("zoom-change",L),n.trackInteraction(L?"zoom":"flip"),!v.value)return;const I=(v.value.querySelector(".stf__block")||v.value).querySelectorAll('[data-role="page-media"]');for(const R of I){const $=R.closest(".mgn-flipbook-page"),X=parseInt(($==null?void 0:$.getAttribute("data-source-index"))??($==null?void 0:$.getAttribute("data-page-index"))??"-1",10);if(X<0||X>=u.value.length)continue;const D=u.value[X];if(!D)continue;const W=L&&D.hiresUrl?D.hiresUrl:D.imageUrl;R instanceof HTMLImageElement?R.src=W:R.setAttribute("data-src",W)}});function te(){c.value&&(g.value?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen&&document.webkitExitFullscreen():c.value.requestFullscreen?c.value.requestFullscreen():c.value.webkitRequestFullscreen&&c.value.webkitRequestFullscreen())}function K(){g.value=!!document.fullscreenElement,i.nextTick(()=>{N=0,Z(),E.update(),typeof requestAnimationFrame=="function"&&requestAnimationFrame(()=>{E.enforcePageVisibility()})})}xe({onNext:()=>E.flipNext(),onPrev:()=>E.flipPrev(),onZoomIn:()=>C.zoomIn(),onZoomOut:()=>C.zoomOut(),onResetZoom:()=>C.resetZoom(),onToggleFullscreen:te,enabled:i.toRef(l,"enableKeyboard")});function se(){d("download"),n.trackInteraction("download")}function J(){d("share"),n.trackInteraction("share"),!(typeof window>"u")&&navigator.share&&navigator.share({title:"Magazine",url:window.location.href}).catch(()=>{})}function ie(L){!s.value||!l.enableZoom||(L.preventDefault(),C.isZoomed.value?C.resetZoom():C.zoomToPoint(L.clientX,L.clientY,2))}function re(){typeof document>"u"||!document.hidden&&s.value&&(N=0,Z(),E.update(),typeof requestAnimationFrame=="function"&&requestAnimationFrame(()=>{E.enforcePageVisibility()}))}let oe;function ne(){typeof window>"u"||(q(),N=0,Z(),clearTimeout(oe),oe=setTimeout(()=>{N=0,Z(),E.update(),typeof requestAnimationFrame=="function"&&requestAnimationFrame(()=>{E.enforcePageVisibility()})},150))}return i.onMounted(()=>{typeof window<"u"&&window.addEventListener("resize",ne),typeof document<"u"&&(document.addEventListener("fullscreenchange",K),document.addEventListener("webkitfullscreenchange",K),document.addEventListener("visibilitychange",re)),j()}),i.onUnmounted(()=>{typeof document<"u"&&(document.removeEventListener("fullscreenchange",K),document.removeEventListener("webkitfullscreenchange",K),document.removeEventListener("visibilitychange",re)),typeof window<"u"&&window.removeEventListener("resize",ne),clearTimeout(oe),t.destroy(),C.unbindEvents()}),(L,k)=>(i.openBlock(),i.createElementBlock("div",{ref_key:"containerRef",ref:c,class:i.normalizeClass(["mgn-flipbook-container",{"mgn-fb-embed":h.embedMode,"mgn-fb-fullscreen":g.value,"mgn-fb-zoomed":i.unref(C).isZoomed.value,"mgn-fb-rtl":h.direction==="rtl"}]),style:i.normalizeStyle(i.unref(O))},[i.unref(M)?(i.openBlock(),i.createElementBlock("div",at,[i.createElementVNode("div",null,"parents: "+i.toDisplayString(H.value.parentCount)+" | wrappers: "+i.toDisplayString(H.value.wrapperCount)+" | blocks: "+i.toDisplayString(H.value.blockCount),1),i.createElementVNode("div",null,"items: "+i.toDisplayString(H.value.itemCount)+" | visible: "+i.toDisplayString(H.value.visibleCount)+" | indices: ["+i.toDisplayString(H.value.visibleIndices.join(", "))+"]",1),i.createElementVNode("div",null,"page: "+i.toDisplayString(H.value.currentPage)+" / "+i.toDisplayString(H.value.totalPages)+" | orientation: "+i.toDisplayString(H.value.orientation)+" | spreads: "+i.toDisplayString(r.value?"yes":"no"),1)])):i.createCommentVNode("",!0),V.value?(i.openBlock(),i.createElementBlock("div",rt,[k[7]||(k[7]=i.createElementVNode("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},[i.createElementVNode("circle",{cx:"12",cy:"12",r:"10"}),i.createElementVNode("path",{d:"M12 8v4M12 16h.01","stroke-linecap":"round"})],-1)),k[8]||(k[8]=i.createElementVNode("p",{class:"mgn-fb-error-title"},"Failed to load magazine",-1)),i.createElementVNode("p",lt,i.toDisplayString(x.value),1),i.createElementVNode("button",{class:"mgn-fb-btn mgn-fb-retry-btn",onClick:Q}," Try again ")])):i.createCommentVNode("",!0),i.unref(t).isLoading.value?(i.openBlock(),i.createElementBlock("div",ht,[i.createElementVNode("div",ct,[i.createElementVNode("div",{class:"mgn-fb-progress-bar",style:i.normalizeStyle({width:`${i.unref(t).progress.value}%`})},null,4)]),i.createElementVNode("span",dt,i.toDisplayString(i.unref(t).progress.value<5?"Loading PDF...":`Rendering pages ${i.unref(t).progress.value}%`),1)])):i.createCommentVNode("",!0),i.createElementVNode("div",{ref_key:"wrapperRef",ref:B,class:i.normalizeClass(["mgn-fb-wrapper",{"mgn-fb-dragging":i.unref(C).isDragging.value,"mgn-fb-ready":s.value}]),style:i.normalizeStyle(i.unref(C).isZoomed.value?i.unref(C).transformStyle.value:""),onDblclick:ie},[h.watermark?(i.openBlock(),i.createBlock(Ee,{key:0,config:h.watermark},null,8,["config"])):i.createCommentVNode("",!0),i.createElementVNode("div",{class:"mgn-fb-flipbook-centering",style:i.normalizeStyle(P.value)},[i.createElementVNode("div",{ref_key:"flipbookRef",ref:v,class:"mgn-fb-flipbook"},null,512)],4)],38),s.value?(i.openBlock(),i.createElementBlock("div",ut,[i.createVNode(Me,{"current-page":i.unref(E).currentPage.value,"total-pages":i.unref(E).totalPages.value,"is-zoomed":i.unref(C).isZoomed.value,"is-muted":i.unref(Y).isMuted.value,"is-fullscreen":g.value,"enable-zoom":h.enableZoom,"enable-sound":h.enableSound,"enable-fullscreen":h.enableFullscreen,"enable-download":h.enableDownload,"enable-share":h.enableShare,onPrev:k[0]||(k[0]=z=>i.unref(E).flipPrev()),onNext:k[1]||(k[1]=z=>i.unref(E).flipNext()),onZoomIn:k[2]||(k[2]=z=>i.unref(C).zoomIn()),onZoomOut:k[3]||(k[3]=z=>i.unref(C).zoomOut()),onResetZoom:k[4]||(k[4]=z=>i.unref(C).resetZoom()),onToggleZoom:k[5]||(k[5]=z=>i.unref(C).isZoomed.value?i.unref(C).exitZoom():i.unref(C).enterZoom()),onToggleMute:k[6]||(k[6]=z=>i.unref(Y).toggleMute()),onToggleFullscreen:te,onDownload:se,onShare:J},null,8,["current-page","total-pages","is-zoomed","is-muted","is-fullscreen","enable-zoom","enable-sound","enable-fullscreen","enable-download","enable-share"])])):i.createCommentVNode("",!0)],6))}}),gt={class:"mgn-fb-skeleton"},pt=i.defineComponent({__name:"FlipbookSkeleton",props:{aspectRatio:{default:.75}},setup(h){return(p,l)=>(i.openBlock(),i.createElementBlock("div",gt,[i.createElementVNode("div",{class:"mgn-fb-skeleton-page",style:i.normalizeStyle({paddingBottom:`${1/h.aspectRatio*100}%`})},[...l[0]||(l[0]=[i.createElementVNode("div",{class:"mgn-fb-skeleton-shine"},null,-1)])],4),l[1]||(l[1]=i.createElementVNode("div",{class:"mgn-fb-skeleton-toolbar"},[i.createElementVNode("div",{class:"mgn-fb-skeleton-bar",style:{width:"120px"}}),i.createElementVNode("div",{class:"mgn-fb-skeleton-bar",style:{width:"80px"}})],-1))]))}}),ft=ue(pt,[["__scopeId","data-v-07dbc2bf"]]);exports.FlipbookSkeleton=ft;exports.FlipbookToolbar=Me;exports.FlipbookWatermark=Ee;exports.MgnFlipbook=Te;exports.default=Te;exports.defaultTheme=de;exports.lightTheme=Pe;exports.mgnTheme=Se;exports.useAnalytics=Ce;exports.useFlipbook=me;exports.useKeyboard=xe;exports.usePagePreloader=ye;exports.usePdfRenderer=be;exports.useSound=we;exports.useTheme=ke;exports.useZoom=ve;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.mgn-fb-toolbar[data-v-a610554b]{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--mgn-fb-toolbar-bg, #16213e);color:var(--mgn-fb-toolbar-text, #e0e0e0);border-radius:var(--mgn-fb-radius, 4px);-webkit-user-select:none;user-select:none;gap:8px;flex-wrap:wrap}.mgn-fb-toolbar-left[data-v-a610554b],.mgn-fb-toolbar-right[data-v-a610554b]{display:flex;align-items:center;gap:4px}.mgn-fb-btn[data-v-a610554b]{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:6px;background:transparent;color:var(--mgn-fb-toolbar-icon, #ffffff);cursor:pointer;transition:background .2s,opacity .2s;padding:0}.mgn-fb-btn[data-v-a610554b]:hover:not(:disabled){background:#ffffff1a}.mgn-fb-btn[data-v-a610554b]:active:not(:disabled){background:#ffffff26}.mgn-fb-btn[data-v-a610554b]:disabled{opacity:.3;cursor:not-allowed}.mgn-fb-page-indicator[data-v-a610554b]{font-size:13px;font-weight:500;min-width:60px;text-align:center;font-variant-numeric:tabular-nums}@media(max-width:480px){.mgn-fb-toolbar[data-v-a610554b]{padding:6px 8px}.mgn-fb-btn[data-v-a610554b]{width:32px;height:32px}.mgn-fb-page-indicator[data-v-a610554b]{font-size:12px;min-width:50px}}.mgn-fb-watermark-img[data-v-53bf02f3]{max-width:80px;max-height:40px;object-fit:contain}.mgn-fb-watermark-text[data-v-53bf02f3]{font-size:11px;font-weight:600;color:#ffffffb3;text-shadow:0 1px 2px rgba(0,0,0,.5);letter-spacing:.5px;text-transform:uppercase}@media(max-width:480px){.mgn-fb-watermark-img[data-v-53bf02f3]{max-width:50px;max-height:25px}.mgn-fb-watermark-text[data-v-53bf02f3]{font-size:9px}}.mgn-flipbook-container{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);height:90vh;display:flex;flex-direction:column;background:var(--mgn-fb-bg, #1a1a2e);border-radius:0;padding:16px 12px;box-sizing:border-box;position:relative;overflow:hidden}.mgn-flipbook-container.mgn-fb-embed{height:100vh;padding:8px;margin-left:0}.mgn-flipbook-container.mgn-fb-fullscreen{height:100vh;padding:16px;margin-left:0}.mgn-fb-wrapper{flex:1 1 0%;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;min-height:0;transition:transform .2s ease,opacity .3s ease;cursor:default;opacity:0;pointer-events:none}.mgn-fb-wrapper.mgn-fb-ready{opacity:1;pointer-events:auto}.mgn-fb-wrapper.mgn-fb-dragging{cursor:grabbing;transition:none}.mgn-flipbook-container.mgn-fb-zoomed .mgn-fb-wrapper{cursor:grab}.mgn-fb-flipbook-centering{width:100%;display:flex;justify-content:center;align-items:center;transition:transform .4s ease}.mgn-fb-flipbook{margin:0 auto;width:100%;min-height:0!important;min-width:0!important}.mgn-fb-flipbook .stf__wrapper{position:relative!important;width:100%!important;box-sizing:border-box;overflow:hidden;cursor:default}.mgn-fb-flipbook .stf__block{overflow:hidden!important}.mgn-fb-flipbook .stf__item.mgn-fb-page-hidden{display:none!important;visibility:hidden!important}.mgn-fb-flipbook>.mgn-flipbook-page{position:absolute;left:-9999px;opacity:0;pointer-events:none}.mgn-flipbook-page{background:var(--mgn-fb-page-bg, #ffffff);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}.mgn-fb-page-img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.mgn-fb-spread-page{background:var(--mgn-fb-bg, #1a1a2e)}.mgn-fb-spread-media{position:absolute;top:0;left:-1px;width:calc(200% + 2px);height:100%;max-width:none;object-fit:cover;object-position:center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.mgn-fb-spread-left .mgn-fb-spread-media{transform:translate(0)}.mgn-fb-spread-right .mgn-fb-spread-media{transform:translate(calc(-50% + 1px))}.mgn-fb-spread-cover{background:var(--mgn-fb-bg, #1a1a2e)}.mgn-fb-spread-cover .mgn-fb-spread-media{object-fit:contain;object-position:top center}.mgn-fb-cover-page{background:var(--mgn-fb-bg, #1a1a2e)!important}.mgn-fb-cover-page .mgn-fb-page-img{object-fit:contain}.mgn-fb-page-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--mgn-fb-skeleton, #2a2a3e)}.mgn-fb-hotspot{position:absolute;z-index:12;display:block;border:0;padding:0;margin:0;background:transparent;cursor:pointer;outline:none}.mgn-fb-hotspot:hover,.mgn-fb-hotspot:focus-visible{box-shadow:inset 0 0 0 2px #ff7700d9}.mgn-fb-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:300px;color:var(--mgn-fb-toolbar-text, #e0e0e0);text-align:center;padding:32px}.mgn-fb-error svg{opacity:.5}.mgn-fb-error-title{font-size:18px;font-weight:600;margin:0}.mgn-fb-error-message{font-size:13px;opacity:.6;margin:0;max-width:400px;word-break:break-word}.mgn-fb-retry-btn{margin-top:8px;padding:8px 24px!important;width:auto!important;height:auto!important;background:var(--mgn-fb-brand, #ff7700)!important;color:#fff!important;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:opacity .2s}.mgn-fb-retry-btn:hover{opacity:.85}.mgn-fb-progress{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:280px;text-align:center;z-index:20}.mgn-fb-debug-overlay{position:absolute;top:12px;right:12px;z-index:30;background:#000000d9;color:#8fffd1;font:12px/1.4 monospace;padding:8px 10px;border:1px solid rgba(143,255,209,.35);border-radius:6px;pointer-events:none}.mgn-fb-progress-track{height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.mgn-fb-progress-bar{height:100%;background:var(--mgn-fb-brand, #ff7700);border-radius:2px;transition:width .3s ease}.mgn-fb-progress-text{display:block;margin-top:12px;font-size:13px;color:var(--mgn-fb-toolbar-text, #e0e0e0);opacity:.8}.mgn-fb-rtl{direction:rtl}.mgn-fb-toolbar-row{flex-shrink:0;display:flex;justify-content:center;align-items:center;padding:8px 0 0;z-index:10;pointer-events:auto}.mgn-fb-toolbar-row .mgn-fb-toolbar{box-shadow:0 4px 20px #0006}@media(max-width:768px){.mgn-flipbook-container{padding:8px 6px;height:85vh}.mgn-fb-toolbar-row{padding:6px 0 0;width:100%}}.mgn-flipbook-container.mgn-fb-zoomed .mgn-fb-flipbook{pointer-events:none}.mgn-fb-flipbook .stf__item{cursor:pointer;backface-visibility:hidden;-webkit-backface-visibility:hidden}.mgn-fb-flipbook .stf__item:active{cursor:grabbing}.mgn-fb-flipbook .stf__wrapper canvas{image-rendering:auto}@media print{.mgn-fb-toolbar{display:none!important}}.mgn-fb-skeleton[data-v-07dbc2bf]{width:100%;display:flex;flex-direction:column;gap:12px}.mgn-fb-skeleton-page[data-v-07dbc2bf]{width:100%;position:relative;background:var(--mgn-fb-skeleton, #2a2a3e);border-radius:var(--mgn-fb-radius, 4px);overflow:hidden}.mgn-fb-skeleton-shine[data-v-07dbc2bf]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,var(--mgn-fb-skeleton-shine, #3a3a4e) 50%,transparent 100%);animation:mgn-fb-shine-07dbc2bf 1.5s ease-in-out infinite}.mgn-fb-skeleton-toolbar[data-v-07dbc2bf]{display:flex;justify-content:space-between;padding:8px 16px;background:var(--mgn-fb-skeleton, #2a2a3e);border-radius:var(--mgn-fb-radius, 4px);height:52px;align-items:center}.mgn-fb-skeleton-bar[data-v-07dbc2bf]{height:12px;background:var(--mgn-fb-skeleton-shine, #3a3a4e);border-radius:6px}@keyframes mgn-fb-shine-07dbc2bf{0%{transform:translate(-100%)}to{transform:translate(100%)}}
|