From c8cde80e7df05e7deeaa2cae684f5bb4c9590b45 Mon Sep 17 00:00:00 2001 From: lian Date: Mon, 8 Dec 2014 11:31:54 +0800 Subject: [PATCH] [preview] Show image file's preview Conflicts: seahub/views/repo.py --- media/css/seahub.css | 48 ++++++++ seahub/settings.py | 1 + seahub/templates/repo.html | 130 ++++++++++++++------ seahub/templates/snippets/repo_dirents.html | 2 +- seahub/thumbnail/utils.py | 1 - seahub/thumbnail/views.py | 1 - seahub/views/repo.py | 4 +- 7 files changed, 143 insertions(+), 44 deletions(-) diff --git a/media/css/seahub.css b/media/css/seahub.css index ab91ec7724..40063a7177 100644 --- a/media/css/seahub.css +++ b/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; +} diff --git a/seahub/settings.py b/seahub/settings.py index 9fb9c4f168..ddd6aa0c5f 100644 --- a/seahub/settings.py +++ b/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' diff --git a/seahub/templates/repo.html b/seahub/templates/repo.html index 85a29197b5..5f547d4cc3 100644 --- a/seahub/templates/repo.html +++ b/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,29 +2182,11 @@ $(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; if (xhr.responseText) { - error = $.parseJSON(xhr.responseText).error; + error = $.parseJSON(xhr.responseText).error; } else { error = "{% trans "Failed. Please check the network." %}"; } @@ -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) { @@ -2234,7 +2219,7 @@ function updateCmt() { return false; }); }, - error: ajaxErrorHandler + error: ajaxErrorHandler }); } @@ -2285,6 +2270,71 @@ function updateCmt() { }); {% endif %} +{% if not repo.encrypted and ENABLE_THUMBNAIL %} +var timer, + default_size = {{PREVIEW_DEFAULT_SIZE}}, + preview_wrap = $('
') + .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 #} diff --git a/seahub/templates/snippets/repo_dirents.html b/seahub/templates/snippets/repo_dirents.html index 3d98f6a723..9a8fba81da 100644 --- a/seahub/templates/snippets/repo_dirents.html +++ b/seahub/templates/snippets/repo_dirents.html @@ -57,7 +57,7 @@ {% if not repo.encrypted and ENABLE_THUMBNAIL and dirent.is_img %} {% if dirent.thumbnail_src %} - {% trans + {% trans {% else %} {% trans {% endif %} diff --git a/seahub/thumbnail/utils.py b/seahub/thumbnail/utils.py index 00180e093d..5a20c90147 100644 --- a/seahub/thumbnail/utils.py +++ b/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) - diff --git a/seahub/thumbnail/views.py b/seahub/thumbnail/views.py index 413d5d4220..b2ee55ec63 100644 --- a/seahub/thumbnail/views.py +++ b/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 diff --git a/seahub/views/repo.py b/seahub/views/repo.py index 018575fec4..7135cf0412 100644 --- a/seahub/views/repo.py +++ b/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