@txstate-mws/svelte-components 1.6.2 → 1.6.4

package/dist/actions/glue.js

@@ -4,16 +4,16 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
     let halign;
     let valign;
     const parent = el.offsetParent;
-    const formerMinHeight = parent.style.minHeight;
+    const formerMinHeight = parent?.style.minHeight;
     if (target)
         el.style.position = 'fixed';
     function adjustParentHeight() {
         if (!adjustparentheight)
             return;
-        if (parent.style.overflowY === 'auto')
+        if (parent?.style.overflowY === 'auto')
             return;
         const minHeight = el.offsetTop + el.offsetHeight;
-        if (minHeight > parent.clientHeight) {
+        if (minHeight > (parent?.clientHeight ?? 0)) {
             requestAnimationFrame(() => {
                 parent.style.minHeight = String(minHeight) + 'px';
             });
@@ -21,8 +21,16 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
     }
     let lastrect;
     function reposition() {
+        const fixedParent = fixedContainingBlock(el);
+        let fixedRect = { left: 0, top: 0, right: 0, bottom: 0 };
+        if (fixedParent) {
+            const tmpRect = fixedParent.getBoundingClientRect();
+            fixedRect = { left: tmpRect.left, right: window.innerWidth - tmpRect.right, top: tmpRect.top, bottom: window.innerHeight - tmpRect.bottom };
+        }
+        if (!target)
+            return;
         const tmpRect = target.getBoundingClientRect();
-        const rect = { left: tmpRect.left, right: window.innerWidth - tmpRect.right, top: tmpRect.top, bottom: window.innerHeight - tmpRect.bottom, width: tmpRect.width, height: tmpRect.height };
+        const rect = { left: tmpRect.left - fixedRect.left, right: window.innerWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: window.innerHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
         if (equal(rect, lastrect))
             return;
         let autoalign = align;
@@ -94,8 +102,10 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 target = utarget;
                 if (!target)
                     el.style.removeProperty('position');
-                else
+                else {
                     el.style.position = 'fixed';
+                    reposition();
+                }
             }
         },
         destroy() {
@@ -109,3 +119,26 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
     };
 }
+const isHTMLElement = (e) => !!e && 'offsetParent' in e;
+function isFixedContainer(el) {
+    const css = getComputedStyle(el);
+    if (css.getPropertyValue('transform') !== 'none' || css.getPropertyValue('perspective') !== 'none')
+        return true; // A transform or perspective value other than none
+    if (['transform', 'perspective', 'filter'].includes(css.getPropertyValue('will-change')))
+        return true; // A will-change value of transform, filter, or perspective
+    if (css.getPropertyValue('filter') !== 'none')
+        return true; // A filter value other than none
+    if (['layout', 'paint', 'strict', 'content'].includes(css.getPropertyValue('contain')))
+        return true; // A contain value of layout, paint, strict or content (e.g. contain: paint;)
+    if (css.getPropertyValue('container-type') !== 'normal')
+        return true; // A container-type value other than normal
+    if (css.getPropertyValue('backdrop-filter') !== 'none')
+        return true; // A backdrop-filter other than none (e.g. backdrop-filter: blur(10px);)
+    return false;
+}
+function fixedContainingBlock(el) {
+    let parent = el.parentElement;
+    while (isHTMLElement(parent) && !isFixedContainer(parent))
+        parent = parent.parentElement;
+    return parent;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",
@@ -34,7 +34,7 @@
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "svelte": "^3.53.1 || ^4.0.0"
+    "svelte": "^3.53.1 || ^4.0.0 || ^5.0.0"
   },
   "type": "module",
   "main": "./dist/index.js",