first commit 2
This commit is contained in:
@@ -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();
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})();
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user