@easyquery/ui 7.3.5 → 7.4.0-rc02

package/dist/easyquery.ui.cjs.js

@@ -682,20 +682,20 @@ class MenuLevel {
         const applyItem = this._applyItem;
         //if multiselect option is on - then we should add special "apply" item
         if (multiselect && this.levelIndex === 0 && this.parentMenu.options.hideButtons !== true) {
-            const applyDiv = document.createElement("div");
-            applyDiv.classList.add(`${this.cssPrefix}-applyDiv`);
-            applyDiv['menuItem'] = applyItem;
+            this.applyDiv = document.createElement("div");
+            this.applyDiv.classList.add(`${this.cssPrefix}-applyDiv`);
+            this.applyDiv['menuItem'] = applyItem;
             this.applyBtn = document.createElement('button');
             if (this.parentMenu.options.useDefaultStyles) {
-                applyDiv.style.borderBottom = '1px solid';
-                applyDiv.style.padding = '5px';
-                applyDiv.style.marginBottom = '5px';
+                this.applyDiv.style.borderBottom = '1px solid';
+                this.applyDiv.style.padding = '5px';
+                this.applyDiv.style.marginBottom = '5px';
                 this.applyBtn.style.padding = '0 5px';
                 this.applyBtn.style.cursor = "pointer";
             }
             const applyTextNode = document.createTextNode(this.parentMenu.options.buttons.submit);
             this.applyBtn.appendChild(applyTextNode);
-            applyDiv.appendChild(this.applyBtn);
+            this.applyDiv.appendChild(this.applyBtn);
             //cancel btn
             const cancelBtn = document.createElement('button');
             cancelBtn.classList.add(`${this.cssPrefix}-cancel`);
@@ -706,9 +706,9 @@ class MenuLevel {
             }
             const cancelText = document.createTextNode(this.parentMenu.options.buttons.cancel);
             cancelBtn.appendChild(cancelText);
-            applyDiv.appendChild(cancelBtn);
-            baseDiv.appendChild(applyDiv);
-            applyItem.itemDiv = applyDiv;
+            this.applyDiv.appendChild(cancelBtn);
+            baseDiv.appendChild(this.applyDiv);
+            applyItem.itemDiv = this.applyDiv;
             this.applyBtn.addEventListener('click', () => {
                 this.submit(this._applyItem);
             });
@@ -1436,78 +1436,52 @@ class MenuLevel {
         levelStyle.top = y + 'px';
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
+        this.scrollDiv.style.maxHeight = null;
         const useMaxSpace = this.parentMenu.options.useMaxSpace;
         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) {
-            let maxHeight = viewportHeight - 30;
-            if (this.searchDiv) {
-                maxHeight -= this.searchDiv.scrollHeight;
-                y -= this.searchDiv.scrollHeight;
-            }
-            if (this.closeDiv) {
-                maxHeight -= this.closeDiv.offsetHeight;
-                y -= this.closeDiv.offsetHeight;
-            }
-            this.scrollDiv.style.maxHeight = maxHeight + 'px';
-            levelStyle.top = this.adjustTopPos(y) + 'px';
-        }
-        else if (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 levelDivHeight = levelDivRect.height;
-            if (levelDivHeight < bottom - anchorHeight) {
-                levelStyle.top = y + anchorHeight + 'px';
-            }
-            else {
-                if (top < bottom) {
-                    levelStyle.top = y - top + 5 + 'px';
-                }
-                else {
-                    levelStyle.top = Math.max(5, viewportHeight - levelDivHeight - 30) + 'px';
-                }
-            }
-        }
-        else {
-            let maxHeight = Math.max(top, bottom) - magic;
-            if (this.searchDiv) {
-                maxHeight -= this.searchDiv.scrollHeight;
-            }
-            if (this.closeDiv) {
-                maxHeight -= this.closeDiv.offsetHeight;
-            }
-            // Рахуємо початковий контейнер
-            let levelDivRect = this.levelDiv.getBoundingClientRect();
-            if (levelDivRect.height < bottom - anchorHeight) {
-                // Контейнер може впасти вниз
-                this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
-                levelStyle.top = y + anchorHeight + 'px';
-            }
-            else {
-                // Визначаємо більший простір зверху чи знизу від анкора
-                if (top > bottom) {
-                    // Падаємо вверх
-                    this.scrollDiv.style.maxHeight = maxHeight + 'px';
-                    levelDivRect = this.levelDiv.getBoundingClientRect();
-                    levelStyle.top = y - levelDivRect.height + 'px'; // - anchorHeight
-                }
-                else {
-                    // Падаємо вниз
-                    this.scrollDiv.style.maxHeight = maxHeight - magic - anchorHeight + 'px';
-                    levelStyle.top = y + anchorHeight + 'px';
-                }
-            }
+        const upperSpace = y - scrollY;
+        const lowerSpace = viewportHeight - upperSpace - anchorHeight;
+        const minOffset = 15;
+        // Рахуємо початковий контейнер
+        let levelDivRect = this.levelDiv.getBoundingClientRect();
+        if (this.levelIndex == 0 && levelDivRect.height < lowerSpace - minOffset) { //root level. Have enough space to drop down without scroll
+            levelStyle.top = (y + anchorHeight) + 'px';
+        }
+        else if (this.levelIndex == 0 && levelDivRect.height < upperSpace - minOffset) { //root level. Have enough space to drop up without scroll
+            levelStyle.top = (y - levelDivRect.height) + 'px';
+        }
+        else if (useMaxSpace || this.levelIndex > 0) { //sub-level or useMaxSpace option set. Use all the space
+            const outsideBottom = levelDivRect.bottom + minOffset - scrollY - viewportHeight;
+            if (outsideBottom > 0) {
+                levelStyle.top = levelDivRect.top - outsideBottom + 'px';
+            }
+            levelDivRect = this.levelDiv.getBoundingClientRect();
+            const outsideTop = scrollY + minOffset - levelDivRect.top;
+            if (outsideTop > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
+                levelStyle.top = levelDivRect.top + outsideTop + 'px';
+            }
+        }
+        else if (upperSpace <= lowerSpace) { //root level. Drop down with scroll
+            levelStyle.top = (y + anchorHeight) + 'px';
+            const outsideBottom = levelDivRect.height + minOffset - lowerSpace;
+            if (outsideBottom > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideBottom + 'px';
+            }
+        }
+        else { //root level. Drop up with scroll
+            y -= levelDivRect.height;
+            const outsideTop = scrollY + minOffset - y;
+            if (outsideTop > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
+                y += outsideTop;
+            }
+            levelStyle.top = y + 'px';
         }
         //setting minimal level width if it is defined
         let minItemWidth = this.parentMenu.minItemWidth;
@@ -1805,12 +1779,13 @@ class PopupMenu {
         this.active = true;
         this.setSelectedItems(this.options.items, selectedIds);
         if (ui.browserUtils.isMobileMode()) {
-            this.rootLevel.showAt(0, 0, true, true);
+            this.rootLevel.initLevelDiv();
             this.rootLevel.levelDiv.style.top = '0px';
             this.rootLevel.levelDiv.style.bottom = '0px';
             this.rootLevel.levelDiv.style.right = '0px';
             this.rootLevel.levelDiv.style.position = 'fixed';
             this.rootLevel.levelDiv.style.fontSize = '20px';
+            this.rootLevel.showAt(0, 0, true, true);
         }
         else {
             const anchor = options.anchor || document.documentElement;
@@ -1827,9 +1802,13 @@ 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, anchor);
+            this.rootLevel.initLevelDiv();
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
+            this.rootLevel.levelDiv.style.bottom = '';
+            this.rootLevel.levelDiv.style.position = 'absolute';
+            this.rootLevel.levelDiv.style.fontSize = '14px';
+            this.rootLevel.showAt(pos.x, pos.y, true, true, anchor);
             if (!this.rootLevel.levelDiv.style.zIndex) {
                 // z-index is at least 10000 and more if anchor has bigger
                 this.rootLevel.levelDiv.style.zIndex = `${Math.max(10000, findHighestZIndex(anchor) + 1)}`;
@@ -1850,7 +1829,6 @@ class PopupMenu {
                 }
                 this.rootLevel.levelDiv.style.right = ui.getViewportSize().width - pos.x - anchorWidth + 'px';
             }
-            this.rootLevel.levelDiv.style.fontSize = '14px';
         }
         this.rootLevel.levelDiv.style.visibility = 'visible';
         this.rootLevel.focus();

package/dist/easyquery.ui.esm.js

@@ -680,20 +680,20 @@ class MenuLevel {
         const applyItem = this._applyItem;
         //if multiselect option is on - then we should add special "apply" item
         if (multiselect && this.levelIndex === 0 && this.parentMenu.options.hideButtons !== true) {
-            const applyDiv = document.createElement("div");
-            applyDiv.classList.add(`${this.cssPrefix}-applyDiv`);
-            applyDiv['menuItem'] = applyItem;
+            this.applyDiv = document.createElement("div");
+            this.applyDiv.classList.add(`${this.cssPrefix}-applyDiv`);
+            this.applyDiv['menuItem'] = applyItem;
             this.applyBtn = document.createElement('button');
             if (this.parentMenu.options.useDefaultStyles) {
-                applyDiv.style.borderBottom = '1px solid';
-                applyDiv.style.padding = '5px';
-                applyDiv.style.marginBottom = '5px';
+                this.applyDiv.style.borderBottom = '1px solid';
+                this.applyDiv.style.padding = '5px';
+                this.applyDiv.style.marginBottom = '5px';
                 this.applyBtn.style.padding = '0 5px';
                 this.applyBtn.style.cursor = "pointer";
             }
             const applyTextNode = document.createTextNode(this.parentMenu.options.buttons.submit);
             this.applyBtn.appendChild(applyTextNode);
-            applyDiv.appendChild(this.applyBtn);
+            this.applyDiv.appendChild(this.applyBtn);
             //cancel btn
             const cancelBtn = document.createElement('button');
             cancelBtn.classList.add(`${this.cssPrefix}-cancel`);
@@ -704,9 +704,9 @@ class MenuLevel {
             }
             const cancelText = document.createTextNode(this.parentMenu.options.buttons.cancel);
             cancelBtn.appendChild(cancelText);
-            applyDiv.appendChild(cancelBtn);
-            baseDiv.appendChild(applyDiv);
-            applyItem.itemDiv = applyDiv;
+            this.applyDiv.appendChild(cancelBtn);
+            baseDiv.appendChild(this.applyDiv);
+            applyItem.itemDiv = this.applyDiv;
             this.applyBtn.addEventListener('click', () => {
                 this.submit(this._applyItem);
             });
@@ -1434,78 +1434,52 @@ class MenuLevel {
         levelStyle.top = y + 'px';
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
+        this.scrollDiv.style.maxHeight = null;
         const useMaxSpace = this.parentMenu.options.useMaxSpace;
         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) {
-            let maxHeight = viewportHeight - 30;
-            if (this.searchDiv) {
-                maxHeight -= this.searchDiv.scrollHeight;
-                y -= this.searchDiv.scrollHeight;
-            }
-            if (this.closeDiv) {
-                maxHeight -= this.closeDiv.offsetHeight;
-                y -= this.closeDiv.offsetHeight;
-            }
-            this.scrollDiv.style.maxHeight = maxHeight + 'px';
-            levelStyle.top = this.adjustTopPos(y) + 'px';
-        }
-        else if (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 levelDivHeight = levelDivRect.height;
-            if (levelDivHeight < bottom - anchorHeight) {
-                levelStyle.top = y + anchorHeight + 'px';
-            }
-            else {
-                if (top < bottom) {
-                    levelStyle.top = y - top + 5 + 'px';
-                }
-                else {
-                    levelStyle.top = Math.max(5, viewportHeight - levelDivHeight - 30) + 'px';
-                }
-            }
-        }
-        else {
-            let maxHeight = Math.max(top, bottom) - magic;
-            if (this.searchDiv) {
-                maxHeight -= this.searchDiv.scrollHeight;
-            }
-            if (this.closeDiv) {
-                maxHeight -= this.closeDiv.offsetHeight;
-            }
-            // Рахуємо початковий контейнер
-            let levelDivRect = this.levelDiv.getBoundingClientRect();
-            if (levelDivRect.height < bottom - anchorHeight) {
-                // Контейнер може впасти вниз
-                this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
-                levelStyle.top = y + anchorHeight + 'px';
-            }
-            else {
-                // Визначаємо більший простір зверху чи знизу від анкора
-                if (top > bottom) {
-                    // Падаємо вверх
-                    this.scrollDiv.style.maxHeight = maxHeight + 'px';
-                    levelDivRect = this.levelDiv.getBoundingClientRect();
-                    levelStyle.top = y - levelDivRect.height + 'px'; // - anchorHeight
-                }
-                else {
-                    // Падаємо вниз
-                    this.scrollDiv.style.maxHeight = maxHeight - magic - anchorHeight + 'px';
-                    levelStyle.top = y + anchorHeight + 'px';
-                }
-            }
+        const upperSpace = y - scrollY;
+        const lowerSpace = viewportHeight - upperSpace - anchorHeight;
+        const minOffset = 15;
+        // Рахуємо початковий контейнер
+        let levelDivRect = this.levelDiv.getBoundingClientRect();
+        if (this.levelIndex == 0 && levelDivRect.height < lowerSpace - minOffset) { //root level. Have enough space to drop down without scroll
+            levelStyle.top = (y + anchorHeight) + 'px';
+        }
+        else if (this.levelIndex == 0 && levelDivRect.height < upperSpace - minOffset) { //root level. Have enough space to drop up without scroll
+            levelStyle.top = (y - levelDivRect.height) + 'px';
+        }
+        else if (useMaxSpace || this.levelIndex > 0) { //sub-level or useMaxSpace option set. Use all the space
+            const outsideBottom = levelDivRect.bottom + minOffset - scrollY - viewportHeight;
+            if (outsideBottom > 0) {
+                levelStyle.top = levelDivRect.top - outsideBottom + 'px';
+            }
+            levelDivRect = this.levelDiv.getBoundingClientRect();
+            const outsideTop = scrollY + minOffset - levelDivRect.top;
+            if (outsideTop > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
+                levelStyle.top = levelDivRect.top + outsideTop + 'px';
+            }
+        }
+        else if (upperSpace <= lowerSpace) { //root level. Drop down with scroll
+            levelStyle.top = (y + anchorHeight) + 'px';
+            const outsideBottom = levelDivRect.height + minOffset - lowerSpace;
+            if (outsideBottom > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideBottom + 'px';
+            }
+        }
+        else { //root level. Drop up with scroll
+            y -= levelDivRect.height;
+            const outsideTop = scrollY + minOffset - y;
+            if (outsideTop > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
+                y += outsideTop;
+            }
+            levelStyle.top = y + 'px';
         }
         //setting minimal level width if it is defined
         let minItemWidth = this.parentMenu.minItemWidth;
@@ -1803,12 +1777,13 @@ class PopupMenu {
         this.active = true;
         this.setSelectedItems(this.options.items, selectedIds);
         if (browserUtils.isMobileMode()) {
-            this.rootLevel.showAt(0, 0, true, true);
+            this.rootLevel.initLevelDiv();
             this.rootLevel.levelDiv.style.top = '0px';
             this.rootLevel.levelDiv.style.bottom = '0px';
             this.rootLevel.levelDiv.style.right = '0px';
             this.rootLevel.levelDiv.style.position = 'fixed';
             this.rootLevel.levelDiv.style.fontSize = '20px';
+            this.rootLevel.showAt(0, 0, true, true);
         }
         else {
             const anchor = options.anchor || document.documentElement;
@@ -1825,9 +1800,13 @@ 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, anchor);
+            this.rootLevel.initLevelDiv();
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
+            this.rootLevel.levelDiv.style.bottom = '';
+            this.rootLevel.levelDiv.style.position = 'absolute';
+            this.rootLevel.levelDiv.style.fontSize = '14px';
+            this.rootLevel.showAt(pos.x, pos.y, true, true, anchor);
             if (!this.rootLevel.levelDiv.style.zIndex) {
                 // z-index is at least 10000 and more if anchor has bigger
                 this.rootLevel.levelDiv.style.zIndex = `${Math.max(10000, findHighestZIndex(anchor) + 1)}`;
@@ -1848,7 +1827,6 @@ class PopupMenu {
                 }
                 this.rootLevel.levelDiv.style.right = getViewportSize().width - pos.x - anchorWidth + 'px';
             }
-            this.rootLevel.levelDiv.style.fontSize = '14px';
         }
         this.rootLevel.levelDiv.style.visibility = 'visible';
         this.rootLevel.focus();

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

@@ -17,6 +17,7 @@ declare class MenuLevel {
     private levelIndex;
     private searchDiv;
     private searchBox;
+    private applyDiv;
     private closeDiv;
     private scrollDiv;
     private domWriteItemsId;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@easyquery/ui",
-    "version": "7.3.5",
+    "version": "7.4.0-rc02",
     "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"
+        "@easyquery/core": "^7.4.0-rc02"
     },
     "files": [
         "dist",