[img_view] enable view prev/next & improved ui

media/css/seahub.css

@@ -1480,8 +1480,9 @@ textarea:-moz-placeholder {/* for FF */
     font-family: Consolas,"Liberation Mono",Courier,monospace;/*override .ace_editor*/
     min-height: 200px;
 }
-#docu-view .ace_gutter {
+#img-prev-next {
-    height:auto;/*for ie8, in case that docu has only a few lines*/
+    font-size:1.1em;
+    margin-bottom:5px;
 }
 #image-view {
     padding:1px;

templates/file_view.html

@@ -83,7 +83,9 @@
             {% endif %}
             <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download" id="download">{% trans "Download"%}</button>
         </div>
+        {% with page='file_view' %}
         {% include 'snippets/file_content_html.html' %}
+        {% endwith %}
     </div>
 
     <form id="link-send-form" action="" method="post" class="hide">
@@ -151,6 +153,20 @@
 {% block extra_script %}
 {% include "snippets/file_view_js.html" %}
 <script type="text/javascript">
+{% if filetype == 'Image' %}
+$('body').bind('keydown', function(e) {
+    {% if img_prev %}
+    if (e.keyCode == 37) { // press '<-'
+        location.href = $('#img-prev').attr('href');
+    }
+    {% endif %}
+    {% if img_next %}
+    if (e.keyCode == 39) { // press '->'
+        location.href = $('#img-next').attr('href');
+    }
+    {% endif %}
+})
+{% endif %}
 $('#view-original, #download').click(function() {
     window.open($(this).attr('data'));
 });

templates/snippets/file_content_html.html

@@ -1,7 +1,9 @@
-{%comment%}
+{% load i18n %}
+{% load url from future %}
+{% comment %}
 content of files that can be viewed online shows here.
 For details please refer to 'snippets/file_content_js.html'.
-{%endcomment%}
+{% endcomment %}
 <div id="file-view">
     {% if not err %}
         {% if filetype == 'Text' or filetype == 'Sf' %}
@@ -15,7 +17,22 @@ For details please refer to 'snippets/file_content_js.html'.
         {% endif %}
 
         {% if filetype == 'Image' %}
-        <img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" />
+            {% if page == 'file_view'%}
+            {% if img_prev or img_next %}
+            <div id="img-prev-next">
+                {% if img_prev %}
+                <a href="{% url 'repo_view_file' repo.id %}?p={{img_prev|urlencode}}" id="img-prev" title="{% trans 'you can also press ← ' %}">{% trans "prev" %}</a>
+                {% endif %}
+                {% if img_prev and img_next %}
+                <span>/</span>
+                {% endif %}
+                {% if img_next %}
+                <a href="{% url 'repo_view_file' repo.id %}?p={{img_next|urlencode}}" id="img-next" title="{% trans 'you can also press → ' %}">{% trans "next" %}</a>
+                {% endif %}
+            </div>
+            {% endif %}
+            {% endif %}
+            <img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" class="vh" />
         {% endif %}
     {% else %}
     <div id="file-view-tip">

templates/snippets/file_content_js.html

@@ -17,11 +17,21 @@
 {% endif %}
 
 {% if filetype == 'Image' %}
-    window.onload = function() {
+$(window).load(function() {
-        if ($('#image-view').width() > $('#file-view').width()) {
+    var img_ht = $('#image-view').height();
-            $('#image-view').css('width', $('#file-view').width() - 4);
+    var file_view_ht = parseInt($('#file-view').css('min-height'));
-        }
+    var prev_next_ht = 0;
+    if ($('#img-prev-next').length > 0) {
+        prev_next_ht = $('#img-prev-next').outerHeight(true);
     }
+    if (img_ht < file_view_ht - prev_next_ht) {
+        $('#image-view').css({'margin-top':(file_view_ht - img_ht - prev_next_ht)/2});
+    }
+    if ($('#image-view').outerWidth() > 950) { // for ie 6
+        $('#image-view').css('width', 946);
+    }
+    $('#image-view').removeClass('vh');
+});
 {% endif %}
 
 {% if filetype == 'SVG' %}

views.py

@@ -1353,6 +1353,30 @@ def repo_view_file(request, repo_id):
     err = ''
     file_content = ''
     swf_exists = False
+    img_prev = None
+    img_next = None
+    if filetype == 'Image' and not view_history:
+        parent_dir = os.path.dirname(path)
+        try:
+            dirs = seafserv_threaded_rpc.list_dir_by_path(current_commit.id, parent_dir.encode('utf-8'))
+        except SearpcError, e:
+            raise Http404
+
+        img_list = []
+        for dirent in dirs:
+            if not stat.S_ISDIR(dirent.props.mode):
+                fltype, flext = valid_previewed_file(dirent.obj_name)
+                if fltype == 'Image':
+                    img_list.append(dirent.obj_name)
+
+        if len(img_list) > 1:
+            img_list.sort(lambda x, y : cmp(x.lower(), y.lower()))
+            cur_img_index = img_list.index(u_filename) 
+            if cur_img_index != 0:
+                img_prev = os.path.join(parent_dir, img_list[cur_img_index - 1])
+            if cur_img_index != len(img_list) - 1:
+                img_next = os.path.join(parent_dir, img_list[cur_img_index + 1])
+
     if filetype == 'Text' or filetype == 'Markdown' or filetype == 'Sf':
         err, file_content, encoding = repo_file_get(raw_path)
     elif filetype == 'Document':
@@ -1479,6 +1503,8 @@ def repo_view_file(request, repo_id):
             'repo_group_str': repogrp_str,
             'is_starred': is_starred,
             'user_perm': user_perm,
+            'img_prev': img_prev,
+            'img_next': img_next,
             }, context_instance=RequestContext(request))
 
 def file_comment(request):