mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-17 07:41:26 +00:00
[dir view] grid view: show 'name' tip, added magnificPopup preview for images, & etc.
This commit is contained in:
llj
@@ -347,15 +347,11 @@
|
||||
|
||||
<script type="text/template" id="grid-view-file-item-tmpl">
|
||||
<a href="<%= url %>" class="img-link" target="_blank">
|
||||
<% if (dirent.is_img) { %>
|
||||
<% if (dirent.encoded_thumbnail_src) { %>
|
||||
<% if (dirent.is_img && dirent.encoded_thumbnail_src) { %>
|
||||
<img class="thumbnail vam" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
|
||||
<% } else { %>
|
||||
<img src="<%= icon_url %>" width="96" alt="" class="vam" />
|
||||
<% } %>
|
||||
<% } else { %>
|
||||
<img src="<%= icon_url %>" width="96" alt="" class="vam" />
|
||||
<% } %>
|
||||
|
||||
<% if (is_pro && dirent.is_locked) { %>
|
||||
<img class="grid-file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
|
||||
|
||||
@@ -170,7 +170,7 @@ var magnificOptions = {
|
||||
image: {
|
||||
titleSrc: function(item) {
|
||||
var $el = item.el;
|
||||
var img_name = $el.closest('.file-item').attr('data-name');
|
||||
var img_name = HTMLescape($el.closest('.file-item').attr('data-name'));
|
||||
var img_link = '<a href="' + $el.attr('href') + '" target="_blank">' + "{% trans "Open in New Tab" %}" + '</a>';
|
||||
return img_name + '<br />' + img_link;
|
||||
},
|
||||
|
||||
@@ -59,7 +59,6 @@ define([
|
||||
var dir = this.collection;
|
||||
var path = this.getPath();
|
||||
var model = this;
|
||||
options = options || {};
|
||||
|
||||
var opts = {
|
||||
repo_id: dir.repo_id,
|
||||
@@ -75,20 +74,21 @@ define([
|
||||
// It is safer to call dir.remove() directly.
|
||||
dir.remove(model);
|
||||
// this.trigger('destroy');
|
||||
if (options.success)
|
||||
if (options.success) {
|
||||
options.success(data);
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (options.error)
|
||||
if (options.error) {
|
||||
options.error(xhr);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
rename: function(options) {
|
||||
var dir = this.collection;
|
||||
var _this = this;
|
||||
options = options || {};
|
||||
|
||||
var opts = {
|
||||
repo_id: dir.repo_id,
|
||||
@@ -118,13 +118,15 @@ define([
|
||||
});
|
||||
}
|
||||
_this.set(renamed_dirent_data)
|
||||
if (options.success)
|
||||
if (options.success) {
|
||||
options.success(data);
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (options.error)
|
||||
if (options.error) {
|
||||
options.error(xhr);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@@ -133,7 +135,10 @@ define([
|
||||
filepath = this.getPath();
|
||||
|
||||
$.ajax({
|
||||
url: Common.getUrl({name: 'lock_or_unlock_file', repo_id: dir.repo_id}),
|
||||
url: Common.getUrl({
|
||||
name: 'lock_or_unlock_file',
|
||||
repo_id: dir.repo_id
|
||||
}),
|
||||
type: 'PUT',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
|
||||
@@ -15,7 +15,7 @@ define([
|
||||
this.dir = options.dir;
|
||||
|
||||
this.render();
|
||||
this.$el.modal({appendTo:'#main', autoResize:true, focus:false});
|
||||
this.$el.modal({appendTo:'#main'});
|
||||
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
|
||||
|
||||
this.$error = this.$('.error');
|
||||
@@ -66,7 +66,6 @@ define([
|
||||
err = gettext("Failed. Please check the network.");
|
||||
}
|
||||
_this.$error.html(err).removeClass('hide');
|
||||
$("#simplemodal-container").css({'height':'auto'});
|
||||
Common.enableButton($submit_btn);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -31,9 +31,10 @@ define([
|
||||
mvProgressTemplate: _.template($("#mv-progress-popup-template").html()),
|
||||
|
||||
initialize: function(options) {
|
||||
this.$dirent_list_body = this.$('.repo-file-list tbody');
|
||||
this.$dirent_list = this.$('.repo-file-list');
|
||||
this.$dirent_grid = this.$('.grid-view');
|
||||
this.$dirent_list_body = this.$('.repo-file-list tbody');
|
||||
|
||||
this.$path_bar = this.$('.path');
|
||||
// For compatible with css, we use .repo-op instead of .dir-op
|
||||
this.$dir_op_bar = this.$('.repo-op');
|
||||
@@ -53,9 +54,9 @@ define([
|
||||
|
||||
this.fileUploadView = new FileUploadView({dirView: this});
|
||||
|
||||
this.$el.magnificPopup({
|
||||
// magnificPopup for image files
|
||||
var magnificPopupOptions = {
|
||||
type: 'image',
|
||||
delegate: '.img-name-link',
|
||||
tClose: gettext("Close (Esc)"), // Alt text on close button
|
||||
tLoading: gettext("Loading..."), // Text that is displayed during loading. Can contain %curr% and %total% keys
|
||||
gallery: {
|
||||
@@ -64,16 +65,34 @@ define([
|
||||
tNext: gettext("Next (Right arrow key)"), // Alt text on right arrow
|
||||
tCounter: gettext("%curr% of %total%") // Markup for "1 of 7" counter
|
||||
},
|
||||
image: {
|
||||
tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
|
||||
}
|
||||
};
|
||||
// magnificPopup: for 'list view'
|
||||
this.$dirent_list.magnificPopup($.extend({}, magnificPopupOptions, {
|
||||
delegate: '.img-name-link',
|
||||
image: {
|
||||
titleSrc: function(item) {
|
||||
var el = item.el;
|
||||
var img_name = el[0].innerHTML;
|
||||
var img_link = '<a href="' + el.attr('href') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
|
||||
return img_name + '<br />' + img_link;
|
||||
},
|
||||
tError: gettext('<a href="%url%" target="_blank">The image</a> could not be loaded.') // Error message when image could not be loaded
|
||||
}
|
||||
});
|
||||
}
|
||||
}));
|
||||
// magnificPopup: for 'grid view'
|
||||
this.$dirent_grid.magnificPopup($.extend({}, magnificPopupOptions, {
|
||||
delegate: '.image-grid-item',
|
||||
image: {
|
||||
titleSrc: function(item) {
|
||||
var $el = $(item.el);
|
||||
var img_name = Common.HTMLescape($el.attr('data-name'));
|
||||
var img_link = '<a href="' + $el.attr('data-url') + '" target="_blank">' + gettext("Open in New Tab") + '</a>';
|
||||
return img_name + '<br />' + img_link;
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
// scroll window: get 'more', fix 'op bar'
|
||||
var _this = this;
|
||||
|
||||
@@ -35,8 +35,9 @@ define([
|
||||
|
||||
render: function() {
|
||||
var dir = this.dir;
|
||||
var template;
|
||||
var dirent_path = this.model.getPath();
|
||||
|
||||
var template;
|
||||
if (this.model.get('is_dir')) {
|
||||
template = this.dirTemplate;
|
||||
} else {
|
||||
@@ -45,7 +46,7 @@ define([
|
||||
|
||||
this.$el.html(template({
|
||||
dirent: this.model.attributes,
|
||||
dirent_path: this.model.getPath(),
|
||||
dirent_path: dirent_path,
|
||||
icon_url: this.model.getIconUrl(192),
|
||||
url: this.model.getWebUrl(),
|
||||
category: dir.category,
|
||||
@@ -58,6 +59,18 @@ define([
|
||||
|
||||
this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
|
||||
|
||||
this.$el.attr('title', this.model.get('obj_name'));
|
||||
|
||||
// for magnificPopup
|
||||
if (this.model.get('is_img')) {
|
||||
this.$el.addClass('image-grid-item');
|
||||
this.$el.attr({
|
||||
'data-mfp-src': app.pageOptions.site_root + 'repo/' + dir.repo_id + '/raw' + Common.encodePath(dirent_path),
|
||||
'data-url': this.model.getWebUrl(),
|
||||
'data-name': this.model.get('obj_name')
|
||||
});
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user