placement.js - npm Package Compare versions

Comparing version 1.0.0-beta.4 to 1.0.0-beta.5

dist/index.es.js

@@ -1,1 +0,1 @@
-const t={x:{start:"left",Start:"Left",end:"right",End:"Right",size:"width",Size:"Width"},y:{start:"top",Start:"Top",end:"bottom",End:"Bottom",size:"height",Size:"Height"}};function e(e,n,i){var o;const a=n.style;Object.assign(a,{position:"absolute",maxWidth:"",maxHeight:""});let[s="bottom",d="center"]=i.placement.split("-");const r=["top","bottom"].includes(s)?"y":"x";let c=s===t[r].start?t[r].end:t[r].start;const l="x"===r?"y":"x",p=e.getBoundingClientRect(),g=(null===(o=function(t){for(;(t=t.parentNode)&&t instanceof Element;){const e=getComputedStyle(t).overflow;if(["auto","scroll"].includes(e))return t}}(n))||void 0===o?void 0:o.getBoundingClientRect())||new DOMRect(0,0,window.innerWidth,window.innerHeight),f=n.offsetParent||document.body,m=f===document.body?new DOMRect(0,-pageYOffset,window.innerWidth,window.innerHeight):f.getBoundingClientRect(),h=getComputedStyle(f),u=getComputedStyle(n);if(i.flip||void 0===i.flip){const e=t=>Math.abs(p[t]-g[t]),i=e(s);n["offset"+t[r].Size]>i&&e(c)>i&&([s,c]=[c,s])}if(n.dataset.placement=`${s}-${d}`,i.cap||void 0===i.cap){const e=(e,i)=>{const o=u["max"+t[e].Size];i-=parseInt(u["margin"+t[e].Start])+parseInt(u["margin"+t[e].End]),("none"===o||i<parseInt(o))&&(n.style["max"+t[e].Size]=i+"px")};e(r,Math.abs(g[s]-p[s])),e(l,g[t[l].size])}Object.assign(a,{[s]:"auto",[c]:(s===t[r].start?m[t[r].end]-p[t[r].start]:p[t[r].end]-m[t[r].start])-parseInt(h["border"+t[r].Start+"Width"])+"px"});const S="end"===d?"end":"start",b="end"===d?"start":"end",x=p[l]-m[l],w=p[t[l].size],z=n["offset"+t[l].Size],y="end"===d?-1:1;Object.assign(a,{[t[l][b]]:"auto",[t[l][S]]:Math.max(y*(g[t[l][S]]-m[t[l][S]]),Math.min("end"===d?m[t[l].size]-x-w:x+("start"!==d?w/2-z/2:0),y*(g[t[l][b]]-m[t[l][S]])-z))-parseInt(h["border"+t[l].Start+"Width"])+"px"})}export default e;
+const t={x:{start:"left",Start:"Left",end:"right",End:"Right",size:"width",Size:"Width"},y:{start:"top",Start:"Top",end:"bottom",End:"Bottom",size:"height",Size:"Height"}};function e(e,n,i){var o;const a=n.style;Object.assign(a,{position:"absolute",maxWidth:"",maxHeight:""});let[s="bottom",d="center"]=i.placement.split("-");const r=["top","bottom"].includes(s)?"y":"x";let c=s===t[r].start?t[r].end:t[r].start;const l="x"===r?"y":"x",p=e.getBoundingClientRect(),f=(null===(o=function(t){for(;(t=t.parentNode)&&t instanceof Element;){const e=getComputedStyle(t).overflow;if(["auto","scroll"].includes(e))return t}}(n))||void 0===o?void 0:o.getBoundingClientRect())||new DOMRect(0,0,window.innerWidth,window.innerHeight),g=n.offsetParent||document.body,u=g===document.body?new DOMRect(-pageXOffset,-pageYOffset,window.innerWidth,window.innerHeight):g.getBoundingClientRect(),m=getComputedStyle(g),h=getComputedStyle(n);if(i.flip||void 0===i.flip){const e=t=>Math.abs(p[t]-f[t]),i=e(s);n["offset"+t[r].Size]>i&&e(c)>i&&([s,c]=[c,s])}if(n.dataset.placement=`${s}-${d}`,i.cap||void 0===i.cap){const e=(e,i)=>{const o=h["max"+t[e].Size];i-=parseInt(h["margin"+t[e].Start])+parseInt(h["margin"+t[e].End]),("none"===o||i<parseInt(o))&&(n.style["max"+t[e].Size]=i+"px")};e(r,Math.abs(f[s]-p[s])),e(l,f[t[l].size])}Object.assign(a,{[s]:"auto",[c]:(s===t[r].start?u[t[r].end]-p[t[r].start]:p[t[r].end]-u[t[r].start])-parseInt(m["border"+t[r].Start+"Width"])+"px"});const b="end"===d?"end":"start",S="end"===d?"start":"end",x=p[l]-u[l],w=p[t[l].size],z=n["offset"+t[l].Size];let y="end"===d?u[t[l].size]-x-w:x+("start"!==d?w/2-z/2:0);if(i.bound||void 0===i.bound){const e="end"===d?-1:1;y=Math.max(e*(f[t[l][b]]-u[t[l][b]]),Math.min(y,e*(f[t[l][S]]-u[t[l][b]])-z))}Object.assign(a,{[t[l][S]]:"auto",[t[l][b]]:y-parseInt(m["border"+t[l].Start+"Width"])+"px"})}export default e;

