自定义elfinder的右键菜单(一个jquery文件管理器插件)
Custom the right click menu of elfinder (a jquery file manager plugin)
我正在用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
,您的代码可能会针对单个操作执行多次(例如:当您 select 多个文件夹时,该函数会执行当您单击第一个文件夹、最后一个文件夹和单击鼠标右键时)。
但是,使用 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;
}
}
解释:
规则 3 很简单,因为您可以通过 Javascript 访问 selected 项目的数量。所以你只需要计算 selected 哈希的数量。如果该数字大于 1,则表示用户 select 编辑了不止一项,不应显示菜单。
Rule nr 2 有点棘手,因为您需要“验证”selected 哈希,这就是为什么我开始说这取决于您的连接器如何工作.
例如,我有一个自定义 PHP 连接器,其中的文件夹结构是通过数据库 table 定义的。尽管所有文件都物理存储在硬盘驱动器上,但元数据存储在相同的 table 上(主要是因为所有权限都是通过数据库定义的)。在我的例子中,执行 ajax 调用并检查给定的散列是否是根文件夹有点容易,因为该信息存储在数据库中,我可以通过简单的查询检索该信息。
因为我不能确定你的连接器是如何工作的,一般的解决方案是对服务器执行一个 ajax 调用,使用 selected 散列,并验证该散列是否是一个根文件夹。服务器应该 return 具有 属性 isRoot
的对象 true
或 false
.
我正在用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
,您的代码可能会针对单个操作执行多次(例如:当您 select 多个文件夹时,该函数会执行当您单击第一个文件夹、最后一个文件夹和单击鼠标右键时)。但是,使用
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;
}
}
解释:
规则 3 很简单,因为您可以通过 Javascript 访问 selected 项目的数量。所以你只需要计算 selected 哈希的数量。如果该数字大于 1,则表示用户 select 编辑了不止一项,不应显示菜单。
Rule nr 2 有点棘手,因为您需要“验证”selected 哈希,这就是为什么我开始说这取决于您的连接器如何工作.
例如,我有一个自定义 PHP 连接器,其中的文件夹结构是通过数据库 table 定义的。尽管所有文件都物理存储在硬盘驱动器上,但元数据存储在相同的 table 上(主要是因为所有权限都是通过数据库定义的)。在我的例子中,执行 ajax 调用并检查给定的散列是否是根文件夹有点容易,因为该信息存储在数据库中,我可以通过简单的查询检索该信息。
因为我不能确定你的连接器是如何工作的,一般的解决方案是对服务器执行一个 ajax 调用,使用 selected 散列,并验证该散列是否是一个根文件夹。服务器应该 return 具有 属性 isRoot
的对象 true
或 false
.