feature: client: menu: aleman: add

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();
     }
 }
+