Merge pull request #421 from cal-smith/dropdown-placeholder

fix(dropdown): add dropdown service to enable placeholder use

Author: zvonimirfras

src/dropdown/dropdown.component.spec.ts

@@ -8,6 +8,8 @@ import { DropdownList } from "./list/dropdown-list.component";
 import { ListItem } from "./list-item.interface";
 import { ScrollableList } from "./scrollable-list.directive";
 import { I18nModule } from "../i18n/i18n.module";
+import { DropdownService } from "./dropdown.service";
+import { PlaceholderModule } from "./../placeholder/placeholder.module";
 
 @Component({
 	template: `
@@ -38,8 +40,10 @@ describe("Dropdown", () => {
 			],
 			imports: [
 				StaticIconModule,
-				I18nModule
-			]
+				I18nModule,
+				PlaceholderModule
+			],
+			providers: [ DropdownService ]
 		});
 	});
 

src/dropdown/dropdown.component.ts

@@ -15,12 +15,12 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 // Observable import is required here so typescript can compile correctly
 import { Observable, fromEvent, of, Subscription } from "rxjs";
-import { throttleTime } from "rxjs/operators";
 
 import { AbstractDropdownView } from "./abstract-dropdown-view.class";
 import { position } from "../utils/position";
 import { I18n } from "./../i18n/i18n.module";
 import { ListItem } from "./list-item.interface";
+import { DropdownService } from "./dropdown.service";
 
 /**
  * Drop-down lists enable users to select one or more items from a list.
@@ -183,21 +183,12 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 */
 	dropUp = false;
 
-	/**
-	 * Used by the various appendToX methods to keep a reference to our wrapper div
-	 */
-	dropdownWrapper: HTMLElement;
 	// .bind creates a new function, so we declare the methods below
 	// but .bind them up here
 	noop = this._noop.bind(this);
 	outsideClick = this._outsideClick.bind(this);
 	outsideKey = this._outsideKey.bind(this);
 	keyboardNav = this._keyboardNav.bind(this);
-	/**
-	 * Maintains an Event Observable Subscription for tracking window resizes.
-	 * Window resizing is tracked if the `Dropdown` is appended to the body, otherwise it does not need to be supported.
-	 */
-	resize: Subscription;
 	/**
 	 *  Maintians an Event Observable Subscription for tracking scrolling within the open `Dropdown` list.
 	 */
@@ -208,7 +199,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	/**
 	 * Creates an instance of Dropdown.
 	 */
-	constructor(protected elementRef: ElementRef, protected i18n: I18n) {}
+	constructor(protected elementRef: ElementRef, protected i18n: I18n, protected dropdownService: DropdownService) {}
 
 	/**
 	 * Updates the `type` property in the `@ContentChild`.
@@ -413,37 +404,19 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.
 	 */
 	_appendToDropdown() {
-		if (document.body.contains(this.dropdownWrapper)) {
-			this.dropdownMenu.nativeElement.style.display = "none";
-			this.elementRef.nativeElement.appendChild(this.dropdownMenu.nativeElement);
-			document.body.removeChild(this.dropdownWrapper);
-			this.resize.unsubscribe();
-			this.dropdownWrapper.removeEventListener("keydown", this.keyboardNav, true);
-		}
+		this.dropdownService.appendToDropdown(this.elementRef.nativeElement);
+		this.dropdownMenu.nativeElement.removeEventListener("keydown", this.keyboardNav, true);
 	}
 
 	/**
 	 * Creates the `Dropdown` list as an element that is appended to the DOM body.
 	 */
 	_appendToBody() {
-		const positionDropdown = () => {
-			let pos = position.findAbsolute(this.dropdownButton.nativeElement, this.dropdownWrapper, "bottom");
-			// add -40 to the top position to account for carbon styles
-			pos = position.addOffset(pos, -40, 0);
-			position.setElement(this.dropdownWrapper, pos);
-		};
-		this.dropdownMenu.nativeElement.style.display = "block";
-		this.dropdownWrapper = document.createElement("div");
-		this.dropdownWrapper.className = `dropdown ${this.elementRef.nativeElement.className}`;
-		this.dropdownWrapper.style.width = this.dropdownButton.nativeElement.offsetWidth + "px";
-		this.dropdownWrapper.style.position = "absolute";
-		this.dropdownWrapper.appendChild(this.dropdownMenu.nativeElement);
-		document.body.appendChild(this.dropdownWrapper);
-		positionDropdown();
-		this.dropdownWrapper.addEventListener("keydown", this.keyboardNav, true);
-		this.resize = fromEvent(window, "resize")
-			.pipe(throttleTime(100))
-			.subscribe(() => positionDropdown());
+		this.dropdownService.appendToBody(
+			this.dropdownButton.nativeElement,
+			this.dropdownMenu.nativeElement,
+			this.elementRef.nativeElement.className);
+		this.dropdownMenu.nativeElement.addEventListener("keydown", this.keyboardNav, true);
 	}
 
 	/**
@@ -529,12 +502,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 				this.scroll = fromEvent(container, "scroll")
 				.subscribe(() => {
 					if (this.isVisibleInContainer(this.elementRef.nativeElement, container)) {
-						position.setElement(
-							this.dropdownWrapper,
-							position.addOffset(
-								position.findAbsolute(this.elementRef.nativeElement, this.dropdownWrapper, "bottom")
-							)
-						);
+						this.dropdownService.updatePosition(this.dropdownButton.nativeElement);
 					} else {
 						this.closeMenu();
 					}

src/dropdown/dropdown.module.ts

@@ -8,13 +8,16 @@ import { DropdownList } from "./list/dropdown-list.component";
 
 import { ScrollableList } from "./scrollable-list.directive";
 import { I18nModule } from "./../i18n/i18n.module";
+import { PlaceholderModule } from "./../placeholder/placeholder.module";
+import { DropdownService } from "./dropdown.service";
 
 export { Dropdown } from "./dropdown.component";
 export { DropdownList } from "./list/dropdown-list.component";
 
 export { ScrollableList } from "./scrollable-list.directive";
 export { AbstractDropdownView } from "./abstract-dropdown-view.class";
 export { ListItem } from "./list-item.interface";
+export { DropdownService } from "./dropdown.service";
 
 @NgModule({
 	declarations: [
@@ -31,7 +34,9 @@ export { ListItem } from "./list-item.interface";
 		CommonModule,
 		FormsModule,
 		StaticIconModule,
-		I18nModule
-	]
+		I18nModule,
+		PlaceholderModule
+	],
+	providers: [ DropdownService ]
 })
 export class DropdownModule {}

src/dropdown/dropdown.service.ts

@@ -0,0 +1,91 @@
+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";
+
+@Injectable()
+export class DropdownService {
+	/**
+	 * reference to the body appended menu
+	 */
+	protected menuInstance: HTMLElement;
+
+	/**
+	 * Maintains an Event Observable Subscription for tracking window resizes.
+	 * Window resizing is tracked if the `Dropdown` is appended to the body, otherwise it does not need to be supported.
+	 */
+	protected resize: Subscription;
+
+	constructor(protected placeholderService: PlaceholderService) {}
+
+	/**
+	 * Appends the menu to the body, or a `ibm-placeholder` (if defined)
+	 *
+	 * @param parentRef container to position relative to
+	 * @param menuRef menu to be appended to body
+	 * @param classList any extra classes we should wrap the container with
+	 */
+	appendToBody(parentRef: HTMLElement, menuRef: HTMLElement, classList): HTMLElement {
+		// build the dropdown list container
+		menuRef.style.display = "block";
+		const dropdownWrapper = document.createElement("div");
+		dropdownWrapper.className = `dropdown ${classList}`;
+		dropdownWrapper.style.width = parentRef.offsetWidth + "px";
+		dropdownWrapper.style.position = "absolute";
+		dropdownWrapper.appendChild(menuRef);
+
+		// append it to the placeholder
+		if (this.placeholderService.hasPlaceholderRef()) {
+			this.placeholderService.appendElement(dropdownWrapper);
+			// or append it directly to the body
+		} else {
+			document.body.appendChild(dropdownWrapper);
+		}
+
+		this.menuInstance = dropdownWrapper;
+
+		this.positionDropdown(parentRef, dropdownWrapper);
+		this.resize = fromEvent(window, "resize")
+			.pipe(throttleTime(100))
+			.subscribe(() => this.positionDropdown(parentRef, dropdownWrapper));
+
+		return dropdownWrapper;
+	}
+
+	/**
+	 * Reattach the dropdown menu to the parent container
+	 * @param hostRef container to append to
+	 */
+	appendToDropdown(hostRef: HTMLElement): HTMLElement {
+		// if the instance is already removed don't try and remove it again
+		if (!this.menuInstance) { return; }
+		const instance = this.menuInstance;
+		const menu = instance.firstElementChild as HTMLElement;
+		// clean up the instance
+		this.menuInstance = null;
+		menu.style.display = "none";
+		hostRef.appendChild(menu);
+		this.resize.unsubscribe();
+		if (this.placeholderService.hasPlaceholderRef() && this.placeholderService.hasElement(instance)) {
+			this.placeholderService.removeElement(instance);
+		} else if (document.body.contains(instance)) {
+			document.body.removeChild(instance);
+		}
+		return instance;
+	}
+
+	/**
+	 * position an open dropdown relative to the given parentRef
+	 */
+	updatePosition(parentRef) {
+		this.positionDropdown(parentRef, this.menuInstance);
+	}
+
+	protected positionDropdown(parentRef, menuRef) {
+		let pos = position.findAbsolute(parentRef, menuRef, "bottom");
+		// add -40 to the top position to account for carbon styles
+		pos = position.addOffset(pos, -40, 0);
+		position.setElement(menuRef, pos);
+	}
+}

src/dropdown/dropdown.stories.ts

@@ -5,12 +5,14 @@ import { withKnobs, select, boolean, object, text } from "@storybook/addon-knobs
 
 import { DropdownModule } from "../";
 import { of } from "rxjs";
+import { PlaceholderModule } from "../placeholder/placeholder.module";
 
 storiesOf("Dropdown", module)
 	.addDecorator(
 		moduleMetadata({
 			imports: [
-				DropdownModule
+				DropdownModule,
+				PlaceholderModule
 			]
 		})
 	)
@@ -27,6 +29,7 @@ storiesOf("Dropdown", module)
 				<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
 			</ibm-dropdown>
 		</div>
+		<ibm-placeholder></ibm-placeholder>
 	`,
 		props: {
 			disabled: boolean("disabled", false),

src/dropdown/list/dropdown-list.component.ts

@@ -97,7 +97,9 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 */
 	@Input() set items (value: Array<ListItem> | Observable<Array<ListItem>>) {
 		if (isObservable(value)) {
-			this._itemsSubscription.unsubscribe();
+			if (this._itemsSubscription) {
+				this._itemsSubscription.unsubscribe();
+			}
 			this._itemsSubscription = value.subscribe(v => this.updateList(v));
 		} else {
 			this.updateList(value);

src/placeholder/placeholder.service.ts

@@ -53,4 +53,16 @@ export class PlaceholderService {
 	hasPlaceholderRef() {
 		return !!this.viewContainerRef;
 	}
+
+	appendElement(element: HTMLElement): HTMLElement {
+		return this.viewContainerRef.element.nativeElement.appendChild(element);
+	}
+
+	removeElement(element: HTMLElement): HTMLElement {
+		return this.viewContainerRef.element.nativeElement.removeChild(element);
+	}
+
+	hasElement(element: HTMLElement): boolean {
+		return this.viewContainerRef.element.nativeElement.contains(element);
+	}
 }