[file view] added online view for SVG files

media/css/seahub.css

@@ -2783,8 +2783,11 @@ button.sf-dropdown-toggle:focus {
     font-size:0;
     line-height:0;
 }
+#svg-view {
+    max-width:calc(100% - 4px);
+    max-height:calc(100% - 4px);
+}
 #docu-view,
-#svg-view,
 #md-view,
 #md-edit {
     background:#fff;
@@ -2825,10 +2828,6 @@ button.sf-dropdown-toggle:focus {
 .anchor:hover {
    text-decoration:none;
 }
-#svg-view {
-    min-height:500px;/*for ff*/
-}
-#svg-view,
 #pdf {
     width:950px;
     margin:0 auto;
@@ -2856,7 +2855,6 @@ button.sf-dropdown-toggle:focus {
 #md-view {
     padding:40px 96px;
 }
-/* for repo, file_view page. */
 #side-toolbar {
     position:fixed;
     right:0;

seahub/templates/snippets/file_content_html.html

@@ -4,7 +4,7 @@
 content of files that can be viewed online shows here.
 For details please refer to 'snippets/file_content_js.html'.
 {% endcomment %}
-<div id="file-view" {% if filetype == 'Image' and not err %}class="image-file-view"{% endif %}>
+<div id="file-view" {% if filetype == 'Image' or filetype == 'SVG' and not err %}class="image-file-view"{% endif %}>
     {% include 'snippets/file_encoding.html' %}
     {% if not err %}
         {% if filetype == 'Text' or filetype == 'Markdown' %}
@@ -32,6 +32,11 @@ For details please refer to 'snippets/file_content_js.html'.
             <img src="" alt="{{ file_name }}" id="image-view" class="hide" />
         {% endif %}
 
+        {% if filetype == 'SVG' %}
+            <span class="loading-icon"></span>
+            <img src="{{raw_path}}" alt="{{ file_name }}" id="svg-view" class="hide" />
+        {% endif %}
+        
         {% if filetype == 'Document' or filetype == 'PDF' and not use_pdfjs %} 
             {% include 'snippets/office_convert_html.html' %}
         {% endif %}

seahub/templates/snippets/file_content_js.html

@@ -21,11 +21,14 @@
 {% endif %}
 
 {% if filetype == 'SVG' %}
-    if (!$.browser.mozilla && !$.browser.safari && !($.browser.msie && parseInt($.browser.version) > 8)) {
-        $('#file-view').html('<div id="file-view-tip"><p>' + "{% trans "To view it online, you can use firefox, chrome or IE 9." %}" + '</p></div>');
-    } else {
-        $('#file-view').html('<iframe src="{{ raw_path }}" frameborder="0" id="svg-view"></iframe>');
+function setFileViewAreaHeight() {
+    var $fileView = $('#file-view');
+    $fileView.outerHeight($(window).height() - $fileView.offset().top);
 }
+setFileViewAreaHeight();
+$(window).resize(setFileViewAreaHeight);
+$('#svg-view').prev('.loading-icon').hide();
+$('#svg-view').show();
 {% endif %}
 
 {% if filetype == 'Markdown' %}

seahub/templates/snippets/file_view_style.html

@@ -15,6 +15,12 @@ body { overflow:hidden; }
 </style>
 {% endif %}
 
+{% if filetype == 'SVG' %}
+<style type="text/css">
+#file-view { text-align:center; }
+</style>
+{% endif %}
+
 {% if filetype == 'Audio' %}
 <link rel="stylesheet" href="{{MEDIA_URL}}css/mediaelementplayer.css" />
 {% endif %}

seahub/templates/view_file_base.html

@@ -92,7 +92,7 @@
         <div id="file-discussions" class="right-side-panel"></div>
     </div>
 
-    <div id="file-view" {% if filetype == 'Image' and not err %}class="image-file-view"{% endif %}>
+    <div id="file-view" class="{% block file_view_extra_class %}{% endblock %}">
       {% if err %}
         <div id="file-view-tip">
         {% if err != 'invalid extension' %}

seahub/templates/view_file_image.html

@@ -9,6 +9,8 @@ body { overflow:hidden; }
 </style>
 {% endblock %}
 
+{% block file_view_extra_class %}image-file-view{% endblock %}
+
 {% block file_view %}
     {% if img_prev %}
     <a href="{% url 'view_lib_file' repo.id img_prev %}" id="img-prev" title="{% trans 'you can also press ← ' %}"><span class="icon-chevron-left"></span></a>

seahub/templates/view_file_svg.html

@@ -1,12 +1,30 @@
 {% extends 'view_file_base.html' %}
 {% load i18n %}
 
+{% block extra_style %}{{ block.super }}
+<style type="text/css">
+#file-view {
+    text-align:center;
+}
+</style>
+{% endblock %}
+
+{% block file_view_extra_class %}image-file-view{% endblock %}
+
+{% block file_view %}
+<span class="loading-icon"></span>
+<img src="{{ raw_path }}" alt="{{ filename }}" id="svg-view" class="hide" />
+{% endblock %}
+
 {% block extra_script %}{{ block.super }}
 <script type="text/javascript">
-    if (!$.browser.mozilla && !$.browser.safari && !($.browser.msie && parseInt($.browser.version) > 8)) {
-        $('#file-view').html('<div id="file-view-tip"><p>{% trans "To view it online, you can use firefox, chrome or IE 9." %}</p></div>');
-    } else {
-        $('#file-view').html('<iframe src="{{ raw_path }}" frameborder="0" id="svg-view"></iframe>');
+function setFileViewAreaHeight() {
+    var $fileView = $('#file-view');
+    $fileView.outerHeight($(window).height() - $fileView.offset().top);
 }
+setFileViewAreaHeight();
+$(window).resize(setFileViewAreaHeight);
+$('#svg-view').prev('.loading-icon').hide();
+$('#svg-view').show();
 </script>
 {% endblock %}

seahub/utils/__init__.py

@@ -98,7 +98,7 @@ PREVIEW_FILEEXT = {
     IMAGE: ('gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp'),
     DOCUMENT: ('doc', 'docx', 'ppt', 'pptx', 'odt', 'fodt', 'odp', 'fodp'),
     SPREADSHEET: ('xls', 'xlsx', 'ods', 'fods'),
-    # SVG: ('svg',),
+    SVG: ('svg',),
     PDF: ('pdf',),
     MARKDOWN: ('markdown', 'md'),
     VIDEO: ('mp4', 'ogv', 'webm', 'mov'),