first commit 2

theme/rd.dnssash/rb.custom/pdfviewer/core/viewer.core.js

@@ -0,0 +1,147 @@
+(function(){
+
+    window.PDFViewer = {
+
+        opt: {},
+        pdf: null,
+        isMobile: window.innerWidth < 768,
+        rendered: {},
+        totalPages: 0,
+
+        init(opt) {
+            this.opt = opt;
+            this.loadPDF();
+        },
+
+        loadPDF() {
+            pdfjsLib.GlobalWorkerOptions.workerSrc = this.opt.worker;
+
+            pdfjsLib.getDocument(this.opt.pdf).promise.then(pdf => {
+                this.pdf = pdf;
+                this.totalPages = pdf.numPages;
+
+                this.createCover();
+                this.renderPage(1);
+                this.renderPage(2);
+
+                this.initTurn();
+            });
+        },
+
+        /* =====================
+           표지 + 마지막 페이지
+        ===================== */
+        createCover() {
+            const fb = document.getElementById(this.opt.target);
+
+            fb.insertAdjacentHTML('beforeend', `
+            <div class="page cover">
+                <div class="cover-inner">
+                    <h1>${this.opt.title || 'DOCUMENT'}</h1>
+                </div>
+            </div>
+        `);
+        },
+
+        createBackCover() {
+            const fb = document.getElementById(this.opt.target);
+
+            fb.insertAdjacentHTML('beforeend', `
+            <div class="page back-cover">
+                <div class="cover-inner">
+                    <p>END</p>
+                </div>
+            </div>
+        `);
+        },
+
+        /* =====================
+           Lazy Load 렌더
+        ===================== */
+        renderPage(pageNum) {
+            if (this.rendered[pageNum]) return;
+
+            this.pdf.getPage(pageNum).then(page => {
+                const scale = this.isMobile ? 1.1 : 1.5;
+                const viewport = page.getViewport({ scale });
+
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+
+                canvas.width = viewport.width;
+                canvas.height = viewport.height;
+
+                page.render({ canvasContext: ctx, viewport }).promise.then(() => {
+
+                    const div = document.createElement('div');
+                    div.className = 'page';
+                    div.dataset.page = pageNum;
+
+                    div.appendChild(canvas);
+                    div.insertAdjacentHTML('beforeend',
+                        `<span class="page-number">${pageNum}</span>`
+                    );
+
+                    document.getElementById(this.opt.target).appendChild(div);
+                    this.rendered[pageNum] = true;
+                });
+            });
+        },
+
+        /* =====================
+           turn.js 초기화
+        ===================== */
+        initTurn() {
+            const self = this;
+
+            this.opt.$('#' + this.opt.target).turn({
+                width: this.isMobile ? window.innerWidth : 900,
+                height: this.isMobile ? window.innerHeight * 0.75 : 600,
+                display: this.isMobile ? 'single' : 'double',
+                autoCenter: true,
+
+                turning(event, page) {
+                    self.lazyLoad(page);
+                },
+
+                turned(event, page) {
+                    if (page === self.totalPages) {
+                        self.createBackCover();
+                    }
+                }
+            });
+        },
+
+        /* =====================
+           Lazy Load 범위
+        ===================== */
+        lazyLoad(page) {
+            for (let i = page - 2; i <= page + 2; i++) {
+                if (i > 0 && i <= this.totalPages) {
+                    this.renderPage(i);
+                }
+            }
+        },
+
+        /* =====================
+           모달 뷰어
+        ===================== */
+        openModal(pdfUrl) {
+            document.body.insertAdjacentHTML('beforeend', `
+            <div id="pdf-modal">
+                <div class="modal-bg"></div>
+                <div class="modal-body">
+                    <button class="close">×</button>
+                    <div id="flipbook"></div>
+                </div>
+            </div>
+        `);
+
+            document.querySelector('#pdf-modal .close').onclick = () => {
+                document.getElementById('pdf-modal').remove();
+            };
+        }
+
+    };
+
+})();

