feat: click on curent column nav button to go to the top of the timeline

This commit is contained in:
Maxime Le Conte des Floris 2018-04-09 23:01:30 +02:00 committed by Nolan Lawson
parent 44dafb591e
commit 660362ed46
2 changed files with 45 additions and 6 deletions

30
routes/_actions/scroll.js Normal file
View File

@ -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)

View File

@ -1,25 +1,25 @@
<nav class="main-nav"> <nav class="main-nav">
<ul class="main-nav-ul"> <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" /> <NavItem :page name="home" href="/" svg="#pinafore-logo" label="Home" />
</li> </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" /> <NavItem :page name="notifications" href="/notifications" svg="#fa-bell" label="Notifications" />
</li> </li>
{{#if $pinnedPage === '/local'}} {{#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" /> <NavItem :page name="local" href="/local" svg="#fa-users" label="Local" />
</li> </li>
{{elseif $pinnedPage === '/federated'}} {{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" /> <NavItem :page name="federated" href="/federated" svg="#fa-globe" label="Federated" />
</li> </li>
{{elseif $pinnedPage === '/favorites'}} {{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" /> <NavItem :page name="favorites" href="/favorites" svg="#fa-star" label="Favorites" />
</li> </li>
{{elseif $pinnedPage.startsWith('/lists/')}} {{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}}" /> <NavItem :page name="lists" href="{{$pinnedPage}}" svg="#fa-bars" label="{{$pinnedListTitle}}" />
</li> </li>
{{/if}} {{/if}}
@ -68,11 +68,20 @@
<script> <script>
import NavItem from './NavItem' import NavItem from './NavItem'
import { store } from '../_store/store' import { store } from '../_store/store'
import { scrollTop } from '../_actions/scroll'
export default { export default {
store: () => store, store: () => store,
components: { components: {
NavItem 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> </script>