pdf-flipbook 2.0.2 → 3.0.0

package/dist/pdf-flipbook.esm.js

@@ -21209,7 +21209,7 @@ if (typeof window !== "undefined") {
   __webpack_exports__GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${__webpack_exports__version}/pdf.worker.min.mjs`;
 }
 var DEFAULTS = {
-  flippingTime: 800,
+  flippingTime: 700,
   toolbar: true,
   theme: "dark",
   maxDpr: 3,
@@ -21252,6 +21252,8 @@ var PdfFlipbook = class {
     cancelAnimationFrame(this._raf);
     window.removeEventListener("keydown", this._onKey);
     window.removeEventListener("resize", this._onResize);
+    window.removeEventListener("mousemove", this._onMouseMove);
+    window.removeEventListener("mouseup", this._onMouseUp);
     this._el.innerHTML = "";
   }
   async _init() {
@@ -21274,7 +21276,6 @@ var PdfFlipbook = class {
         <canvas class="pfb__canvas"></canvas>
         <button class="pfb__btn pfb__btn--prev">&#8592;</button>
         <button class="pfb__btn pfb__btn--next">&#8594;</button>
-        <button class="pfb__btn--fs" aria-label="Fullscreen">&#x26F6;</button>
         <div class="pfb__loader"><div class="pfb__spinner"></div><span class="pfb__loader-text">Loading\u2026</span></div>
         <div class="pfb__error" hidden></div>
       </div>
@@ -21321,28 +21322,32 @@ var PdfFlipbook = class {
     this._loader.hidden = true;
     this._updateUI();
   }
-  // ── Layout ────────────────────────────────────────────────────────────────
   _bookLayout() {
     const cW = this._canvas.width;
     const cH = this._canvas.height;
     const mob = cW < 560;
     const arrowPad = mob ? 48 : 64;
     const maxW = cW - arrowPad * 2;
-    let pH = cH - 8;
-    let pW = Math.floor(pH / this._aspect);
-    if (!mob && pW * 2 > maxW) {
-      pW = Math.floor(maxW / 2);
-      pH = Math.floor(pW * this._aspect);
-    }
-    if (mob && pW > maxW) {
+    let pW, pH;
+    if (mob) {
       pW = maxW;
       pH = Math.floor(pW * this._aspect);
+      if (pH > cH - 8) {
+        pH = cH - 8;
+        pW = Math.floor(pH / this._aspect);
+      }
+    } else {
+      pW = Math.floor(maxW / 2);
+      pH = Math.floor(pW * this._aspect);
+      if (pH > cH - 8) {
+        pH = cH - 8;
+        pW = Math.floor(pH / this._aspect);
+      }
     }
     const bx = Math.floor((cW - (mob ? pW : pW * 2)) / 2);
     const by = Math.floor((cH - pH) / 2);
     return { bx, by, pW, pH, mob };
   }
-  // ── Render loop ───────────────────────────────────────────────────────────
   _loop() {
     this._draw();
     this._raf = requestAnimationFrame(() => this._loop());
@@ -21351,56 +21356,48 @@ var PdfFlipbook = class {
     const ctx = this._ctx;
     ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
     if (!this._total) return;
-    const { bx, by, pW, pH, mob } = this._bookLayout();
-    if (mob) {
-      this._blitPage(ctx, this._pages[this._spread] || null, bx, by, pW, pH);
+    const L = this._bookLayout();
+    if (L.mob) {
+      this._blitPage(ctx, this._pages[this._spread], L.bx, L.by, L.pW, L.pH);
       return;
     }
     if (!this._flip) {
-      this._drawSpread(ctx, this._spread, bx, by, pW, pH);
+      this._drawSpread(ctx, this._spread, L);
     } else {
-      this._drawFlip(ctx, bx, by, pW, pH);
+      this._drawFlip(ctx, L);
     }
   }
-  // ── Draw a static spread ──────────────────────────────────────────────────
-  _drawSpread(ctx, spread, bx, by, pW, pH) {
+  _drawSpread(ctx, spread, L) {
+    const { bx, by, pW, pH } = L;
     this._blitPage(ctx, this._pages[spread] || null, bx, by, pW, pH);
     this._blitPage(ctx, this._pages[spread + 1] || null, bx + pW, by, pW, pH);
     this._drawSpineAndShadow(ctx, bx, by, pW, pH);
   }
   _blitPage(ctx, cvs, x, y, w, h) {
-    ctx.fillStyle = "#ffffff";
+    ctx.fillStyle = "#fff";
     ctx.fillRect(x, y, w, h);
     if (cvs) ctx.drawImage(cvs, x, y, w, h);
   }
   _drawSpineAndShadow(ctx, bx, by, pW, pH) {
     const sx = bx + pW;
-    const sg = ctx.createLinearGradient(sx - 18, 0, sx + 18, 0);
-    sg.addColorStop(0, "rgba(0,0,0,0)");
-    sg.addColorStop(0.35, "rgba(0,0,0,0.12)");
-    sg.addColorStop(0.5, "rgba(0,0,0,0.18)");
-    sg.addColorStop(0.65, "rgba(0,0,0,0.12)");
-    sg.addColorStop(1, "rgba(0,0,0,0)");
-    ctx.fillStyle = sg;
-    ctx.fillRect(sx - 18, by, 36, pH);
+    ctx.fillStyle = "rgba(0,0,0,0.3)";
+    ctx.fillRect(sx - 1, by, 2, pH);
     const dg = ctx.createLinearGradient(0, by + pH - 4, 0, by + pH + 38);
-    dg.addColorStop(0, "rgba(0,0,0,0.38)");
+    dg.addColorStop(0, "rgba(0,0,0,0.35)");
     dg.addColorStop(1, "rgba(0,0,0,0)");
     ctx.fillStyle = dg;
     ctx.fillRect(bx - 16, by + pH - 4, pW * 2 + 32, 42);
   }
-  // ── Flip render ───────────────────────────────────────────────────────────
-  _drawFlip(ctx, bx, by, pW, pH) {
+  _drawFlip(ctx, L) {
     const f = this._flip;
     const t = easeInOut(f.progress);
     const dir = f.dir;
-    const srcSpread = f.src;
-    const destSpread = f.dest;
-    const srcL = this._pages[srcSpread] || null;
-    const srcR = this._pages[srcSpread + 1] || null;
-    const dstL = this._pages[destSpread] || null;
-    const dstR = this._pages[destSpread + 1] || null;
+    const { bx, by, pW, pH } = L;
     const spine = bx + pW;
+    const srcL = this._pages[f.src] || null;
+    const srcR = this._pages[f.src + 1] || null;
+    const dstL = this._pages[f.dest] || null;
+    const dstR = this._pages[f.dest + 1] || null;
     if (dir === 1) {
       this._blitPage(ctx, dstR, spine, by, pW, pH);
       this._blitPage(ctx, srcL, bx, by, pW, pH);
@@ -21417,16 +21414,13 @@ var PdfFlipbook = class {
         }
         const shadowW = Math.min(80, pW * 0.3) * (1 - frontT);
         if (shadowW > 0) {
-          const shadowX = spine - shadowW;
-          const sg = ctx.createLinearGradient(spine, 0, shadowX, 0);
-          sg.addColorStop(0, "rgba(0,0,0,0.38)");
-          sg.addColorStop(0.5, "rgba(0,0,0,0.12)");
+          const sg = ctx.createLinearGradient(spine, 0, spine - shadowW, 0);
+          sg.addColorStop(0, "rgba(0,0,0,0.35)");
           sg.addColorStop(1, "rgba(0,0,0,0)");
           ctx.fillStyle = sg;
-          ctx.fillRect(shadowX, by, shadowW, pH);
+          ctx.fillRect(spine - shadowW, by, shadowW, pH);
         }
-        const cx = spine + frontW;
-        this._drawCrease(ctx, cx, by, pH, "right");
+        this._drawCrease(ctx, spine + frontW, by, pH, "right");
       } else {
         const backT = (t - 0.5) * 2;
         const backW = Math.floor(pW * backT);
@@ -21440,22 +21434,20 @@ var PdfFlipbook = class {
           ctx.translate(spine, by);
           ctx.scale(-1, 1);
           this._blitPage(ctx, dstL, 0, 0, pW, pH);
-          ctx.fillStyle = `rgba(0,0,0,${0.08 + 0.12 * backT})`;
+          ctx.fillStyle = `rgba(0,0,0,${0.08 + 0.1 * backT})`;
           ctx.fillRect(0, 0, pW, pH);
           ctx.restore();
           ctx.restore();
         }
         const shadowW = Math.min(80, pW * 0.3) * (1 - backT);
         if (shadowW > 0) {
-          const shadowX = spine - backW - shadowW;
-          const sg = ctx.createLinearGradient(spine - backW, 0, shadowX, 0);
-          sg.addColorStop(0, "rgba(0,0,0,0.3)");
+          const sg = ctx.createLinearGradient(spine - backW, 0, spine - backW - shadowW, 0);
+          sg.addColorStop(0, "rgba(0,0,0,0.28)");
           sg.addColorStop(1, "rgba(0,0,0,0)");
           ctx.fillStyle = sg;
-          ctx.fillRect(Math.max(bx, shadowX), by, Math.min(shadowW, spine - backW - bx), pH);
+          ctx.fillRect(Math.max(bx, spine - backW - shadowW), by, Math.min(shadowW, spine - backW - bx), pH);
         }
-        const cx = spine - backW;
-        this._drawCrease(ctx, cx, by, pH, "left");
+        this._drawCrease(ctx, spine - backW, by, pH, "left");
       }
     } else {
       this._blitPage(ctx, dstL, bx, by, pW, pH);
@@ -21475,19 +21467,17 @@ var PdfFlipbook = class {
         const shadowW = Math.min(80, pW * 0.3) * (1 - frontT);
         if (shadowW > 0) {
           const sg = ctx.createLinearGradient(spine, 0, spine + shadowW, 0);
-          sg.addColorStop(0, "rgba(0,0,0,0.38)");
-          sg.addColorStop(0.5, "rgba(0,0,0,0.12)");
+          sg.addColorStop(0, "rgba(0,0,0,0.35)");
           sg.addColorStop(1, "rgba(0,0,0,0)");
           ctx.fillStyle = sg;
           ctx.fillRect(spine, by, shadowW, pH);
         }
-        const cx = spine - frontW;
-        this._drawCrease(ctx, cx, by, pH, "left");
+        this._drawCrease(ctx, spine - frontW, by, pH, "left");
       } else {
         const backT = (t - 0.5) * 2;
         const backW = Math.floor(pW * backT);
-        const backX = spine;
         if (backW > 0) {
+          const backX = spine;
           ctx.save();
           ctx.beginPath();
           ctx.rect(backX, by, backW, pH);
@@ -21497,44 +21487,41 @@ var PdfFlipbook = class {
           ctx.scale(-1, 1);
           ctx.translate(-pW, 0);
           this._blitPage(ctx, dstR, 0, 0, pW, pH);
-          ctx.fillStyle = `rgba(0,0,0,${0.08 + 0.12 * backT})`;
+          ctx.fillStyle = `rgba(0,0,0,${0.08 + 0.1 * backT})`;
           ctx.fillRect(0, 0, pW, pH);
           ctx.restore();
           ctx.restore();
         }
         const shadowW = Math.min(80, pW * 0.3) * (1 - backT);
         if (shadowW > 0) {
-          const shadowEdge = spine + backW + shadowW;
-          const sg = ctx.createLinearGradient(spine + backW, 0, shadowEdge, 0);
-          sg.addColorStop(0, "rgba(0,0,0,0.3)");
+          const sg = ctx.createLinearGradient(spine + backW, 0, spine + backW + shadowW, 0);
+          sg.addColorStop(0, "rgba(0,0,0,0.28)");
           sg.addColorStop(1, "rgba(0,0,0,0)");
           ctx.fillStyle = sg;
           ctx.fillRect(spine + backW, by, Math.min(shadowW, bx + pW * 2 - spine - backW), pH);
         }
-        const cx = spine + backW;
-        this._drawCrease(ctx, cx, by, pH, "right");
+        this._drawCrease(ctx, spine + backW, by, pH, "right");
       }
     }
     this._drawSpineAndShadow(ctx, bx, by, pW, pH);
   }
-  _drawCrease(ctx, cx, by, pH, highlightSide) {
+  _drawCrease(ctx, cx, by, pH, side) {
     const w = 10;
     const g = ctx.createLinearGradient(cx - w, 0, cx + w, 0);
-    if (highlightSide === "right") {
+    if (side === "right") {
       g.addColorStop(0, "rgba(0,0,0,0)");
-      g.addColorStop(0.35, "rgba(0,0,0,0.28)");
-      g.addColorStop(0.55, "rgba(255,255,255,0.22)");
+      g.addColorStop(0.35, "rgba(0,0,0,0.25)");
+      g.addColorStop(0.55, "rgba(255,255,255,0.2)");
       g.addColorStop(1, "rgba(0,0,0,0)");
     } else {
       g.addColorStop(0, "rgba(0,0,0,0)");
-      g.addColorStop(0.45, "rgba(255,255,255,0.22)");
-      g.addColorStop(0.65, "rgba(0,0,0,0.28)");
+      g.addColorStop(0.45, "rgba(255,255,255,0.2)");
+      g.addColorStop(0.65, "rgba(0,0,0,0.25)");
       g.addColorStop(1, "rgba(0,0,0,0)");
     }
     ctx.fillStyle = g;
     ctx.fillRect(cx - w, by, w * 2, pH);
   }
-  // ── Flip state ────────────────────────────────────────────────────────────
   _startFlip(dir, dest) {
     if (this._flip || !this._total) return;
     const target = dest !== void 0 ? dest : this._spread + dir * 2;
@@ -21556,20 +21543,9 @@ var PdfFlipbook = class {
     };
     requestAnimationFrame(step);
   }
-  // ── Events ────────────────────────────────────────────────────────────────
   _bindEvents() {
     this._el.querySelectorAll(".pfb__btn--prev, .pfb__tb-prev").forEach((b) => b.addEventListener("click", () => this.prev()));
     this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next").forEach((b) => b.addEventListener("click", () => this.next()));
-    const fsBtn = this._el.querySelector(".pfb__btn--fs");
-    if (fsBtn) {
-      fsBtn.addEventListener("click", () => {
-        if (!document.fullscreenElement) {
-          this._el.requestFullscreen?.() || this._el.webkitRequestFullscreen?.();
-        } else {
-          document.exitFullscreen?.() || document.webkitExitFullscreen?.();
-        }
-      });
-    }
     this._onKey = (e) => {
       if (["ArrowRight", "ArrowDown"].includes(e.key)) this.next();
       if (["ArrowLeft", "ArrowUp"].includes(e.key)) this.prev();
@@ -21584,7 +21560,7 @@ var PdfFlipbook = class {
       if (this._flip) return;
       const cx = getCanvasX(clientX);
       const half = this._canvas.width / 2;
-      dragStart = { x: clientX, canvasX: cx, side: cx < half ? "left" : "right" };
+      dragStart = { x: clientX, side: cx < half ? "left" : "right" };
     };
     const onDragEnd = (clientX) => {
       if (!dragStart) return;
@@ -21593,22 +21569,17 @@ var PdfFlipbook = class {
       if (absDx > 30) {
         if (dragStart.side === "right" && dx < 0) this.next();
         else if (dragStart.side === "left" && dx > 0) this.prev();
-        else if (dx < 0) this.next();
-        else this.prev();
       }
       dragStart = null;
     };
     this._canvas.addEventListener("mousedown", (e) => onDragStart(e.clientX));
-    this._canvas.addEventListener("mouseup", (e) => onDragEnd(e.clientX));
-    this._canvas.addEventListener("mouseleave", () => {
-      dragStart = null;
-    });
-    this._canvas.addEventListener("touchstart", (e) => {
-      onDragStart(e.touches[0].clientX);
-    }, { passive: true });
-    this._canvas.addEventListener("touchend", (e) => {
-      onDragEnd(e.changedTouches[0].clientX);
-    }, { passive: true });
+    this._onMouseMove = () => {
+    };
+    this._onMouseUp = (e) => onDragEnd(e.clientX);
+    window.addEventListener("mousemove", this._onMouseMove);
+    window.addEventListener("mouseup", this._onMouseUp);
+    this._canvas.addEventListener("touchstart", (e) => onDragStart(e.touches[0].clientX), { passive: true });
+    this._canvas.addEventListener("touchend", (e) => onDragEnd(e.changedTouches[0].clientX), { passive: true });
     this._onResize = () => this._resizeCanvas();
     window.addEventListener("resize", this._onResize);
   }