1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-03 07:55:36 +00:00

[image] use thumbnail for magnificPopups, file_view page & shared_file_view page

This commit is contained in:
llj
2017-04-18 17:28:29 +08:00
parent 4522201366
commit 2a8e40c3c0
13 changed files with 92 additions and 22 deletions

View File

@@ -657,3 +657,12 @@ function quotaSizeFormat(bytes, precision) {
return bytes + ' B';
}
}
function encodePath(path) {
var path_arr = path.split('/'),
path_arr_ = [];
for (var i = 0, len = path_arr.length; i < len; i++) {
path_arr_.push(encodeURIComponent(path_arr[i]));
}
return path_arr_.join('/');
}

View File

@@ -16,7 +16,7 @@ from constance import config
from seahub.settings import SEAFILE_VERSION, SITE_TITLE, SITE_NAME, \
MAX_FILE_NAME, BRANDING_CSS, LOGO_PATH, LOGO_WIDTH, LOGO_HEIGHT,\
SHOW_REPO_DOWNLOAD_BUTTON, SITE_ROOT, ENABLE_GUEST_INVITATION, \
FAVICON_PATH
FAVICON_PATH, ENABLE_THUMBNAIL
try:
from seahub.settings import SEACLOUD_MODE
@@ -86,6 +86,7 @@ def base(request):
'SITE_ROOT': SITE_ROOT,
'constance_enabled': dj_settings.CONSTANCE_ENABLED,
'FILE_SERVER_ROOT': file_server_root,
'enable_thumbnail': ENABLE_THUMBNAIL,
'enable_guest_invitation': ENABLE_GUEST_INVITATION,
'enable_terms_and_conditions': dj_settings.ENABLE_TERMS_AND_CONDITIONS,
'is_pro': True if is_pro_version() else False,

View File

@@ -122,5 +122,18 @@ $('#file-save-form').submit(function() {
});
{% endif %}
{% include "snippets/file_content_js.html" %}
{% if filetype == 'Image' and not err %}
{% if enable_thumbnail %}
{% if from_shared_dir %}
var encoded_path = encodePath('{{ path|escapejs }}'); // path: '/Portrait_8.jpg'
$('#image-view').attr('src', '{{ SITE_ROOT }}thumbnail/{{ shared_token }}/1024' + encoded_path);
{% else %}
$('#image-view').attr('src', '{{ SITE_ROOT }}thumbnail/{{ shared_token }}/1024/' + encodeURIComponent('{{file_name|escapejs}}'));
{% endif %}
{% else %}
$('#image-view').attr('src', '{{ raw_path|escapejs }}');
{% endif %}
{% endif %}
</script>
{% endblock %}

View File

@@ -20,7 +20,7 @@ For details please refer to 'snippets/file_content_js.html'.
{% endif %}
{% if filetype == 'Image' %}
<img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" />
<img src="" alt="{{ file_name }}" id="image-view" />
{% endif %}
{% if filetype == 'Document' or filetype == 'PDF' and not use_pdfjs %}

View File

@@ -17,11 +17,7 @@
{% endif %}
{% if filetype == 'Image' %}
function setFileViewAreaHeight() {
var $fileView = $('#file-view');
$fileView.outerHeight($(window).height() - $fileView.offset().top);
}
$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
{% include 'snippets/image_file_view_js.html' %}
{% endif %}
{% if filetype == 'SVG' %}

View File

@@ -0,0 +1,5 @@
function setFileViewAreaHeight() {
var $fileView = $('#file-view');
$fileView.outerHeight($(window).height() - $fileView.offset().top);
}
$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);

View File