dist/index.js

@@ -1,1 +0,1 @@
-var placement=function(){"use strict";const t={x:{start:"left",Start:"Left",end:"right",End:"Right",size:"width",Size:"Width"},y:{start:"top",Start:"Top",end:"bottom",End:"Bottom",size:"height",Size:"Height"}};return function(e,n,i){var o;const a=n.style;Object.assign(a,{position:"absolute",maxWidth:"",maxHeight:""});let[s="bottom",d="center"]=i.placement.split("-");const r=["top","bottom"].includes(s)?"y":"x";let c=s===t[r].start?t[r].end:t[r].start;const l="x"===r?"y":"x",p=e.getBoundingClientRect(),g=(null===(o=function(t){for(;(t=t.parentNode)&&t instanceof Element;){const e=getComputedStyle(t).overflow;if(["auto","scroll"].includes(e))return t}}(n))||void 0===o?void 0:o.getBoundingClientRect())||new DOMRect(0,0,window.innerWidth,window.innerHeight),f=n.offsetParent||document.body,m=f===document.body?new DOMRect(0,-pageYOffset,window.innerWidth,window.innerHeight):f.getBoundingClientRect(),u=getComputedStyle(f),h=getComputedStyle(n);if(i.flip||void 0===i.flip){const e=t=>Math.abs(p[t]-g[t]),i=e(s);n["offset"+t[r].Size]>i&&e(c)>i&&([s,c]=[c,s])}if(n.dataset.placement=`${s}-${d}`,i.cap||void 0===i.cap){const e=(e,i)=>{const o=h["max"+t[e].Size];i-=parseInt(h["margin"+t[e].Start])+parseInt(h["margin"+t[e].End]),("none"===o||i<parseInt(o))&&(n.style["max"+t[e].Size]=i+"px")};e(r,Math.abs(g[s]-p[s])),e(l,g[t[l].size])}Object.assign(a,{[s]:"auto",[c]:(s===t[r].start?m[t[r].end]-p[t[r].start]:p[t[r].end]-m[t[r].start])-parseInt(u["border"+t[r].Start+"Width"])+"px"});const S="end"===d?"end":"start",b="end"===d?"start":"end",w=p[l]-m[l],x=p[t[l].size],z=n["offset"+t[l].Size],y="end"===d?-1:1;Object.assign(a,{[t[l][b]]:"auto",[t[l][S]]:Math.max(y*(g[t[l][S]]-m[t[l][S]]),Math.min("end"===d?m[t[l].size]-w-x:w+("start"!==d?x/2-z/2:0),y*(g[t[l][b]]-m[t[l][S]])-z))-parseInt(u["border"+t[l].Start+"Width"])+"px"})}}();
+var placement=function(){"use strict";const t={x:{start:"left",Start:"Left",end:"right",End:"Right",size:"width",Size:"Width"},y:{start:"top",Start:"Top",end:"bottom",End:"Bottom",size:"height",Size:"Height"}};return function(e,n,i){var o;const s=n.style;Object.assign(s,{position:"absolute",maxWidth:"",maxHeight:""});let[a="bottom",d="center"]=i.placement.split("-");const r=["top","bottom"].includes(a)?"y":"x";let c=a===t[r].start?t[r].end:t[r].start;const l="x"===r?"y":"x",p=e.getBoundingClientRect(),f=(null===(o=function(t){for(;(t=t.parentNode)&&t instanceof Element;){const e=getComputedStyle(t).overflow;if(["auto","scroll"].includes(e))return t}}(n))||void 0===o?void 0:o.getBoundingClientRect())||new DOMRect(0,0,window.innerWidth,window.innerHeight),g=n.offsetParent||document.body,u=g===document.body?new DOMRect(-pageXOffset,-pageYOffset,window.innerWidth,window.innerHeight):g.getBoundingClientRect(),m=getComputedStyle(g),h=getComputedStyle(n);if(i.flip||void 0===i.flip){const e=t=>Math.abs(p[t]-f[t]),i=e(a);n["offset"+t[r].Size]>i&&e(c)>i&&([a,c]=[c,a])}if(n.dataset.placement=`${a}-${d}`,i.cap||void 0===i.cap){const e=(e,i)=>{const o=h["max"+t[e].Size];i-=parseInt(h["margin"+t[e].Start])+parseInt(h["margin"+t[e].End]),("none"===o||i<parseInt(o))&&(n.style["max"+t[e].Size]=i+"px")};e(r,Math.abs(f[a]-p[a])),e(l,f[t[l].size])}Object.assign(s,{[a]:"auto",[c]:(a===t[r].start?u[t[r].end]-p[t[r].start]:p[t[r].end]-u[t[r].start])-parseInt(m["border"+t[r].Start+"Width"])+"px"});const b="end"===d?"end":"start",S="end"===d?"start":"end",w=p[l]-u[l],x=p[t[l].size],z=n["offset"+t[l].Size];let y="end"===d?u[t[l].size]-w-x:w+("start"!==d?x/2-z/2:0);if(i.bound||void 0===i.bound){const e="end"===d?-1:1;y=Math.max(e*(f[t[l][b]]-u[t[l][b]]),Math.min(y,e*(f[t[l][S]]-u[t[l][b]])-z))}Object.assign(s,{[t[l][S]]:"auto",[t[l][b]]:y-parseInt(m["border"+t[l].Start+"Width"])+"px"})}}();

