我正在用elfinder开发一个自定义的共享按钮,有关于如何自定义右键菜单的教程,我已经实现了它。然而,我想为菜单应用一些规则
1) For folder only, exclude the button for file
2) For root level only, exclude the button for sub level folder
3) For single folder only, if select more than one folder will exclude the button
这是当前的代码,现在有共享按钮,但没有以上规则:
elFinder.prototype.i18.zh_TW.messages['cmdsharefolder'] = 'Share';
elFinder.prototype._options.commands.push('sharefolder');
elFinder.prototype.commands.sharefolder = function () {
this.exec = function (hashes) {
//open share menu
}
this.getstate = function () {
return 0;
}
}
以及elfinder实例:
var elfinder = $('#elfinder').elfinder({
url: '<?= $connector; ?>',
soundPath: '<?= site_url('assets/plugins/elFinder/sounds/rm.wav'); ?>',
height: 700,
lang: 'zh_TW',
uiOptions: {
// toolbar configuration
toolbar: [
['back', 'forward'],
['reload'],
['mkdir', 'upload'],
['copy', 'cut', 'paste', 'rm'],
['rename'],
['view', 'sort']
]
},
contextmenu: {
navbar: ['open', '|', 'copy', 'cut', 'paste', 'duplicate', '|', 'rm', '|', 'info'],
cwd: ['reload', 'back', '|', 'upload', 'mkdir', 'paste', '|', 'info'],
files: [
'open', 'quicklook', 'sharefolder', '|', 'download', '|', 'copy', 'cut', 'paste', 'rm', '|', 'rename', '|', 'info'
]
},
ui: ['toolbar', 'tree', 'stat']
}).elfinder('instance');
问题是:
1) 如何应用上述规则?(如果规则不适用,可以通过检查和弹出警报框来解决问题,请建议检查方法,谢谢)
2) 有没有任何方法可以捕捉选择的文件夹,例如完整的文件夹路径等。
以下是我研究过的文档,示例案例供一般使用:https://github.com/Studio-42/elFinder/wiki/Custom-context-menu-command
非常感谢你的帮助。
您试图实现的目标是可能的,但这在很大程度上取决于连接器的工作方式。
为了使用您的规则,您必须在this.exec
或this.getstate
中添加代码。每种选择都有利弊。
-
如果将代码添加到
this.getstate
,则单个操作的代码可能会执行多次(例如:选择多个文件夹时,单击第一个文件夹、最后一个文件夹和右键单击时会执行该功能)。但是,使用
this.getstate
,您可以在任何不符合要求(规则)的情况下隐藏选项(按钮)。 -
向
this.exec
添加代码可以确保每次操作只执行一次代码,但即使规则不适用,该按钮也始终存在。如果选择此选项,则需要向用户发送某种警报或对话框消息,以通知他们为什么不显示共享菜单。
在下面的代码中,我使用了this.getstate
,但您可以将代码移动到this.exec
。在Javascript方面,您需要使用以下内容:
elFinder.prototype.i18.zh_TW.messages['cmdsharefolder'] = 'Share';
elFinder.prototype._options.commands.push('sharefolder');
elFinder.prototype.commands.sharefolder = function () {
var self = this,
fm = self.fm;
this.exec = function (hashes) {
// Display the share menu
};
this.getstate = function () {
var hashes = self.fm.selected(), result = 0;
// Verifies rule nr 3: For single folder only,
// if select more than one folder will exclude the button
if (hashes.length > 1) {
return -1;
}
// Rule 1 and 2 exclude itself. By this I mean that rule nr 2
// takes precedence over rule nr 1, so you just need to check
// if the selected hash is a root folder.
$.ajax({
url: 'file-manager/check-rule-on-hash',
data: hashes,
type: 'get',
async: false,
dataType: 'json',
success: function(response) {
if (!response.isRoot) {
result = -1;
}
}
});
return result;
}
}
说明:
规则nr 3很简单,因为您可以通过Javascript访问所选项目的数量。因此,您只需要计算所选哈希的数量。如果该数字大于1,则意味着用户选择了多个项目,并且不应显示菜单。
规则nr 2有点棘手,因为你需要;验证";选择的哈希,这就是为什么我开始说这取决于连接器的工作方式。
例如,我有一个自定义的PHP连接器,其中的文件夹结构是通过数据库表定义的。尽管所有文件都物理存储在硬盘上,但元数据存储在同一个表上(主要是因为所有权限都是通过数据库定义的)。在我的情况下,执行ajax调用并检查给定的哈希是否是根文件夹有点容易,因为该信息存储在数据库中,我可以通过简单的查询检索该信息。
由于我不能确定连接器是如何工作的,一般的解决方案是使用所选的哈希对服务器执行ajax调用,并验证该哈希是否是根文件夹。服务器应返回一个属性为isRoot
的对象,该对象为true
或false
。