From 930d61b9f067346f467d4d84015088f57c54da56 Mon Sep 17 00:00:00 2001 From: liam4 Date: Mon, 3 Jul 2017 21:00:02 -0300 Subject: 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 --- ui/form/Button.js | 16 ++++------------ ui/form/Form.js | 29 +++++++++++++++++++++-------- ui/form/ListScrollForm.js | 24 +++++++++++++++++++++++- 3 files changed, 48 insertions(+), 21 deletions(-) (limited to 'ui/form') 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] -- cgit 1.3.0-6-gf8a5