aleman 1.1.44 → 1.2.1

package/ChangeLog

@@ -1,3 +1,16 @@
+2025.09.02, v1.2.1
+
+fix:
+- b2e892b package: repository url
+
+feature:
+- cfea6cc aleman: menu: after, afterCondition
+
+2025.09.02, v1.2.0
+
+feature:
+- 9d3cc8b aleman: menu: position
+
 2025.09.02, v1.1.44
 
 feature:

package/aleman/add-listeners.js

@@ -68,6 +68,8 @@ const createListener = ({options, addon, readState, writeState}) => (event) => {
         preventDefault,
         stopPropagation,
         filter,
+        after,
+        conditionAfter,
     } = addon;
     
     if (key && event.key !== key)
@@ -94,7 +96,17 @@ const createListener = ({options, addon, readState, writeState}) => (event) => {
         event,
         state,
         options,
+        writeState,
     });
     
     writeState(newState);
+    
+    if (after && conditionAfter?.({state: newState, options}))
+        requestAnimationFrame(() => {
+            writeState(after({
+                event,
+                state: newState,
+                options,
+            }));
+        });
 };

package/aleman/index.js

@@ -8,7 +8,15 @@ import {createRender} from './render.js';
 
 const id = (a) => a;
 
-export const hydrate = (element, {addons, options, state, rules, stateName = 'aleman-state'}) => {
+export const hydrate = (element, config) => {
+    const {
+        addons,
+        options,
+        state,
+        rules,
+        stateName = 'aleman-state',
+    } = config;
+    
     const render = createRender(element.innerHTML, {
         options,
         rules,
@@ -45,18 +53,28 @@ export const hydrate = (element, {addons, options, state, rules, stateName = 'al
     });
     
     return {
-        run: (event, fn = id) => {
+        run: (event, addon) => {
             const state = readState();
-            const newState = fn({
+            const newState = addon.listener({
                 state,
                 event,
                 options,
+                writeState,
             });
             
             writeState({
                 ...state,
                 ...newState,
             });
+            
+            if (addon.conditionAfter?.({state: newState, options}))
+                requestAnimationFrame(() => {
+                    writeState(addon.after({
+                        event,
+                        options,
+                        state: newState,
+                    }));
+                });
         },
     };
 };

package/menu/addons/context-menu.js

@@ -1,9 +1,13 @@
+import {setPosition} from './set-position.js';
+
 export const createContextMenu = (name) => {
     return {
         name,
         events,
         preventDefault,
+        after,
         listener,
+        conditionAfter,
     };
 };
 
@@ -13,14 +17,18 @@ const events = [
 
 const preventDefault = true;
 
-const listener = ({event, state, options}) => {
+const listener = ({event, state, options, writeState}) => {
     const {beforeShow} = options;
+    const {x, y} = {
+        x: event.clientX,
+        y: event.clientY,
+    };
     
     const is = !beforeShow || beforeShow?.({
         ...state,
         position: {
-            x: event.clientX,
-            y: event.clientY,
+            x,
+            y,
         },
     });
     
@@ -29,8 +37,17 @@ const listener = ({event, state, options}) => {
     return {
         command,
         position: {
-            x: event.clientX,
-            y: event.clientY - 10,
+            x,
+            y: y - 14,
         },
     };
 };
+
+const after = ({event, options}) => {
+    const {name} = options;
+    return setPosition(name, event);
+};
+
+const conditionAfter = ({state}) => {
+    return state.command === 'show';
+};

package/menu/addons/set-position.js

@@ -0,0 +1,51 @@
+export const setPosition = (name, event) => {
+    const element = document.querySelector(`[data-name="${name}"]`);
+    const {x, y} = calculate(element, event);
+    
+    element.style.left = `${x}px`;
+    element.style.top = `${y}px`;
+    
+    return {
+        position: {
+            x,
+            y,
+        },
+    };
+};
+
+function calculate(element, {clientX, clientY}) {
+    const heightMenu = getMenuHeight(element);
+    const widthMenu = getMenuWidth(element);
+    const heightInner = window.innerHeight;
+    const widthInner = window.innerWidth;
+    
+    if (widthInner < widthMenu + clientX) {
+        clientX -= widthMenu;
+        
+        if (clientX < 0)
+            clientX = 0;
+    }
+    
+    if (heightInner < heightMenu + clientY) {
+        clientY -= heightMenu;
+        
+        if (clientY < 0)
+            clientY = 0;
+    }
+    
+    return {
+        x: clientX,
+        y: clientY - 14,
+    };
+}
+
+function getMenuHeight(element) {
+    const {height} = getComputedStyle(element);
+    return parseInt(height, 10);
+}
+
+function getMenuWidth(element) {
+    const {width} = getComputedStyle(element);
+    return parseInt(width, 10);
+}
+

package/menu/hydrate-menu.js

@@ -4,30 +4,32 @@ import {initState} from './state.js';
 import {addons} from './addons/index.js';
 import {createMouseEnter} from './addons/mouse-enter.js';
 import {createItemClick} from './addons/item-click.js';
-import * as contextMenu from './addons/context-menu.js';
 import * as click from './addons/click.js';
 import {createContextMenu} from './addons/context-menu.js';
+import {setPosition} from './addons/set-position.js';
 
 const {assign} = Object;
 
-export const hydrateMenu = (name, {hydrateElement, options, menu}) => {
+export const hydrateMenu = (elementName, {hydrateElement, options, menu}) => {
     assign(options, {
         menu,
     });
     
+    const {name} = options;
     const state = initState(options);
-    const contextMenu = createContextMenu(name);
+    const contextMenu = createContextMenu(elementName);
     const {run} = hydrate(hydrateElement, {
         options,
         state,
         addons: [
             contextMenu,
-            createMouseEnter(options.name),
-            createItemClick(options.name),
+            createMouseEnter(name),
+            createItemClick(name),
             ...addons,
         ],
         rules,
-        stateName: `aleman-state-${options.name}`,
+        afterHydrate: setPosition,
+        stateName: `aleman-state-${name}`,
     });
     
     return {
@@ -37,8 +39,8 @@ export const hydrateMenu = (name, {hydrateElement, options, menu}) => {
                 clientY,
             };
             
-            run(event, contextMenu.listener, options.beforeShow);
+            run(event, contextMenu, options.beforeShow);
         },
-        hide: () => run({}, click.listener, options.beforeHide),
+        hide: () => run({}, click, options.beforeHide),
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aleman",
-  "version": "1.1.44",
+  "version": "1.2.1",
   "type": "module",
   "author": "coderaiser <mnemonic.enemy@gmail.com> (https://github.com/coderaiser)",
   "description": "🐊Putout-based framework for web",
@@ -8,7 +8,7 @@
   "main": "aleman/index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/coderaiser/putout.git"
+    "url": "git+https://github.com/putoutjs/aleman.git"
   },
   "exports": {
     "./menu": "./menu/menu.js"