From 5ec89f40414935ef6ff9d020a47afa99afb1a2af Mon Sep 17 00:00:00 2001 From: Nazar Kanaev Date: Wed, 3 Mar 2021 12:29:32 +0000 Subject: [PATCH] keybindings tweaks & fixes --- src/assets/javascripts/keybindings.js | 100 +++++++++++++++++--------- 1 file changed, 66 insertions(+), 34 deletions(-) diff --git a/src/assets/javascripts/keybindings.js b/src/assets/javascripts/keybindings.js index 7c84641..914b38d 100644 --- a/src/assets/javascripts/keybindings.js +++ b/src/assets/javascripts/keybindings.js @@ -1,46 +1,78 @@ +function scrollto(target, scroll) { + var padding = 10 + var targetRect = target.getBoundingClientRect() + var scrollRect = scroll.getBoundingClientRect() + + // target + var relativeOffset = targetRect.y - scrollRect.y + var absoluteOffset = relativeOffset + scroll.scrollTop + + if (padding <= relativeOffset && relativeOffset + targetRect.height <= scrollRect.height - padding) return + + var newPos = scroll.scrollTop + if (relativeOffset < padding) { + newPos = absoluteOffset - padding + } else { + newPos = absoluteOffset - scrollRect.height + targetRect.height + padding + } + scroll.scrollTop = Math.round(newPos) +} + const helperFunctions = { // navigation helper, navigate relative to selected item navigateToItem: function(relativePosition) { - if(vm.itemSelected == null){ - if(vm.items.length !== 0) { - // if no item is selected, select first - vm.itemSelected = vm.items[0].id - } + if (vm.itemSelected == null) { + // if no item is selected, select first + if (vm.items.length !== 0) vm.itemSelected = vm.items[0].id return } - const itemPosition = vm.items.findIndex(x=>x.id==vm.itemSelected) - if(itemPosition == -1){ - // Item not found error - return - } - const newPosition = itemPosition+relativePosition - if(newPosition < 0 || newPosition >= vm.items.length){ + + var itemPosition = vm.items.findIndex(function(x) { return x.id === vm.itemSelected }) + if (itemPosition === -1) { + if (vm.items.length !== 0) vm.itemSelected = vm.items[0].id return } + + var newPosition = itemPosition + relativePosition + if (newPosition < 0 || newPosition >= vm.items.length) return + vm.itemSelected = vm.items[newPosition].id + + vm.$nextTick(function() { + var scroll = document.querySelector('#item-list-scroll') + + var handle = scroll.querySelector('input[type=radio]:checked') + var target = handle && handle.parentElement + + if (target && scroll) scrollto(target, scroll) + }) }, // navigation helper, navigate relative to selected feed navigateToFeed: function(relativePosition) { - // create a list with feed and folders guids, ignore feeds in collapsed folders - // Example result with folder 2 collapsed: - // ['','folder:1','feed:1','feed:2','folder:2', 'folder:3','feed:3'] - // The empty string is the "All Feeds" option - const navigationList = [''].concat(vm.foldersWithFeeds.map( - folder => - folder.is_expanded - ? ['folder:'+folder.id].concat(folder.feeds.map(feed=>'feed:'+feed.id)) - : 'folder:'+folder.id - ).flat()) - const currentFeedPosition = navigationList.indexOf(vm.feedSelected) - if(currentFeedPosition== -1){ - // feed not found error + var navigationList = Array.from(document.querySelectorAll('#col-feed-list input[name=feed]')) + .filter(function(r) { return r.offsetParent !== null && r.value !== 'folder:null' }) + .map(function(r) { return r.value }) + + var currentFeedPosition = navigationList.indexOf(vm.feedSelected) + + if (currentFeedPosition == -1) { + vm.feedSelected = '' return } - const newPosition = currentFeedPosition+relativePosition - if(newPosition < 0 || newPosition >= navigationList.length){ - return - } - vm.feedSelected = navigationList[newPosition]; + + var newPosition = currentFeedPosition+relativePosition + if (newPosition < 0 || newPosition >= navigationList.length) return + + vm.feedSelected = navigationList[newPosition] + + vm.$nextTick(function() { + var scroll = document.querySelector('#feed-list-scroll') + + var handle = scroll.querySelector('input[type=radio]:checked') + var target = handle && handle.parentElement + + if (target && scroll) scrollto(target, scroll) + }) } } const shortcutFunctions = { @@ -91,14 +123,14 @@ const keybindings = { "r": shortcutFunctions.toggleItemRead, "R": shortcutFunctions.markAllRead, "s": shortcutFunctions.toggleItemStarred, - "?": shortcutFunctions.focusSearch, + "/": shortcutFunctions.focusSearch, "j": shortcutFunctions.nextItem, "k": shortcutFunctions.previousItem, "l": shortcutFunctions.nextFeed, "h": shortcutFunctions.previousFeed, - "A": shortcutFunctions.showAll, - "U": shortcutFunctions.showUnread, - "S": shortcutFunctions.showStarred, + "1": shortcutFunctions.showUnread, + "2": shortcutFunctions.showStarred, + "3": shortcutFunctions.showAll, } function isTextBox(element) {