@dile/ui 2.21.3 → 2.22.0

package/components/card/card-slide.js

@@ -0,0 +1,3 @@
+import { DileCardSlide } from "./src/DileCardSlide.js";
+
+window.customElements.define("dile-card-slide", DileCardSlide);

package/components/card/index.js

@@ -1 +1,2 @@
-export { DileCard } from './src/DileCard.js';
+export { DileCard } from './src/DileCard.js';
+export { DileCardSlide } from './src/DileCardSlide.js';

package/components/card/src/DileCardSlide.js

@@ -0,0 +1,108 @@
+import { html, css } from 'lit';
+import { DileCard } from './DileCard.js';
+import { DileSlideDown } from '../../../mixins/slide-down/index.js';
+import { arrowDropDownIcon } from '@dile/icons';
+import '@dile/ui/components/icon/icon.js';
+
+export class DileCardSlide extends DileSlideDown(DileCard) {
+  static get properties() {
+    return {
+      opened: { type: Boolean },
+      icon: { type: Object },
+    }
+  }
+
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        h1 {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          cursor: pointer;
+          padding-bottom: var(--dile-card-slide-title-padding-bottom, var(--dile-card-padding-y, 1rem));
+        }
+        #content {
+          height: 0;
+          overflow: hidden;
+          transition: height 0.5s ease-in;
+          -webkit-transition: height 0.5s ease-in;
+        }
+        dile-icon {
+          flex-shrink: 0;
+          transform: rotate(-90deg);
+          transition: transform 0.5s ease;
+          --dile-icon-color: var(--dile-card-slide-icon-color, var(--dile-primary-color, #303030));
+        }
+        h1.opened dile-icon {
+          transform: rotate(0deg);
+        }
+      `
+    ];
+  }
+
+  constructor() {
+    super();
+    this.opened = false;
+    this.icon = arrowDropDownIcon;
+  }
+
+  firstUpdated() {
+    this.content = this.shadowRoot.getElementById('content');
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('opened') && this.opened != undefined) {
+      if (this.opened) {
+        this.slideShow(this.content);
+      } else {
+        this.slideHide(this.content);
+      }
+    }
+  }
+
+  get titleTemplate() {
+    return this.title
+      ? html`
+        <h1 @click="${this.toggle}" class="${this.opened ? 'opened' : ''}">
+          ${this.title}
+          <dile-icon .icon=${this.icon}></dile-icon>
+        </h1>`
+      : ''
+  }
+
+  render() {
+    return html`
+      ${this.titleTemplate}
+      <div id="content">
+        <main>
+          <slot></slot>
+        </main>
+        ${this.footerTemplate}
+      </div>
+    `;
+  }
+
+  toggle() {
+    if (this.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    if (!this.opened) {
+      this.slideShow(this.content);
+      this.opened = true;
+    }
+  }
+
+  close() {
+    if (this.opened) {
+      this.slideHide(this.content);
+      this.opened = false;
+    }
+  }
+}

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.22.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "67e2e845295d11fcdbf3dedcc989d26b821005d4"
+  "gitHead": "2347a53611364de73ace21a1ce421d5ac77a8717"
 }