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.

1 files changed, 18 insertions, 15 deletions

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() {