Buttons and lists

- Button class name changed to Button, from ButtonInput
- Button layouts are now updated with fixLayout, rather than
  automatically when the text property is changed
- Buttons now have a height of 1, so they can generally actually
  be used in layouts

- New example for list form elements
- List form elements let you navigate with up/down (or left/right,
  for horizontal lists)
- List forms now have nextInput and previousInput methods

4 files changed, 90 insertions, 21 deletions

diff --git a/examples/list-scroll-form.js b/examples/list-scroll-form.js
new file mode 100644
index 0000000..a68cb78
--- /dev/null
+++ b/examples/list-scroll-form.js
@@ -0,0 +1,42 @@
+const ansi = require('../util/ansi')
+const Root = require('../ui/Root')
+const CommandLineInterfacer = require('../util/CommandLineInterfacer')
+const ListScrollForm = require('../ui/form/ListScrollForm')
+const Button = require('../ui/form/Button')
+
+const interfacer = new CommandLineInterfacer()
+
+interfacer.getScreenSize().then(size => {
+  const root = new Root(interfacer)
+  root.w = size.width
+  root.h = size.height
+
+  const list = new ListScrollForm()
+  root.addChild(list)
+  list.x = 2
+  list.y = 2
+  list.w = root.contentW - 4
+  list.h = root.contentH - 4
+
+  for (let item of ['Foo', 'Bar', 'Baz']) {
+    const button = new Button(item)
+    list.addInput(button)
+
+    button.on('pressed', () => {
+      process.stdout.write(ansi.clearScreen())
+      console.log(item)
+      process.exit(0)
+    })
+
+    button.fixLayout()
+  }
+
+  list.fixLayout()
+
+  root.select(list)
+
+  setInterval(() => root.render(), 100)
+}).catch(error => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/ui/form/Button.js b/ui/form/Button.js
index 86347a0..cf7262f 100644
--- a/ui/form/Button.js
+++ b/ui/form/Button.js
@@ -3,7 +3,7 @@ const telc = require('../../util/telchars')
 
 const FocusElement = require('./FocusElement')
 
-module.exports = class ButtonInput extends FocusElement {
+module.exports = class Button extends FocusElement {
   // A button.
 
   constructor(text) {
@@ -15,17 +15,9 @@ module.exports = class ButtonInput extends FocusElement {
     this.cursorY = null
   }
 
-  // Setting the text of the button should change the width of the button to
-  // fit the text.
-  //
-  // TODO: Make this happen in fixLayout
-  set text(newText) {
-    this._text = newText
-    this.w = newText.length
-  }
-
-  get text() {
-    return this._text
+  fixLayout() {
+    this.w = this.text.length
+    this.h = 1
   }
 
   drawTo(writable) {
diff --git a/ui/form/Form.js b/ui/form/Form.js
index 9274da4..cf94978 100644
--- a/ui/form/Form.js
+++ b/ui/form/Form.js
@@ -30,20 +30,33 @@ module.exports = class Form extends FocusElement {
       }
 
       if (telc.isTab(keyBuf)) {
-        this.curIndex = (this.curIndex + 1) % this.inputs.length
+        this.nextInput()
       } else {
-        this.curIndex = (this.curIndex - 1)
-        if (this.curIndex < 0) {
-          this.curIndex = (this.inputs.length - 1)
-        }
+        this.previousInput()
       }
 
-      const nextInput = this.inputs[this.curIndex]
-      this.root.select(nextInput)
-
       return false
     }
   }
+
+  updateSelectedElement() {
+    this.root.select(this.inputs[this.curIndex])
+  }
+
+  previousInput() {
+    this.curIndex = (this.curIndex - 1)
+    if (this.curIndex < 0) {
+      this.curIndex = (this.inputs.length - 1)
+    }
+
+    this.updateSelectedElement()
+  }
+
+  nextInput() {
+    this.curIndex = (this.curIndex + 1) % this.inputs.length
+
+    this.updateSelectedElement()
+  }
   
   focused() {
     this.root.select(this.inputs[this.curIndex])
diff --git a/ui/form/ListScrollForm.js b/ui/form/ListScrollForm.js
index b1484b5..b23f973 100644
--- a/ui/form/ListScrollForm.js
+++ b/ui/form/ListScrollForm.js
@@ -1,3 +1,5 @@
+const telc = require('../../util/telchars')
+
 const Form = require('./Form')
 
 module.exports = class ListScrollForm extends Form {
@@ -44,7 +46,27 @@ module.exports = class ListScrollForm extends Form {
   }
 
   keyPressed(keyBuf) {
-    super.keyPressed(keyBuf)
+    handleKeyPress: {
+      if (this.layoutType === 'horizontal') {
+        if (telc.isLeft(keyBuf)) {
+          this.previousInput()
+          break handleKeyPress
+        } else if (telc.isRight(keyBuf)) {
+          this.nextInput()
+          break handleKeyPress
+        }
+      } else if (this.layoutType === 'vertical') {
+        if (telc.isUp(keyBuf)) {
+          this.previousInput()
+          break handleKeyPress
+        } else if (telc.isDown(keyBuf)) {
+          this.nextInput()
+          break handleKeyPress
+        }
+      }
+
+      super.keyPressed(keyBuf)
+    }
 
     const sel = this.inputs[this.curIndex]