Merge pull request #363 from cal-smith/dialog

fix(dialog): improve positioning when dealing with margins and un-positioned bodys

Author: zvonimirfras

.storybook/preview.scss

@@ -1,9 +1,5 @@
 @import "~carbon-components/src/globals/scss/styles";
 
-
 body {
-	padding: 20px;
-	// for tooltips/popovers ... can be on any chld element before the popover
-	// but body is most conveient
-	position: relative;
+	margin: 20px;
 }

src/dialog/dialog.component.ts

@@ -207,7 +207,6 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 
 	/**
 	 * Uses the position service to position the `Dialog` in screen space
-	 * @memberof Dialog
 	 */
 	placeDialog(): void {
 		// helper to find the position based on the current/given environment
@@ -226,7 +225,7 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 		let el = this.dialog.nativeElement;
 		let dialogPlacement = this.placement;
 
-		// split always retuns an array, so we can just use the auto position logic
+		// split always returns an array, so we can just use the auto position logic
 		// for single positions too
 		const placements = this.dialogConfig.placement.split(",");
 		const weightedPlacements = placements.map(placement => {
@@ -249,7 +248,7 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 			};
 		});
 
-		// sort the placments from best to worst
+		// sort the placements from best to worst
 		weightedPlacements.sort((a, b) => b.weight - a.weight);
 		// pick the best!
 		dialogPlacement = weightedPlacements[0].placement;
@@ -265,7 +264,6 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	/**
 	 * Sets up a KeyboardEvent to close `Dialog` with Escape key.
 	 * @param {KeyboardEvent} event
-	 * @memberof Dialog
 	 */
 	@HostListener("keydown", ["$event"])
 	escapeClose(event: KeyboardEvent) {

src/dialog/overflow-menu/overflow-menu.stories.ts

@@ -2,6 +2,7 @@ import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { withKnobs, boolean, number } from "@storybook/addon-knobs";
 
 import { DialogModule } from "../../";
+import { PlaceholderModule } from "../../placeholder/placeholder.module";
 
 let options;
 
@@ -17,7 +18,8 @@ storiesOf("Overflow Menu", module)
 	.addDecorator(
 		moduleMetadata({
 			imports: [
-				DialogModule
+				DialogModule,
+				PlaceholderModule
 			]
 		})
 	)
@@ -36,6 +38,7 @@ storiesOf("Overflow Menu", module)
 				<ibm-overflow-menu-option disabled="true" (selected)="selected($event)">Disabled</ibm-overflow-menu-option>
 				<ibm-overflow-menu-option type="danger" (selected)="selected($event)">Danger option</ibm-overflow-menu-option>
 			</ibm-overflow-menu>
+			<ibm-placeholder></ibm-placeholder>
 		`,
 		props: {
 			click: () => console.log("click"),

src/utils/position.ts

@@ -78,7 +78,7 @@ function calculatePosition(referenceOffset: Offset, reference: HTMLElement, targ
 
 export namespace position {
 	export function getRelativeOffset(target: HTMLElement): Offset {
-		// start with the inital element offsets
+		// start with the initial element offsets
 		let offsets = {
 			left: target.offsetLeft,
 			top: target.offsetTop
@@ -93,9 +93,53 @@ export namespace position {
 	}
 
 	export function getAbsoluteOffset(target: HTMLElement): Offset {
+		let positionedElement;
+		let currentNode = target;
+		let margins = {
+			top: 0,
+			left: 0
+		};
+
+		// searches either for a parent `positionedElement` or for
+		// containing elements with additional margins
+		// once we have a `positionedElement` we can stop searching
+		// since we use offsetParent we end up skipping most elements
+		while (currentNode.offsetParent && !positionedElement) {
+			const computed = getComputedStyle(currentNode.offsetParent);
+			if (computed.position !== "static") {
+				positionedElement = currentNode.offsetParent;
+			}
+
+			// find static elements with additional margins
+			// since they tend to throw off our positioning
+			// (usually this is just the body)
+			if (
+				computed.position === "static" &&
+				computed.marginLeft &&
+				computed.marginTop
+			) {
+				if (parseInt(computed.marginTop, 10)) {
+					margins.top += parseInt(computed.marginTop, 10);
+				}
+				if (parseInt(computed.marginLeft, 10)) {
+					margins.left += parseInt(computed.marginLeft, 10);
+				}
+			}
+
+			currentNode = currentNode.offsetParent as HTMLElement;
+		}
+
+		// if we don't find any `relativeElement` on our walk
+		// default to the body
+		if (!positionedElement) {
+			positionedElement = document.body;
+		}
+
+		const targetRect = target.getBoundingClientRect();
+		const relativeRect = positionedElement.getBoundingClientRect();
 		return {
-			top: target.getBoundingClientRect().top,
-			left: target.getBoundingClientRect().left - document.body.getBoundingClientRect().left
+			top: targetRect.top - relativeRect.top + margins.top,
+			left: targetRect.left - relativeRect.left + margins.left
 		};
 	}