[preview] Show image file's preview

Conflicts:
	seahub/views/repo.py

media/css/seahub.css

@@ -432,6 +432,33 @@ textarea:-moz-placeholder {/* for FF */
     position:absolute;
     top:-11px;
 }
+.right-outer-caret,
+.right-outer-caret .inner-caret {
+    border-width:10px 0 10px 10px;
+    border-color: transparent transparent transparent #CBCBCB;
+}
+.right-outer-caret {
+    position:absolute;
+    right:-11px;
+}
+.right-outer-caret .inner-caret {
+    border-left-color:#fff;
+    top:-10px;
+    left:-11px;
+}
+.bottom-outer-caret,
+.bottom-outer-caret .inner-caret {
+    border-width:10px 10px 0;
+}
+.bottom-outer-caret {
+    position:absolute;
+    bottom:-11px;
+}
+.bottom-outer-caret .inner-caret {
+    border-top-color:#fff;
+    top:-11px;
+    left:-10px;
+}
 /**** info-item *****/
 .info-item {
     border: 1px solid #eee;
@@ -3304,3 +3331,24 @@ textarea:-moz-placeholder {/* for FF */
     vertical-align:middle;
     line-height:16px;
 }
+
+/* image thumbnail */
+.file-item .thumbnail {
+    cursor: pointer;
+}
+#image-preview {
+    position:absolute;
+    top:0;
+    right:0;
+    bottom:0;
+    left:0;
+    margin:auto;
+}
+#preview-wrap {
+    position:absolute;
+    padding:10px;
+    border:1px solid #c9c9c9;
+    border-radius:5px;
+    background:#fff;
+    z-index:100;
+}

seahub/settings.py

@@ -537,3 +537,4 @@ THUMBNAIL_ROOT = '%s/seahub/thumbnail/thumb/' % PROJECT_ROOT
 
 THUMBNAIL_EXTENSION = 'png'
 THUMBNAIL_DEFAULT_SIZE = '24'
+PREVIEW_DEFAULT_SIZE = '100'

seahub/templates/repo.html

@@ -1265,25 +1265,6 @@ $('.dir-item, .file-item').unbind().hover( // remove previously binded hover han
 
 opOnDirent();
 
-{% if not repo.encrypted and ENABLE_THUMBNAIL %}
-// get thumbnails for image files
-$(function() {
-    $('.not-thumbnail').each(function() {
-        var this_img = $(this),
-            file_name = $(this).parents('tr.file-item').attr('data-name');
-        $.ajax({
-            url: '{% url 'thumbnail_create' repo.id %}?path=' + e(cur_path+file_name),
-            cache: false,
-            dataType: 'json',
-            success: function(data) {
-                this_img.attr("src", data.thumbnail_src);
-            },
-            error: ajaxErrorHandler
-        });
-    });
-});
-{% endif %}
-
 } // function dirOP ends here
 
 dirOP();
@@ -1812,6 +1793,27 @@ $('.file-share, .dir-share', context).click(function() {
     return false;
 });
 
+{% if not repo.encrypted and ENABLE_THUMBNAIL %}
+// get thumbnails for image files
+$(function() {
+    $('.not-thumbnail').each(function() {
+        var this_img = $(this),
+            file_name = $(this).parents('.file-item').attr('data-name');
+        $.ajax({
+            url: '{% url 'thumbnail_create' repo.id %}?path=' + e(cur_path+file_name),
+            cache: false,
+            dataType: 'json',
+            success: function(data) {
+                this_img.attr("src", data.thumbnail_src).load(function() {
+                    $(this).removeClass("not-thumbnail").addClass("thumbnail");
+                });
+            },
+            error: ajaxErrorHandler
+        });
+    });
+});
+{% endif %}
+
 } //function 'opOnDirent' ends here
 
 $('#add-new-file-form, #add-new-dir-form, #rename-form, #mv-form').submit(function() {
@@ -2180,24 +2182,6 @@ $(window).scroll(function() {
                 } else {
                     ele_more.remove();
                 }
-                {% if not repo.encrypted and ENABLE_THUMBNAIL %}
-                // get thumbnails for image files
-                $(function() {
-                    $('.not-thumbnail').each(function() {
-                        var this_img = $(this),
-                            file_name = $(this).parents('tr.file-item').attr('data-name');
-                        $.ajax({
-                            url: '{% url 'thumbnail_create' repo.id %}?path=' + e(cur_path+file_name),
-                            cache: false,
-                            dataType: 'json',
-                            success: function(data) {
-                                this_img.attr("src", data.thumbnail_src);
-                            },
-                            error: ajaxErrorHandler
-                        });
-                    });
-                });
-                {% endif %}
             },
             error: function(xhr, textStatus, errorThrown) {
                 var error;
@@ -2211,7 +2195,8 @@ $(window).scroll(function() {
         });
     }
 });
