Clean up how GrouplikeListingElement's UI works

1 files 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()