Fix #1254: Enhance PDF Preview on iOS devices via external PDF renderer (PDFJS)

CHANGE.md

@@ -5,6 +5,7 @@ Change Log: `bootstrap-fileinput`
 
 **Date:** _work in process_
 
+- (enh #1254): Enhance PDF Preview on iOS devices via external PDF renderer (PDFJS).
 - (bug #1242): Correct drop zone enabling check for ajax uploads.
 - (bug #1232): Correct RTL input group button styling.
 - (enh #1228): Enhance and correct preview refresh for various scenarios.

css/fileinput.css

@@ -237,6 +237,10 @@
     height: 160px;
 }
 
+.krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
+    width: 400px;
+}
+
 .krajee-default.file-preview-frame .file-thumbnail-footer {
     height: 70px;
 }

js/fileinput.js

@@ -761,6 +761,9 @@
             tOther = '<div class="kv-preview-data file-preview-other-frame"' + tStyle + '>\n' + $h.DEFAULT_PREVIEW + '\n</div>\n';
             tZoomCache = '<div class="kv-zoom-cache" style="display:none">{zoomContent}</div>';
             vDefaultDim = {width: "100%", height: "100%", 'min-height': "480px"};
+            if (self._isPdfRendered()) {
+                tPdf = self.pdfRendererTemplate.replace('{renderer}', self.pdfRendererUrl);
+            }
             self.defaults = {
                 layoutTemplates: {
                     main1: tMain1,
@@ -817,7 +820,7 @@
                     audio: {width: "100%", height: "30px"},
                     flash: {width: "213px", height: "160px"},
                     object: {width: "213px", height: "160px"},
-                    pdf: {width: "213px", height: "160px"},
+                    pdf: {width: "100%", height: "160px"},
                     other: {width: "213px", height: "160px"}
                 },
                 previewSettingsSmall: {
@@ -941,6 +944,9 @@
                     if (key === 'generic' || key === 'image' || key === 'html' || key === 'text') {
                         tagBef = tags.tagBefore1;
                     }
+                    if (self._isPdfRendered()) {
+                        tagBef = tagBef.replace('kv-file-content', 'kv-file-content kv-pdf-rendered');
+                    }
                     self.previewTemplates[key] = tagBef + value + tagAft;
                 }
             });
@@ -1128,6 +1134,11 @@
             };
             self.previewCache.init();
         },
+        _isPdfRendered: function() {
+            var self = this, useLib = self.usePdfRenderer, 
+                flag = typeof useLib === "function" ? useLib() : !!useLib;
+            return flag && self.pdfRendererUrl;
+        },
         _handler: function ($el, event, callback) {
             var self = this, ns = self.namespace, ev = event.split(' ').join(ns + ' ') + ns;
             if (!$el || !$el.length) {
@@ -4446,7 +4457,12 @@
             fullscreen: 'Toggle full screen',
             borderless: 'Toggle borderless mode',
             close: 'Close detailed preview'
-        }
+        },
+        usePdfRenderer: function() {
+            return !!navigator.userAgent.match(/(iPod|iPhone|iPad)/);
+        },
+        pdfRendererUrl: '',
+        pdfRendererTemplate: '<iframe class="kv-preview-data file-preview-pdf" src="{renderer}?file={data}" {style}></iframe>'
     };
 
     $.fn.fileinput.Constructor = FileInput;

scss/fileinput.scss

@@ -310,6 +310,9 @@ input[type=file].file-loading {
         .kv-file-content {
             width: multiply($pad, 42.6);
             height: multiply($pad, 32);
+            &.kv-pdf-rendered {
+                width: 400px;
+            }
         }
         .file-thumbnail-footer {
             height: multiply($pad, 14);