@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/utils/popup.js

@@ -1,11 +1,21 @@
+/**
+ * @typedef {Object} DOMRectLike
+ * @prop {number} left
+ * @prop {number} right
+ * @prop {number} top
+ * @prop {number} bottom
+ * @prop {number} width
+ * @prop {number} height
+ */
+
 /**
  * @typedef {Object} CanAnchorPopUpOptions
- * @prop {Element|DOMRect} [anchor]
+ * @prop {Element|DOMRectLike} [anchor]
  * @prop {number|'left'|'center'|'right'} [clientX]
  * @prop {number|'top'|'center'|'bottom'} [clientY]
  * @prop {number} [pageX]
  * @prop {number} [pageY]
- * @prop {Element|DOMRect} [popup]
+ * @prop {Element|{width:number, height:number}} [popup]
  * @prop {number} [width]
  * @prop {number} [height]
  * @prop {number} [offsetX] Offset from anchor
@@ -19,9 +29,24 @@
 /** @param {CanAnchorPopUpOptions} options */
 export function canAnchorPopup(options) {
   let { pageX, pageY, directionX, directionY } = options;
+  const pageWidth = document.documentElement.clientWidth;
+  const pageHeight = document.documentElement.clientHeight;
   if (pageX == null || pageY == null) {
     const { clientX, clientY, anchor } = options;
-    const rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
+    let rect;
+    if (anchor) {
+      rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
+    } else {
+      rect = {
+        left: 0,
+        width: pageWidth,
+        right: pageWidth,
+        top: 0,
+        bottom: pageHeight,
+        height: pageHeight,
+      };
+    }
+
     if (pageX == null) {
       switch (clientX) {
         case 'left':
@@ -72,7 +97,7 @@ export function canAnchorPopup(options) {
       height = popup.clientHeight;
     } else {
       width = popup.width;
-      height = popup.width;
+      height = popup.height;
     }
   }
 
@@ -81,42 +106,84 @@ export function canAnchorPopup(options) {
   let bottom;
   let left;
   const margin = options.margin ?? 0;
-  const pageTop = margin;
-  const pageBottom = document.documentElement.clientHeight - margin;
-  const pageRight = document.documentElement.clientWidth - margin;
-  const pageLeft = margin;
+
+  let pageTop = margin;
+  let pageBottom = -margin;
+  let pageLeft = margin;
+  let pageRight = -margin;
+
+  if (window.visualViewport) {
+    pageTop += window.visualViewport.offsetTop;
+    pageBottom += window.visualViewport.offsetTop + window.visualViewport.height;
+    pageLeft += window.visualViewport.offsetLeft;
+    pageRight += window.visualViewport.offsetLeft + window.visualViewport.width;
+  } else {
+    pageBottom += pageHeight;
+    pageRight += pageWidth;
+  }
 
   const offsetX = options.offsetX ?? 0;
   const offsetY = options.offsetY ?? 0;
   pageX += offsetX;
   pageY += offsetY;
 
+  let cssTop = 'auto';
+  let cssRight = 'auto';
+  let cssBottom = 'auto';
+  let cssLeft = 'auto';
+  let maxHeight = null;
+  let maxWidth = null;
+
   switch (directionY) {
     case 'up':
       bottom = Math.min(pageY, pageBottom);
       top = Math.max(bottom - height, pageTop);
+      cssBottom = `${pageHeight - bottom}px`;
+      if (top === pageTop) {
+        maxHeight = `${bottom - pageTop}px`;
+      }
       break;
     case 'center':
       top = Math.max(pageY - height / 2, pageTop);
       bottom = Math.min(pageY + height / 2, pageBottom);
+      cssTop = `${top}px`;
+      if (bottom === pageBottom) {
+        maxHeight = `${pageBottom - pageTop}px`;
+      }
       break;
     default:
       top = Math.max(pageY, pageTop);
       bottom = Math.min(top + height, pageBottom);
+      cssTop = `${top}px`;
+      if (bottom === pageBottom) {
+        maxHeight = `${pageBottom - top}px`;
+      }
   }
 
   switch (directionX) {
     case 'left':
       right = Math.min(pageX, pageRight);
       left = Math.max(right - width, pageLeft);
+      cssRight = `${pageWidth - right}px`;
+      if (left === pageLeft) {
+        maxWidth = `${right - pageLeft}px`;
+      }
       break;
     case 'center':
       left = Math.max(pageX - width / 2, pageLeft);
       right = Math.min(pageX + width / 2, pageRight);
+      cssLeft = `${left}px`;
+      if (right === pageRight) {
+        maxWidth = `${pageRight - pageLeft}px`;
+      }
       break;
     default:
       left = Math.max(pageX, pageLeft);
       right = Math.min(left + width, pageRight);
+      cssLeft = `${left}px`;
+      if (right === pageRight) {
+        maxWidth = `${pageRight - left}px`;
+      }
   }
 
   // compute area
@@ -125,6 +192,8 @@ export function canAnchorPopup(options) {
 
   const visibility = realSize / fullSize;
 
+  const transformOriginX = directionX === 'center' ? 'center' : (directionX === 'left' ? 'right' : 'left');
+  const transformOriginY = directionY === 'center' ? 'center' : (directionY === 'up' ? 'bottom' : 'top');
   return {
     ...options,
     top,
@@ -132,7 +201,14 @@ export function canAnchorPopup(options) {
     bottom,
     left,
     visibility,
-    transformOriginX: directionX === 'center' ? 'center' : (directionX === 'left' ? 'right' : 'left'),
-    transformOriginY: directionY === 'center' ? 'center' : (directionY === 'up' ? 'bottom' : 'top'),
+    styles: {
+      top: cssTop,
+      bottom: cssBottom,
+      left: cssLeft,
+      right: cssRight,
+      maxWidth,
+      maxHeight,
+      transformOrigin: `${transformOriginY} ${transformOriginX}`,
+    },
   };
 }

package/utils/searchParams.js

@@ -0,0 +1,19 @@
+/** @type {URLSearchParams} */
+let currentSearchParams = null;
+
+/** @return {URLSearchParams} */
+export function getCurrentSearchParams() {
+  if (!currentSearchParams) {
+    let url;
+    try {
+      url = import.meta.url;
+    } catch {}
+    if (!url) {
+      try {
+        url = /** @type {HTMLScriptElement} */ (document.currentScript).src;
+      } catch {}
+    }
+    currentSearchParams = new URL(url).searchParams;
+  }
+  return currentSearchParams;
+}

package/components/ExtendedFab.js

@@ -1,32 +0,0 @@
-import Button from './Button.js';
-
-export default Button
-  .extend()
-  .css`
-    /* https://m3.material.io/components/extended-fab/specs */
-
-    :host {
-      --mdw-bg: var(--mdw-color__surface-container-high);
-      --mdw-ink: var(--mdw-color__primary);
-      --mdw-shape__size: 16px;
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__4);
-      min-inline-size: 48px;
-      padding: calc(16px + (var(--mdw-density) * 2px));
-    }
-
-    #icon {
-      font-size: 24px;
-    }
-
-    :host(:where([lowered])) {
-      --mdw-bg: var(--mdw-color__surface-container-low);
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-    }
-  `
-  .observe({
-    filled: { empty: 'tonal' },
-    elevated: { type: 'boolean', empty: true },
-  })
-  .autoRegister('mdw-extended-fab');