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

3 files changed, 48 insertions, 21 deletions

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]