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. --- ui.js | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) (limited to 'ui.js') 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