Merge branch 'development' into main

Silverethical · Sep 13, 2023 · ad35834 · ad35834
2 parents a5cf2b5 + 87832df
commit ad35834
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 28 deletions.
diff --git a/public/src/css/silverBox.scss b/public/src/css/silverBox.scss
@@ -31,6 +31,7 @@ body {
 		left: 0;
 		justify-content: center;
 		background-color: var(--silverBox-overlay-background);
+		z-index: calc(var(--silverBox-z-index) - 1);
 	}
 
 	.silverBox {

diff --git a/public/src/js/components/silverBox/button.js b/public/src/js/components/silverBox/button.js
@@ -43,7 +43,7 @@ function silverBoxButtonComponent(
 	if (buttonName.closeOnClick !== false) {
 		// Closes silverBox on click an run onClose function if it exits
 		buttonEl.addEventListener("click", () => {
-			silverBoxClose({ onClose: onCloseConfig });
+			silverBoxClose({ onClose: onCloseConfig, element: buttonEl });
 		});
 	}
 

diff --git a/public/src/js/helpers/closeButtonOnClick.js b/public/src/js/helpers/closeButtonOnClick.js
@@ -2,21 +2,13 @@
 import silverBoxDisableScroll from "./silverBox/disableScroll";
 /** selects the silverBox container and closes the element*/
 function silverBoxClose({ uniqueID, timer, onClose, element }) {
-	// if the modal doesn't have a timer, the modal will be closed on click
-	if (!timer) {
-		// selects the all silverBox-container classes in the page
-		const silverBox = document.querySelectorAll(".silverBox-container");
-
-		if (silverBox[silverBox.length - 1])
-			silverBox[silverBox.length - 1].remove();
-		// checks for silverBoxAfter removing the wrapper
-		silverBoxDisableScroll(".silverBox-overlay");
-	}
-	// If timer exits specific modal will be removed from page
-	else if (timer) {
+	// If timer config exists, silverBoxCloseAfterTimeout would get a uniqueID and will close the silverBox using that ID
+	if (timer) {
 		silverBoxCloseAfterTimeout(uniqueID);
-	} else if (element) {
-		element.closest(".silverBox").remove();
+	}
+	// if there is a element passed to silverBoxClose object, the closest silverBox-container to that element would be removed
+	else if (element) {
+		element.closest(".silverBox-container").remove();
 	}
 
 	// Runs onClose function if it exits

diff --git a/public/src/js/silverBox.js b/public/src/js/silverBox.js
@@ -257,22 +257,21 @@ function silverBox(config = {}) {
 
 		// Select silverBox overlay to give it an eventListener.
 		let silverBoxOverlay = document.querySelectorAll(".silverBox-overlay");
+		silverBoxOverlay = silverBoxOverlay[silverBoxOverlay.length - 1];
 
 		// if the clicked element has classList of silverBox-overlay this code will be executed.
 		if (silverBoxOverlay) {
-			for (const overlay of silverBoxOverlay) {
-				overlay.addEventListener("click", (e) => {
-					// closes the modal if the user clicks on the overlay (outside of the modal).
-					if (e.target === overlay) {
-						silverBoxClose({
-							onClose: config.onClose,
-							element: overlay,
-						});
-					}
-					// checks for silverBox after removing wrapper.
-					silverBoxDisableScroll(".silverBox-overlay");
-				});
-			}
+			silverBoxOverlay.addEventListener("click", (e) => {
+				// closes the modal if the user clicks on the overlay (outside of the modal).
+				if (e.target === silverBoxOverlay) {
+					silverBoxClose({
+						onClose: config.onClose,
+						element: silverBoxOverlay,
+					});
+				}
+				// checks for silverBox after removing wrapper.
+				silverBoxDisableScroll(".silverBox-overlay");
+			});
 		}
 
 		// Checks for silverBox after it's created.