feature: client: menu: aleman: add

.webpack/js.js

@@ -54,6 +54,7 @@ const plugins = [
     new NormalModuleReplacementPlugin(/^node:/, (resource) => {
         resource.request = resource.request.replace(/^node:/, '');
     }),
+    new NormalModuleReplacementPlugin(/^putout$/, '@putout/bundle'),
     new EnvironmentPlugin({
         NODE_ENV,
     }),
@@ -125,7 +126,7 @@ module.exports = {
         [`${modules}/edit-file-vim`]: `${dirModules}/edit-file-vim.js`,
         [`${modules}/edit-names`]: `${dirModules}/edit-names.js`,
         [`${modules}/edit-names-vim`]: `${dirModules}/edit-names-vim.js`,
-        [`${modules}/menu`]: `${dirModules}/menu.js`,
+        [`${modules}/menu`]: `${dirModules}/menu/index.js`,
         [`${modules}/view`]: `${dirModules}/view/index.js`,
         [`${modules}/help`]: `${dirModules}/help.js`,
         [`${modules}/markdown`]: `${dirModules}/markdown.js`,

HELP.md

@@ -82,6 +82,7 @@ Cloud Commander supports the following command-line parameters:
 | `--confirm-move`             | confirm move
 | `--open`                     | open web browser when server starts
 | `--name`                     | set tab name in web browser
+| `--menu`                     | set menu: "supermenu" or "aleman"
 | `--one-file-panel`           | show one file panel
 | `--keys-panel`               | show keys panel
 | `--contact`                  | enable contact
@@ -434,6 +435,7 @@ Some config options can be overridden with environment variables, such as:
 - `CLOUDCMD_EDITOR` - set editor
 - `CLOUDCMD_COLUMNS` - set visible themes
 - `CLOUDCMD_THEME` - set themes "light" or "dark"
+- `CLOUDCMD_MENU` - set menu "supermenu" or "aleman"
 - `CLOUDCMD_CONTACT` - enable contact
 - `CLOUDCMD_CONFIG_DIALOG` - enable config dialog
 - `CLOUDCMD_CONFIG_AUTH` - enable auth change in config dialog

bin/cloudcmd.mjs

@@ -62,6 +62,7 @@ const yargsOptions = {
         'terminal-path',
         'terminal-command',
         'columns',
+        'menu',
         'theme',
         'import-url',
         'import-token',
@@ -106,6 +107,7 @@ const yargsOptions = {
         'online': config('online'),
         'open': choose(env.bool('open'), config('open')),
         'editor': env('editor') || config('editor'),
+        'menu': env('menu') || config('menu'),
         'packer': config('packer') || 'tar',
         'zip': config('zip'),
         'username': env('username') || config('username'),
@@ -199,6 +201,7 @@ async function main() {
     config('terminalCommand', args.terminalCommand);
     config('terminalAutoRestart', args.terminalAutoRestart);
     config('editor', args.editor);
+    config('menu', args.menu);
     config('prefix', prefixer(args.prefix));
     config('prefixSocket', prefixer(args.prefixSocket));
     config('root', args.root || '/');
@@ -232,6 +235,7 @@ async function main() {
         prefixSocket: config('prefixSocket'),
         columns: config('columns'),
         theme: config('theme'),
+        menu: config('menu'),
     };
     
     const password = env('password') || args.password;

client/cloudcmd.js

@@ -26,6 +26,12 @@ module.exports = async (config) => {
     const prefix = getPrefix(config.prefix);
     
     window.CloudCmd.init(prefix, config);
+    
+    if (window.CloudCmd.config('menu') === 'aleman')
+        setTimeout(() => {
+            import('https://esm.sh/@putout/processor-html');
+            import('https://esm.sh/@putout/bundle');
+        }, 100);
 };
 window.CloudCmd = module.exports;
 
@@ -61,3 +67,4 @@ async function register(config) {
     
     listenSW(sw, 'updatefound', onUpdateFound(config));
 }
+

client/listeners/index.js

@@ -111,7 +111,10 @@ module.exports.initKeysPanel = () => {
     if (!keysElement)
         return;
     
-    Events.addClick(keysElement, ({target}) => {
+    Events.addClick(keysElement, (event) => {
+        event.stopPropagation();
+        
+        const {target} = event;
         const {id} = target;
         const operation = (name) => {
             const {Operation} = CloudCmd;

client/modules/config/index.js

@@ -135,6 +135,7 @@ async function fillTemplate() {
     
     const {
         editor,
+        menu,
         packer,
         columns,
         theme,
@@ -142,6 +143,7 @@ async function fillTemplate() {
         ...obj
     } = input.convert(config);
     
+    obj[`${menu}-selected`] = 'selected';
     obj[`${editor}-selected`] = 'selected';
     obj[`${packer}-selected`] = 'selected';
     obj[`${columns}-selected`] = 'selected';

client/modules/menu/cloudmenu.mjs

@@ -0,0 +1,26 @@
+import supermenu from 'supermenu';
+
+const noop = () => {};
+const {CloudCmd} = globalThis;
+
+export const createCloudMenu = async (fm, options, menuData) => {
+    const createMenu = await loadMenu();
+    const menu = await createMenu(fm, options, menuData);
+    
+    menu.addContextMenuListener = menu.addContextMenuListener || noop;
+    
+    return menu;
+};
+
+async function loadMenu() {
+    if (CloudCmd.config('menu') === 'aleman') {
+        const {host, protocol} = window.location;
+        const url = `${protocol}//${host}/node_modules/aleman/menu/menu.js`;
+        const {createMenu} = await import(/* webpackIgnore: true */url);
+        
+        return createMenu;
+    }
+    
+    return supermenu;
+}
+

client/modules/menu/index.js

@@ -4,12 +4,11 @@
 
 const exec = require('execon');
 const wrap = require('wraptile');
-const supermenu = require('supermenu');
 const createElement = require('@cloudcmd/create-element');
 
-const {FS} = require('../../common/cloudfunc');
-const {getIdBySrc} = require('../dom/load');
-const RESTful = require('../dom/rest');
+const {FS} = require('../../../common/cloudfunc');
+const {getIdBySrc} = require('../../dom/load');
+const RESTful = require('../../dom/rest');
 
 const {config, Key} = CloudCmd;
 
@@ -32,7 +31,7 @@ module.exports.ENABLED = false;
 
 CloudCmd.Menu = exports;
 
-module.exports.init = () => {
+module.exports.init = async () => {
     const {isAuth, menuDataFile} = getFileMenuData();
     
     const fm = DOM.getFM();
@@ -46,8 +45,9 @@ module.exports.init = () => {
         type: 'file',
     });
     
-    MenuContext = supermenu(fm, options, menuData);
-    MenuContextFile = supermenu(fm, optionsFile, menuDataFile);
+    const {createCloudMenu} = await import('./cloudmenu.mjs');
+    MenuContext = await createCloudMenu(fm, options, menuData);
+    MenuContextFile = await createCloudMenu(fm, optionsFile, menuDataFile);
     
     MenuContext.addContextMenuListener();
     MenuContextFile.addContextMenuListener();
@@ -107,6 +107,7 @@ function getOptions({type}) {
     const options = {
         icon: true,
         beforeClose: Key.setBind,
+        beforeHide: Key.setBind,
         beforeShow: exec.with(beforeShow, func),
         beforeClick,
         name,
@@ -198,16 +199,17 @@ function isPath(x, y) {
     const el = document.elementFromPoint(x, y);
     const elements = panel.querySelectorAll('[data-name="js-path"] *');
     
-    return ~[].indexOf.call(elements, el);
+    return !~[].indexOf.call(elements, el);
 }
 
 function beforeShow(callback, params) {
     Key.unsetBind();
     
-    const {name} = params;
+    const {name, position = {x: params.x, y: params.y}} = params;
+    const {x, y} = position;
     const el = DOM.getCurrentByPosition({
-        x: params.x,
-        y: params.y,
+        x,
+        y,
     });
     
     const menuName = getMenuNameByEl(el);
@@ -223,7 +225,7 @@ function beforeShow(callback, params) {
     exec(callback);
     
     if (isShow)
-        isShow = isPath(params.x, params.y);
+        isShow = isPath(x, y);
     
     return isShow;
 }
@@ -341,3 +343,4 @@ function listener(event) {
         event.preventDefault();
     }
 }
+

json/config.json

@@ -5,6 +5,7 @@
     "password": "2b64f2e3f9fee1942af9ff60d40aa5a719db33b8ba8dd4864bb4f11e25ca2bee00907de32a59429602336cac832c8f2eeff5177cc14c864dd116c8bf6ca5d9a9",
     "algo": "sha512WithRSAEncryption",
     "editor": "edward",
+    "menu": "supermenu",
     "packer": "tar",
     "diff": true,
     "zip": true,

json/help.json

@@ -20,6 +20,7 @@
     "--confirm-move             ": "confirm move",
     "--open                     ": "open web browser when server started",
     "--name                     ": "set tab name in web browser",
+    "--menu                     ": "set menu: \"supermenu\" or \"aleman\"",
     "--one-file-panel           ": "show one file panel",
     "--keys-panel               ": "show keys panel",
     "--config-dialog            ": "enable config dialog",

man/cloudcmd.1

@@ -34,6 +34,7 @@ programs in browser from any computer, mobile or tablet device.
   --show-dot-files              show dot files
   --show-file-name              show file name in view and edit modes
   --editor                      set editor: "dword", "edward" or "deepword"
+  --menu                        set menu: "supermenu" or "aleman"
   --packer                      set packer: "tar" or "zip"
   --root                        set root directory
   --prefix                      set url prefix

package.json

@@ -89,6 +89,7 @@
     "@cloudcmd/move-files": "^8.0.0",
     "@cloudcmd/read-files-sync": "^2.0.0",
     "@putout/cli-validate-args": "^2.0.0",
+    "aleman": "^1.0.15",
     "apart": "^2.0.0",
     "chalk": "^5.3.0",
     "compression": "^1.7.4",

server/cloudcmd.mjs

@@ -64,7 +64,7 @@ function cloudcmd(params) {
         if (/root/.test(name))
             validate.root(value, config);
         
-        if (/editor|packer|themes/.test(name))
+        if (/editor|packer|themes|menu/.test(name))
             validate[name](value);
         
         if (/prefix/.test(name))

server/validate.mjs

@@ -34,6 +34,13 @@ export const editor = (name, {exit = _exit} = {}) => {
         exit('cloudcmd --editor: could be "dword", "edward" or "deepword" only');
 };
 
+export const menu = (name, {exit = _exit} = {}) => {
+    const reg = /^(supermenu|aleman)$/;
+    
+    if (!reg.test(name))
+        exit('cloudcmd --menu: could be "supermenu" or "aleman" only');
+};
+
 export const packer = (name, {exit = _exit} = {}) => {
     const reg = /^(tar|zip)$/;
     

tmpl/config.hbs

@@ -72,6 +72,12 @@
             Vim
         </label>
     </li>
+    <li title="Menu: supermenu, aleman">
+        <select data-name="js-menu" class="form-control full-width" title="Menu">
+            <option {{ supermenu-selected }}>supermenu</option>
+            <option {{ aleman-selected }}>aleman</option>
+        </select>
+    </li>
     <li title="Inner buffer used to copy files">
         <label>
             <input data-name="js-buffer" type="checkbox" {{ buffer }}>