@dile/ui 2.21.3 → 2.21.4

package/mixins/overlay/src/DileOverlay.js

@@ -46,6 +46,14 @@ export const DileOverlay = function(superClass) {
       this.horizontalAlign = 'under_left';
       this.verticalAlign = 'bottom';
       this.delayId = null;
+      this._rafId = null;
+      this._onScrollResize = () => {
+        if (this._rafId) return;
+        this._rafId = requestAnimationFrame(() => {
+          this._rafId = null;
+          if (this._overlayClass === 'opened') this.updatePosition();
+        });
+      };
     }
 
     firstUpdated() {
@@ -80,6 +88,7 @@ export const DileOverlay = function(superClass) {
       }));
       if(!this._opening && this._overlayClass=='opened') {
         this._overlayClass = '';
+        this._removePositionListeners();
         this.cancelDelay();
         this.delayId = setTimeout(() => {
           this.overlay.style.display = 'none'
@@ -106,64 +115,96 @@ export const DileOverlay = function(superClass) {
           this._overlayClass = 'opened'
           this._opening = false;
           this.overlay.style.display = 'block';
+          this._addPositionListeners();
         }, 50);
       }
     }
 
+    _addPositionListeners() {
+      window.addEventListener('scroll', this._onScrollResize, { passive: true, capture: true });
+      window.addEventListener('resize', this._onScrollResize, { passive: true });
+    }
+
+    _removePositionListeners() {
+      window.removeEventListener('scroll', this._onScrollResize, { capture: true });
+      window.removeEventListener('resize', this._onScrollResize);
+      if (this._rafId) {
+        cancelAnimationFrame(this._rafId);
+        this._rafId = null;
+      }
+    }
+
     updatePosition() {
-      let triggerWidth = parseInt(this.trigger.offsetWidth);
-      let triggerHeight = parseInt(this.trigger.offsetHeight);
       let moveTop = parseInt(this.moveTop);
       let moveLeft = parseInt(this.moveLeft);
-      
+
+      let triggerRect = this.trigger.getBoundingClientRect();
+
+      // Switch to fixed positioning so overflow:hidden ancestors don't clip the overlay
+      this.overlay.style.position = 'fixed';
       let lastDisplay = this.overlay.style.display;
-      this.overlay.style.top = "-1000px";
+      this.overlay.style.top = '-10000px';
+      this.overlay.style.left = '-10000px';
       this.overlay.style.display = 'block';
-      
+
       let overlayWidth = parseInt(this.overlay.offsetWidth);
       let overlayHeight = parseInt(this.overlay.offsetHeight);
-      
+
       switch(this.verticalAlign) {
         case 'top':
-          this.overlay.style.top = (0 - overlayHeight + moveTop) + 'px';
+          this.setOverlayStyleTop(triggerRect.top - overlayHeight + moveTop, triggerRect, overlayHeight, 'top');
           break;
         case 'center':
-          this.overlay.style.top = '-' + (((overlayHeight - (triggerHeight / 2)) / 2) + moveTop) + 'px';
+          this.setOverlayStyleTop(triggerRect.top - ((overlayHeight - (triggerRect.height / 2)) / 2) - moveTop, triggerRect, overlayHeight, 'center');
           break;
         default:
-          this.overlay.style.top = (triggerHeight + 10 + moveTop) + 'px';
+          this.setOverlayStyleTop(triggerRect.bottom + 10 + moveTop, triggerRect, overlayHeight, 'bottom');
       }
+
       switch(this.horizontalAlign) {
         case 'under_left':
-          this.setOverlayStyleLeft('0px');
+          this.setOverlayStyleLeft(triggerRect.left);
+          break;
+        case 'under_right':
+          this.setOverlayStyleLeft(triggerRect.right - overlayWidth);
           break;
-          case 'under_right':
-            this.setOverlayStyleLeft(`-${overlayWidth - triggerWidth}px`);
-            break;
         case 'left':
-          this.setOverlayStyleLeft('-' + (overlayWidth + moveLeft) + 'px');
+          this.setOverlayStyleLeft(triggerRect.left - overlayWidth - moveLeft);
           break;
         case 'right':
-            this.setOverlayStyleLeft((triggerWidth + moveLeft) + 'px');
+          this.setOverlayStyleLeft(triggerRect.right + moveLeft);
           break;
         default:
-            this.setOverlayStyleLeft('-' + (((overlayWidth - triggerWidth) / 2) + moveLeft) + 'px');
+          this.setOverlayStyleLeft(triggerRect.left - ((overlayWidth - triggerRect.width) / 2) - moveLeft);
       }
+
       this.overlay.style.display = lastDisplay;
     }
-    
-    setOverlayStyleLeft(pos) {
-      this.overlay.style.left = pos;
-      var rect = this.overlay.getBoundingClientRect();
-      let posLeft = parseInt(this.overlay.style.left);
-      if (rect.left < 0) {
-        this.overlay.style.left = (posLeft - rect.left + 10) + 'px';
+
+    setOverlayStyleTop(topValue, triggerRect, overlayHeight, direction) {
+      const viewportHeight = document.documentElement.clientHeight;
+      const margin = 10;
+      if (direction === 'bottom' && topValue + overlayHeight > viewportHeight - margin) {
+        const flipped = triggerRect.top - overlayHeight - margin;
+        topValue = flipped >= margin ? flipped : viewportHeight - overlayHeight - margin;
+      } else if (direction === 'top' && topValue < margin) {
+        const flipped = triggerRect.bottom + margin;
+        topValue = flipped + overlayHeight <= viewportHeight - margin ? flipped : margin;
       }
-      let pageWidth = document.querySelector('html').clientWidth;
-      if (rect.left + rect.width > pageWidth) {
-        let displacement = posLeft - (rect.right - pageWidth) - 15;  
-        this.overlay.style.left = (displacement ) + 'px';
+      if (topValue < margin) topValue = margin;
+      if (topValue + overlayHeight > viewportHeight - margin) topValue = viewportHeight - overlayHeight - margin;
+      this.overlay.style.top = topValue + 'px';
+    }
+
+    setOverlayStyleLeft(posLeft) {
+      const pageWidth = document.querySelector('html').clientWidth;
+      const overlayWidth = this.overlay.offsetWidth;
+      if (posLeft < 10) {
+        posLeft = 10;
+      } else if (posLeft + overlayWidth > pageWidth - 15) {
+        posLeft = pageWidth - overlayWidth - 15;
       }
+      this.overlay.style.left = posLeft + 'px';
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.21.3",
+  "version": "2.21.4",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "67e2e845295d11fcdbf3dedcc989d26b821005d4"
+  "gitHead": "f3d7061476125162d6d9822928d40dc15e110c6c"
 }