Add helper to create dom nodes

2 files changed, 65 insertions, 24 deletions

diff --git a/main.ts b/main.ts
index c8cff19..6b64881 100644
--- a/main.ts
+++ b/main.ts
@@ -56,21 +56,21 @@ interface InputResult {
   node: HTMLInputElement
 }
 
-function setInputs(xs: Array<InputEntry>): Array<InputResult> {
-  const res: Array<InputResult> = []
+function setInputs(xs: InputEntry[]): InputResult[] {
+  const res: InputResult[] = []
 
   xs.forEach(x => {
     const parsed = parseNumber(x.node.innerText)
 
     if (parsed !== undefined) {
-      const numberNode = parsedNumberNode(x.tag, parsed)
+      const numberElement = createNumberElement(x.tag, parsed)
       const parentNode = x.node.parentNode
 
       if (parentNode) {
-        parentNode.replaceChild(numberNode.all, x.node)
+        parentNode.replaceChild(numberElement.node, x.node)
         res.push({
           number: parsed.number,
-          node: numberNode.number
+          node: numberElement.number
         })
       }
     }
@@ -79,21 +79,23 @@ function setInputs(xs: Array<InputEntry>): Array<InputResult> {
   return res
 }
 
-function parsedNumberNode(tag: string, parsedNumber: ParsedNumber) {
-  const node = document.createElement(tag)
-
-  node.appendChild(document.createTextNode(parsedNumber.before))
-
-  const numberNode = document.createElement('input')
-  numberNode.className = 'g-Number'
-  numberNode.value = prettyPrintNumber(parsedNumber.number)
-  node.appendChild(numberNode)
+interface NumberElement {
+  node: Element;
+  number: HTMLInputElement;
+}
 
-  node.appendChild(document.createTextNode(parsedNumber.after))
+function createNumberElement(tag: string, parsedNumber: ParsedNumber): NumberElement {
+  const numberElement = h(
+    'input',
+    {
+      'class': 'g-Number',
+      'value': prettyPrintNumber(parsedNumber.number)
+    }
+  ) as HTMLInputElement
 
   return {
-    all: node,
-    number: numberNode,
+    node: h(tag, {}, [parsedNumber.before, numberElement, parsedNumber.after]),
+    number: numberElement,
   }
 }
 
@@ -104,7 +106,8 @@ interface ParsedNumber {
 }
 
 function parseNumber(str: string): ParsedNumber | undefined {
-  for (var start = 0; start < str.length; start++) {
+  let start;
+  for (start = 0; start < str.length; start++) {
     if (isDigit(str.charAt(start))) {
       break
     }
@@ -115,8 +118,9 @@ function parseNumber(str: string): ParsedNumber | undefined {
   }
 
   // Integer part
-  var integerPart = '';
-  for (var end = start; end < str.length; end++) {
+  let integerPart = '';
+  let end = start;
+  for (; end < str.length; end++) {
     const c = str.charAt(end)
 
     if (!isDigit(c)) {
@@ -132,7 +136,7 @@ function parseNumber(str: string): ParsedNumber | undefined {
   }
 
   // Decimal part
-  var decimalPart = '';
+  let decimalPart = '';
   for (; end < str.length; end++) {
     const c = str.charAt(end)
 
@@ -155,8 +159,8 @@ function isDigit(c: string) {
   return c >= '0' && c <= '9'
 }
 
-function nodeListToArray(nodeList: NodeListOf<HTMLElement>): Array<HTMLElement> {
-  const xs: Array<HTMLElement> = [];
+function nodeListToArray(nodeList: NodeListOf<HTMLElement>): HTMLElement[] {
+  const xs: HTMLElement[] = [];
   nodeList.forEach(node => xs.push(node))
   return xs
 }
@@ -170,3 +174,40 @@ function prettyPrintNumber(n: number): string {
     return xs[0]
   }
 }
+
+/* Element creation helper */
+
+type Attribute = string | boolean | ((e: Event) => void)
+
+type Child = Element | string
+
+function h(tag: string, attrs: {[key: string]: Attribute}, children: Array<Child> = []): Element {
+  let element = document.createElement(tag)
+
+  for (let name in attrs) {
+    let value = attrs[name]
+    if (typeof value === 'boolean') {
+      if (value) {
+        element.setAttribute(name, name)
+      }
+    } else if (typeof value === 'function') {
+      (element as any)[name] = (e: Event) => {
+        if (e.target !== null) {
+          console.log((e.target as HTMLInputElement).value)
+        }
+      }
+    } else {
+      element.setAttribute(name, value)
+    }
+  }
+
+  children.forEach(child => {
+    if (typeof child === 'string') {
+      element.appendChild(document.createTextNode(child))
+    } else {
+      element.appendChild(child)
+    }
+  })
+
+  return element
+}
diff --git a/static/main.css b/static/main.css
index cb4fda0..7595b24 100644
--- a/static/main.css
+++ b/static/main.css
@@ -144,7 +144,7 @@ body {
   left: 0;
   counter-increment: ol;
   content: counter(ol);
-  margin-right: (px 10);
+  margin-right: 10px;
   background-color: var(--color-title);
   color: white;
   border-radius: 50%;