refs #750 Switch focus between Home and Toot Detail using shortcut keys

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -14,6 +14,7 @@
         v-on:delete="deleteToot"
         @focusNext="focusNext"
         @focusPrev="focusPrev"
+        @focusRight="focusSidebar"
         @selectToot="focusToot(message)"
         >
       </toot>
@@ -33,6 +34,7 @@ import { mapState, mapGetters } from 'vuex'
 import Toot from '~/src/renderer/components/molecules/Toot'
 import scrollTop from '../../utils/scroll'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
+import { Event } from '~/src/renderer/components/event'
 
 export default {
   name: 'home',
@@ -40,7 +42,8 @@ export default {
   mixins: [reloadable],
   data () {
     return {
-      focusedId: null
+      focusedId: null,
+      backupFocusedId: null
     }
   },
   computed: {
@@ -85,12 +88,23 @@ export default {
   mounted () {
     this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
     document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
+    Event.$on('focus-timeline', () => {
+      // If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
+      const previousFocusedId = this.focusedId
+      this.focusedId = 0
+      this.$nextTick(function () {
+        this.focusedId = previousFocusedId
+      })
+    })
   },
   beforeUpdate () {
     if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
     }
   },
+  beforeDestroy () {
+    Event.$off('focus-timeline')
+  },
   destroyed () {
     this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
     this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
@@ -178,6 +192,9 @@ export default {
     focusToot (message) {
       this.focusedId = message.uri + message.id
     },
+    focusSidebar () {
+      Event.$emit('focus-sidebar')
+    },
     handleKey (event) {
       switch (event.srcKey) {
         case 'next':

src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue

@@ -1,39 +1,91 @@
 <template>
   <div class="toot-detail" ref="detail">
     <div class="toot-ancestors" v-for="(message, index) in ancestors" v-bind:key="'ancestors-' + index">
-      <toot :message="message" v-on:update="updateAncestorsToot" v-on:delete="deleteAncestorsToot"></toot>
+      <toot
+        :message="message"
+        :focused="message.uri + message.id === focusedId"
+        :overlaid="modalOpened"
+        v-on:update="updateAncestorsToot"
+        v-on:delete="deleteAncestorsToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @focusLeft="focusTimeline"
+        @selectToot="focusToot(message)"
+        >
+      </toot>
     </div>
     <div class="original-toot" ref="original">
-      <toot :message="message" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+      <toot
+        :message="message"
+        :focused="message.uri + message.id === focusedId"
+        :overlaid="modalOpened"
+        v-on:update="updateToot"
+        v-on:delete="deleteToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @focusLeft="focusTimeline"
+        @selectToot="focusToot(message)"
+        >
+      </toot>
     </div>
     <div class="toot-descendants" v-for="(message, index) in descendants" v-bind:key="'descendants' + index">
-      <toot :message="message" v-on:update="updateDescendantsToot" v-on:delete="deleteDescendantsToot"></toot>
+      <toot
+        :message="message"
+        :focused="message.uri + message.id === focusedId"
+        :overlaid="modalOpened"
+        v-on:update="updateDescendantsToot"
+        v-on:delete="deleteDescendantsToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @focusLeft="focusTimeline"
+        @selectToot="focusToot(message)"
+        >
+      </toot>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Toot from '~/src/renderer/components/molecules/Toot'
+import { Event } from '~/src/renderer/components/event'
 
 export default {
   name: 'toot-detail',
   components: { Toot },
+  data () {
+    return {
+      focusedId: null
+    }
+  },
   computed: {
-    ...mapState({
+    ...mapState('TimelineSpace/Contents/SideBar/TootDetail', {
-      message: state => state.TimelineSpace.Contents.SideBar.TootDetail.message,
+      message: state => state.message,
-      ancestors: state => state.TimelineSpace.Contents.SideBar.TootDetail.ancestors,
+      ancestors: state => state.ancestors,
-      descendants: state => state.TimelineSpace.Contents.SideBar.TootDetail.descendants
+      descendants: state => state.descendants,
-    })
+      timeline: state => state.ancestors.concat([state.message]).concat(state.descendants)
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ])
   },
   created () {
     this.load()
+    Event.$on('focus-sidebar', () => {
+      this.focusedId = 0
+      this.$nextTick(function () {
+        this.focusedId = this.timeline[0].uri + this.timeline[0].id
+      })
+    })
   },
   watch: {
     message: function () {
       this.load()
     }
   },
+  beforeDestroy () {
+    Event.$off('focus-sidebar')
+  },
   methods: {
     load () {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/fetchToot', this.message)
@@ -65,6 +117,27 @@ export default {
     },
     deleteDescendantsToot (message) {
       this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/deleteDescendantsToot', message)
+    },
+    focusNext () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
+      if (currentIndex === -1) {
+        this.focusedId = this.timeline[0].uri + this.timeline[0].id
+      } else if (currentIndex < this.timeline.length - 1) {
+        this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
+      }
+    },
+    focusPrev () {
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
+      if (currentIndex > 0) {
+        this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
+      }
+    },
+    focusToot (message) {
+      this.focusedId = message.uri + message.id
+    },
+    focusTimeline () {
+      this.focusedId = 0
+      Event.$emit('focus-timeline')
     }
   }
 }

src/renderer/components/event.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export const Event = new Vue()

src/renderer/components/molecules/Toot.vue

@@ -2,7 +2,7 @@
 <div
   class="status"
   tabIndex="0"
-  v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p'], image: ['i'], cw: ['x']} : {}"
+  v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], right: ['l'], left: ['h'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p'], image: ['i'], cw: ['x']} : {}"
   @shortkey="handleTootControl"
   ref="status"
   @click="$emit('selectToot')"
@@ -452,6 +452,12 @@ export default {
         case 'prev':
           this.$emit('focusPrev')
           break
+        case 'right':
+          this.$emit('focusRight')
+          break
+        case 'left':
+          this.$emit('focusLeft')
+          break
         case 'reply':
           this.openReply(this.message)
           break