From cbcc269be607cc964fbd69d179d8a0e8b8e4bffa Mon Sep 17 00:00:00 2001
From: Joris
Date: Mon, 3 Feb 2020 18:28:50 +0100
Subject: Extract dom and number utilities to external files

---
 src/main.ts | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/main.ts

(limited to 'src/main.ts')

diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..ad83591
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,71 @@
+import * as number from './number'
+import * as dom from './dom'
+
+/* Set up inputs for the ingredients */
+
+const itemEntries =
+  dom.nodeListToArray(document.querySelectorAll('.g-Recipe__Content ul > li'))
+    .map(itemNode => ({ tag: 'li', node: itemNode }))
+
+const h1 = document.querySelector<HTMLElement>('.g-Recipe__Content h1')
+
+if (h1 !== null) {
+  itemEntries.push({ tag: 'h1', node: h1 })
+}
+
+const inputs = setupInputs(itemEntries)
+
+inputs.map(input => {
+  input.node.oninput = e => {
+    if (e.target !==null) {
+      const parsed = number.parse((e.target as HTMLInputElement).value)
+
+      if (parsed !== undefined && parsed.before === '' && parsed.after === '') {
+        const factor = parsed.number / input.number
+        inputs.map(input2 => {
+          if (input.node !== input2.node) {
+            input2.node.value = number.prettyPrint(input2.number * factor)
+          }
+        })
+      }
+    }
+  }
+})
+
+interface InputEntry {
+  tag: string;
+  node: HTMLElement;
+}
+
+interface InputResult {
+  number: number,
+  node: HTMLInputElement
+}
+
+function setupInputs(xs: InputEntry[]): InputResult[] {
+  const res: InputResult[] = []
+
+  xs.forEach(x => {
+    const parsed = number.parse(x.node.innerText)
+
+    if (parsed !== undefined) {
+      const numberNode = number.node(x.tag, parsed)
+      dom.replace(x.node, numberNode.node)
+      res.push({
+        number: parsed.number,
+        node: numberNode.number
+      })
+    }
+  })
+
+  return res
+}
+
+/* Set up done marks for steps */
+
+dom.nodeListToArray(document.querySelectorAll('.g-Recipe__Content ol > li')).forEach(todo => {
+  todo.onclick = e => {
+    dom.toggleClassName(todo, 'g-Recipe__Completed')
+    e.stopPropagation()
+  }
+})
-- 
cgit v1.2.3