feature(user-menu) add

.cloudcmd.menu.js

@@ -0,0 +1,15 @@
+'use strict';
+
+module.exports = {
+    'F2 - Rename file': ({DOM}) => {
+        const {element} = DOM.CurrentInfo;
+        DOM.renameCurrent(element);
+    },
+    'D - Build Dev': async ({DOM, tryToCatch}) => {
+        return 'npm run build:client:dev';
+    },
+    'P - Build Prod': () => {
+        return 'npm run build:client';
+    },
+};
+

.webpack/css.js

@@ -21,6 +21,7 @@ const cssNames = [
     'view',
     'config',
     'terminal',
+    'user-menu',
     ...getCSSList('columns'),
 ];
 
@@ -35,7 +36,7 @@ const plugins = clean([
 
 const rules = [{
     test: /\.css$/,
-    exclude: /css\/(nojs|view|config|terminal|columns.*)\.css/,
+    exclude: /css\/(nojs|view|config|terminal|user-menu|columns.*)\.css/,
     use: extractMain.extract([
         'css-loader',
     ]),

.webpack/js.js

@@ -32,7 +32,6 @@ const babelDev = {
     babelrc: false,
     plugins: [
         'module:babel-plugin-macros',
-        '@babel/plugin-proposal-object-rest-spread',
     ],
 };
 
@@ -43,7 +42,7 @@ const rules = clean([
         loader: 'babel-loader',
     },
     isDev && {
-        test: /sw\.js$/,
+        test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
         options: babelDev,
@@ -91,6 +90,7 @@ module.exports = {
         [modules + '/konsole']: `${dirModules}/konsole.js`,
         [modules + '/terminal']: `${dirModules}/terminal.js`,
         [modules + '/cloud']: `${dirModules}/cloud.js`,
+        [modules + '/user-menu']: `${dirModules}/user-menu.js`,
         [modules + '/polyfill']: `${dirModules}/polyfill.js`,
     },
     output: {

bin/cloudcmd.js

@@ -73,6 +73,7 @@ const args = require('minimist')(argv.slice(2), {
         'import-listen',
         'log',
         'dropbox',
+        'user-menu',
     ],
     default: {
         server      : true,
@@ -111,6 +112,7 @@ const args = require('minimist')(argv.slice(2), {
         'one-file-panel': choose(env.bool('one_file_panel'), config('oneFilePanel')),
         'confirm-copy': choose(env.bool('confirm_copy'), config('confirmCopy')),
         'confirm-move': choose(env.bool('confirm_move'), config('confirmMove')),
+        'user-menu': choose(env.bool('user_menu'), config('userMenu')),
         'keys-panel': env.bool('keys_panel') || config('keysPanel'),
         'import-token': env('import_token') || config('importToken'),
         'export-token': env('export_token') || config('exportToken'),
@@ -180,6 +182,7 @@ function main() {
     config('importToken', args['import-token']);
     config('importListen', args['import-listen']);
     config('importUrl', args['import-url']);
+    config('userMenu', args['user-menu']);
 
     config('dropbox', args['dropbox']);
     config('dropboxToken', args['dropbox-token'] || '');

client/key/index.js

@@ -186,6 +186,9 @@ function KeyProto() {
             break;
 
         case Key.F2:
+            if (CloudCmd.config('userMenu'))
+                return CloudCmd.UserMenu.show();
+
             DOM.renameCurrent(current);
             break;
 

client/listeners/index.js

@@ -123,7 +123,7 @@ module.exports.initKeysPanel = () => {
 
         const clickFuncs = {
             'f1'        : CloudCmd.Help.show,
-            'f2'        : DOM.renameCurrent,
+            'f2'        : initF2,
             'f3'        : CloudCmd.View.show,
             'f4'        : CloudCmd.EditFile.show,
             'f5'        : operation('copy'),
@@ -141,6 +141,13 @@ module.exports.initKeysPanel = () => {
     });
 };
 
+function initF2() {
+    if (CloudCmd.config('userMenu'))
+        return CloudCmd.UserMenu.show();
+
+    return DOM.renameCurrent();
+}
+
 const getPanel = (side) => {
     if (!itype.string(side))
         return side;

client/modules/operation/set-listeners.js

@@ -1,7 +1,6 @@
 'use strict';
 
 /* global DOM */
-/* global CloudCmd */
 
 const {
     Dialog,

client/modules/user-menu.js

@@ -0,0 +1,138 @@
+'use strict';
+
+/* global CloudCmd, DOM */
+
+require('../../css/user-menu.css');
+
+const currify = require('currify/legacy');
+const {promisify} = require('es6-promisify');
+const load = require('load.js');
+const createElement = require('@cloudcmd/create-element');
+const Images = require('../dom/images');
+
+const loadCSS = promisify(load.css);
+
+const Name = 'UserMenu';
+CloudCmd[Name] = module.exports;
+
+const {Key} = CloudCmd;
+const {stringify} = JSON;
+
+const userMenuUrl = '/api/v1/user-menu';
+
+module.exports.init = async () => {
+    await Promise.all([
+        loadCSS(`${CloudCmd.prefix}/dist/user-menu.css`),
+        CloudCmd.View(),
+    ]);
+};
+
+module.exports.show = show;
+module.exports.hide = hide;
+
+const getKey = (a) => a.split(' - ')[0];
+const beginWith = (a) => (b) => !b.indexOf(a);
+
+const defaultUserMenu = {
+    'F2 - Rename file': async ({DOM}) => {
+        const {element} = DOM.CurrentInfo;
+        DOM.renameCurrent(element);
+    },
+};
+
+function getUserMenu(menuFn) {
+    if (!menuFn)
+        return defaultUserMenu;
+
+    const module = {};
+    const fn = Function('module', menuFn);
+
+    fn(module);
+
+    return module.exports;
+}
+
+const {CurrentInfo} = DOM;
+
+async function show() {
+    Images.show.load('top');
+
+    const {dirPath} = CurrentInfo;
+    const res = await fetch(`${userMenuUrl}?dir=${dirPath}`);
+    const userMenu = getUserMenu(await res.text());
+    const options = Object.keys(userMenu);
+
+    const el = createElement('select', {
+        className: 'cloudcmd-user-menu',
+        innerHTML: fillTemplate(options),
+        size: 10,
+    });
+
+    const keys = options.map(getKey);
+    el.addEventListener('keydown', onKeyDown(keys, options, userMenu));
+
+    const afterShow = () => el.focus();
+    const autoSize = true;
+
+    Images.hide();
+
+    CloudCmd.View.show(el, {
+        autoSize,
+        afterShow,
+    });
+}
+
+function fillTemplate(options) {
+    const result = [];
+
+    for (const option of options) {
+        result.push(`<option>${option}</option>`);
+    }
+
+    return result.join('');
+}
+
+function hide() {
+    CloudCmd.View.hide();
+}
+
+const onKeyDown = currify(async (keys, options, userMenu, e) => {
+    const {keyCode} = e;
+    const key = e.key.toUpperCase();
+
+    let value;
+
+    if (keyCode === Key.ENTER)
+        ({value} = e.target);
+    else if (keys.includes(key))
+        value = options.find(beginWith(key));
+    else
+        return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    hide();
+
+    const cmd = await userMenu[value]({
+        DOM,
+    });
+
+    if (!cmd)
+        return;
+
+    const res = await fetch(userMenuUrl, {
+        method: 'PUT',
+        body: stringify({
+            cmd,
+        }),
+    });
+
+    const data = await res.text();
+
+    if (data)
+        DOM.Dialog.alert(data);
+
+    CloudCmd.refresh();
+});
+

css/icons.css

@@ -132,3 +132,8 @@
     font-family : 'Fontello';
     content     : '\e81b  ';
 }
+
+.icon-user-menu::before {
+    font-family : 'Fontello';
+    content     : '\e81c  ';
+}

css/user-menu.css

@@ -0,0 +1,14 @@
+.cloudcmd-user-menu {
+    font-size: 16px;
+    font-family: 'Droid Sans Mono', 'Ubuntu Mono', 'Consolas', monospace;
+    width: 400px;
+}
+
+.cloudcmd-user-menu:focus {
+    outline: 0;
+}
+
+.cloudcmd-user-menu > option:checked {
+    box-shadow: 20px -20px 0 2px rgba(49, 123, 249) inset;
+}
+