Use PDFObject

_config.yml

@@ -923,6 +923,9 @@ vendors:
   algolia_search:
   instant_search:
 
+  # PDF
+  pdfobject:
+
   # Mermaid
   mermaid:
 

_vendors.yml

@@ -118,6 +118,10 @@ instant_search:
   name: instantsearch.js
   version: 4.8.4
   file: dist/instantsearch.production.min.js
+pdfobject:
+  name: pdfobject
+  version: 2.2.4
+  file: pdfobject.min.js
 mermaid:
   name: mermaid
   version: 8.8.2

layout/_third-party/tags/pdf.njk

@@ -1,23 +1,23 @@
 {%- if theme.pdf.enable %}
+{%- set pdfobject_uri = theme.vendors.pdfobject %}
 {%- set pdf_uri = url_for('lib/pdf/web/viewer.html') %}
 <script{{ pjax }}>
-document.querySelectorAll('.pdfobject-container').forEach(element => {
-  const url = element.dataset.target;
-  const pdfOpenParams = {
-    navpanes : 0,
-    toolbar  : 0,
-    statusbar: 0,
-    pagemode : 'thumbs',
-    view     : 'FitH'
-  };
-  const pdfOpenFragment = '#' + Object.entries(pdfOpenParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
-  const fullURL = `{{ pdf_uri }}?file=${encodeURIComponent(url)}${pdfOpenFragment}`;
-
-  if (NexT.utils.supportsPDFs()) {
-    element.innerHTML = `<embed class="pdfobject" src="${url + pdfOpenFragment}" type="application/pdf" style="height: ${element.dataset.height};">`;
-  } else {
-    element.innerHTML = `<iframe src="${fullURL}" style="height: ${element.dataset.height};" frameborder="0"></iframe>`;
-  }
-});
+if (document.querySelectorAll('.pdf-container').length) {
+  NexT.utils.getScript('{{ pdfobject_uri }}', () => {
+    document.querySelectorAll('.pdf-container').forEach(element => {
+      PDFObject.embed(element.dataset.target, element, {
+        pdfOpenParams: {
+          navpanes : 0,
+          toolbar  : 0,
+          statusbar: 0,
+          pagemode : 'thumbs',
+          view     : 'FitH'
+        },
+        PDFJS_URL: '{{ pdf_uri }}',
+        height   : element.dataset.height
+      });
+    });
+  }, window.PDFObject);
+}
 </script>
 {%- endif %}

scripts/tags/pdf.js

@@ -6,5 +6,5 @@
 
 module.exports = ctx => function(args) {
   const theme = ctx.theme.config;
-  return `<div class="pdfobject-container" data-target="${args[0]}" data-height="${args[1] || theme.pdf.height}"></div>`;
+  return `<div class="pdf-container" data-target="${args[0]}" data-height="${args[1] || theme.pdf.height}"></div>`;
 };

source/js/utils.js

@@ -281,13 +281,6 @@ NexT.utils = {
     });
   },
 
-  supportsPDFs: function() {
-    const ua = navigator.userAgent;
-    const supportsPdfMimeType = typeof navigator.mimeTypes['application/pdf'] !== 'undefined';
-    const isIOS = /iphone|ipad|ipod/i.test(ua.toLowerCase());
-    return ua.includes('irefox') || (supportsPdfMimeType && !isIOS);
-  },
-
   getComputedStyle: function(element) {
     const clone = element.cloneNode(true);
     clone.style.position = 'absolute';

test/tags/pdf.js

@@ -14,10 +14,10 @@ describe('pdf', () => {
   });
 
   it('default', () => {
-    pdf(['https://example.com/sample.pdf']).should.eql('<div class="pdfobject-container" data-target="https://example.com/sample.pdf" data-height="500px"></div>');
+    pdf(['https://example.com/sample.pdf']).should.eql('<div class="pdf-container" data-target="https://example.com/sample.pdf" data-height="500px"></div>');
   });
 
   it('custom height', () => {
-    pdf(['https://example.com/sample.pdf', '1000px']).should.eql('<div class="pdfobject-container" data-target="https://example.com/sample.pdf" data-height="1000px"></div>');
+    pdf(['https://example.com/sample.pdf', '1000px']).should.eql('<div class="pdf-container" data-target="https://example.com/sample.pdf" data-height="1000px"></div>');
   });
 });