@easyquery/ui 7.3.5-rc01 → 7.3.5-rc03

package/dist/assets/css/easyquery.ui.css

@@ -427,6 +427,7 @@
     justify-content: flex-start;
     padding: 20px;
     position: relative;
+    width: 100%;
 }
 
 .kdlg-footer.align-right {
@@ -531,6 +532,7 @@
     padding: 20px;
     font-size: 1em;
     color: #4a4a4a;
+    width: 100%;
 }
 
 
@@ -5125,10 +5127,7 @@ input.eqjs-invalid {
 .eqjs-cb-addrow.eqjs-mobile a, .eqjs-sb-addrow.eqjs-mobile a {
     background: none!important;
 }
-
-.eqjs-menu-levelDiv {
-    max-height: 96vh;
-}
+
 /*setting to all page */
 #eqv-main{
     width:1174px;

package/dist/assets/css/upgrade.css

@@ -453,7 +453,3 @@
 .eqjs-cb-addrow.eqjs-mobile a, .eqjs-sb-addrow.eqjs-mobile a {
     background: none!important;
 }
-
-.eqjs-menu-levelDiv {
-    max-height: 96vh;
-}

package/dist/easyquery.ui.cjs.js

@@ -1417,7 +1417,7 @@ class MenuLevel {
         }
         return res;
     }
