aleman 1.1.44 → 1.2.0

package/ChangeLog

@@ -1,3 +1,8 @@
+2025.09.02, v1.2.0
+
+feature:
+- 9d3cc8b aleman: menu: position
+
 2025.09.02, v1.1.44
 
 feature:

package/aleman/add-listeners.js

@@ -94,6 +94,7 @@ const createListener = ({options, addon, readState, writeState}) => (event) => {
         event,
         state,
         options,
+        writeState,
     });
     
     writeState(newState);

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,
@@ -51,6 +59,7 @@ export const hydrate = (element, {addons, options, state, rules, stateName = 'al
                 state,
                 event,
                 options,
+                writeState,
             });
             
             writeState({

package/menu/addons/context-menu.js

@@ -1,3 +1,5 @@
+import {setPosition} from './set-position.js';
+
 export const createContextMenu = (name) => {
     return {
         name,
@@ -13,24 +15,33 @@ const events = [
 
 const preventDefault = true;
 
-const listener = ({event, state, options}) => {
-    const {beforeShow} = options;
+const listener = ({event, state, options, writeState}) => {
+    const {name, 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,
         },
     });
     
+    if (is)
+        requestAnimationFrame(() => {
+            writeState(setPosition(name, event));
+        }, 0);
+    
     const command = is ? 'show' : 'hide';
     
     return {
         command,
         position: {
-            x: event.clientX,
-            y: event.clientY - 10,
+            x,
+            y: y - 14,
         },
     };
 };

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 - 14}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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aleman",
-  "version": "1.1.44",
+  "version": "1.2.0",
   "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"