« get me outta code hell

Stub tabber - mtui - Music Text User Interface - user-friendly command line music player
about summary refs log tree commit diff
diff options
context:
space:
mode:
authorFlorrie <towerofnix@gmail.com>2018-07-04 23:17:25 -0300
committerFlorrie <towerofnix@gmail.com>2018-07-04 23:17:25 -0300
commit17a20d34a2a4a45c2e076cedf684b7e741ae9a88 (patch)
tree6aeec825c133909fdd3255a9496b47b115731d50
parent5cbc7ac9030c16858e6426ae980ec8728372054e (diff)
Stub tabber
-rw-r--r--todo.txt4
-rw-r--r--ui.js66
2 files changed, 67 insertions, 3 deletions
diff --git a/todo.txt b/todo.txt
index 2e3be25..658d9f0 100644
--- a/todo.txt
+++ b/todo.txt
@@ -59,3 +59,7 @@ TODO: "Open in new tab" in the Open prompt.
 
 TODO: Inspect the inevitable memory issues that are absolutely 100% sure to
       become a problem with opening playlists on the fly.
+
+TODO: Canceling the "enter a playlist source" dialog also stops the current song.
+
+TODO: Move TabberElement to tui-lib, at some point.
diff --git a/ui.js b/ui.js
index 13774cd..01e5b1a 100644
--- a/ui.js
+++ b/ui.js
@@ -43,9 +43,12 @@ class AppElement extends FocusElement {
     this.paneRight = new Pane()
     this.form.addChild(this.paneRight)
 
+    this.tabber = new Tabber()
+    this.paneLeft.addChild(this.tabber)
+    this.form.addInput(this.tabber, false)
+
     this.grouplikeListingElement = new GrouplikeListingElement(this.recordStore)
-    this.paneLeft.addChild(this.grouplikeListingElement)
-    this.form.addInput(this.grouplikeListingElement, false)
+    this.tabber.addTab(this.grouplikeListingElement)
 
     const handleSelectFromMain = item => {
       if (isGroup(item)) {
@@ -195,7 +198,8 @@ class AppElement extends FocusElement {
     this.playbackPane.w = this.contentW
     this.playbackPane.h = this.contentH - this.playbackPane.y
 
-    this.grouplikeListingElement.fillParent()
+    this.tabber.fillParent()
+    this.tabber.fixLayout()
     this.queueListingElement.fillParent()
     this.playbackInfoElement.fillParent()
   }
@@ -1006,4 +1010,60 @@ class AlertDialog extends Dialog {
   }
 }
 
+class Tabber extends FocusElement {
+  constructor() {
+    super()
+
+    this.tabberElements = []
+    this.currentElementIndex = 0
+  }
+
+  fixLayout() {
+    if (this.currentElement) {
+      this.currentElement.fillParent()
+      this.currentElement.fixLayout()
+    }
+  }
+
+  addTab(element) {
+    this.tabberElements.push(element)
+    this.addChild(element)
+  }
+
+  nextTab() {
+    this.currentElementIndex++
+    this.updateVisibleElement()
+  }
+
+  previousTab() {
+    this.currentElementIndex--
+    this.updateVisibleElement()
+  }
+
+  updateVisibleElement() {
+    const len = this.tabberElements.length
+    this.currentElementIndex = Math.min(len, Math.max(0, this.currentElementIndex))
+
+    this.tabberElements.forEach((el, i) => {
+      el.visible = (i === this.currentElementIndex)
+    })
+
+    this.fixLayout()
+  }
+
+  selected() {
+    if (this.currentElement) {
+      this.root.select(this.currentElement)
+    }
+  }
+
+  get selectable() {
+    return this.currentElement && this.currentElement.selectable
+  }
+
+  get currentElement() {
+    return this.tabberElements[this.currentElementIndex] || null
+  }
+}
+
 module.exports.AppElement = AppElement