@zohodesk/popups - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

es/Popup/Popup.js

@@ -55,3 +55,4 @@ import _extends from 'babel-runtime/helpers/extends';
 				isPopupReady: props.isPopupReady || false,
-				position: props.position || 'bottom'
+				position: props.position || 'bottom',
+				fixedPosition: {}
 			};
@@ -81,4 +82,4 @@
 		}, {
-			key: 'componentWillReceiveProps',
-			value: function componentWillReceiveProps(nextProps) {
+			key: 'UNSAFE_componentWillMount',
+			value: function UNSAFE_componentWillMount(nextProps) {
 				var state = null;
@@ -164,3 +165,3 @@ if (typeof nextProps.isPopupOpen !== "undefined" && nextProps.isPopupOpen !== this.state.isPopupOpen) {
 						if (betterPosition.view) {
-							_this3.setState({ isPopupReady: true, position: betterPosition.view });
+							_this3.setState({ isPopupReady: true, position: betterPosition.view, fixedPosition: betterPosition.fixedPosition });
 						} else {
@@ -167,0 +168,0 @@ _this3.setState({ isPopupReady: true, position: 'bottom' });

es/ViewPort.js

 import _Object$keys from 'babel-runtime/core-js/object/keys';
 var viewPort = {
 	frameRelativeRects: function frameRelativeRects(el, customFrame) {
-		if (!el) return;
+		if (!el) {
+			return;
+		}
 
-		var rect = el.getBoundingClientRect();
-		var documentEle = document.documentElement;
-		//let documentEleRect = documentEle.getBoundingClientRect();
+		var rect = el.getBoundingClientRect(); //Target Element
+		var documentEle = document.documentElement; //Body&HTML 
 
@@ -68,3 +69,5 @@ var customFrameRect = {
 	isInViewPort: function isInViewPort(el, customFrame) {
-		if (!el) return;
+		if (!el) {
+			return;
+		}
 
@@ -78,3 +81,5 @@ var elRects = viewPort.frameRelativeRects(el, customFrame);
 	possibilities: function possibilities(el, relativeBox, customFrame) {
-		if (!el) return;
+		if (!el) {
+			return;
+		}
 
@@ -86,4 +91,7 @@ var elRects = viewPort.frameRelativeRects(el, customFrame);
 		var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
-		var relativeBoxReact = relativeBoxReacts.rect;
+		var relativeBoxRect = relativeBoxReacts.rect;
 		var relativeBoxGap = relativeBoxReacts.rectGap;
+		var relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
+		var documentGap = relativeBoxDocumentRects.rectGap;
+
 		adjustments.left ? adjustments.left = adjustments.left + relativeBoxReacts.rect.width * 2 / 3 : null;
@@ -157,7 +165,79 @@ adjustments.right ? adjustments.right = adjustments.right + relativeBoxReacts.rect.width * 2 / 3 : null;
 
-		return { views: views, adjustments: adjustments };
+
+		var horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
+		var horizontalLeft = relativeBoxGap.left;
+		var horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
+		var verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
+		var verticalTop = relativeBoxGap.top;
+		var verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
+		var horizontalTop = documentGap.bottom + relativeBoxRect.height;
+		var verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
+
+		var needArrow = false;
+		// let isAbsolute = false;
+		var paddingSpace = 5; // space between target and relative element
+		var arrowSize = needArrow ? 10 : 5;
+		rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
+		rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
+
+		debugger;
+
+		var viewsOffset = { // Code Copy frm DOT ViewPort.js																																																																																																																																																																																																																																																																																																																																																																																																																																																																																						qa
+			bottomCenter: {
+				left: horizontalCenter - rect.width / 2,
+				top: verticalBottom + arrowSize
+			},
+			bottomRight: {
+				left: horizontalRight - rect.width,
+				top: verticalBottom + arrowSize
+			},
+			bottomLeft: {
+				left: horizontalLeft,
+				top: verticalBottom + arrowSize
+			},
+			topCenter: {
+				left: horizontalCenter - rect.width / 2,
+				bottom: horizontalTop + arrowSize
+			},
+			topRight: {
+				left: horizontalRight - rect.width,
+				bottom: horizontalTop + arrowSize
+			},
+			topLeft: {
+				left: horizontalLeft,
+				bottom: horizontalTop + arrowSize
+			},
+			rightCenter: {
+				left: horizontalRight + arrowSize,
+				top: verticalCenter - rect.height / 2
+			},
+			rightBottom: {
+				left: horizontalRight + arrowSize,
+				bottom: documentGap.bottom
+			},
+			rightTop: {
+				left: horizontalRight + arrowSize,
+				top: verticalTop
+			},
+			leftCenter: {
+				left: horizontalLeft - (rect.width + arrowSize),
+				top: verticalCenter - rect.height / 2
+			},
+			leftTop: {
+				left: horizontalLeft - (rect.width + arrowSize),
+				top: verticalTop
+			},
+			leftBottom: {
+				left: horizontalLeft - (rect.width + arrowSize),
+				bottom: documentGap.bottom
+			}
+		};
+
+		return { views: views, adjustments: adjustments, positionOffset: viewsOffset };
 	},
 
 	getArrowAdjustments: function getArrowAdjustments(el, relativeBox, customFrame) {
-		if (!el) return;
+		if (!el) {
+			return;
+		}
 
@@ -192,2 +272,3 @@ var elRects = viewPort.frameRelativeRects(el, customFrame);
 		var isViewFound = false;
+		var positionOffset = viewPortPossibilities.positionOffset;
 		for (var i = 0; i < viewKeys.length; i++) {
@@ -202,7 +283,7 @@ var viewKey = viewKeys[i];
 		if (!isViewFound) {
-			return { view: null, adjustments: adjustments };
+			return { view: null, adjustments: adjustments, fixedPosition: {} };
 		}
 
 		if (views[defaultView]) {
-			return { view: defaultView, adjustments: adjustments };
+			return { view: defaultView, adjustments: adjustments, fixedPosition: positionOffset[defaultView] };
 		}
@@ -219,3 +300,3 @@
 			if (views[_viewKey]) {
-				return { view: _viewKey, adjustments: adjustments };
+				return { view: _viewKey, adjustments: adjustments, fixedPosition: positionOffset[_viewKey] };
 			}
@@ -238,3 +319,3 @@ }
 				if (views[_viewKey2]) {
-					return { view: _viewKey2, adjustments: adjustments };
+					return { view: _viewKey2, adjustments: adjustments, fixedPosition: positionOffset[_viewKey2] };
 				}
@@ -244,3 +325,3 @@ }
 
-		return { view: null, adjustments: adjustments };
+		return { view: null, adjustments: adjustments, fixedPosition: {} };
 	}
@@ -247,0 +328,0 @@ };

lib/Popup/Popup.js

@@ -77,3 +77,4 @@ 'use strict';
 				isPopupReady: props.isPopupReady || false,
-				position: props.position || 'bottom'
+				position: props.position || 'bottom',
+				fixedPosition: {}
 			};
@@ -103,4 +104,4 @@
 		}, {
-			key: 'componentWillReceiveProps',
-			value: function componentWillReceiveProps(nextProps) {
+			key: 'UNSAFE_componentWillMount',
+			value: function UNSAFE_componentWillMount(nextProps) {
 				var state = null;
@@ -186,3 +187,3 @@ if (typeof nextProps.isPopupOpen !== "undefined" && nextProps.isPopupOpen !== this.state.isPopupOpen) {
 						if (betterPosition.view) {
-							_this3.setState({ isPopupReady: true, position: betterPosition.view });
+							_this3.setState({ isPopupReady: true, position: betterPosition.view, fixedPosition: betterPosition.fixedPosition });
 						} else {
@@ -189,0 +190,0 @@ _this3.setState({ isPopupReady: true, position: 'bottom' });

lib/ViewPort.js

@@ -8,7 +8,8 @@ 'use strict';
 	frameRelativeRects: function frameRelativeRects(el, customFrame) {
-		if (!el) return;
+		if (!el) {
+			return;
+		}
 
-		var rect = el.getBoundingClientRect();
-		var documentEle = document.documentElement;
-		//let documentEleRect = documentEle.getBoundingClientRect();
+		var rect = el.getBoundingClientRect(); //Target Element
+		var documentEle = document.documentElement; //Body&HTML 
 
@@ -73,3 +74,5 @@ var customFrameRect = {
 	isInViewPort: function isInViewPort(el, customFrame) {
-		if (!el) return;
+		if (!el) {
+			return;
+		}
 
@@ -83,3 +86,5 @@ var elRects = viewPort.frameRelativeRects(el, customFrame);
 	possibilities: function possibilities(el, relativeBox, customFrame) {
-		if (!el) return;
+		if (!el) {
+			return;
+		}
 
@@ -91,4 +96,7 @@ var elRects = viewPort.frameRelativeRects(el, customFrame);
 		var relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
-		var relativeBoxReact = relativeBoxReacts.rect;
+		var relativeBoxRect = relativeBoxReacts.rect;
 		var relativeBoxGap = relativeBoxReacts.rectGap;
+		var relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
+		var documentGap = relativeBoxDocumentRects.rectGap;
+
 		adjustments.left ? adjustments.left = adjustments.left + relativeBoxReacts.rect.width * 2 / 3 : null;
@@ -162,7 +170,79 @@ adjustments.right ? adjustments.right = adjustments.right + relativeBoxReacts.rect.width * 2 / 3 : null;
 
-		return { views: views, adjustments: adjustments };
+
+		var horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
+		var horizontalLeft = relativeBoxGap.left;
+		var horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
+		var verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
+		var verticalTop = relativeBoxGap.top;
+		var verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
+		var horizontalTop = documentGap.bottom + relativeBoxRect.height;
+		var verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
+
+		var needArrow = false;
+		// let isAbsolute = false;
+		var paddingSpace = 5; // space between target and relative element
+		var arrowSize = needArrow ? 10 : 5;
+		rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
+		rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
+
+		debugger;
+
+		var viewsOffset = { // Code Copy frm DOT ViewPort.js																																																																																																																																																																																																																																																																																																																																																																																																																																																																																						qa
+			bottomCenter: {
+				left: horizontalCenter - rect.width / 2,
+				top: verticalBottom + arrowSize
+			},
+			bottomRight: {
+				left: horizontalRight - rect.width,
+				top: verticalBottom + arrowSize
+			},
+			bottomLeft: {
+				left: horizontalLeft,
+				top: verticalBottom + arrowSize
+			},
+			topCenter: {
+				left: horizontalCenter - rect.width / 2,
+				bottom: horizontalTop + arrowSize
+			},
+			topRight: {
+				left: horizontalRight - rect.width,
+				bottom: horizontalTop + arrowSize
+			},
+			topLeft: {
+				left: horizontalLeft,
+				bottom: horizontalTop + arrowSize
+			},
+			rightCenter: {
+				left: horizontalRight + arrowSize,
+				top: verticalCenter - rect.height / 2
+			},
+			rightBottom: {
+				left: horizontalRight + arrowSize,
+				bottom: documentGap.bottom
+			},
+			rightTop: {
+				left: horizontalRight + arrowSize,
+				top: verticalTop
+			},
+			leftCenter: {
+				left: horizontalLeft - (rect.width + arrowSize),
+				top: verticalCenter - rect.height / 2
+			},
+			leftTop: {
+				left: horizontalLeft - (rect.width + arrowSize),
+				top: verticalTop
+			},
+			leftBottom: {
+				left: horizontalLeft - (rect.width + arrowSize),
+				bottom: documentGap.bottom
+			}
+		};
+
+		return { views: views, adjustments: adjustments, positionOffset: viewsOffset };
 	},
 
 	getArrowAdjustments: function getArrowAdjustments(el, relativeBox, customFrame) {
-		if (!el) return;
+		if (!el) {
+			return;
+		}
 
@@ -197,2 +277,3 @@ var elRects = viewPort.frameRelativeRects(el, customFrame);
 		var isViewFound = false;
+		var positionOffset = viewPortPossibilities.positionOffset;
 		for (var i = 0; i < viewKeys.length; i++) {
@@ -207,7 +288,7 @@ var viewKey = viewKeys[i];
 		if (!isViewFound) {
-			return { view: null, adjustments: adjustments };
+			return { view: null, adjustments: adjustments, fixedPosition: {} };
 		}
 
 		if (views[defaultView]) {
-			return { view: defaultView, adjustments: adjustments };
+			return { view: defaultView, adjustments: adjustments, fixedPosition: positionOffset[defaultView] };
 		}
@@ -224,3 +305,3 @@
 			if (views[_viewKey]) {
-				return { view: _viewKey, adjustments: adjustments };
+				return { view: _viewKey, adjustments: adjustments, fixedPosition: positionOffset[_viewKey] };
 			}
@@ -243,3 +324,3 @@ }
 				if (views[_viewKey2]) {
-					return { view: _viewKey2, adjustments: adjustments };
+					return { view: _viewKey2, adjustments: adjustments, fixedPosition: positionOffset[_viewKey2] };
 				}
@@ -249,3 +330,3 @@ }
 
-		return { view: null, adjustments: adjustments };
+		return { view: null, adjustments: adjustments, fixedPosition: {} };
 	}
@@ -252,0 +333,0 @@ };

package.json

 {
 	"name": "@zohodesk/popups",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"description": "popups popupover modal dialog alert notifications popup handling for whole app",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -0,1 +1,4 @@
+# 1.0.8.1
+- Popup position fixed Case added.
+
 # 1.0.8
@@ -2,0 +5,0 @@ - popup viewPort possibilities position method changed(left & right position properly to handled).

src/Popup/Popup.js

@@ -37,3 +37,4 @@ import React from 'react';
 				isPopupReady : (props.isPopupReady || false) , 
-				position: props.position || 'bottom'
+				position: props.position || 'bottom',
+				fixedPosition : {}
 			};
@@ -60,3 +61,3 @@
 
-		componentWillReceiveProps(nextProps){
+		UNSAFE_componentWillMount(nextProps){
 			let state = null;
@@ -136,3 +137,3 @@ if(typeof nextProps.isPopupOpen !== "undefined" && nextProps.isPopupOpen !== this.state.isPopupOpen ){
 					if( betterPosition.view  ){
-						this.setState({ isPopupReady : true  , position: betterPosition.view  });
+						this.setState({ isPopupReady : true  , position: betterPosition.view, fixedPosition:betterPosition.fixedPosition  });
 					}
@@ -139,0 +140,0 @@ else{

src/ViewPort.js

 let viewPort = {
 	frameRelativeRects: (el, customFrame) => {
-		if (!el) return;
+		if (!el) {return;}
 
-		var rect = el.getBoundingClientRect();
-		let documentEle = document.documentElement;
-		//let documentEleRect = documentEle.getBoundingClientRect();
+		var rect = el.getBoundingClientRect(); //Target Element
+		let documentEle = document.documentElement; //Body&HTML 
 
@@ -31,2 +30,4 @@ var customFrameRect = {
 
+		
+
 		newReact.bottom = newReact.top + newReact.height;
@@ -70,3 +71,3 @@ newReact.right = newReact.left + newReact.width;
 	isInViewPort: (el, customFrame) => {
-		if (!el) return;
+		if (!el) {return;}
 
@@ -79,4 +80,8 @@ let elRects = viewPort.frameRelativeRects(el, customFrame);
 	},
-	possibilities: (el, relativeBox, customFrame) => {
-		if (!el) return;
+	possibilities: (
+		el, 
+		relativeBox, 
+		customFrame,
+		) => {
+		if (!el) {return;}
 
@@ -88,4 +93,9 @@ let elRects = viewPort.frameRelativeRects(el, customFrame);
 		let relativeBoxReacts = viewPort.frameRelativeRects(relativeBox, customFrame);
-		let relativeBoxReact = relativeBoxReacts.rect;
+		let relativeBoxRect = relativeBoxReacts.rect;
 		let relativeBoxGap = relativeBoxReacts.rectGap;
+		let relativeBoxDocumentRects = viewPort.frameRelativeRects(
+			relativeBox,
+			customFrame
+		);
+		let { rectGap: documentGap } = relativeBoxDocumentRects;
 		adjustments.left? adjustments.left=adjustments.left+(relativeBoxReacts.rect.width*2/3):null
@@ -159,7 +169,77 @@ adjustments.right?adjustments.right=adjustments.right+(relativeBoxReacts.rect.width*2/3):null
 
-		return { views, adjustments };
+
+		let horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
+		let horizontalLeft = relativeBoxGap.left;
+		let horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
+		let verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
+		let verticalTop = relativeBoxGap.top;
+		let verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
+		let horizontalTop = documentGap.bottom + relativeBoxRect.height;
+		let verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
+
+		let needArrow = false;
+		// let isAbsolute = false;
+		let paddingSpace = 5; // space between target and relative element
+		let arrowSize = needArrow ? 10 : 5;
+		rect.height = rect.height + (needArrow ? arrowSize : paddingSpace);
+		rect.width = rect.width + (needArrow ? arrowSize : paddingSpace);
+
+		debugger;
+
+		let viewsOffset = { // Code Copy frm DOT ViewPort.js																																																																																																																																																																																																																																																																																																																																																																																																																																																																																						qa
+		bottomCenter: {
+			left: horizontalCenter - rect.width / 2,
+			top: verticalBottom + arrowSize
+		},
+		bottomRight:{
+			left: horizontalRight - rect.width,
+			top: verticalBottom + arrowSize
+		},
+		bottomLeft:{
+			left: horizontalLeft,
+			top: verticalBottom + arrowSize
+		},
+		topCenter: {
+			left: horizontalCenter - rect.width / 2,
+			bottom: horizontalTop + arrowSize
+		},
+		topRight: {
+			left: horizontalRight - rect.width,
+			bottom: horizontalTop + arrowSize
+		},
+		topLeft: {
+			left: horizontalLeft,
+			bottom: horizontalTop + arrowSize
+		},
+		rightCenter: {
+			left: horizontalRight + arrowSize,
+			top: verticalCenter - rect.height / 2
+		},
+		rightBottom: {
+			left: horizontalRight + arrowSize,
+			bottom: documentGap.bottom
+		},
+		rightTop: {
+			left: horizontalRight + arrowSize,
+			top: verticalTop
+		},
+		leftCenter: {
+			left: horizontalLeft - (rect.width + arrowSize),
+			top: verticalCenter - rect.height / 2
+		},
+		leftTop: {
+			left: horizontalLeft - (rect.width + arrowSize),
+			top: verticalTop
+		},
+		leftBottom: {
+			left: horizontalLeft - (rect.width + arrowSize),
+			bottom: documentGap.bottom
+		}
+		};
+
+		return { views, adjustments, positionOffset:viewsOffset };
 	},
 
  getArrowAdjustments : (el, relativeBox, customFrame) => {
-	 if (!el) return;
+	 if (!el) {return;}
 
@@ -184,3 +264,8 @@ let elRects = viewPort.frameRelativeRects(el, customFrame);
 
-	betterView: (popup, relativeBox, defaultView, customFrame) => {
+	betterView: (
+		popup, 
+		relativeBox, 
+		defaultView, 
+		customFrame
+	) => {
 		let viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customFrame);
@@ -196,2 +281,3 @@
 		let isViewFound = false;
+		let positionOffset=viewPortPossibilities.positionOffset;
 		for (let i = 0; i < viewKeys.length; i++) {
@@ -206,7 +292,7 @@ let viewKey = viewKeys[i];
 		if (!isViewFound) {
-			return { view: null, adjustments };
+			return { view: null, adjustments, fixedPosition:{} };
 		}
 
 		if (views[defaultView]) {
-			return { view: defaultView, adjustments };
+			return { view: defaultView, adjustments, fixedPosition:positionOffset[defaultView] };
 		}
@@ -224,3 +310,3 @@
 			if (views[viewKey]) {
-				return { view: viewKey, adjustments };
+				return { view: viewKey, adjustments, fixedPosition:positionOffset[viewKey] };
 			}
@@ -243,3 +329,3 @@ }
 				if (views[viewKey]) {
-					return { view: viewKey, adjustments };
+					return { view: viewKey, adjustments, fixedPosition:positionOffset[viewKey] };
 				}
@@ -249,3 +335,3 @@ }
 
-		return { view: null, adjustments };
+		return { view: null, adjustments, fixedPosition:{} };
 	}
@@ -252,0 +338,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

95

increased by3.26%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

216449

decreased by-3.51%

Number of package files

17

decreased by-15%

Lines of code

2151

decreased by-19.86%

No dependency changes