Merge pull request #508 from cal-smith/master

chore(position): switch to @carbon/utils-position

Author: zvonimirfras

package-lock.json

@@ -146,6 +146,7 @@
     "zone.js": "0.9.0"
   },
   "dependencies": {
+    "@carbon/utils-position": "1.0.0",
     "flatpickr": "4.5.7",
     "ng2-flatpickr": "7.0.3"
   }

package.json

@@ -18,7 +18,7 @@ import {
 } from "rxjs";
 import { throttleTime } from "rxjs/operators";
 // the AbsolutePosition is required to import the declaration correctly
-import position, { AbsolutePosition } from "./../utils/position";
+import { position, AbsolutePosition } from "@carbon/utils-position";
 import { cycleTabs, getFocusElementList } from "./../common/tab.service";
 import { DialogConfig } from "./dialog-config.interface";
 
@@ -40,63 +40,46 @@ import { DialogConfig } from "./dialog-config.interface";
 export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	/**
 	 * One static event observable to handle window resizing.
-	 * @protected
-	 * @static
-	 * @type {Observable<any>}
-	 * @memberof Dialog
 	 */
 	protected static resizeObservable: Observable<any> = fromEvent(window, "resize").pipe(throttleTime(100));
 	/**
 	 * Emits event that handles the closing of a `Dialog` object.
-	 * @type {EventEmitter<any>}
-	 * @memberof Dialog
 	 */
 	@Output() close: EventEmitter<any> = new EventEmitter();
 	/**
 	 * Receives `DialogConfig` interface object with properties of `Dialog`
-	 * explictly defined.
-	 * @type {DialogConfig}
-	 * @memberof Dialog
+	 * explicitly defined.
 	 */
 	@Input() dialogConfig: DialogConfig;
 	/**
 	 * Maintains a reference to the view DOM element of the `Dialog`.
-	 * @type {ElementRef}
-	 * @memberof Dialog
 	 */
 	@ViewChild("dialog") dialog: ElementRef;
 
 	/**
 	 * Stores the data received from `dialogConfig`.
-	 * @memberof Dialog
 	 */
 	public data = {};
 
 	/**
-	 * The placement of the `Dialog` is recieved from the `Position` service.
-	 * @type {Placement}
-	 * @memberof Dialog
+	 * The placement of the `Dialog` is received from the `Position` service.
 	 */
 	public placement: string;
 
 	/**
 	 * `Subscription` used to update placement in the event of a window resize.
-	 * @protected
-	 * @type {Subscription}
-	 * @memberof Dialog
 	 */
 	protected resizeSubscription: Subscription;
 	/**
 	 * Subscription to all the scrollable parents `scroll` event
 	 */
-	// add a new subscription temprarily so that contexts (such as tests)
+	// add a new subscription temporarily so that contexts (such as tests)
 	// that don't run ngAfterViewInit have something to unsubscribe in ngOnDestroy
 	protected scrollSubscription: Subscription = new Subscription();
 	/**
 	 * Handles offsetting the `Dialog` item based on the defined position
 	 * to not obscure the content beneath.
 	 * @protected
-	 * @memberof Dialog
 	 */
 	protected addGap = {
 		"left": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),
@@ -110,13 +93,11 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	/**
 	 * Creates an instance of `Dialog`.
 	 * @param {ElementRef} elementRef
-	 * @memberof Dialog
 	 */
-	constructor(protected elementRef: ElementRef) {}
+	constructor(protected elementRef: ElementRef) {	}
 
 	/**
-	 * Initilize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.
-	 * @memberof Dialog
+	 * Initialize the `Dialog`, set the placement and gap, and add a `Subscription` to resize events.
 	 */
 	ngOnInit() {
 		this.placement = this.dialogConfig.placement.split(",")[0];
@@ -126,14 +107,13 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 			this.placeDialog();
 		});
 
-		// run any additional initlization code that consuming classes may have
+		// run any additional initialization code that consuming classes may have
 		this.onDialogInit();
 	}
 
 	/**
 	 * After the DOM is ready, focus is set and dialog is placed
 	 * in respect to the parent element.
-	 * @memberof Dialog
 	 */
 	ngAfterViewInit() {
 		const dialogElement = this.dialog.nativeElement;
@@ -236,30 +216,9 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 		// 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 => {
-			const pos = findPosition(parentEl, el, placement);
-			let box = position.getPlacementBox(el, pos);
-			let hiddenHeight = box.bottom - window.innerHeight - window.scrollY;
-			let hiddenWidth = box.right - window.innerWidth - window.scrollX;
-			// if the hiddenHeight or hiddenWidth is negative, reset to offsetHeight or offsetWidth
-			hiddenHeight = hiddenHeight < 0 ? el.offsetHeight : hiddenHeight;
-			hiddenWidth = hiddenWidth < 0 ? el.offsetWidth : hiddenWidth;
-			const area = el.offsetHeight * el.offsetWidth;
-			const hiddenArea = hiddenHeight * hiddenWidth;
-			let visibleArea = area - hiddenArea;
-			// if the visibleArea is 0 set it back to area (to calculate the percentage in a useful way)
-			visibleArea = visibleArea === 0 ? area : visibleArea;
-			const visiblePercent = visibleArea / area;
-			return {
-				placement,
-				weight: visiblePercent
-			};
-		});
 
