detect "selected" when doing smooth scroll to top

This commit is contained in:
Nolan Lawson 2018-04-10 22:51:42 -07:00
parent 660362ed46
commit 55782a5331
3 changed files with 25 additions and 20 deletions

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" on:click="onClick(event, '/')"> <li class="main-nav-li">
<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" on:click="onClick(event, '/notifications')"> <li class="main-nav-li">
<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" on:click="onClick(event, '/local')"> <li class="main-nav-li">
<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" on:click="onClick(event, '/federated')"> <li class="main-nav-li">
<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" on:click="onClick(event, '/favorites')"> <li class="main-nav-li">
<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" on:click="onClick(event, '/lists')"> <li class="main-nav-li">
<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,20 +68,11 @@
<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>

View File

@ -1,6 +1,7 @@
<a class='main-nav-link {{page === name ? "selected" : ""}}' <a class='main-nav-link {{selected ? "selected" : ""}}'
aria-label='{{ariaLabel}}' aria-label='{{ariaLabel}}'
aria-current="{{page === name}}" aria-current="{{selected}}"
on:click="onClick(event)"
:href > :href >
{{#if name === 'notifications'}} {{#if name === 'notifications'}}
<div class="nav-link-svg-wrapper"> <div class="nav-link-svg-wrapper">
@ -116,13 +117,15 @@
</style> </style>
<script> <script>
import { store } from '../_store/store' import { store } from '../_store/store'
import { smoothScrollToTop } from '../_utils/smoothScrollToTop'
export default { export default {
store: () => store, store: () => store,
computed: { computed: {
ariaLabel: (page, name, label, $numberOfNotifications) => { selected: (page, name) => page === name,
ariaLabel: (selected, name, label, $numberOfNotifications) => {
let res = label let res = label
if (page === name) { if (selected) {
res += ' (current page)' res += ' (current page)'
} }
if (name === 'notifications' && $numberOfNotifications) { if (name === 'notifications' && $numberOfNotifications) {
@ -130,6 +133,16 @@
} }
return res return res
} }
},
methods: {
onClick(e) {
if (!this.get('selected')) {
return
}
e.preventDefault()
e.stopPropagation()
smoothScrollToTop(document.getElementsByClassName('container')[0])
}
} }
} }

View File

@ -1,3 +1,4 @@
// via https://github.com/tootsuite/mastodon/blob/f59ed3a4fafab776b4eeb92f805dfe1fecc17ee3/app/javascript/mastodon/scroll.js
const easingOutQuint = (x, t, b, c, d) => const easingOutQuint = (x, t, b, c, d) =>
c * ((t = t / d - 1) * t * t * t * t + 1) + b 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)