@springernature/global-popup - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

HISTORY.md

 # History
 
+## 4.2.0 (2021-02-17)
+    * Fixes bug so that popup/arrow is positioned above trigger
+    * Ensure popup stays within screen width
+
 ## 4.1.1 (2021-02-15)
@@ -4,0 +8,0 @@ * Bump global-expander to 4.0.1

js/popup.js

@@ -44,3 +44,4 @@ import {Expander} from '@springernature/global-expander/js/expander';
 		this._content.style.top = this._px(pos.top);
-		this._content.style.transform = `translateX(${pos.left}px)`;
+		this._content.style.left = this._px(pos.left);
+		this._content.style.right = this._px(pos.right);
 	}
@@ -99,7 +100,12 @@
 		const distanceScrolled = document.documentElement.scrollTop;
-		const triggerMetrics = this._trigger.getBoundingClientRect();
+		const defaultOffset = 5;
+		const triggerMetricsCollection = this._trigger.getClientRects();
+		const triggerMetrics = (triggerMetricsCollection.length > 0) ? triggerMetricsCollection[0] : {top: 0, left: 0};
 		const offset = {
 			top: triggerMetrics.top + distanceScrolled,
-			left: triggerMetrics.left
+			left: triggerMetrics.left,
+			right: defaultOffset
 		};
+
+		const originalOffsetLeft = offset.left;
 		const arrow = this._content.querySelector(`.${this._arrowClass}`);
@@ -109,2 +115,5 @@ const windowWidth = document.documentElement.clientWidth;
 		const arrowWidth = 20;
+		const pagePadding = (this._options.PAGE_PADDING) ? this._options.PAGE_PADDING : 32;
+		const mdBreakPoint = 768;
+		const lgBreakPoint = 1024;
 
@@ -117,2 +126,21 @@ // calc space above trigger
 
+		// does the popup and its position overrun the width of the page and its padding
+		const overrun = offset.left + this._content.offsetWidth - windowWidth + pagePadding;
+		if (overrun > 0) {
+			if (overrun > offset.left) {
+				offset.left = defaultOffset;
+			} else {
+				offset.left -= overrun;
+			}
+		}
+
+		let wrapped = false;
+		// does the popup trigger content wrap onto multiple lines
+		if (triggerMetrics.length > 1) {
+			wrapped = true;
+			if (windowWidth > lgBreakPoint) {
+				offset.left = (triggerMetrics.left - (this._content.offsetWidth / 2)) + arrowWidth;
+			}
+		}
+
 		let top;
@@ -130,13 +158,17 @@ // if there is not enough room for popup above trigger
 
-		if (windowWidth < 600) {
+		if (windowWidth < mdBreakPoint) {
 			// just position arrow 5px from trigger left
-			arrow.style.left = this._px(offset.left + 5);
+			arrow.style.left = this._px(originalOffsetLeft + 5);
+		} else if (wrapped) {
+			// wrapped text add arrow
+			const triggerStartPos = Math.round((offset.left + this._content.offsetWidth) - triggerMetrics.left - arrowWidth);
+			arrow.style.left = this._px(Math.round(this._content.offsetWidth - triggerStartPos));
 		} else {
-			// position arrow in middle of trigger
-			arrow.style.left = this._px(Math.round((triggerMetrics.width / 2) - arrowWidth));
+			arrow.style.left = this._px(Math.max(Math.round((triggerMetrics.width / 2) - (arrowWidth / 2)) + ((overrun > 0) ? overrun : 0), 5));
 		}
 
 		return {
-			left: (windowWidth < 600) ? 0 : offset.left,
-			top: top
+			left: (windowWidth < mdBreakPoint) ? defaultOffset : offset.left,
+			top: top,
+			right: defaultOffset
 		};
@@ -143,0 +175,0 @@ }

package.json

 {
   "name": "@springernature/global-popup",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "Builds and styles a popup that can be opened and closed",
@@ -12,4 +12,4 @@ "license": "MIT",
   "scripts": {
-    "postinstall": "npm_config_registry=https://registry.npmjs.org/ npx @springernature/util-context-warning@0.0.5 -p @springernature/global-popup@4.1.1 -v 9.0.1 9.0.2 9.0.3 9.0.4 9.0.5 9.0.6 9.1.0 9.1.1"
+    "postinstall": "npm_config_registry=https://registry.npmjs.org/ npx @springernature/util-context-warning@0.0.5 -p @springernature/global-popup@4.2.0 -v 9.0.1 9.0.2 9.0.3 9.0.4 9.0.5 9.0.6 9.1.0 9.1.1"
   }
 }

New alerts

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Fixed alerts

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19895

increased by7.76%

Lines of code

363

increased by8.68%

No dependency changes