-		// sort the placements from best to worst
-		weightedPlacements.sort((a, b) => b.weight - a.weight);
-		// pick the best!
-		dialogPlacement = weightedPlacements[0].placement;
+		// find the best placement
+		dialogPlacement = position.findBestPlacement(parentEl, el, placements);
 
 		// calculate the final position
 		const pos = findPosition(parentEl, el, dialogPlacement);
@@ -293,7 +252,6 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 	 * Sets up a event Listener to close `Dialog` if click event occurs outside
 	 * `Dialog` object.
 	 * @param {any} event
-	 * @memberof Dialog
 	 */
 	@HostListener("document:click", ["$event"])
 	clickClose(event) {
@@ -305,15 +263,13 @@ export class Dialog implements OnInit, AfterViewInit, OnDestroy {
 
 	/**
 	 * Closes `Dialog` object by emitting the close event upwards to parents.
-	 * @memberof Dialog
 	 */
 	public doClose() {
 		this.close.emit();
 	}
 
 	/**
 	 * At destruction of component, `Dialog` unsubscribes from handling window resizing changes.
-	 * @memberof Dialog
 	 */
 	ngOnDestroy() {
 		this.resizeSubscription.unsubscribe();

src/dialog/dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, HostListener, ElementRef, AfterViewInit } from "@angular/core";
 import { Dialog } from "../dialog.component";
-import { position } from "../../utils/position";
+import { position } from "@carbon/utils-position";
 import { isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
 import { I18n } from "./../../i18n/i18n.module";
 import { ExperimentalService } from "./../../experimental.module";

src/dialog/overflow-menu/overflow-menu-pane.component.ts

@@ -48,7 +48,6 @@ storiesOf("Overflow Menu", module)
 	}))
 	.add("With links", () => ({
 		template: `
-			<app-experimental-component></app-experimental-component>
 			<ibm-overflow-menu [flip]="flip" >
 				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)" (click)="click($event)">
 					An example option that is really long to show what should be done to handle long text
@@ -57,7 +56,9 @@ storiesOf("Overflow Menu", module)
 				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 3</ibm-overflow-menu-option>
 				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 4</ibm-overflow-menu-option>
 				<ibm-overflow-menu-option href="https://www.ibm.com" disabled="true" (selected)="selected($event)">Disabled</ibm-overflow-menu-option>
-				<ibm-overflow-menu-option href="https://www.ibm.com" type="danger" (selected)="selected($event)">Danger option</ibm-overflow-menu-option>
+				<ibm-overflow-menu-option href="https://www.ibm.com" type="danger" (selected)="selected($event)">
+					Danger option
+				</ibm-overflow-menu-option>
 			</ibm-overflow-menu>
 			<ibm-placeholder></ibm-placeholder>
 		`,

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

@@ -17,7 +17,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { Observable, fromEvent, of, Subscription } from "rxjs";
 
 import { AbstractDropdownView } from "./abstract-dropdown-view.class";
-import { position } from "../utils/position";
+import { position } from "@carbon/utils-position";
 import { I18n } from "./../i18n/i18n.module";
 import { ListItem } from "./list-item.interface";
 import { DropdownService } from "./dropdown.service";

src/dropdown/dropdown.component.ts

@@ -2,7 +2,7 @@ import { Injectable, ElementRef } from "@angular/core";
 import { PlaceholderService } from "./../placeholder/placeholder.module";
 import { fromEvent, Subscription } from "rxjs";
 import { throttleTime } from "rxjs/operators";
-import position from "./../utils/position";
+import { position } from "@carbon/utils-position";
 
 const defaultOffset = { top: 0, left: 0 };
 

src/dropdown/dropdown.service.ts

@@ -1,177 +1 @@
-/**
- * Utilities to manipulate the position of elements relative to other elements
- *
- */
-
-// possible positions ... this should probably be moved (along with some other types) to some central location
-export type Placement =
-	"left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "right-bottom";
-
-export interface AbsolutePosition {
-	top: number;
-	left: number;
-	position?: AbsolutePosition;
-}
-
-export type Offset = { left: number, top: number };
-
-function calculatePosition(referenceOffset: Offset, reference: HTMLElement, target: HTMLElement, placement: Placement): AbsolutePosition {
-	// calculate offsets for a given position
-	const referenceRect = reference.getBoundingClientRect();
-	switch (placement) {
-		case "left":
-			return {
-				top: referenceOffset.top - Math.round(target.offsetHeight / 2) + Math.round(referenceRect.height / 2),
-				left: Math.round(referenceOffset.left - target.offsetWidth)
-			};
-		case "right":
-			return {
-				top: referenceOffset.top - Math.round(target.offsetHeight / 2) + Math.round(referenceRect.height / 2),
-				left: Math.round(referenceOffset.left + referenceRect.width)
-			};
-		case "top":
-			return {
-				top: Math.round(referenceOffset.top - target.offsetHeight),
-				left: referenceOffset.left - Math.round(target.offsetWidth / 2) + Math.round(referenceRect.width / 2)
-			};
-		case "bottom":
-			return {
-				top: Math.round(referenceOffset.top + referenceRect.height),
-				left: referenceOffset.left - Math.round(target.offsetWidth / 2) + Math.round(referenceRect.width / 2)
-			};
-		case "left-bottom":
-			return {
-				// 22 == half of popover header height
-				top: referenceOffset.top - 22 + Math.round(referenceRect.height / 2),
-				left: Math.round(referenceOffset.left - target.offsetWidth)
-			};
-		case "right-bottom":
-			return {
-				top: referenceOffset.top - 22 + Math.round(referenceRect.height / 2),
-				left: Math.round(referenceOffset.left + referenceRect.width)
-			};
-		// matter currently doesn't support these, so the popover is broken anyway
-		case "top-left":
-			return {
-				top: 0,
-				left: 0
-			};
-		case "top-right":
-			return {
-				top: 0,
-				left: 0
-			};
-		case "bottom-left":
-			return {
-				top: referenceOffset.top + referenceRect.height,
-				left: referenceOffset.left + referenceRect.width - target.offsetWidth
-			};
-		case "bottom-right":
-			return {
-				top: referenceOffset.top + referenceRect.height,
-				left: referenceOffset.left
-			};
-	}
-}
-
-export namespace position {
-	export function getRelativeOffset(target: HTMLElement): Offset {
-		// start with the initial element offsets
-		let offsets = {
-			left: target.offsetLeft,
-			top: target.offsetTop
-		};
-		// get each static (i.e. not absolute or relative) offsetParent and sum the left/right offsets
-		while (target.offsetParent && getComputedStyle(target.offsetParent).position === "static") {
-			offsets.left += target.offsetLeft;
-			offsets.top += target.offsetTop;
-			target = target.offsetParent as HTMLElement;
-		}
-		return offsets;
-	}
-
-	export function getAbsoluteOffset(target: HTMLElement): Offset {
-		let currentNode = target;
-		let margins = {
-			top: 0,
-			left: 0
-		};
-
-		// searches for containing elements with additional margins
-		while (currentNode.offsetParent) {
-			const computed = getComputedStyle(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;
-		}
-
-		const targetRect = target.getBoundingClientRect();
-		const relativeRect = document.body.getBoundingClientRect();
-		return {
-			top: targetRect.top - relativeRect.top + margins.top,
-			left: targetRect.left - relativeRect.left + margins.left
-		};
-	}
-
-	// finds the position relative to the `reference` element
-	export function findRelative(reference: HTMLElement, target: HTMLElement, placement: Placement): AbsolutePosition {
-		const referenceOffset = getRelativeOffset(reference);
-		return calculatePosition(referenceOffset, reference, target, placement);
-	}
-
-	export function findAbsolute(reference: HTMLElement, target: HTMLElement, placement: Placement): AbsolutePosition {
-		const referenceOffset = getAbsoluteOffset(reference);
-		return calculatePosition(referenceOffset, reference, target, placement);
-	}
-
-	export function findPosition(reference: HTMLElement,
-		target: HTMLElement,
-		placement: Placement,
-		offsetFunction = getRelativeOffset): AbsolutePosition {
-		const referenceOffset = offsetFunction(reference);
-		return calculatePosition(referenceOffset, reference, target, placement);
-	}
-
-	/**
-	 * Get the dimensions of the dialog from an AbsolutePosition and a reference element
-	 */
-	export function getPlacementBox(target: HTMLElement, position: AbsolutePosition) {
-		const targetBottom = target.offsetHeight + position.top;
-		const targetRight = target.offsetWidth + position.left;
-
-		return {
-			top: position.top,
-			bottom: targetBottom,
-			left: position.left,
-			right: targetRight
-		};
-	}
-
-	export function addOffset(position: AbsolutePosition, top = 0, left = 0): AbsolutePosition {
-		return Object.assign({}, position, {
-			top: position.top + top,
-			left: position.left + left
-		});
-	}
-
-	export function setElement(element: HTMLElement, position: AbsolutePosition): void {
-		element.style.top = `${position.top}px`;
-		element.style.left = `${position.left}px`;
-	}
-}
-
-export default position;
+export * from "@carbon/utils-position";