rewrite feed navigation

Author: nkanaev

src/assets/index.html

@@ -143,10 +143,8 @@
                 </label>
                 <div v-for="folder in foldersWithFeeds">
                     <label class="selectgroup mt-1"
-                           :class="{'d-none': filterSelected
-                                              && !(current.folder.id == folder.id || current.feed.folder_id == folder.id)
-                                              && !filteredFolderStats[folder.id]
-                                              && (!itemSelectedDetails || (feedsById[itemSelectedDetails.feed_id] || {}).folder_id != folder.id)}">
+                           :class="{'d-none': mustHideFolder(folder)}"
+                           v-if="folder.id">
                         <input type="radio" name="feed" :value="'folder:'+folder.id" v-model="feedSelected" v-if="folder.id">
                         <div class="selectgroup-label d-flex align-items-center w-100" v-if="folder.id">
                             <span class="icon mr-2"
@@ -160,10 +158,7 @@
                     </label>
                     <div v-show="!folder.id || folder.is_expanded" class="mt-1" :class="{'pl-3': folder.id}">
                         <label class="selectgroup"
-                              :class="{'d-none': filterSelected
-                                                 && !(current.feed.id == feed.id)
-                                                 && !filteredFeedStats[feed.id]
-                                                 && (!itemSelectedDetails || itemSelectedDetails.feed_id != feed.id)}"
+                              :class="{'d-none': mustHideFeed(feed)}"
                                v-for="feed in folder.feeds">
                             <input type="radio" name="feed" :value="'feed:'+feed.id" v-model="feedSelected">
                             <div class="selectgroup-label d-flex align-items-center w-100">

src/assets/javascripts/app.js

@@ -768,9 +768,16 @@ var vm = new Vue({
     // navigation helper, navigate relative to selected feed
     navigateToFeed: function(relativePosition) {
       let vm = this
-      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 })
+      const navigationList = this.foldersWithFeeds
+        .filter(folder => !folder.id || !vm.mustHideFolder(folder))
+        .map((folder) => {
+          if (this.mustHideFolder(folder)) return []
+          const folds = folder.id ? [`folder:${folder.id}`] : []
+          const feeds = (folder.is_expanded || !folder.id) ? folder.feeds.filter(f => !vm.mustHideFeed(f)).map(f => `feed:${f.id}`) : []
+          return folds.concat(feeds)
+        })
+        .flat()
+      navigationList.unshift('')
 
       var currentFeedPosition = navigationList.indexOf(vm.feedSelected)
 
@@ -799,6 +806,18 @@ var vm = new Vue({
       if (curIdx >= (this.refreshRateOptions.length - 1) && offset > 0) return
       this.refreshRate = this.refreshRateOptions[curIdx + offset].value
     },
+    mustHideFolder: function (folder) {
+      return this.filterSelected
+        && !(this.current.folder.id == folder.id || this.current.feed.folder_id == folder.id)
+        && !this.filteredFolderStats[folder.id]
+        && (!this.itemSelectedDetails || (this.feedsById[itemSelectedDetails.feed_id] || {}).folder_id != folder.id)
+    },
+    mustHideFeed: function (feed) {
+      return this.filterSelected
+        && !(this.current.feed.id == feed.id)
+        && !this.filteredFeedStats[feed.id]
+        && (!this.itemSelectedDetails || this.itemSelectedDetails.feed_id != feed.id)
+    },
   }
 })