From 660362ed46d0f0992ea7e096bec4de16a3ae53e2 Mon Sep 17 00:00:00 2001
From: Maxime Le Conte des Floris <maxime.lcdf@gmail.com>
Date: Mon, 9 Apr 2018 23:01:30 +0200
Subject: [PATCH] feat: click on curent column nav button to go to the top of
 the timeline

---
 routes/_actions/scroll.js   | 30 ++++++++++++++++++++++++++++++
 routes/_components/Nav.html | 21 +++++++++++++++------
 2 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 routes/_actions/scroll.js

diff --git a/routes/_actions/scroll.js b/routes/_actions/scroll.js
new file mode 100644
index 0000000..4ab36a7
--- /dev/null
+++ b/routes/_actions/scroll.js
@@ -0,0 +1,30 @@
+const easingOutQuint = (x, t, b, c, d) =>
+  c * ((t = t / d - 1) * t * t * t * t + 1) + b
+
+const scroll = (node, key, target) => {
+  const startTime = Date.now()
+  const offset = node[key]
+  const gap = target - offset
+  const duration = 1000
+  let interrupt = false
+
+  const step = () => {
+    const elapsed = Date.now() - startTime
+    const percentage = elapsed / duration
+
+    if (percentage > 1 || interrupt) {
+      return
+    }
+
+    node[key] = easingOutQuint(0, elapsed, offset, gap, duration)
+    requestAnimationFrame(step)
+  }
+
+  step()
+
+  return () => {
+    interrupt = true
+  }
+}
+
+export const scrollTop = node => scroll(node, 'scrollTop', 0)
diff --git a/routes/_components/Nav.html b/routes/_components/Nav.html
index ad574b2..0afadeb 100644
--- a/routes/_components/Nav.html
+++ b/routes/_components/Nav.html
@@ -1,25 +1,25 @@
 <nav class="main-nav">
 	<ul class="main-nav-ul">
-		<li class="main-nav-li">
+		<li class="main-nav-li" on:click="onClick(event, '/')">
       <NavItem :page name="home" href="/" svg="#pinafore-logo" label="Home" />
 		</li>
-		<li class="main-nav-li">
+		<li class="main-nav-li" on:click="onClick(event, '/notifications')">
       <NavItem :page name="notifications" href="/notifications" svg="#fa-bell" label="Notifications" />
 		</li>
     {{#if $pinnedPage === '/local'}}
-      <li class="main-nav-li">
+      <li class="main-nav-li" on:click="onClick(event, '/local')">
         <NavItem :page name="local" href="/local" svg="#fa-users" label="Local" />
       </li>
     {{elseif $pinnedPage === '/federated'}}
-      <li class="main-nav-li">
+      <li class="main-nav-li" on:click="onClick(event, '/federated')">
         <NavItem :page name="federated" href="/federated" svg="#fa-globe" label="Federated" />
       </li>
     {{elseif $pinnedPage === '/favorites'}}
-      <li class="main-nav-li">
+      <li class="main-nav-li" on:click="onClick(event, '/favorites')">
         <NavItem :page name="favorites" href="/favorites" svg="#fa-star" label="Favorites" />
       </li>
     {{elseif $pinnedPage.startsWith('/lists/')}}
-      <li class="main-nav-li">
+      <li class="main-nav-li" on:click="onClick(event, '/lists')">
         <NavItem :page name="lists" href="{{$pinnedPage}}" svg="#fa-bars" label="{{$pinnedListTitle}}" />
       </li>
     {{/if}}
@@ -68,11 +68,20 @@
 <script>
   import NavItem from './NavItem'
   import { store } from '../_store/store'
+  import { scrollTop } from '../_actions/scroll'
 
   export default {
     store: () => store,
     components: {
       NavItem
+    },
+    methods: {
+      onClick(event, path) {
+        if (window.location.pathname === path || (window.location.pathname.startsWith(path) && window.location.pathname === '/')) {
+          scrollTop(document.querySelector('.container'))
+          event.preventDefault()
+        }
+      }
     }
   }
 </script>
\ No newline at end of file