added fonts, pdf

This commit is contained in:
Alexander Karpov 2023-04-17 01:05:51 +03:00
parent 1f2544e357
commit 08cfbc211e
5 changed files with 217 additions and 26 deletions

View File

@ -3,6 +3,7 @@
previews = {
"application": {
"zip": application.zip.view,
"pdf": application.pdf.view,
"java-archive": application.zip.view,
"doc": application.doc.view,
"docx": application.docx.view,
@ -37,31 +38,44 @@
"plain": text.plain.view,
"csv": text.csv.view,
},
"font": {"otf": font.otf.view},
"font": {
"otf": font.basic.view,
"ttf": font.basic.view,
"woff": font.basic.view,
"woff2": font.basic.view,
},
}
source_code = {}
for ext in text.common.language_previews.keys():
source_code[ext] = text.common.view
extensions = {
"mp4": video.mp4.view,
"mp3": audio.basic.view,
"opus": audio.basic.view,
"avif": image.basic.view,
"bmp": image.basic.view,
"jpeg": image.basic.view,
"jpg": image.basic.view,
"ico": image.basic.view,
"mov": video.basic.view,
"ogv": video.basic.view,
"doc": application.doc.view,
"docx": application.docx.view,
"odt": application.odt.view,
"gif": image.gif.view,
"zip": application.zip.view,
"jar": application.zip.view,
"mpeg": video.mp4.view,
"oga": audio.oga.view,
"otf": font.otf.view,
} | source_code
fonts_ext = {}
for ext in font.basic.formats.keys():
fonts_ext[ext] = font.basic.view
extensions = (
{
"mp4": video.mp4.view,
"mp3": audio.basic.view,
"opus": audio.basic.view,
"avif": image.basic.view,
"bmp": image.basic.view,
"jpeg": image.basic.view,
"jpg": image.basic.view,
"ico": image.basic.view,
"mov": video.basic.view,
"ogv": video.basic.view,
"doc": application.doc.view,
"docx": application.docx.view,
"odt": application.odt.view,
"gif": image.gif.view,
"zip": application.zip.view,
"jar": application.zip.view,
"mpeg": video.mp4.view,
"oga": audio.oga.view,
"pdf": application.pdf.view,
}
| source_code
| fonts_ext
)

View File

@ -1 +1 @@
from . import doc, docx, odt, zip # noqa
from . import doc, docx, odt, pdf, zip # noqa

View File

@ -0,0 +1,169 @@
from akarpov.files.models import File
def view(file: File):
static = """
<link href="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/web/pdf_viewer.min.css" rel="stylesheet">
"""
content = (
"""
<header>
<div class="col-auto">
<ul class="navigation">
<li class="navigation__item">
<!-- Navigate to the Previous and Next pages -->
<a href="#" class="previous round" id="prev_page">
<i class="fas fa-arrow-left"></i>
</a>
<!-- Navigate to a specific page -->
<input type="number" value="1" id="current_page" />
<a href="#" class="next round" id="next_page">
<i class="fas fa-arrow-right"></i>
</a>
<!-- Page Info -->
Page
<span id="page_num"></span>
of
<span id="page_count"></span>
</li>
<!-- Zoom In and Out -->
<li class="navigation__item">
<button class="zoom" id="zoom_in">
<i class="fas fa-search-plus"></i>
</button>
<button class="zoom" id="zoom_out">
<i class="fas fa-search-minus"></i>
</button>
</li>
</ul>
</header>
<!-- Canvas to place the PDF -->
<canvas id="canvas" class="canvas__container w-50"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.min.js"></script>
<script>
"""
+ f"""
const pdf = '{file.file.url}';
"""
+ """
const pageNum = document.querySelector('#page_num');
const pageCount = document.querySelector('#page_count');
const currentPage = document.querySelector('#current_page');
const previousPage = document.querySelector('#prev_page');
const nextPage = document.querySelector('#next_page');
const zoomIn = document.querySelector('#zoom_in');
const zoomOut = document.querySelector('#zoom_out');
const initialState = {
pdfDoc: null,
currentPage: 1,
pageCount: 0,
zoom: 1,
};
pdfjsLib
.getDocument(pdf)
.promise.then((data) => {
initialState.pdfDoc = data;
console.log('pdfDocument', initialState.pdfDoc);
pageCount.textContent = initialState.pdfDoc.numPages;
renderPage();
})
.catch((err) => {
alert(err.message);
});
const renderPage = () => {
// Load the first page.
console.log(initialState.pdfDoc, 'pdfDoc');
initialState.pdfDoc
.getPage(initialState.currentPage)
.then((page) => {
console.log('page', page);
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const viewport = page.getViewport({
scale: initialState.zoom,
});
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render the PDF page into the canvas context.
const renderCtx = {
canvasContext: ctx,
viewport: viewport,
};
page.render(renderCtx);
pageNum.textContent = initialState.currentPage;
});
};
const showPrevPage = () => {
if (initialState.pdfDoc === null || initialState.currentPage <= 1)
return;
initialState.currentPage--;
// Render the current page.
currentPage.value = initialState.currentPage;
renderPage();
};
const showNextPage = () => {
if (
initialState.pdfDoc === null ||
initialState.currentPage >= initialState.pdfDoc._pdfInfo.numPages
)
return;
initialState.currentPage++;
currentPage.value = initialState.currentPage;
renderPage();
};
// Button events.
previousPage.addEventListener('click', showPrevPage);
nextPage.addEventListener('click', showNextPage);
currentPage.addEventListener('keypress', (event) => {
if (initialState.pdfDoc === null) return;
// Get the key code.
const keycode = event.keyCode ? event.keyCode : event.which;
if (keycode === 13) {
// Get the new page number and render it.
let desiredPage = currentPage.valueAsNumber;
initialState.currentPage = Math.min(
Math.max(desiredPage, 1),
initialState.pdfDoc._pdfInfo.numPages,
);
currentPage.value = initialState.currentPage;
renderPage();
}
});
zoomIn.addEventListener('click', () => {
if (initialState.pdfDoc === null) return;
initialState.zoom *= 4 / 3;
renderPage();
});
zoomOut.addEventListener('click', () => {
if (initialState.pdfDoc === null) return;
initialState.zoom *= 2 / 3;
renderPage();
});
</script>
"""
)
return static, content

View File

@ -1 +1 @@
from . import otf # noqa
from . import basic # noqa

View File

@ -2,10 +2,18 @@
from akarpov.files.models import File
text = " ".join(string.printable)
formats = {
"ttf": "truetype",
"otf": "opentype",
"woff": "woff",
"woff2": "woff2",
}
def view(file: File):
text = " ".join(string.printable)
name = file.file.path.split("/")[-1].split(".")[0]
extension = file.file.path.split("/")[-1].split(".")[-1]
static = (
"""
<style>
@ -13,7 +21,7 @@ def view(file: File):
"""
+ f"""
font-family: {name};
src: url("{file.file.url}") format("opentype");
src: url("{file.file.url}") format("{formats[extension]}");
"""
+ """
}