added fonts, pdf

akarpov/files/previews/__init__.py

@@ -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,14 +38,24 @@
         "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 = {
+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,
@@ -63,5 +74,8 @@
         "jar": application.zip.view,
         "mpeg": video.mp4.view,
         "oga": audio.oga.view,
-    "otf": font.otf.view,
-} | source_code
+        "pdf": application.pdf.view,
+    }
+    | source_code
+    | fonts_ext
+)

akarpov/files/previews/application/__init__.py

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

akarpov/files/previews/application/pdf.py

@@ -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

akarpov/files/previews/font/__init__.py

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

akarpov/files/previews/font/basic.py

@@ -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]}");
         """
         + """
     }