pdf-flipbook 2.0.3 → 3.0.0

package/dist/pdf-flipbook.umd.js

@@ -21238,7 +21238,7 @@ var PdfFlipbook = (() => {
     __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,
@@ -21281,6 +21281,8 @@ var PdfFlipbook = (() => {
       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() {
@@ -21303,7 +21305,6 @@ var PdfFlipbook = (() => {
         <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>
@@ -21350,28 +21351,32 @@ var PdfFlipbook = (() => {
       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());
@@ -21380,56 +21385,48 @@ var PdfFlipbook = (() => {
       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);
@@ -21446,16 +21443,13 @@ var PdfFlipbook = (() => {
           }
           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);
@@ -21469,22 +21463,20 @@ var PdfFlipbook = (() => {
             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);
@@ -21504,19 +21496,17 @@ var PdfFlipbook = (() => {
           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);
@@ -21526,44 +21516,41 @@ var PdfFlipbook = (() => {
             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;
@@ -21585,20 +21572,9 @@ var PdfFlipbook = (() => {
       };
       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();
@@ -21613,7 +21589,7 @@ var PdfFlipbook = (() => {
         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;
@@ -21622,22 +21598,17 @@ var PdfFlipbook = (() => {
         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);
     }