1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-06-30 08:53:49 +00:00
seahub/static/scripts/app/views/dirent-grid.js

522 lines
22 KiB
JavaScript
Raw Normal View History

2016-01-31 14:06:40 +00:00
define([
'jquery',
'underscore',
'backbone',
'common',
'file-tree',
'app/views/share',
'app/views/folder-perm'
], function($, _, Backbone, Common, FileTree, ShareView, FolderPermView) {
'use strict';
app = app || {};
app.globalState = app.globalState || {};
var DirentGridView = Backbone.View.extend({
tagName: 'li',
className: 'grid-item',
dirTemplate: _.template($('#grid-view-dir-item-tmpl').html()),
fileTemplate: _.template($('#grid-view-file-item-tmpl').html()),
// renameTemplate: _.template($("#grid-rename-form-template").html()),
// mvcpTemplate: _.template($("#mvcp-form-template").html()),
// mvProgressTemplate: _.template($("#mv-progress-popup-template").html()),
initialize: function(options) {
this.dirView = options.dirView;
this.dir = this.dirView.dir;
this.listenTo(this.model, "change", this.render);
this.listenTo(this.model, 'remove', this.remove); // for multi dirents: delete, mv
},
render: function() {
var dir = this.dir;
var dirent_path = Common.pathJoin([dir.path, this.model.get('obj_name')]);
var is_pro = app.pageOptions.is_pro;
var url;
var template;
if (this.model.get('is_dir')) {
template = this.dirTemplate;
if (dir.category) {
url = "#" + dir.category + "/lib/" + dir.repo_id + Common.encodePath(dirent_path);
} else {
url = "#lib/" + dir.repo_id + Common.encodePath(dirent_path);
}
} else {
template = this.fileTemplate;
url = "/lib/" + dir.repo_id + "/file" + Common.encodePath(dirent_path);
}
this.$el.html(template({
dirent: this.model.attributes,
dirent_path: dirent_path,
url: url,
category: dir.category,
repo_id: dir.repo_id,
is_repo_owner: dir.is_repo_owner,
can_generate_shared_link: app.pageOptions.can_generate_shared_link,
is_pro: is_pro,
repo_encrypted: dir.encrypted
}));
this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
return this;
},
events: {
'mouseenter': 'highlight',
'mouseleave': 'rmHighlight',
'mousedown .grid-img-inner-container img': 'showPopupMenu',
'click .grid-img-container': 'multiChoose',
'click .dir-link': 'visitDir',
'click .share': 'share',
'click .delete': 'del', // 'delete' is a preserve word
'click .rename': 'rename',
'click .mv': 'mvcp',
'click .cp': 'mvcp',
'click .set-folder-permission': 'setFolderPerm',
'click .lock-file': 'lockFile',
'click .unlock-file': 'unlockFile'
},
highlight: function() {
this.$('.img-link').addClass('hl');
this.$('.text-link').addClass('hl');
/*
if (!$('.grid-hidden-op:visible').length && !$('#grid-rename-form').length) {
this.$('.grid-img-inner-container').addClass('hl');
}
*/
},
rmHighlight: function() {
this.$('.img-link').removeClass('hl');
this.$('.text-link').removeClass('hl');
/*
if (!$('.grid-hidden-op:visible').length && !$('#grid-rename-form').length) {
this.$('.grid-img-inner-container').removeClass('hl');
}
*/
},
showPopupMenu: function(e) {
e = e || window.event;
if (e.which == 3 && this.dirView.$('.grid-item .grid-img-container.hl').length == 0) {
$('.grid-hidden-op').addClass('hide');
this.$('.grid-img-container').addClass('hl').children('.grid-img-inner-container').removeClass('hl');
this.$('.grid-hidden-op').css({
'left': (e.pageX || e.clientX + document.body.scroolLeft),
'top': e.pageY || e.clientY + document.body.scrollTop,
}).removeClass('hide');
return false;
};
},
multiChoose: function(e) {
var dirView = this.dirView;
if (e.which == 1 && dirView.$multi_choose == true) {
this.$('.grid-img-container').toggleClass('hl');
this.$('.grid-img-inner-container').removeClass('hl');
var $dirents_op = dirView.$('#multi-dirents-op');
var hl_num = dirView.$('.grid-img-container.hl').length;
if (hl_num > 0) {
$dirents_op.css({'display':'inline'});
} else {
$dirents_op.hide();
}
} else if (e.which == 1 && dirView.$multi_choose == false) {
return false;
}
},
visitDir: function() {
this.dirView.dir.reset();
// update url & dirents
var dir_url = this.$('.dir-link').attr("href");
app.router.navigate(dir_url, {trigger: true}); // offer an url fragment
return false;
},
share: function() {
var dir = this.dir,
obj_name = this.model.get('obj_name'),
dirent_path = Common.pathJoin([dir.path, obj_name]);
var options = {
'is_repo_owner': dir.is_repo_owner,
'is_virtual': dir.is_virtual,
'user_perm': this.model.get('perm'),
'repo_id': dir.repo_id,
'repo_encrypted': false,
'is_dir': this.model.get('is_dir') ? true : false,
'dirent_path': dirent_path,
'obj_name': obj_name
};
new ShareView(options);
return false;
},
del: function() {
var dirent_name = this.model.get('obj_name');
var dir = this.dir;
var options = {
repo_id: dir.repo_id,
name: this.model.get('is_dir') ? 'del_dir' : 'del_file'
};
var model = this.model;
$.ajax({
url: Common.getUrl(options) + '?parent_dir=' + encodeURIComponent(dir.path)
+ '&name=' + encodeURIComponent(dirent_name),
type: 'POST',
dataType: 'json',
beforeSend: Common.prepareCSRFToken,
success: function(data) {
dir.remove(model);
var msg = gettext("Successfully deleted %(name)s")
.replace('%(name)s', Common.HTMLescape(dirent_name));
Common.feedback(msg, 'success');
},
error: function(xhr) {
Common.ajaxErrorHandler(xhr);
}
});
return false;
},
rename: function() {
var is_dir = this.model.get('is_dir');
var dirent_name = this.model.get('obj_name');
var form = $(this.renameTemplate({
grid_dirent_name: dirent_name
}));
var $grid_hidden_op = this.$('.grid-hidden-op'),
$name = this.$('.grid-link'),
$img_container = this.$('.grid-img-container'),
$name_container = this.$('.grid-link-container');
$name_container.css('width', $('.grid-item').width()).css('margin', 0);
$grid_hidden_op.addClass('hide');
$img_container.addClass('hl');
$name_container.prepend(form);
$name.hide();
var cancelRename = function() {
$name.css('width', '104').show();
form.remove();
$img_container.removeClass('hl');
$op.css({
'width': 104,
'margin': '0 auto'
});
return false; // stop bubbling (to 'doc click to hide .hidden-op')
};
$('.cancel', form).click(cancelRename);
var form_id = form.attr('id');
var _this = this;
var dir = this.dirView.dir;
form.submit(function() {
var new_name = $.trim($('[name="grid_newname"]', form).val());
if (!new_name) {
return false;
}
if (new_name == dirent_name) {
cancelRename();
return false;
}
var post_data = {
'oldname': dirent_name,
'newname': new_name
};
var post_url = Common.getUrl({
name: is_dir ? 'rename_dir' : 'rename_file',
repo_id: dir.repo_id
}) + '?parent_dir=' + encodeURIComponent(dir.path);
var after_op_success = function (data) {
var renamed_dirent_data = {
'obj_name': data['newname'],
'last_modified': new Date().getTime()/1000,
'last_update': gettext("Just now")
};
if (!is_dir) {
$.extend(renamed_dirent_data, {
'starred': false
});
}
$.modal.close();
_this.model.set(renamed_dirent_data); // it will trigger 'change' event
};
var after_op_error = function(xhr) {
var err_msg;
if (xhr.responseText) {
err_msg = $.parseJSON(xhr.responseText).error;
} else {
err_msg = gettext("Failed. Please check the network.");
}
Common.feedback(err_msg, 'error');
Common.enableButton(submit_btn);
};
var submit_btn = $('[type="submit"]', form);
Common.disableButton(submit_btn);
$.ajax({
url: post_url,
type: 'POST',
dataType: 'json',
beforeSend: Common.prepareCSRFToken,
data: post_data,
success: after_op_success,
error: after_op_error
});
return false;
});
return false;
},
mvcp: function(event) {
var dir = this.dir;
var el = event.target || event.srcElement,
op_type = $(el).hasClass('mv') ? 'mv' : 'cp',
obj_name = this.model.get('obj_name'),
obj_type = this.model.get('is_dir') ? 'dir' : 'file';
var title = op_type == 'mv' ? gettext("Move {placeholder} to:") : gettext("Copy {placeholder} to:");
title = title.replace('{placeholder}', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(obj_name) + '">' + Common.HTMLescape(obj_name) + '</span>');
var form = $(this.mvcpTemplate({
form_title: title,
op_type: op_type,
obj_type: obj_type,
obj_name: obj_name,
show_other_repos: !dir.encrypted,
}));
form.modal({appendTo:'#main', autoResize:true, focus:false});
$('#simplemodal-container').css({'width':'auto', 'height':'auto'});
FileTree.renderTreeForPath({
repo_name: dir.repo_name,
repo_id: dir.repo_id,
path: dir.path
});
if (!dir.encrypted) {
FileTree.prepareOtherReposTree({cur_repo_id: dir.repo_id});
}
var dirent = this.$el;
var dirent_list = this.dirView.$('.repo-file-list tr').eq(this.$el.index()+1);
var _this = this;
form.submit(function() {
var form = $(this),
form_id = form.attr('id'),
path = dir.path,
repo_id = dir.repo_id;
var dst_repo = $('[name="dst_repo"]', form).val(),
dst_path = $('[name="dst_path"]', form).val(),
op = $('[name="op"]', form).val(),
obj_name = $('[name="obj_name"]', form).val(),
obj_type = $('[name="obj_type"]', form).val();
if (!$.trim(dst_repo) || !$.trim(dst_path)) {
$('.error', form).removeClass('hide');
return false;
}
if (dst_repo == repo_id && (dst_path == path || (obj_type == 'dir' && dst_path == path + obj_name + '/'))) {
$('.error', form).html(gettext("Invalid destination path")).removeClass('hide');
return false;
}
var options = { repo_id: repo_id };
if (obj_type == 'dir') {
options.name = op == 'mv' ? 'mv_dir' : 'cp_dir';
} else {
options.name = op == 'mv' ? 'mv_file' : 'cp_file';
}
var post_url = Common.getUrl(options) + '?path=' + encodeURIComponent(path) + '&obj_name=' + encodeURIComponent(obj_name);
var post_data = {
'dst_repo': dst_repo,
'dst_path': dst_path
};
var after_op_success = function(data) {
$.modal.close();
var msg = data['msg'];
if (!data['task_id']) { // no progress
if (op == 'mv') {
// dirent.remove();
dirent_list.remove();
}
Common.feedback(msg, 'success');
} else {
var mv_progress_popup = $(_this.mvProgressTemplate());
var details = $('#mv-details', mv_progress_popup),
cancel_btn = $('#cancel-mv', mv_progress_popup),
other_info = $('#mv-other-info', mv_progress_popup);
cancel_btn.removeClass('hide');
setTimeout(function () {
mv_progress_popup.modal({containerCss: {
width: 300,
height: 150,
paddingTop: 50
}, focus:false});
var det_text = op == 'mv' ? gettext("Moving %(name)s") : gettext("Copying %(name)s");
details.html(det_text.replace('%(name)s', Common.HTMLescape(obj_name))).removeClass('vh');
$('#mv-progress').progressbar();
req_progress();
}, 100);
var req_progress = function () {
$.ajax({
url: Common.getUrl({name: 'get_cp_progress'}) + '?task_id=' + encodeURIComponent(data['task_id']),
dataType: 'json',
success: function(data) {
var bar = $('.ui-progressbar-value', $('#mv-progress'));
if (!data['failed'] && !data['canceled'] && !data['successful']) {
if (data['done'] == data['total']) {
bar.css('width', '100%'); // 'done' and 'total' can be both 0
details.addClass('vh');
cancel_btn.addClass('hide');
other_info.html(gettext("Saving...")).removeClass('hide');
} else {
bar.css('width', parseInt(data['done']/data['total']*100, 10) + '%');
}
bar.show();
setTimeout(req_progress, 1000);
} else if (data['successful']) {
$.modal.close();
if (op == 'mv') {
dirent.remove();
dirent_list.remove();
}
Common.feedback(msg, 'success');
} else { // failed or canceled
details.addClass('vh');
var other_msg = data['failed'] ? gettext("Failed.") : gettext("Canceled.");
other_info.html(other_msg).removeClass('hide');
cancel_btn.addClass('hide');
setTimeout(function () { $.modal.close(); }, 1000);
}
},
error: function(xhr, textStatus, errorThrown) {
var error;
if (xhr.responseText) {
error = $.parseJSON(xhr.responseText).error;
} else {
error = gettext("Failed. Please check the network.");
}
details.addClass('vh')
other_info.html(error).removeClass('hide');
cancel_btn.addClass('hide');
setTimeout(function () { $.modal.close(); }, 1000);
}
});
};
cancel_btn.click(function() {
Common.disableButton(cancel_btn);
$.ajax({
url: Common.getUrl({name: 'cancel_cp'}) + '?task_id=' + encodeURIComponent(data['task_id']),
dataType: 'json',
success: function(data) {
details.addClass('vh')
other_info.html(gettext("Canceled.")).removeClass('hide');
cancel_btn.addClass('hide');
setTimeout(function () {$.modal.close();}, 1000);
},
error: function(xhr, textStatus, errorThrown) {
var error;
if (xhr.responseText) {
error = $.parseJSON(xhr.responseText).error;
} else {
error = gettext("Failed. Please check the network.");
}
other_info.html(error).removeClass('hide');
Common.enableButton(cancel_btn);
}
});
});
}
}
Common.ajaxPost({
'form': form,
'post_url': post_url,
'post_data': post_data,
'after_op_success': after_op_success,
'form_id': form_id
});
return false;
});
return false;
},
setFolderPerm: function() {
var options = {
'obj_name': this.model.get('obj_name'),
'dir_path': this.dir.path,
'repo_id': this.dir.repo_id
};
new FolderPermView(options);
return false;
},
lockOrUnlockFile: function(params) {
var dir = this.dir,
filepath = Common.pathJoin([dir.path, this.model.get('obj_name')]),
callback = params.after_success;
$.ajax({
url: Common.getUrl({name: 'lock_or_unlock_file', repo_id: dir.repo_id}),
type: 'PUT',
dataType: 'json',
data: {
'operation': params.op,
'p': filepath
},
cache: false,
beforeSend: Common.prepareCSRFToken,
success: function() {
callback();
},
error: function (xhr) {
Common.ajaxErrorHandler(xhr);
}
});
},
lockFile: function() {
var _this = this;
this.lockOrUnlockFile({
'op': 'lock',
'after_success': function() {
_this.model.set({
'is_locked': true,
'locked_by_me': true,
'lock_owner_name': app.pageOptions.name
});
_this.$el.removeClass('hl');
}
});
return false;
},
unlockFile: function() {
var _this = this;
this.lockOrUnlockFile({
'op': 'unlock',
'after_success': function() {
_this.model.set({
'is_locked': false
});
_this.$el.removeClass('hl');
}
});
return false;
}
});
return DirentGridView;
});