自定义elfinder的右键菜单(一个jquery文件管理器插件)

Question

我正在使用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

非常感谢您的帮助.

Answer 1

您想要完成的任务是可能的，但这在很大程度上取决于您的连接器的工作原理。

为了使用您的规则，您必须在this.exec或中添加代码this.getstate。每个选项都有优点和缺点。

1. 如果您将代码添加到this.getstate您的代码中，单个操作可能会执行多次（例如：当您选择多个文件夹时，当您单击第一个文件夹、最后一个文件夹以及右键单击时，将执行该函数）。

   但是，this.getstate您可以在任何不满足要求（规则）的情况下隐藏选项（按钮）。

2. 添加代码以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;
    }
}

解释：

1. 规则 3 很简单，因为您可以通过 Javascript 访问所选项目的数量。所以你只需要计算选定的哈希值的数量。如果该数字大于 1，则意味着用户选择了多个项目，并且不应显示菜单。

2. 规则 2 有点棘手，因为您需要“验证”所选哈希，这就是为什么我开始说这取决于您的连接器的工作方式。

   例如，我有一个自定义 PHP 连接器，其中文件夹结构是通过数据库表定义的。尽管所有文件都物理存储在硬盘驱动器上，但元数据存储在同一个表上（主要是因为所有权限都是通过数据库定义的）。就我而言，执行 ajax 调用并检查给定的哈希是否是根文件夹有点容易，因为该信息存储在数据库中，我可以通过简单的查询检索该信息。

由于我无法确定您的连接器如何工作，通用解决方案是使用选定的哈希对服务器执行 ajax 调用，并验证该哈希是否是根文件夹。服务器应该返回一个具有 或 属性isRoot的true对象false。