theme/rd.dnssash/rb.custom/pdfviewer/css/viewer.base.css

@@ -0,0 +1,25 @@
+.page {
+    background: #fff;
+    position: relative;
+}
+
+.page-number {
+    position: absolute;
+    bottom: 10px;
+    right: 15px;
+    font-size: 12px;
+    color: #666;
+}
+
+/* 표지 */
+.cover, .back-cover {
+    background: #111;
+    color: #fff;
+}
+
+.cover-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}

theme/rd.dnssash/rb.custom/pdfviewer/css/viewer.mobile.css

@@ -0,0 +1,11 @@
+@media (max-width: 768px) {
+    #flipbook {
+        width: 100vw !important;
+        height: 70vh !important;
+    }
+
+    .page canvas {
+        width: 100% !important;
+        height: auto !important;
+    }
+}

theme/rd.dnssash/rb.custom/pdfviewer/css/viewer.modal.css

@@ -0,0 +1,26 @@
+#pdf-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+}
+
+#pdf-modal .modal-bg {
+    background: rgba(0,0,0,.6);
+    position: absolute;
+    inset: 0;
+}
+
+#pdf-modal .modal-body {
+    position: relative;
+    width: 90%;
+    height: 80%;
+    margin: 5% auto;
+    background: #000;
+}
+
+#pdf-modal .close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 10;
+}

theme/rd.dnssash/rb.custom/pdfviewer/skins/archive.php

@@ -0,0 +1,21 @@
+<div id="flipbook"></div>
+
+<script src="/viewer/core/jquery-3.7.1.min.js"></script>
+<script>const $pdf = jQuery.noConflict(true);</script>
+
+<script src="/viewer/core/turn.min.js"></script>
+<script src="/viewer/core/pdf.min.js"></script>
+<script src="/viewer/core/viewer.core.js"></script>
+
+<script>
+    (function($){
+        PDFViewer.init({
+            mode: 'archive',
+            pdf: '<?php echo $pdf_url; ?>',
+            worker: '/viewer/core/pdf.worker.min.js',
+            target: 'flipbook',
+            display: 'single',
+            $: $
+        });
+    })($pdf);
+</script>

theme/rd.dnssash/rb.custom/pdfviewer/skins/board.php

@@ -0,0 +1,26 @@
+<div id="flipbook"></div>
+
+<link rel="stylesheet" href="/viewer/css/viewer.base.css">
+<link rel="stylesheet" href="/viewer/css/viewer.mobile.css">
+
+<script src="/viewer/core/jquery-3.7.1.min.js"></script>
+<script>
+    const $pdf = jQuery.noConflict(true);
+</script>
+
+<script src="/viewer/core/turn.min.js"></script>
+<script src="/viewer/core/pdf.min.js"></script>
+<script src="/viewer/core/viewer.core.js"></script>
+
+<script>
+    (function($){
+        PDFViewer.init({
+            mode: 'board',
+            pdf: '<?php echo $pdf_url; ?>',
+            worker: '/viewer/core/pdf.worker.min.js',
+            target: 'flipbook',
+            display: 'double',
+            $: $
+        });
+    })($pdf);
+</script>

theme/rd.dnssash/rb.custom/pdfviewer/skins/main.php

@@ -0,0 +1,21 @@
+<div id="flipbook"></div>
+
+<script src="/viewer/core/jquery-3.7.1.min.js"></script>
+<script>const $pdf = jQuery.noConflict(true);</script>
+
+<script src="/viewer/core/turn.min.js"></script>
+<script src="/viewer/core/pdf.min.js"></script>
+<script src="/viewer/core/viewer.core.js"></script>
+
+<script>
+    (function($){
+        PDFViewer.init({
+            mode: 'main',
+            pdf: '/data/intro.pdf',
+            worker: '/viewer/core/pdf.worker.min.js',
+            target: 'flipbook',
+            maxPages: 4,
+            $: $
+        });
+    })($pdf);
+</script>