From 13f49822f637ca5582f593bcc0dae8a5003390f3 Mon Sep 17 00:00:00 2001 From: Florrie Date: Tue, 12 Jun 2018 23:35:24 -0300 Subject: Clean up how GrouplikeListingElement's UI works --- ui.js | 127 +++++++++++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 84 insertions(+), 43 deletions(-) diff --git a/ui.js b/ui.js index 85e0fcc..9d92229 100644 --- a/ui.js +++ b/ui.js @@ -65,7 +65,6 @@ class AppElement extends FocusElement { } } - this.paneLeft.addChild(this.grouplikeListingElement.pathElement) this.form.addInput(this.grouplikeListingElement.pathElement, false) this.grouplikeListingElement.pathElement.on('select', item => handleSelectFromPathElement(item)) @@ -83,7 +82,6 @@ class AppElement extends FocusElement { this.queueListingElement.on('select main listing', () => this.form.selectInput(this.grouplikeListingElement)) - this.paneRight.addChild(this.queueListingElement.pathElement) this.form.addInput(this.queueListingElement.pathElement, false) this.queueListingElement.pathElement.on('select', item => handleSelectFromPathElement(item)) @@ -119,16 +117,8 @@ class AppElement extends FocusElement { this.playbackPane.w = this.contentW this.playbackPane.h = this.contentH - this.playbackPane.y - const fixListingLayout = listing => { - listing.fillParent() - listing.h-- - listing.pathElement.y = listing.parent.contentH - 1 - listing.pathElement.w = listing.parent.contentW - } - - fixListingLayout(this.grouplikeListingElement) - fixListingLayout(this.queueListingElement) - + this.grouplikeListingElement.fillParent() + this.queueListingElement.fillParent() this.playbackInfoElement.fillParent() } @@ -425,16 +415,46 @@ class AppElement extends FocusElement { } } -class GrouplikeListingElement extends ListScrollForm { +class GrouplikeListingElement extends FocusElement { constructor(recordStore) { - super('vertical') + super() - this.captureTab = false + this.recordStore = recordStore this.grouplike = null this.recordStore = recordStore + this.form = new GrouplikeListingForm() + this.addChild(this.form) + + this.form.on('selected input', input => { + if (input && this.pathElement) { + this.pathElement.showItem(input.item) + } + }) + this.pathElement = new PathElement() + this.addChild(this.pathElement) + } + + fixLayout() { + this.form.w = this.contentW + this.form.h = this.contentH - 1 + + this.pathElement.y = this.contentH - 1 + this.pathElement.w = this.contentW + } + + focused() { + this.root.select(this.form) + } + + get selectable() { + return this.form.selectable + } + + get isSelected() { + return this.form.isSelected } keyPressed(keyBuf) { @@ -456,16 +476,17 @@ class GrouplikeListingElement extends ListScrollForm { } const wasSelected = this.isSelected + const form = this.form - while (this.inputs.length) { - this.removeInput(this.inputs[0]) + while (form.inputs.length) { + form.removeInput(form.inputs[0]) } const parent = this.grouplike[parentSymbol] if (parent) { const upButton = new Button('Up (to ' + (parent.name || 'unnamed group') + ')') upButton.on('pressed', () => this.loadParentGrouplike()) - this.addInput(upButton) + form.addInput(upButton) } if (this.grouplike.items.length) { @@ -476,27 +497,27 @@ class GrouplikeListingElement extends ListScrollForm { itemElement.on('select (space)', () => this.emit('select (space)', item)) itemElement.on('select (enter)', () => this.emit('select (enter)', item)) itemElement.on('queue', () => this.emit('queue', item)) - this.addInput(itemElement) + form.addInput(itemElement) } } else if (!this.grouplike.isTheQueue) { - this.addInput(new Button('(No items in this group)')) + form.addInput(new Button('(No items in this group)')) } if (wasSelected) { if (resetIndex) { - this.curIndex = this.firstItemIndex - this.scrollItems = 0 - this.updateSelectedElement() + form.curIndex = form.firstItemIndex + form.scrollItems = 0 + form.updateSelectedElement() } else { - this.root.select(this) + this.root.select(form) } } // Just to make the selected-track-info bar fill right away (if it wasn't // already filled by a previous this.curIndex set). - this.curIndex = this.curIndex + form.curIndex = form.curIndex - this.fixLayout() + this.fixAllLayout() } loadParentGrouplike() { @@ -509,34 +530,33 @@ class GrouplikeListingElement extends ListScrollForm { const oldGrouplike = this.grouplike this.loadGrouplike(parent) - const index = this.inputs.findIndex(inp => inp.item === oldGrouplike) + const form = this.form + const index = form.inputs.findIndex(inp => inp.item === oldGrouplike) if (typeof index === 'number') { - this.curIndex = index + form.curIndex = index } else { - this.curIndex = this.firstItemIndex + form.curIndex = form.firstItemIndex } - this.updateSelectedElement() - this.scrollSelectedElementIntoView() + form.updateSelectedElement() + form.scrollSelectedElementIntoView() } } selectAndShow(item) { - const index = this.inputs.findIndex(inp => inp.item === item) - if (index >= 0) { - this.curIndex = index - if (this.isSelected) { - this.updateSelectedElement() - } - this.scrollSelectedElementIntoView() - } + this.form.selectAndShow(item) + } +} + +class GrouplikeListingForm extends ListScrollForm { + constructor() { + super('vertical') + + this.captureTab = false } set curIndex(newIndex) { this._curIndex = newIndex - - if (this.pathElement && this.inputs[this.curIndex]) { - this.pathElement.showItem(this.inputs[this.curIndex].item) - } + this.emit('selected input', this.inputs[this.curIndex]) } get curIndex() { @@ -550,6 +570,17 @@ class GrouplikeListingElement extends ListScrollForm { get isSelected() { return this.root.selected && this.root.selected.directAncestors.includes(this) } + + selectAndShow(item) { + const index = this.inputs.findIndex(inp => inp.item === item) + if (index >= 0) { + this.curIndex = index + if (this.isSelected) { + this.updateSelectedElement() + } + this.scrollSelectedElementIntoView() + } + } } class GrouplikeItemElement extends Button { @@ -685,6 +716,14 @@ class PathItemElement extends FocusElement { } class QueueListingElement extends GrouplikeListingElement { + constructor(...args) { + super(...args) + + this.removeChild(this.form) + this.form = new QueueListingForm() + this.addChild(this.form) + } + keyPressed(keyBuf) { if (telc.isCaselessLetter(keyBuf, 's')) { this.emit('shuffle') @@ -694,7 +733,9 @@ class QueueListingElement extends GrouplikeListingElement { return super.keyPressed(keyBuf) } } +} +class QueueListingForm extends GrouplikeListingForm { updateSelectedElement() { if (this.inputs.length) { super.updateSelectedElement() -- cgit 1.3.0-6-gf8a5