Merge pull request #159 from boscop-fr/fix-collision-resolution

Fixed collision resolution

Author: felixgirault

e2e/orejime.spec.ts

@@ -43,6 +43,13 @@ test.describe('Orejime', () => {
 					<script id="mandatory"></script>
 				</template>
 
+				<button
+					id="obscuring"
+					style="position: absolute; bottom: 6rem; right: 3rem; z-index: 9999;"
+				>
+					Obscuring
+				</button>
+
 				<button
 					id="obscured"
 					style="position: absolute; bottom: 3rem; right: 3rem;"
@@ -254,6 +261,14 @@ test.describe('Orejime', () => {
 
 		const position2 = await orejimePage.banner.boundingBox();
 		await expect(position2).toEqual(initalPosition);
+
+		// When a button above the banner takes focus, the
+		// banner shouldn't be displaced either.
+		const obscuring = orejimePage.locator('#obscuring');
+		await obscuring.focus();
+
+		const position3 = await orejimePage.banner.boundingBox();
+		await expect(position3).toEqual(initalPosition);
 	});
 
 	test('should clear consents', async () => {

package-lock.json

@@ -61,7 +61,7 @@
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.0",
     "js-cookie": "^3.0.1",
-    "micromodal": "^0.4.10",
+    "micromodal": "^0.6.1",
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^10.1.5",
     "preact": "^10.23.2",

package.json

@@ -89,6 +89,22 @@ const getPaddedBoundingBox = (element: DOMRect, padding: number) => ({
 	left: element.left + padding
 });
 
+// A naive way to estimate the z-index of an element.
+// This does not take each and every stacking context rules
+// into account but merely adds up every z-indexes set on
+// the element's ancestors.
+const getZIndex = (element: HTMLElement): number => {
+	const base =
+		element.offsetParent instanceof HTMLElement
+			? getZIndex(element.offsetParent)
+			: 0;
+
+	const style = window.getComputedStyle(element);
+	const z = parseInt(style.zIndex, 10) || 0;
+
+	return base + z;
+};
+
 // Resolves a visual collision between two elements, either
 // by scrolling the page or moving one of them.
 // We're only resolving collisions on the vertical axis, as
@@ -99,6 +115,14 @@ export const resolveCollision = (fixed: HTMLElement, mobile: HTMLElement) => {
 		return;
 	}
 
+	// If the fixed element is meant to obscure the mobile
+	// one (i.e. positionned absolutely above), there is no
+	// need to move anything.
+	if (getZIndex(fixed) > getZIndex(mobile)) {
+		translateElementY(mobile, 0);
+		return;
+	}
+
 	// We're padding the fixed element's bounding box to
 	// avoid snapping the mobile one right on its border.
 	const fixedRect = getPaddedBoundingBox(