feat: keepInViewport enhancements (#11199) (CP: 24.10) (#11202)

Author: sissbruecker

packages/dialog/src/vaadin-dialog-base-mixin.d.ts

@@ -70,4 +70,14 @@ export declare class DialogBaseMixinClass {
    * If a unitless number is provided, pixels are assumed.
    */
   height: string;
+
+  /**
+   * Set to true to prevent the dialog from moving outside the viewport bounds.
+   * When enabled, all four edges of the dialog will remain visible, for example
+   * when dragging the dialog or when the viewport is resized. Note that the
+   * dialog will also adjust any programmatically configured size and position
+   * so that it stays within the viewport.
+   * @attr {boolean} keep-in-viewport
+   */
+  keepInViewport: boolean;
 }

packages/dialog/src/vaadin-dialog-base-mixin.js

@@ -100,6 +100,21 @@ export const DialogBaseMixin = (superClass) =>
           type: String,
           value: 'dialog',
         },
+
+        /**
+         * Set to true to prevent the dialog from moving outside the viewport bounds.
+         * When enabled, all four edges of the dialog will remain visible, for example
+         * when dragging the dialog or when the viewport is resized. Note that the
+         * dialog will also adjust any programmatically configured size and position
+         * so that it stays within the viewport.
+         * @attr {boolean} keep-in-viewport
+         * @type {boolean}
+         */
+        keepInViewport: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
       };
     }
 

packages/dialog/src/vaadin-dialog-draggable-mixin.d.ts

@@ -21,12 +21,4 @@ export declare class DialogDraggableMixinClass {
    * "`draggable-leaf-only`" class name.
    */
   draggable: boolean;
-
-  /**
-   * Set to true to prevent dragging the dialog outside the viewport bounds.
-   * When enabled, all four edges of the dialog will remain visible during dragging.
-   * The dialog may still become partially hidden when the viewport is resized.
-   * @attr {boolean} keep-in-viewport
-   */
-  keepInViewport: boolean;
 }

packages/dialog/src/vaadin-dialog-draggable-mixin.js

@@ -31,19 +31,6 @@ export const DialogDraggableMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
-        /**
-         * Set to true to prevent dragging the dialog outside the viewport bounds.
-         * When enabled, all four edges of the dialog will remain visible during dragging.
-         * The dialog may still become partially hidden when the viewport is resized.
-         * @attr {boolean} keep-in-viewport
-         * @type {boolean}
-         */
-        keepInViewport: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-
         /** @private */
         _touchDevice: {
           type: Boolean,

packages/dialog/src/vaadin-dialog-overlay-mixin.d.ts

@@ -34,6 +34,11 @@ export declare class DialogOverlayMixinClass {
    */
   headerTitle: string;
 
+  /**
+   * Whether to keep the overlay within the viewport.
+   */
+  keepInViewport: boolean;
+
   /**
    * Custom function for rendering the dialog header.
    */

packages/dialog/src/vaadin-dialog-overlay-mixin.js

@@ -33,13 +33,22 @@ export const DialogOverlayMixin = (superClass) =>
         footerRenderer: {
           type: Object,
         },
+
+        /**
+         * Whether to keep the overlay within the viewport.
+         */
+        keepInViewport: {
+          type: Boolean,
+          reflectToAttribute: true,
+        },
       };
     }
 
     static get observers() {
       return [
         '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
         '_headerTitleChanged(headerTitle, opened)',
+        '__keepInViewportChanged(keepInViewport, opened)',
       ];
     }
 
@@ -50,13 +59,16 @@ export const DialogOverlayMixin = (superClass) =>
       // Update overflow attribute on resize
       this.__resizeObserver = new ResizeObserver(() => {
         this.__updateOverflow();
+        this.__adjustPosition();
       });
       this.__resizeObserver.observe(this.$.resizerContainer);
 
       // Update overflow attribute on scroll
       this.$.content.addEventListener('scroll', () => {
         this.__updateOverflow();
       });
+
+      this.__handleWindowResize = this.__handleWindowResize.bind(this);
     }
 
     /** @private */
@@ -214,6 +226,8 @@ export const DialogOverlayMixin = (superClass) =>
       });
 
       Object.assign(overlay.style, parsedBounds);
+
+      this.__adjustPosition();
     }
 
     /**
@@ -255,4 +269,54 @@ export const DialogOverlayMixin = (superClass) =>
         this.removeAttribute('overflow');
       }
     }
+
+    /** @private */
+    __keepInViewportChanged(keepInViewport, opened) {
+      if (opened && keepInViewport) {
+        window.addEventListener('resize', this.__handleWindowResize);
+      } else {
+        window.removeEventListener('resize', this.__handleWindowResize);
+      }
+    }
+
+    /** @private */
+    __handleWindowResize() {
+      this.__adjustPosition();
+    }
+
+    /**
+     * Adjusts the position of the overlay to keep it within the viewport if `keepInViewport` is true.
+     * @private
+     */
+    __adjustPosition() {
+      if (!this.opened || !this.keepInViewport) {
+        return;
+      }
+
+      // Centered dialogs do not use absolute positioning and automatically adjust their position / size to fit the viewport
+      const style = getComputedStyle(this.$.overlay);
+      if (style.position !== 'absolute') {
+        return;
+      }
+
+      const overlayHostBounds = this.getBoundingClientRect();
+      const bounds = this.getBounds();
+      // Prefer dimensions from getComputedStyle, as bounding rect is affected
+      // by scale transform applied by opening animation in Lumo
+      const width = parseFloat(style.width) || bounds.width;
+      const height = parseFloat(style.height) || bounds.height;
+
+      const maxLeft = overlayHostBounds.right - overlayHostBounds.left - width;
+      const maxTop = overlayHostBounds.bottom - overlayHostBounds.top - height;
+
+      if (bounds.left > maxLeft || bounds.top > maxTop) {
+        const left = Math.max(0, Math.min(bounds.left, maxLeft));
+        const top = Math.max(0, Math.min(bounds.top, maxTop));
+
+        Object.assign(this.$.overlay.style, {
+          left: `${left}px`,
+          top: `${top}px`,
+        });
+      }
+    }
   };

packages/dialog/src/vaadin-dialog-styles.js

@@ -74,7 +74,7 @@ export const dialogOverlay = css`
     min-width: 12em; /* matches the default <vaadin-text-field> width */
   }
 
-  :host([has-bounds-set]) [part='overlay'] {
+  :host([has-bounds-set]:not([keep-in-viewport])) [part='overlay'] {
     max-width: none;
   }
 

packages/dialog/src/vaadin-dialog.js

@@ -115,6 +115,7 @@ class Dialog extends DialogDraggableMixin(
         with-backdrop="[[!modeless]]"
         resizable$="[[resizable]]"
         draggable$="[[draggable]]"
+        keep-in-viewport="[[keepInViewport]]"
         restore-focus-on-close
         focus-trap
       ></vaadin-dialog-overlay>