added markdown file preview;improved file-view ui;modified pdf view

2025-09-04 08:28:11 +00:00 · 2012-07-27 19:53:49 +08:00
parent cc4211d284
commit 0207e1e162
5 changed files with 106 additions and 13 deletions
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1,8 +1,12 @@
 body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,pre,blockquote,form,input,textarea,button,img { margin:0; padding:0; }
-ul > li { list-style:none; }
+ul { list-style:none; }
 a { color:#ee8833; text-decoration:none; font-weight:bold; }
 a:hover { color: #ff9933; text-decoration: underline; }
 img { border:none; }
+h1 {
+    font-size:24px;
+    margin:15px 0 8px;
+}
 h2 { font-size:18px; color:#808; }
 h3 { font-size:15px; color:#808; font-weight:normal; margin:12px 0 2px; }
 h4 { font-size:14px; color:#000; font-weight:normal; margin:2px 0 0; }
@@ -64,6 +68,14 @@ input[type="file"] {
    background:#ebebe4;
 }
 label { display: inline-block; margin:2px 0px; }
+iframe {
+    display:block;
+    width:100%;
+}
+pre {
+    white-space:pre-wrap;
+    word-wrap: break-word;
+}
 /* table */
 table {
    border-spacing: 0;
@@ -687,15 +699,12 @@ table img {
 }
 #file-view {
    margin-top:20px;
-    padding:5px;
+    padding:3px;
    background:#dedede;
    border-radius:3px;
    -moz-border-radius:3px;
 }
 #docu-view {
-    white-space:pre-wrap;
-    word-wrap: break-word;
-    width:928px;
    padding: 5px;
    min-height: 200px;
    border: 1px solid #ccc;
@@ -707,7 +716,8 @@ table img {
 }
 #docu-view,
 #svg-view,
-#pdf {
+#pdf,
+#md-view {
    background:#fff;
 }
 #svg-view {
@@ -740,6 +750,54 @@ table img {
    border-radius:3px;
    -moz-border-radius:3px;
 }
+#md-view {
+    padding:30px;
+    border:1px solid #ccc;
+}
+#md-view h3 {
+    color:#000;
+    font-weight:bold;
+    margin:10px 0 4px;
+}
+#md-view p {
+    margin-bottom:3px;
+}
+#md-view ul {
+    list-style-type:disc;
+    padding-left:2em;
+    margin:4px 0;
+}
+#md-view code {
+    font-size:12px;
+    white-space: nowrap;
+    padding: 1px 5px 0;
+    background-color: #F8F8F8;
+    border: 1px solid #dadada;
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    margin: 0 2px;
+}
+#md-view pre {
+    font-size:13px;
+    padding:5px 10px;
+    background:#f8f8f8;
+    border:1px solid #ddd;
+    border-radius:3px;
+    -moz-border-radius:3px;
+    -webkit-border-radius:3px;
+    margin:5px 0;
+}
+#md-view pre code {
+    white-space:pre-wrap;
+    padding:0;
+    margin:0;
+    border:none;
+}
+#md-view a {
+    font-weight:normal;
+}
+
 /* shareadmin */
 .view-link-alert p {
    display: inline-block;
--- a/media/js/showdown.js
+++ b/media/js/showdown.js
--- a/media/pdf_full_view/view.js
+++ b/media/pdf_full_view/view.js
@@ -22,7 +22,7 @@ var RenderingStates = {


 var mozL10n = document.mozL10n || document.webL10n;
-location.hash = '#locale=zh-CN';//enable l10n
+//location.hash = '#locale=zh-CN';//enable l10n

 function getFileName(url) {
  var anchor = url.indexOf('#');
--- a/templates/repo_file_get.html
+++ b/templates/repo_file_get.html
@@ -19,7 +19,7 @@
        $('#file-view').html('<img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" />').css({'text-align':'center', 'padding':'30px 0'});
 {% endif %}
 {% if filetype == 'SVG' %}
-        $('#file-view').html('<iframe src="{{ raw_path }}" frameborder="0" width="940" id="svg-view"></iframe>');
+$('#file-view').html('<div><iframe src="{{ raw_path }}" frameborder="0" id="svg-view"></iframe></div>');
 {% endif %}
 {% if filetype == 'Document' %}
        var uuid = '';
@@ -32,7 +32,7 @@
                contentType: 'application/json; charset=utf-8',
                success: function(data) {
                    if (data.length > 0) {
-                        $('#file-view').html('<iframe src="' + data[0]['doc_src'] + '" frameborder="0" width="940" id="doc-view"></iframe>');
+                        $('#file-view').html('<div><iframe src="' + data[0]['doc_src'] + '" frameborder="0" id="doc-view"></iframe></div>');
                    }
                },
                error: function(xhr, ajaxOptions, thrownError) {
@@ -92,7 +92,7 @@
        $.ajaxSetup({cache:true});
        $.getScript('{{MEDIA_URL}}js/pdf.js', function() {
        PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.js';
-        $('#file-view').html('<div id="pdf"><img src="{{ MEDIA_URL }}pdf_full_view/images/loading-icon.gif" alt="加载中..." id="pdf-loading" style="margin-top:20px;" /><div id="pdf-op-bar" class="vh"><button id="prev">上一页</button><button id="next">下一页</button><span id="pdf-page"><label for="page-number">第</label> <input type="number" id="page-number" value="1" min="1"></input> / <span id="page-nums"></span> 页</span><button id="full-screen">全屏</button></div><canvas data="{{ raw_path }}" id="pdf-view" class="vh"></canvas></div>').css({'text-align':'center', 'padding':'3px'});
+        $('#file-view').html('<div id="pdf"><img src="{{ MEDIA_URL }}pdf_full_view/images/loading-icon.gif" alt="加载中..." id="pdf-loading" style="margin-top:20px;" /><div id="pdf-op-bar" class="vh"><button id="prev">上一页</button><button id="next">下一页</button><span id="pdf-page"><label for="page-number">第</label> <input type="number" id="page-number" value="1" min="1"></input> / <span id="page-nums"></span> 页</span><button id="full-screen">全屏</button></div><canvas data="{{ raw_path }}" id="pdf-view" class="vh"></canvas></div>').css({'text-align':'center'});
        var seahub_getPage = function (pdf, page_number) {
            pdf.getPage(page_number).then(function(page) {
                var scale = 1.5;
@@ -143,6 +143,23 @@
      });
      });
 {% endif %}
-{% if filetype == 'Unknown' %}
-        $('#file-view').html('<p>该类型文件无法在线查看。<a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download">下载</a></p>');
+
+{% if filetype == 'Markdown' %}
+$.ajaxSetup({cache:true});
+$.getScript('{{MEDIA_URL}}js/showdown.js', function() {
+    $.ajax({
+        url: '{{ raw_path }}',
+        dataType: 'text',
+        cache: false,
+        success: function(data) {
+            var converter = new Showdown.converter();
+            $('#file-view').html('<div id="md-view">' + converter.makeHtml(data) + '</div>');
+            $('#md-view').children(':first').css('margin-top', '0');
+        }
+    });
+})
+{% endif %}
+
+{% if filetype == 'Unknown' %}
+$('#file-view').html('<p>该类型文件无法在线查看。<a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download">下载</a></p>');
 {% endif %}
--- a/utils.py
+++ b/utils.py
@@ -19,11 +19,12 @@ import settings
 EMPTY_SHA1 = '0000000000000000000000000000000000000000'

 PREVIEW_FILEEXT = {
-    'Text': ('ac', 'am', 'bat', 'c', 'cc', 'cmake', 'cpp', 'css', 'diff', 'h', 'html', 'java', 'js', 'json', 'less', 'make', 'markdown', 'org', 'php', 'properties', 'py', 'rb', 'scala', 'script', 'sh', 'sql', 'txt','text', 'vi', 'vim'),
+    'Text': ('ac', 'am', 'bat', 'c', 'cc', 'cmake', 'cpp', 'css', 'diff', 'h', 'html', 'java', 'js', 'json', 'less', 'make', 'org', 'php', 'properties', 'py', 'rb', 'scala', 'script', 'sh', 'sql', 'txt','text', 'vi', 'vim'),
    'Image': ('gif', 'jpeg', 'jpg', 'png'),
    'SVG': ('svg',),
    'Document': ('doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'),
    'PDF': ('pdf',),
+    'Markdown': ('markdown', 'md'),
 }

 def go_permission_error(request, msg=None):