From 06c9ab090b6307b21226e6d8e7b34fc69380594b Mon Sep 17 00:00:00 2001 From: Florrie Date: Thu, 13 Sep 2018 21:52:47 -0300 Subject: 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. --- todo.txt | 5 +++++ tui-lib | 2 +- ui.js | 33 ++++++++++++++++++--------------- 3 files changed, 24 insertions(+), 16 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 index e2f8306..caf3398 160000 --- a/tui-lib +++ b/tui-lib @@ -1 +1 @@ -Subproject commit e2f830680c1a6e9f28ad305b105caf5cdf092e63 +Subproject commit caf3398a3029bc852545ddd5f6584fb9cf3a4929 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() { -- cgit 1.3.0-6-gf8a5