- // webkit fires 'onpopstate' when page loads, use 'setTimeout' in 'window.onload' to avoid it.
+
+// webkit fires 'onpopstate' when page loads, use 'setTimeout' in 'window.onload' to avoid it.
 window.onload = function() {
     setTimeout(function () {
         if (window.history.pushState) {
@@ -2285,6 +2270,71 @@ function updateCmt() {
     });
 {% endif %}
 
+{% if not repo.encrypted and ENABLE_THUMBNAIL %}
+var timer,
+    default_size = {{PREVIEW_DEFAULT_SIZE}},
+    preview_wrap = $('<div id="preview-wrap"><img id="image-preview" src="" alt=""/><div class="outer-caret right-outer-caret"><div class="inner-caret"></div></div></div>')
+        .appendTo("body")
+        .css({'width':default_size + 'px', 'height':default_size + 'px'})
+        .hide(),
+    image_preview = $("#image-preview"),
+    caret = image_preview.next();
+
+$("#repo-file-list").on({
+    mouseenter: function() {
+        var thumbnail = $(this),
+            file_item = thumbnail.closest('.file-item');
+
+        timer = setTimeout(function () {
+            $.ajax({
+            url: '{% url 'thumbnail_create' repo.id %}?path=' + e(cur_path+file_item.attr('data-name')) + '&size=' + default_size,
+            cache: false,
+            dataType: 'json',
+            success: function(data) {
+                image_preview.attr("src", data.thumbnail_src);
+
+                var file_item_offset = file_item.offset(),
+                    thumbnail_offset = thumbnail.offset(),
+
+                    wrap_width = preview_wrap.outerWidth(),
+                    wrap_padding = parseInt(preview_wrap.css('padding-top')),
+
+                    caret_width = parseInt(caret.css('border-top-width')),
+                    caret_pos_x = (default_size)/2 + wrap_padding - caret_width,
+                    caret_pos_y = default_size + 2 * wrap_padding,
+
+                    wrap_left = file_item_offset.left - wrap_width - caret_width;
+
+                if (wrap_left >= 0) {
+                    caret.removeClass("bottom-outer-caret").addClass("right-outer-caret");
+                    caret.css({'top':caret_pos_x + 'px', 'left':caret_pos_y + 'px'});
+
+                    preview_wrap.css({
+                        'top'  : (thumbnail_offset.top + (thumbnail.height() - wrap_width)/2) + 'px',
+                        'left' : wrap_left + 'px'
+                    }).fadeIn();
+                } else {
+                    caret.removeClass("right-outer-caret")
+                         .addClass("bottom-outer-caret")
+                         .css({'top':caret_pos_y + 'px', 'left':caret_pos_x + 'px'});
+
+                    preview_wrap.css({
+                        'top'  : (file_item_offset.top - wrap_width) - caret_width + 'px',
+                        'left' : (thumbnail_offset.left + (thumbnail.width() - wrap_width)/2) + 'px'
+                    }).fadeIn();
+                }
+            },
+            error: ajaxErrorHandler
+            });
+        }, 500);
+    },
+    mouseleave: function() {
+        clearTimeout(timer);
+        preview_wrap.hide();
+    }
+}, ".thumbnail");
+{% endif %}
+
 {% include "snippets/shared_link_js.html" %}
 {% include "snippets/bottom_bar.html" %} {# moved to the right side. Tue Nov 11 15:47:08 CST 2014 #}
 </script>

seahub/templates/snippets/repo_dirents.html

@@ -57,7 +57,7 @@
         </td>
         {% if not repo.encrypted and ENABLE_THUMBNAIL and dirent.is_img %}
             {% if dirent.thumbnail_src %}
-                <td class="dirent-icon"><img src="{{ dirent.thumbnail_src }}" alt="{% trans "File"%}" /></td>
+                <td class="dirent-icon"><img class="thumbnail" src="{{ dirent.thumbnail_src }}" alt="{% trans "File"%}" /></td>
             {% else %}
                 <td class="dirent-icon"><img class="not-thumbnail" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File"%}" /></td>
             {% endif %}

seahub/thumbnail/utils.py

@@ -3,4 +3,3 @@ from seahub.utils import get_site_scheme_and_netloc
 def get_thumbnail_src(repo_id, obj_id, size):
     return os.path.join(get_site_scheme_and_netloc(), "thumbnail", repo_id,
                         obj_id, size)
-

seahub/thumbnail/views.py

@@ -6,7 +6,6 @@ from StringIO import StringIO
 from PIL import Image
 
 from django.utils.translation import ugettext as _
-from django.core.urlresolvers import reverse
 from django.http import HttpResponse, Http404
 
 from seaserv import get_file_id_by_path, get_repo

seahub/views/repo.py

@@ -32,7 +32,8 @@ from seahub.utils import gen_file_upload_url, is_org_context, \
     get_file_type_and_ext
 from seahub.settings import ENABLE_SUB_LIBRARY, FORCE_SERVER_CRYPTO, \
     ENABLE_UPLOAD_FOLDER, \
-    ENABLE_THUMBNAIL, THUMBNAIL_ROOT, THUMBNAIL_DEFAULT_SIZE
+    ENABLE_THUMBNAIL, THUMBNAIL_ROOT, THUMBNAIL_DEFAULT_SIZE, PREVIEW_DEFAULT_SIZE
+
 from seahub.utils.file_types import IMAGE
 from seahub.thumbnail.utils import get_thumbnail_src
 
@@ -284,6 +285,7 @@ def render_repo(request, repo):
             'sub_lib_enabled': sub_lib_enabled,
             'enable_upload_folder': ENABLE_UPLOAD_FOLDER,
             'ENABLE_THUMBNAIL': ENABLE_THUMBNAIL,
+            'PREVIEW_DEFAULT_SIZE': PREVIEW_DEFAULT_SIZE,
             }, context_instance=RequestContext(request))
    
 @login_required