haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-26 23:34:45 +00:00
Code Issues Releases Wiki Activity

[preview] Show image file's preview

Browse Source 
Conflicts:
	seahub/views/repo.py
This commit is contained in:
lian
2014-12-08 11:31:54 +08:00
committed by llj
parent 95a3123354
commit c8cde80e7d
7 changed files with 143 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
media/css/seahub.css
View File

@@ -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;
}

1
seahub/settings.py
View File

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

130
seahub/templates/repo.html
View File

@@ -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 = $('<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>

2
seahub/templates/snippets/repo_dirents.html
View File

@@ -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 %}

1
seahub/thumbnail/utils.py
View File

@@ -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)

1
seahub/thumbnail/views.py
View File

@@ -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

4
seahub/views/repo.py
View File

@@ -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