@@ -17,12 +17,21 @@ body { overflow:hidden; }
<a href="{% url 'view_lib_file' repo.id img_next %}" id="img-next" title="{% trans 'you can also press → ' %}"><span class="icon-chevron-right"></span></a>
{% endif %}
<img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" />
<img src="" alt="{{ filename }}" id="image-view" />
{% endblock %}
{% block extra_script %}{{ block.super }}
<script type="text/javascript">
{% if enable_thumbnail and not repo.encrypted %}
var encoded_path = encodePath('{{ path|escapejs }}'); // path: '/Portrait_8.jpg'
$('#image-view').attr('src', '{{ SITE_ROOT }}thumbnail/{{ repo.id }}/1024' + encoded_path);
{% else %}
$('#image-view').attr('src', '{{ raw_path|escapejs }}');
{% endif %}
{% include 'snippets/image_file_view_js.html' %}
{% if img_prev or img_next %}
var input_focus = false;
$('input, textarea').focus(function() {
@@ -45,11 +54,5 @@ $('body').bind('keydown', function(e) {
}
})
{% endif %}
function setFileViewAreaHeight() {
var $fileView = $('#file-view');
$fileView.outerHeight($(window).height() - $fileView.offset().top);
}
$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
</script>
{% endblock %}

View File

@@ -36,6 +36,7 @@ $(function() {
{% if filetype == 'PDF' and use_pdfjs and not err %}
{% elif filetype == 'Image' and not err %}
$('#image-view').attr('src', '{{ raw_path|escapejs }}');
{% else %}
function setFileViewAreaHeight() {
$('body').css({'overflow':'auto'});

View File

@@ -162,6 +162,10 @@
{% block extra_script %}
<script type="text/javascript" src="{% static "scripts/lib/jquery.magnific-popup.js" %}"></script>
<script type="text/javascript">
var cur_path = '{{path|escapejs}}';
var share_link_token = '{{token}}';
var file_server_root = '{{FILE_SERVER_ROOT}}';
var magnificOptions = {
type: 'image',
tClose: "{% trans "Close (Esc)" %}", // Alt text on close button
@@ -182,13 +186,17 @@ var magnificOptions = {
tError: '{% trans '<a href="%url%" target="_blank">The image</a> could not be loaded.' %}' // Error message when image could not be loaded
}
};
{% if not repo.encrypted and ENABLE_THUMBNAIL %}
$('[data-mfp-src]').each(function(index, item) {
var $item = $(item);
var file_name = $item.closest('.file-item').attr('data-name');
$item.attr('data-mfp-src', '{{ SITE_ROOT }}thumbnail/{{ token }}/1024' + encodePath(cur_path + file_name));
});
{% endif %}
$('.img-name-link').magnificPopup(magnificOptions);
$('.img-img-link').magnificPopup(magnificOptions);
var cur_path = '{{path|escapejs}}';
var share_link_token = '{{token}}';
var file_server_root = '{{FILE_SERVER_ROOT}}';
$('.shared-dir-zip, .download-dir').click(function (e) {
var cur_download_dir_path;
var interval,

View File

@@ -222,13 +222,34 @@ define([
updateMagnificPopupOptions: function(options) {
var repo_id = this.dir.repo_id,
path = this.dir.path;
var use_thumbnail = true;
if (!app.pageOptions.enable_thumbnail || this.dir.encrypted) {
use_thumbnail = false;
}
var genItem = function(model) {
var name = model.get('obj_name');
var dirent_path = Common.pathJoin([path, name]);
var url_options = {
'repo_id': repo_id,
'path': Common.encodePath(dirent_path)
};
var item_src;
if (use_thumbnail) {
item_src = Common.getUrl($.extend(url_options, {
'name': 'thumbnail_get',
'size': 1024
}));
} else {
item_src = Common.getUrl($.extend(url_options, {
'name': 'view_raw_file'
}));
}
var item = {
'name': name,
'url': model.getWebUrl(),
'src': app.config.siteRoot + 'repo/' + repo_id + '/raw' + Common.encodePath(dirent_path)
'src': item_src
};
return item;
};

View File

@@ -32,6 +32,16 @@ define([
var tmpl = $(window).width() >= 768 ? this.template : this.mobileTemplate;
this.$el.html(tmpl(data));
if (app.pageOptions.enable_thumbnail) {
this.$('.img-name-link').attr('data-mfp-src', Common.getUrl({
'name': 'thumbnail_get',
'repo_id': data.repo_id,
'size': 1024,
'path': data.encoded_path
}));
}
return this;
},

View File

@@ -94,7 +94,6 @@ define([
render: function() {
this.$el.html(this.template());
$("#right-panel").html(this.$el);
this.$table = this.$('table');
this.$tableBody = this.$('tbody');

View File

@@ -144,10 +144,14 @@ define([
case 'group_discussions': return siteRoot + 'api2/groups/' + options.group_id + '/discussions/';
case 'group_discussion': return siteRoot + 'api2/groups/' + options.group_id + '/discussions/' + options.discussion_id + '/';
// Misc
// thumbnail
case 'thumbnail_create': return siteRoot + 'thumbnail/' + options.repo_id + '/create/';
case 'get_popup_notices': return siteRoot + 'ajax/get_popup_notices/';
case 'thumbnail_get': return siteRoot + 'thumbnail/' + options.repo_id + '/' + options.size + options.path;
// Misc
case 'view_raw_file': return siteRoot + 'repo/' + options.repo_id + '/raw' + options.path;
case 'get_popup_notices': return siteRoot + 'ajax/get_popup_notices/';
case 'notifications': return siteRoot + 'api/v2.1/notifications/';
case 'notification': return siteRoot + 'api/v2.1/notification/';
case 'user_enabled_modules': return siteRoot + 'api/v2.1/user-enabled-modules/';