Show preview of "Jump to" result

Also let the user cancel (esc) the "jump to" to restore the selected
index to wherever it was before.

A neat thing you can do with this: Your cursor will automatically move
to whatever the matched result of your query is while typing. If nothing
is found, your cursor will stay where it was the last time it found
something: so, if you press enter to confirm, AFTER you've queried
something but WHILE your query doesn't currently mathc anything, it'll
keep the cursor at whatever was most recently matched. So basically,
Ctrl-F'ing "excir" will match "Excursions", since "exc" will have
matched it already.

3 files changed, 23 insertions, 15 deletions

diff --git a/todo.txt b/todo.txt
index 869b051..451c16f 100644
--- a/todo.txt
+++ b/todo.txt
@@ -119,6 +119,11 @@ TODO: After the end of a shuffled queue, the next song from the group of the
       definitely wrong.
 
 TODO: Show a preview of where "Jump to" will go while typing.
+      (Done!)
+
+TODO: Cancelling "Jump to" should return the selected index to whatever it was
+      before.
+      (Done!)
 
 TODO: Entering more than one key "at once" into a text input element will only
       move the cursor right by one character, not by the length of the inputted
diff --git a/tui-lib b/tui-lib
-Subproject e2f830680c1a6e9f28ad305b105caf5cdf092e6
+Subproject caf3398a3029bc852545ddd5f6584fb9cf3a492
diff --git a/ui.js b/ui.js
index 73a9732..2c74f8e 100644
--- a/ui.js
+++ b/ui.js
@@ -711,12 +711,11 @@ class GrouplikeListingElement extends Form {
     this.jumpElement = new ListingJumpElement()
     this.addInput(this.jumpElement)
     this.jumpElement.visible = false
+    this.oldFocusedIndex = null // To restore to, if a jump is canceled.
 
-    this.jumpElement.on('cancel', () => {
-      this.hideJumpElement()
-    })
-
-    this.jumpElement.on('value', value => this.handleJumpValue(value))
+    this.jumpElement.on('cancel', () => this.hideJumpElement(true))
+    this.jumpElement.on('change', value => this.handleJumpValue(value, false))
+    this.jumpElement.on('confirm', value => this.handleJumpValue(value, true))
 
     this.pathElement = new PathElement()
     this.addInput(this.pathElement)
@@ -770,6 +769,7 @@ class GrouplikeListingElement extends Form {
   loadGrouplike(grouplike, resetIndex = true) {
     this.grouplike = grouplike
     this.buildItems(resetIndex)
+    if (this.root.select) this.hideJumpElement()
   }
 
   buildItems(resetIndex = false) {
@@ -855,7 +855,7 @@ class GrouplikeListingElement extends Form {
     this.form.selectAndShow(item)
   }
 
-  handleJumpValue(value) {
+  handleJumpValue(value, isConfirm) {
     // Don't perform the search if the user didn't enter anything.
     if (value.length) {
       const lower = value.toLowerCase()
@@ -874,16 +874,23 @@ class GrouplikeListingElement extends Form {
       }
     }
 
-    this.hideJumpElement()
+    if (isConfirm) {
+      this.hideJumpElement()
+    }
   }
 
   showJumpElement() {
+    this.oldFocusedIndex = this.form.curIndex
     this.jumpElement.visible = true
     this.root.select(this.jumpElement)
     this.fixLayout()
   }
 
-  hideJumpElement() {
+  hideJumpElement(isCancel) {
+    if (isCancel) {
+      this.form.curIndex = this.oldFocusedIndex
+      this.form.scrollSelectedElementIntoView()
+    }
     this.jumpElement.visible = false
     this.root.select(this)
     this.fixLayout()
@@ -1068,13 +1075,9 @@ class ListingJumpElement extends Form {
     this.input = new TextInput()
     this.addInput(this.input)
 
-    this.input.on('value', value => {
-      this.emit('value', value)
-    })
-
-    this.input.on('cancel', () => {
-      this.emit('cancel')
-    })
+    this.input.on('confirm', value => this.emit('confirm', value))
+    this.input.on('change', value => this.emit('change', value))
+    this.input.on('cancel', () => this.emit('cancel'))
   }
 
   selected() {