From a869bcec23726d1c276b9db185c37b35a919cb51 Mon Sep 17 00:00:00 2001
From: Florian Bouillon <florian.bouillon@delta-wings.net>
Date: Wed, 2 Sep 2020 14:21:46 +0200
Subject: [PATCH] Added more placement option

Signed-off-by: Florian Bouillon <florian.bouillon@delta-wings.net>
---
 packages/dom-manager/.eslintrc.js           |  5 ++
 packages/dom-manager/src/DOMElement.ts      | 60 +++++++++++++--------
 packages/dom-manager/src/DOMFleetManager.ts |  2 +-
 packages/dom-manager/src/browser.ts         |  2 +-
 4 files changed, 45 insertions(+), 24 deletions(-)
 create mode 100644 packages/dom-manager/.eslintrc.js

diff --git a/packages/dom-manager/.eslintrc.js b/packages/dom-manager/.eslintrc.js
new file mode 100644
index 0000000..7a0472e
--- /dev/null
+++ b/packages/dom-manager/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+	"parserOptions": {
+		"project": __dirname + "/tsconfig.json"
+	}
+}
\ No newline at end of file
diff --git a/packages/dom-manager/src/DOMElement.ts b/packages/dom-manager/src/DOMElement.ts
index d4a2a5f..13098c6 100644
--- a/packages/dom-manager/src/DOMElement.ts
+++ b/packages/dom-manager/src/DOMElement.ts
@@ -4,11 +4,6 @@ export default class DOMElement<T extends HTMLElement = HTMLElement> {
 
 	public item: T
 
-	public static create<K extends Tags>(tagName: K, options?: ElementCreationOptions): DOMElement<HTMLElementTagNameMap[K]>;
-	public static create(tagName: string, options?: ElementCreationOptions): DOMElement<HTMLElement> {
-		return new DOMElement(tagName as Tags, options)
-	}
-
 	public constructor(tagName: Tags | T, options?: ElementCreationOptions) {
 		if (tagName instanceof HTMLElement) {
 			this.item = tagName
@@ -17,6 +12,12 @@ export default class DOMElement<T extends HTMLElement = HTMLElement> {
 		this.item = document.createElement(tagName, options) as any
 	}
 
+	public static create<K extends Tags>(tagName: K, options?: ElementCreationOptions): DOMElement<HTMLElementTagNameMap[K]>;
+	public static create(tagName: string, options?: ElementCreationOptions): DOMElement<HTMLElement> {
+		return new DOMElement(tagName as Tags, options)
+	}
+
+
 	public static get<T extends HTMLElement = HTMLElement>(query: string | T, source?: HTMLElement): DOMElement<T> | undefined {
 		if (!(query instanceof HTMLElement)) {
 			const tmp = (source || document).querySelector<T>(query)
@@ -98,23 +99,11 @@ export default class DOMElement<T extends HTMLElement = HTMLElement> {
 		return this
 	}
 
-	public placeBefore(item: DOMElement | HTMLElement) {
-		if (item instanceof DOMElement) {
-			item = item.item
-		}
-		const parent = item.parentElement
-		if (!parent) {
-			throw new Error('can\'t place DOMElement before item because it has no parent')
-		}
-		parent.insertBefore(this.item, item)
-		return this
-	}
-
 	public emit<E extends keyof HTMLElementEventMap>(event: E): this
 	public emit(event: string): this
 	public emit(event: string): this {
 		if (event in this.item) {
-			;(this.item as any)[event]()
+			(this.item as any)[event]()
 			return this
 		}
 		this.item.dispatchEvent(new Event(event))
@@ -122,9 +111,8 @@ export default class DOMElement<T extends HTMLElement = HTMLElement> {
 	}
 
 	public attr(key: string): string | null
-	public attr(key: string, value: string): this
+	public attr(key: string, value: string | null): this
 	public attr(key: keyof T, value: boolean): this
-	public attr(key: string, value: null): this
 	public attr(key: string | keyof T, value?: string | boolean | null): this | string | null {
 		if (!value) {
 			return this.item.getAttribute(key as string)
@@ -143,8 +131,7 @@ export default class DOMElement<T extends HTMLElement = HTMLElement> {
 
 
 	public data(key: string): string | null
-	public data(key: string, value: string): this
-	public data(key: string, value: null): this
+	public data(key: string, value: string | null): this
 	public data(key: string, value?: string | null): this | string | null {
 		// @ts-ignore
 		return this.attr(`data-${key}`, value)
@@ -161,4 +148,33 @@ export default class DOMElement<T extends HTMLElement = HTMLElement> {
 	public exist() {
 		return !!this.item
 	}
+
+	public placeBefore(item: DOMElement | HTMLElement) {
+		if (item instanceof DOMElement) {
+			item = item.item
+		}
+		const parent = item.parentElement
+		if (!parent) {
+			throw new Error('can\'t place DOMElement before item because it has no parent')
+		}
+		parent.insertBefore(this.item, item)
+		return this
+	}
+
+	public placeAsChildOf(item: DOMElement | HTMLElement) {
+		if (item instanceof DOMElement) {
+			item = item.item
+		}
+
+		item.appendChild(this.item)
+		return this
+	}
+
+	public place(verb: 'before' | 'asChildOf', item: DOMElement | HTMLElement) {
+		if (verb === 'before') {
+			return this.placeBefore(item)
+		} else {
+			return this.placeAsChildOf(item)
+		}
+	}
 }
diff --git a/packages/dom-manager/src/DOMFleetManager.ts b/packages/dom-manager/src/DOMFleetManager.ts
index f26c27d..ff29cfa 100644
--- a/packages/dom-manager/src/DOMFleetManager.ts
+++ b/packages/dom-manager/src/DOMFleetManager.ts
@@ -1,4 +1,4 @@
-import { DOMElement } from "."
+import { DOMElement } from '.'
 
 export default class DOMFleetManager<T extends HTMLElement = HTMLElement> {
 	public items: Array<DOMElement<T>> = []
diff --git a/packages/dom-manager/src/browser.ts b/packages/dom-manager/src/browser.ts
index d3b141b..cd98d98 100644
--- a/packages/dom-manager/src/browser.ts
+++ b/packages/dom-manager/src/browser.ts
@@ -1,4 +1,4 @@
-import { DOMFleetManager, DOMElement} from ".";
+import { DOMFleetManager, DOMElement} from '.'
 
 // @ts-expect-error
 window.DOMElement = DOMElement