-    showAt(x, y, adjustTopPos, hidden) {
+    showAt(x, y, adjustTopPos, hidden, anchor) {
         if (!this.items) {
             return;
         }
@@ -1425,7 +1425,7 @@ class MenuLevel {
         //crocodile
         this.turnCheckboxes(this.items);
         this.renderItems();
-        const winSize = ui.getWinSize();
+        ui.getWinSize();
         const levelStyle = this.levelDiv.style;
         if (hidden) {
             this.levelDiv.style.visibility = 'hidden';
@@ -1436,58 +1436,63 @@ class MenuLevel {
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
         const useMaxSpace = this.parentMenu.options.useMaxSpace;
-        if (useMaxSpace === false) {
+        const viewportHeight = ui.getViewportSize().height;
+        const top = y - scrollY;
+        const bottom = viewportHeight - top;
+        const anchorRect = anchor ? anchor.getBoundingClientRect() : null;
+        const anchorHeight = anchorRect ? anchorRect.height : 0;
+        const magic = 24;
+        if (this.levelIndex > 0 || useMaxSpace) {
+            let maxHeight = viewportHeight - 30;
+            if (this.searchDiv) {
+                maxHeight -= this.searchDiv.scrollHeight;
+            }
+            if (this.closeDiv) {
+                maxHeight -= this.closeDiv.offsetHeight;
+            }
+            this.scrollDiv.style.maxHeight = maxHeight + 'px';
             const levelDivRect = this.levelDiv.getBoundingClientRect();
-            const ldHeight = levelDivRect.height;
-            const vpHeight = winSize.height;
-            const top = y - 16 - scrollY;
-            const bottom = vpHeight - top;
-            if (top > bottom) {
-                // console.log("top > bottom");
-                if (ldHeight > bottom) {
-                    let maxHeight = top;
-                    if (this.searchDiv != null) {
-                        maxHeight -= this.searchDiv.offsetHeight;
-                    }
-                    if (this.closeDiv != null) {
-                        maxHeight -= this.closeDiv.offsetHeight;
-                    }
-                    this.scrollDiv.style.maxHeight = (maxHeight - 24) + 'px';
-                    this.levelDiv.style.top = Math.max(6, y - ldHeight - 24) + 'px';
-                }
+            const levelDivHeight = levelDivRect.height;
+            if (levelDivHeight < bottom - anchorHeight) {
+                levelStyle.top = y + anchorHeight + 'px';
             }
             else {
-                // console.log("bottom > top");
-                this.scrollDiv.style.maxHeight = (bottom - 80) + 'px';
+                if (top < bottom) {
+                    levelStyle.top = y - top + 5 + 'px';
+                }
+                else {
+                    levelStyle.top = Math.max(5, viewportHeight - levelDivHeight - 30) + 'px';
+                }
             }
         }
-        //adjusting level top position
-        if (useMaxSpace) {
-            y = this.adjustTopPos(y);
-            levelStyle.top = y + 'px';
-            //adjustinng maximum height of the menu level if it does not fit to browser window
-            let maxHeight = winSize.height - (y - ui.getScrollPos().top) - 15; //document.documentElement.scrollTop
-            if (this.parentMenu.maxHeight > 0 && maxHeight > this.parentMenu.maxHeight) {
-                maxHeight = this.parentMenu.maxHeight;
-            }
-            if (this._applyItem != null && this._applyItem.itemDiv != null) {
-                maxHeight -= this._applyItem.itemDiv.offsetHeight + 5;
-            }
-            if (this.searchDiv != null) {
-                maxHeight -= this.searchDiv.offsetHeight;
+        else {
+            let maxHeight = Math.max(top, bottom) - magic;
+            if (this.searchDiv) {
+                maxHeight -= this.searchDiv.scrollHeight;
             }
-            if (this.closeDiv != null) {
+            if (this.closeDiv) {
                 maxHeight -= this.closeDiv.offsetHeight;
             }
-            if (this.levelDiv.offsetHeight > maxHeight) {
-                let newHeight = maxHeight;
-                if (newHeight < 50) {
-                    newHeight = 50;
-                }
-                this.scrollDiv.style.height = newHeight + "px";
+            // Рахуємо початковий контейнер
+            let levelDivRect = this.levelDiv.getBoundingClientRect();
+            if (levelDivRect.height < bottom - anchorHeight) {
+                // Контейнер може впасти вниз
+                this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
+                levelStyle.top = y + anchorHeight + 'px';
             }
             else {
-                this.scrollDiv.style.height = "auto";
+                // Визначаємо більший простір зверху чи знизу від анкора
+                if (top > bottom) {
+                    // Падаємо вверх
+                    this.scrollDiv.style.maxHeight = maxHeight + 'px';
+                    levelDivRect = this.levelDiv.getBoundingClientRect();
+                    levelStyle.top = y - levelDivRect.height + 'px';
+                }
+                else {
+                    // Падаємо вниз
+                    this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
+                    levelStyle.top = y + anchorHeight + 'px';
+                }
             }
         }
         //setting minimal level width if it is defined
@@ -1796,11 +1801,11 @@ class PopupMenu {
         else {
             const anchor = options.anchor || document.documentElement;
             const srcPos = ui.getElementAbsolutePos(anchor);
-            const anchorHeight = anchor.offsetHeight;
+            anchor.offsetHeight;
             const anchorWidth = anchor.offsetWidth;
             const pos = {
                 x: srcPos.x,
-                y: srcPos.y + anchorHeight + 2
+                y: srcPos.y // + anchorHeight + 2
             };
             const scroll = ui.getScrollPos();
             const winSize = ui.getWinSize();
@@ -1808,7 +1813,7 @@ class PopupMenu {
             const leftSpace = pos.x + anchorWidth - scroll.left;
             const rightSpace = winSize.width - leftSpace + anchorWidth;
             pos.x += 2;
-            this.rootLevel.showAt(pos.x, pos.y, true, true);
+            this.rootLevel.showAt(pos.x, pos.y, true, true, anchor);
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
             if (!this.rootLevel.levelDiv.style.zIndex) {

package/dist/easyquery.ui.esm.js

@@ -1415,7 +1415,7 @@ class MenuLevel {
         }
         return res;
     }
-    showAt(x, y, adjustTopPos, hidden) {
+    showAt(x, y, adjustTopPos, hidden, anchor) {
         if (!this.items) {
             return;
         }
@@ -1423,7 +1423,7 @@ class MenuLevel {
         //crocodile
         this.turnCheckboxes(this.items);
         this.renderItems();
-        const winSize = getWinSize();
+        getWinSize();
         const levelStyle = this.levelDiv.style;
         if (hidden) {
             this.levelDiv.style.visibility = 'hidden';
@@ -1434,58 +1434,63 @@ class MenuLevel {
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
         const useMaxSpace = this.parentMenu.options.useMaxSpace;
-        if (useMaxSpace === false) {
+        const viewportHeight = getViewportSize().height;
+        const top = y - scrollY;
+        const bottom = viewportHeight - top;
+        const anchorRect = anchor ? anchor.getBoundingClientRect() : null;
+        const anchorHeight = anchorRect ? anchorRect.height : 0;
+        const magic = 24;
+        if (this.levelIndex > 0 || useMaxSpace) {
+            let maxHeight = viewportHeight - 30;
+            if (this.searchDiv) {
+                maxHeight -= this.searchDiv.scrollHeight;
+            }
+            if (this.closeDiv) {
+                maxHeight -= this.closeDiv.offsetHeight;
+            }
+            this.scrollDiv.style.maxHeight = maxHeight + 'px';
             const levelDivRect = this.levelDiv.getBoundingClientRect();
-            const ldHeight = levelDivRect.height;
-            const vpHeight = winSize.height;
-            const top = y - 16 - scrollY;
-            const bottom = vpHeight - top;
-            if (top > bottom) {
-                // console.log("top > bottom");
-                if (ldHeight > bottom) {
-                    let maxHeight = top;
-                    if (this.searchDiv != null) {
-                        maxHeight -= this.searchDiv.offsetHeight;
-                    }
-                    if (this.closeDiv != null) {
-                        maxHeight -= this.closeDiv.offsetHeight;
-                    }
-                    this.scrollDiv.style.maxHeight = (maxHeight - 24) + 'px';
-                    this.levelDiv.style.top = Math.max(6, y - ldHeight - 24) + 'px';
-                }
+            const levelDivHeight = levelDivRect.height;
+            if (levelDivHeight < bottom - anchorHeight) {
+                levelStyle.top = y + anchorHeight + 'px';
             }
             else {
-                // console.log("bottom > top");
-                this.scrollDiv.style.maxHeight = (bottom - 80) + 'px';
+                if (top < bottom) {
+                    levelStyle.top = y - top + 5 + 'px';
+                }
+                else {
+                    levelStyle.top = Math.max(5, viewportHeight - levelDivHeight - 30) + 'px';
+                }
             }
         }
-        //adjusting level top position
-        if (useMaxSpace) {
-            y = this.adjustTopPos(y);
-            levelStyle.top = y + 'px';
-            //adjustinng maximum height of the menu level if it does not fit to browser window
-            let maxHeight = winSize.height - (y - getScrollPos().top) - 15; //document.documentElement.scrollTop
-            if (this.parentMenu.maxHeight > 0 && maxHeight > this.parentMenu.maxHeight) {
-                maxHeight = this.parentMenu.maxHeight;
-            }
-            if (this._applyItem != null && this._applyItem.itemDiv != null) {
-                maxHeight -= this._applyItem.itemDiv.offsetHeight + 5;
-            }
-            if (this.searchDiv != null) {
-                maxHeight -= this.searchDiv.offsetHeight;
+        else {
+            let maxHeight = Math.max(top, bottom) - magic;
+            if (this.searchDiv) {
+                maxHeight -= this.searchDiv.scrollHeight;
             }
-            if (this.closeDiv != null) {
+            if (this.closeDiv) {
                 maxHeight -= this.closeDiv.offsetHeight;
             }
-            if (this.levelDiv.offsetHeight > maxHeight) {
-                let newHeight = maxHeight;
-                if (newHeight < 50) {
-                    newHeight = 50;
-                }
-                this.scrollDiv.style.height = newHeight + "px";
+            // Рахуємо початковий контейнер
+            let levelDivRect = this.levelDiv.getBoundingClientRect();
+            if (levelDivRect.height < bottom - anchorHeight) {
+                // Контейнер може впасти вниз
+                this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
+                levelStyle.top = y + anchorHeight + 'px';
             }
             else {
-                this.scrollDiv.style.height = "auto";
+                // Визначаємо більший простір зверху чи знизу від анкора
+                if (top > bottom) {
+                    // Падаємо вверх
+                    this.scrollDiv.style.maxHeight = maxHeight + 'px';
+                    levelDivRect = this.levelDiv.getBoundingClientRect();
+                    levelStyle.top = y - levelDivRect.height + 'px';
+                }
+                else {
+                    // Падаємо вниз
+                    this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
+                    levelStyle.top = y + anchorHeight + 'px';
+                }
             }
         }
         //setting minimal level width if it is defined
@@ -1794,11 +1799,11 @@ class PopupMenu {
         else {
             const anchor = options.anchor || document.documentElement;
             const srcPos = getElementAbsolutePos(anchor);
-            const anchorHeight = anchor.offsetHeight;
+            anchor.offsetHeight;
             const anchorWidth = anchor.offsetWidth;
             const pos = {
                 x: srcPos.x,
-                y: srcPos.y + anchorHeight + 2
+                y: srcPos.y // + anchorHeight + 2
             };
             const scroll = getScrollPos();
             const winSize = getWinSize();
@@ -1806,7 +1811,7 @@ class PopupMenu {
             const leftSpace = pos.x + anchorWidth - scroll.left;
             const rightSpace = winSize.width - leftSpace + anchorWidth;
             pos.x += 2;
-            this.rootLevel.showAt(pos.x, pos.y, true, true);
+            this.rootLevel.showAt(pos.x, pos.y, true, true, anchor);
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
             if (!this.rootLevel.levelDiv.style.zIndex) {

package/dist/types/utils/popup_menu.d.ts

@@ -62,7 +62,7 @@ declare class MenuLevel {
     deactivateItem(menuItem: any): void;
     showSubLevel(menuItem: MenuItem): void;
     adjustTopPos(top: number): number;
-    showAt(x: number, y: number, adjustTopPos: boolean, hidden: boolean): void;
+    showAt(x: number, y: number, adjustTopPos: boolean, hidden: boolean, anchor?: HTMLElement): void;
     focus(): void;
     hide(): void;
     initLevelDiv(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@easyquery/ui",
-    "version": "7.3.5-rc01",
+    "version": "7.3.5-rc03",
     "description": "EasyQuery.JS Community UI widgets",
     "types": "./dist/types/public_api.d.ts",
     "main": "./dist/easyquery.ui.cjs.js",
@@ -30,7 +30,7 @@
     "bugs": "https://korzh.com/support",
     "license": "LGPL-3.0",
     "peerDependencies": {
-        "@easyquery/core": "^7.3.5-rc01"
+        "@easyquery/core": "^7.3.5-rc03"
     },
     "files": [
         "dist",