From 55782a5331062bae01019c822849abd73ccdf0ea Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 10 Apr 2018 22:51:42 -0700
Subject: [PATCH] detect "selected" when doing smooth scroll to top

---
 routes/_components/Nav.html                   | 21 ++++++-------------
 routes/_components/NavItem.html               | 21 +++++++++++++++----
 .../scroll.js => _utils/smoothScrollToTop.js} |  3 ++-
 3 files changed, 25 insertions(+), 20 deletions(-)
 rename routes/{_actions/scroll.js => _utils/smoothScrollToTop.js} (75%)

diff --git a/routes/_components/Nav.html b/routes/_components/Nav.html
index 0afadeb..ad574b2 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" on:click="onClick(event, '/')">
+		<li class="main-nav-li">
       <NavItem :page name="home" href="/" svg="#pinafore-logo" label="Home" />
 		</li>
-		<li class="main-nav-li" on:click="onClick(event, '/notifications')">
+		<li class="main-nav-li">
       <NavItem :page name="notifications" href="/notifications" svg="#fa-bell" label="Notifications" />
 		</li>
     {{#if $pinnedPage === '/local'}}
-      <li class="main-nav-li" on:click="onClick(event, '/local')">
+      <li class="main-nav-li">
         <NavItem :page name="local" href="/local" svg="#fa-users" label="Local" />
       </li>
     {{elseif $pinnedPage === '/federated'}}
-      <li class="main-nav-li" on:click="onClick(event, '/federated')">
+      <li class="main-nav-li">
         <NavItem :page name="federated" href="/federated" svg="#fa-globe" label="Federated" />
       </li>
     {{elseif $pinnedPage === '/favorites'}}
-      <li class="main-nav-li" on:click="onClick(event, '/favorites')">
+      <li class="main-nav-li">
         <NavItem :page name="favorites" href="/favorites" svg="#fa-star" label="Favorites" />
       </li>
     {{elseif $pinnedPage.startsWith('/lists/')}}
-      <li class="main-nav-li" on:click="onClick(event, '/lists')">
+      <li class="main-nav-li">
         <NavItem :page name="lists" href="{{$pinnedPage}}" svg="#fa-bars" label="{{$pinnedListTitle}}" />
       </li>
     {{/if}}
@@ -68,20 +68,11 @@
 <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
diff --git a/routes/_components/NavItem.html b/routes/_components/NavItem.html
index 9db4def..9e0848d 100644
--- a/routes/_components/NavItem.html
+++ b/routes/_components/NavItem.html
@@ -1,6 +1,7 @@
-<a class='main-nav-link {{page === name ? "selected" : ""}}'
+<a class='main-nav-link {{selected ? "selected" : ""}}'
    aria-label='{{ariaLabel}}'
-   aria-current="{{page === name}}"
+   aria-current="{{selected}}"
+   on:click="onClick(event)"
    :href >
   {{#if name === 'notifications'}}
     <div class="nav-link-svg-wrapper">
@@ -116,13 +117,15 @@
 </style>
 <script>
   import { store } from '../_store/store'
+  import { smoothScrollToTop } from '../_utils/smoothScrollToTop'
 
   export default {
     store: () => store,
     computed: {
-      ariaLabel: (page, name, label, $numberOfNotifications) => {
+      selected: (page, name) => page === name,
+      ariaLabel: (selected, name, label, $numberOfNotifications) => {
         let res = label
-        if (page === name) {
+        if (selected) {
           res += ' (current page)'
         }
         if (name === 'notifications' && $numberOfNotifications) {
@@ -130,6 +133,16 @@
         }
         return res
       }
+    },
+    methods: {
+      onClick(e) {
+        if (!this.get('selected')) {
+          return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+        smoothScrollToTop(document.getElementsByClassName('container')[0])
+      }
     }
   }
 
diff --git a/routes/_actions/scroll.js b/routes/_utils/smoothScrollToTop.js
similarity index 75%
rename from routes/_actions/scroll.js
rename to routes/_utils/smoothScrollToTop.js
index 4ab36a7..76e596e 100644
--- a/routes/_actions/scroll.js
+++ b/routes/_utils/smoothScrollToTop.js
@@ -1,3 +1,4 @@
+// via https://github.com/tootsuite/mastodon/blob/f59ed3a4fafab776b4eeb92f805dfe1fecc17ee3/app/javascript/mastodon/scroll.js
 const easingOutQuint = (x, t, b, c, d) =>
   c * ((t = t / d - 1) * t * t * t * t + 1) + b
 
@@ -27,4 +28,4 @@ const scroll = (node, key, target) => {
   }
 }
 
-export const scrollTop = node => scroll(node, 'scrollTop', 0)
+export const smoothScrollToTop = node => scroll(node, 'scrollTop', 0)