[file view] improvement

wendixiang · Mar 11, 2017 · b697f72 · b697f72
1 parent b42d11c
commit b697f72
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 149 deletions.
diff --git a/media/css/file_view_extra.css b/media/css/file_view_extra.css
@@ -29,6 +29,10 @@
     background:#f4f4f4;
     border:1px solid #ededed;
     margin-top:12px;
+    height:10000px;
+}
+body {
+    overflow:hidden;
 }
 @media (max-width:950px) {
     #file-view {

diff --git a/seahub/templates/shared_file_view.html b/seahub/templates/shared_file_view.html
@@ -75,9 +75,11 @@ <h3>{% trans "Save To:" %}</h3>
 });
 
 {% if filetype == 'PDF' and use_pdfjs and not err %}
+{% elif filetype == 'Image' and not err %}
 {% else %}
 function setFileViewAreaHeight() {
-    var file_view = $('#file-view');
+    $('body').css({'overflow':'auto'});
+    var file_view = $('#file-view').css({'height': 'auto'});
     if ($(window).height() > file_view.outerHeight(true) + file_view.offset().top) {
         file_view.outerHeight($(window).height() - file_view.offset().top);
     }

diff --git a/seahub/templates/snippets/file_content_js.html b/seahub/templates/snippets/file_content_js.html
@@ -58,79 +58,7 @@
 {% endif %}
 
 {% if filetype == 'PDF' and use_pdfjs %}
-function getOutputScale(ctx) {
-    var devicePixelRatio = window.devicePixelRatio || 1;
-    var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
-                          ctx.mozBackingStorePixelRatio ||
-                          ctx.msBackingStorePixelRatio ||
-                          ctx.oBackingStorePixelRatio ||
-                          ctx.backingStorePixelRatio || 1;
-    var pixelRatio = devicePixelRatio / backingStoreRatio;
-    return {
-        sx: pixelRatio,
-        sy: pixelRatio,
-        scaled: pixelRatio !== 1
-    };
-}
-try {
-    PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.worker.js';
-    $('#file-view').html('<div id="pdf"><span class="loading-icon loading-tip"></span></div>');
-    PDFJS.getDocument("{{ raw_path|escapejs }}").then(function(pdf) {
-        if (pdf.numPages > 50) {
-            feedback("{% trans "This file has more than 50 pages, and only the first 50 will be shown here." %}", 'info');
-        }
-
-        var $loadingTip = $('#pdf .loading-tip');
-
-        // show at most 50 pages
-        var shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;
-
-        var getPageAndRender = function (pageNumber) {
-            pdf.getPage(pageNumber).then(function(page) {
-                var scale = 1.5;
-                var viewport = page.getViewport(scale);
-
-                var $canvas = $('<canvas class="pdf-page"></canvas>');
-                var canvas = $canvas[0];
-
-                var ctx = canvas.getContext('2d', {alpha: false});
-                var outputScale = getOutputScale(ctx);
-
-                var width = Math.floor(viewport.width);
-                var height = Math.floor(viewport.height);
-
-                canvas.width = width * outputScale.sx;
-                canvas.height = height * outputScale.sy;
-                canvas.style.width = width + 'px';
-                canvas.style.height = height + 'px';
-
-                if (outputScale.scaled) {
-                    ctx.scale(outputScale.sx, outputScale.sy);
-                }
-
-                $loadingTip.before($canvas);
-                page.render({
-                    canvasContext: ctx,
-                    viewport: viewport
-                });
-
-                if (pageNumber < shownPageCount) {
-                    pageNumber++;
-                    getPageAndRender(pageNumber);
-                } else {
-                    // the last page
-                    $loadingTip.hide();
-                }
-            });
-        };
-
-        // start from page 1
-        getPageAndRender(1);
-    });
-
-} catch(e) {
-    $('#file-view').html('<div id="file-view-tip"><p>{% trans "You can use IE 10 or other browsers, for example, Firefox, to view it online." %}</p></div>');
-}
+    {% include 'snippets/pdfjs_file_viewer.html' %}
 {% endif %}
 
 {% if filetype == 'Video' %}
@@ -147,6 +75,7 @@
       $('#file-view').html('<div class="audio-container"><audio src="{{raw_path}}" width="500" height="30"></audio></div>');
 $('audio').mediaelementplayer(/* Options */);
 {% endif %}
+
 {% if filetype == 'Unknown' %}
 $('#file-view').html('<div id="file-view-tip"></div>');
 {% endif %}

diff --git a/seahub/templates/snippets/pdfjs_file_viewer.html b/seahub/templates/snippets/pdfjs_file_viewer.html
@@ -0,0 +1,92 @@
+{% load i18n %}
+
+function getOutputScale(ctx) {
+    var devicePixelRatio = window.devicePixelRatio || 1;
+    var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
+                          ctx.mozBackingStorePixelRatio ||
+                          ctx.msBackingStorePixelRatio ||
+                          ctx.oBackingStorePixelRatio ||
+                          ctx.backingStorePixelRatio || 1;
+    var pixelRatio = devicePixelRatio / backingStoreRatio;
+    return {
+        sx: pixelRatio,
+        sy: pixelRatio,
+        scaled: pixelRatio !== 1
+    };
+}
+
+function setFileViewAreaHeight() {
+    $('body').css({'overflow':'auto'});
+    var file_view = $('#file-view').css({'height': 'auto'});
+    if ($(window).height() > file_view.outerHeight(true) + file_view.offset().top) {
+        file_view.outerHeight($(window).height() - file_view.offset().top);
+    }
+}
+
+try {
+    PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.worker.js';
+    $('#file-view').html('<div id="pdf"><span class="loading-icon loading-tip"></span></div>');
+    PDFJS.getDocument("{{ raw_path|escapejs }}").then(function(pdf) {
+        if (pdf.numPages > 50) {
+            feedback("{% trans "This file has more than 50 pages, and only the first 50 will be shown here." %}", 'info');
+        }
+
+        var $loadingTip = $('#pdf .loading-tip');
+
+        // show at most 50 pages
+        var shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;
+
+        var getPageAndRender = function (pageNumber) {
+            pdf.getPage(pageNumber).then(function(page) {
+                var scale = 1.5;
+                var viewport = page.getViewport(scale);
+                var $canvas = $('<canvas class="pdf-page"></canvas>');
+                var canvas = $canvas[0];
+
+                var ctx = canvas.getContext('2d', {alpha: false});
+                var outputScale = getOutputScale(ctx);
+
+                var width = Math.floor(viewport.width);
+                var height = Math.floor(viewport.height);
+
+                canvas.width = width * outputScale.sx;
+                canvas.height = height * outputScale.sy;
+                canvas.style.width = width + 'px';
+                canvas.style.height = height + 'px';
+
+                if (outputScale.scaled) {
+                    ctx.scale(outputScale.sx, outputScale.sy);
+                }
+
+                $loadingTip.before($canvas);
+                page.render({
+                    canvasContext: ctx,
+                    viewport: viewport
+                });
+
+                // after rendering the first page
+                if (pageNumber == 1) {
+                    setFileViewAreaHeight();
+                }
+
+                if (pageNumber < shownPageCount) {
+                    pageNumber++;
+                    getPageAndRender(pageNumber);
+                } else {
+                    // the last page
+                    $loadingTip.hide();
+                }
+            });
+        };
+
+        // start from page 1
+        getPageAndRender(1);
+    });
+
+} catch(e) {
+    var tip = "{% trans "You can use IE 10 or other browsers, for example, Firefox, to view it online." %}";
+    $('#file-view').html('<div id="file-view-tip"><p>' + tip + '</p></div>');
+    setFileViewAreaHeight();
+}
+
+$(window).resize(setFileViewAreaHeight);
diff --git a/seahub/templates/view_file_base.html b/seahub/templates/view_file_base.html
@@ -251,9 +251,11 @@ <h3 class="right-side-panel-title">{% trans "Comments" %}</h3>
 $(window).load(setToolbarPos).resize(setToolbarPos);
 
 {% if filetype == 'PDF' and use_pdfjs and not err %}
+{% elif filetype == 'Image' and not err %}
 {% else %}
 function setFileViewAreaHeight() {
-    var file_view = $('#file-view');
+    $('body').css({'overflow':'auto'});
+    var file_view = $('#file-view').css({'height': 'auto'});
     if ($(window).height() > file_view.outerHeight(true) + file_view.offset().top) {
         file_view.outerHeight($(window).height() - file_view.offset().top);
     }

diff --git a/seahub/templates/view_file_pdf.html b/seahub/templates/view_file_pdf.html
@@ -26,81 +26,10 @@
 {% else %}
 <script type="text/javascript" src="{{MEDIA_URL}}js/pdf.js"></script>
 <script type="text/javascript">
-function getOutputScale(ctx) {
-    var devicePixelRatio = window.devicePixelRatio || 1;
-    var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
-                          ctx.mozBackingStorePixelRatio ||
-                          ctx.msBackingStorePixelRatio ||
-                          ctx.oBackingStorePixelRatio ||
-                          ctx.backingStorePixelRatio || 1;
-    var pixelRatio = devicePixelRatio / backingStoreRatio;
-    return {
-        sx: pixelRatio,
-        sy: pixelRatio,
-        scaled: pixelRatio !== 1
-    };
-}
-try {
-    PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.worker.js';
-    $('#file-view').html('<div id="pdf"><span class="loading-icon loading-tip"></span></div>');
-    PDFJS.getDocument("{{ raw_path|escapejs }}").then(function(pdf) {
-        if (pdf.numPages > 50) {
-            feedback("{% trans "This file has more than 50 pages, and only the first 50 will be shown here." %}", 'info');
-        }
-
-        var $loadingTip = $('#pdf .loading-tip');
-
-        // show at most 50 pages
-        var shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;
-
-        var getPageAndRender = function (pageNumber) {
-            pdf.getPage(pageNumber).then(function(page) {
-                var scale = 1.5;
-                var viewport = page.getViewport(scale);
-                var $canvas = $('<canvas class="pdf-page"></canvas>');
-                var canvas = $canvas[0];
-
-                var ctx = canvas.getContext('2d', {alpha: false});
-                var outputScale = getOutputScale(ctx);
-
-                var width = Math.floor(viewport.width);
-                var height = Math.floor(viewport.height);
-
-                canvas.width = width * outputScale.sx;
-                canvas.height = height * outputScale.sy;
-                canvas.style.width = width + 'px';
-                canvas.style.height = height + 'px';
-
-                if (outputScale.scaled) {
-                    ctx.scale(outputScale.sx, outputScale.sy);
-                }
-
-                $loadingTip.before($canvas);
-                page.render({
-                    canvasContext: ctx,
-                    viewport: viewport
-                });
-
-                if (pageNumber < shownPageCount) {
-                    pageNumber++;
-                    getPageAndRender(pageNumber);
-                } else {
-                    // the last page
-                    $loadingTip.hide();
-                }
-            });
-        };
-
-        // start from page 1
-        getPageAndRender(1);
-    });
-
-} catch(e) {
-    var tip = "{% trans "You can use IE 10 or other browsers, for example, Firefox, to view it online." %}";
-    $('#file-view').html('<div id="file-view-tip"><p>' + tip + '</p></div>');
-}
+    {% include 'snippets/pdfjs_file_viewer.html' %}
 </script>
 {% endif %}
+
 {% endif %}
 
 {% endblock %}
diff --git a/seahub/templates/view_history_file.html b/seahub/templates/view_history_file.html
@@ -35,9 +35,11 @@ <h2 class="file-view-hd">{{file_name}}</h2>
 });
 
 {% if filetype == 'PDF' and use_pdfjs and not err %}
+{% elif filetype == 'Image' and not err %}
 {% else %}
 function setFileViewAreaHeight() {
-    var file_view = $('#file-view');
+    $('body').css({'overflow':'auto'});
+    var file_view = $('#file-view').css({'height': 'auto'});
     if ($(window).height() > file_view.outerHeight(true) + file_view.offset().top) {
         file_view.outerHeight($(window).height() - file_view.offset().top);
     }