From db829cde7af82ac0fccf929e957bcd0bd87072e6 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Tue, 21 Aug 2018 23:28:19 +0900
Subject: [PATCH] refs #543 Set shortcut key to move toot in public

---
 .../TimelineSpace/Contents/Home.vue           |  2 +-
 .../TimelineSpace/Contents/Public.vue         | 46 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index 5f88e173..035ffa25 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -4,7 +4,7 @@
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <transition-group name="timeline" tag="div">
-    <div class="home-timeline" v-for="(message, index) in timeline" :key="message.id">
+    <div class="home-timeline" v-for="(message, index) in timeline" :key="message.uri">
       <toot
         :message="message"
         :filter="filter"
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 8a831108..5a19dc34 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -4,8 +4,18 @@
   <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
   <transition-group name="timeline" tag="div">
-    <div class="public-timeline" v-for="message in timeline" :key="message.id">
-      <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    <div class="public-timeline" v-for="(message, index) in timeline" :key="message.uri">
+      <toot
+        :message="message"
+        :filter="filter"
+        :focused="index === focusedIndex"
+        v-on:update="updateToot"
+        v-on:delete="deleteToot"
+        @focusNext="focusNext"
+        @focusPrev="focusPrev"
+        @selectToot="focusToot(index)"
+        >
+      </toot>
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
@@ -25,6 +35,11 @@ import scrollTop from '../../utils/scroll'
 export default {
   name: 'public',
   components: { Toot },
+  data () {
+    return {
+      focusedIndex: null
+    }
+  },
   computed: {
     ...mapState({
       backgroundColor: state => state.App.theme.background_color,
@@ -65,6 +80,14 @@ export default {
             this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
           })
       }
+    },
+    focusedIndex: function (newState, oldState) {
+      if (newState >= 0 && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
+      } else if (newState === null && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
+      }
     }
   },
   methods: {
@@ -107,6 +130,7 @@ export default {
       } else if ((event.target.scrollTop <= 10) && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
         this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
+        this.focusedIndex = null
       }
     },
     async reload () {
@@ -151,6 +175,24 @@ export default {
         document.getElementById('scrollable'),
         0
       )
+      this.focusedIndex = null
+    },
+    focusNext () {
+      if (this.focusedIndex === null) {
+        this.focusedIndex = 0
+      } else if (this.focusedIndex < this.timeline.length) {
+        this.focusedIndex++
+      }
+    },
+    focusPrev () {
+      if (this.focusedIndex === 0) {
+        this.focusedIndex = null
+      } else if (this.focusedIndex > 0) {
+        this.focusedIndex--
+      }
+    },
+    focusToot (index) {
+      this.focusedIndex = index
     }
   }
 }