package.json

 {
   "name": "placement.js",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "A tiny library for positioning overlays. Useful for tooltips, popovers etc.",
@@ -47,3 +47,5 @@ "module": "./dist/index.es.js",
       "@release-it/keep-a-changelog": {
-        "filename": "CHANGELOG.md"
+        "filename": "CHANGELOG.md",
+        "addUnreleased": true,
+        "addVersionUrl": true
       }
@@ -50,0 +52,0 @@ },

README.md

@@ -59,2 +59,6 @@ # Placement.js
     cap?: boolean,
+
+    // Whether or not the overlay position should be bound to the scroll 
+    // container. Defaults to true.
+    bound?: boolean,
 };
@@ -61,0 +65,0 @@ ```

src/index.ts

@@ -5,2 +5,3 @@ export type Options = {
     cap?: boolean,
+    bound?: boolean,
 };
@@ -49,3 +50,3 @@
     const offsetParent = overlay.offsetParent || document.body;
-    const offsetParentRect = offsetParent === document.body ? new DOMRect(0, -pageYOffset, window.innerWidth, window.innerHeight) : offsetParent.getBoundingClientRect();
+    const offsetParentRect = offsetParent === document.body ? new DOMRect(-pageXOffset, -pageYOffset, window.innerWidth, window.innerHeight) : offsetParent.getBoundingClientRect();
     const offsetParentComputed = getComputedStyle(offsetParent);
@@ -102,16 +103,22 @@ const overlayComputed = getComputedStyle(overlay);
     const overlaySize = overlay['offset' + PROPS[axisAlign].Size];
-    const factor = align === 'end' ? -1 : 1;
+
+    let alignPos = align === 'end'
+        ? offsetParentRect[PROPS[axisAlign].size] - anchorAlign - anchorSize
+        : anchorAlign + (align !== 'start' ? anchorSize / 2 - overlaySize / 2 : 0);
+
+    if (options.bound || typeof options.bound === 'undefined') {
+        const factor = align === 'end' ? -1 : 1;
+        alignPos = Math.max(
+            factor * (boundRect[PROPS[axisAlign][fromAlign]] - offsetParentRect[PROPS[axisAlign][fromAlign]]),
+            Math.min(
+                alignPos,
+                factor * (boundRect[PROPS[axisAlign][oppositeAlign]] - offsetParentRect[PROPS[axisAlign][fromAlign]]) - overlaySize
+            )
+        );
+    }
+
     Object.assign(overlayStyle, {
         [PROPS[axisAlign][oppositeAlign]]: 'auto',
         [PROPS[axisAlign][fromAlign]]: (
-            Math.max(
-                factor * (boundRect[PROPS[axisAlign][fromAlign]] - offsetParentRect[PROPS[axisAlign][fromAlign]]),
-                Math.min(
-                    align === 'end'
-                        ? offsetParentRect[PROPS[axisAlign].size] - anchorAlign - anchorSize
-                        : anchorAlign + (align !== 'start' ? anchorSize / 2 - overlaySize / 2 : 0),
-                    factor * (boundRect[PROPS[axisAlign][oppositeAlign]] - offsetParentRect[PROPS[axisAlign][fromAlign]]) - overlaySize
-                )
-            )
-            - parseInt(offsetParentComputed['border' + PROPS[axisAlign].Start + 'Width'])
+            alignPos - parseInt(offsetParentComputed['border' + PROPS[axisAlign].Start + 'Width'])
         ) + 'px'
@@ -118,0 +125,0 @@ });

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Lines of code

140

increased by3.7%

Number of lines in readme file

73

increased by5.8%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

13798

decreased by-7.72%

Number of package files

7

decreased by-12.5%

No dependency changes