[web-src] Index based navigation for artists, albums, genres

web-src/src/components/IndexButtonList.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="buttons is-centered fd-is-square">
+    <a v-for="char in filtered_index" :key="char" class="button is-small" @click="nav(char)">{{ char }}</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'IndexButtonList',
+
+  props: ['index'],
+
+  computed: {
+    filtered_index () {
+      const specialChars = '!"#$%&\'()*+,-./:;<=>?@[\\]^`{|}~'
+      return this.index.filter(c => !specialChars.includes(c))
+    }
+  },
+
+  methods: {
+    nav: function (id) {
+      this.$router.push({ path: this.$router.currentRoute.path + '#index_' + id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListItemAlbum.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media" :id="'index_' + anchor">
     <div class="media-content fd-has-action is-clipped" v-on:click="open_album">
       <h1 class="title is-6">{{ album.name }}</h1>
       <h2 class="subtitle is-7 has-text-grey"><b>{{ album.artist }}</b></h2>
@@ -56,7 +56,7 @@ export default {
   name: 'ListItemAlbum',
   components: { ModalDialog },
 
-  props: ['album', 'media_kind'],
+  props: ['album', 'media_kind', 'anchor'],
 
   data () {
     return {

web-src/src/components/ListItemArtist.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media" :id="'index_' + anchor">
     <div class="media-content fd-has-action is-clipped" v-on:click="open_artist">
       <h1 class="title is-6">{{ artist.name }}</h1>
     </div>
@@ -51,7 +51,7 @@ export default {
   name: 'PartArtist',
   components: { ModalDialog },
 
-  props: ['artist'],
+  props: ['artist', 'anchor'],
 
   data () {
     return {

web-src/src/components/ListItemGenre.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media">
+  <div class="media" :id="'index_' + anchor">
     <div class="media-content fd-has-action is-clipped" v-on:click="open_genre">
       <h1 class="title is-6">{{ genre.name }}</h1>
     </div>
@@ -53,7 +53,7 @@ export default {
   name: 'PartGenre',
   components: { ModalDialog },
 
-  props: [ 'genre' ],
+  props: [ 'genre', 'anchor' ],
 
   data () {
     return {

web-src/src/components/TabsSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="section fd-tabs-section" v-if="spotify_enabled">
+  <section class="section fd-remove-padding-bottom" v-if="spotify_enabled">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">

web-src/src/mystyles.css

@@ -38,11 +38,20 @@ a.navbar-item {
   margin-bottom: 24px;
 }
 
+.fd-remove-padding-bottom {
+  padding-bottom: 0;
+}
+
 .fd-has-padding-left-right {
   padding-left: 24px;
   padding-right: 24px;
 }
 
+.fd-is-square .button {
+  height: 27px;
+  width: 27px;
+}
+
 .fd-is-text-clipped {
   white-space: nowrap;
   overflow: hidden;
@@ -65,7 +74,17 @@ a.navbar-item {
 }
 
 .fd-tabs-section {
-  padding-bottom: 0;
+  padding-bottom: 3px;
+  padding-top: 3px;
+  background: white;
+  top: 3.25rem;
+  z-index: 20;
+  position: fixed;
+  width: 100%;
+}
+
+section.fd-tabs-section + section.fd-content {
+  margin-top: 24px;
 }
 
 .fd-progress-bar {

web-src/src/pages/PageAlbums.vue

@@ -3,6 +3,9 @@
     <tabs-music></tabs-music>
 
     <content-with-heading>
+      <template slot="options">
+        <index-button-list :index="index_list"></index-button-list>
+      </template>
       <template slot="heading-left">
         <p class="title is-4">Albums</p>
         <p class="heading">{{ albums.total }} albums</p>
@@ -16,7 +19,7 @@
         </a>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in albums.items" :key="album.id" :album="album" v-if="!hide_singles || album.track_count > 2"></list-item-album>
+        <list-item-album v-for="(album, index) in albums.items" :key="album.id" :album="album" :anchor="anchor(album, index)" v-if="!hide_singles || album.track_count > 2"></list-item-album>
       </template>
     </content-with-heading>
   </div>
@@ -26,6 +29,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
+import IndexButtonList from '@/components/IndexButtonList'
 import ListItemAlbum from '@/components/ListItemAlbum'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
@@ -43,23 +47,33 @@ const albumsData = {
 export default {
   name: 'PageAlbums',
   mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
-  components: { ContentWithHeading, TabsMusic, ListItemAlbum },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemAlbum },
 
   data () {
     return {
-      albums: {}
+      albums: { items: [] }
     }
   },
 
   computed: {
     hide_singles () {
       return this.$store.state.hide_singles
+    },
+
+    index_list () {
+      return [...new Set(this.albums.items
+        .filter(album => !this.$store.state.hide_singles || album.track_count > 2)
+        .map(album => album.name_sort.charAt(0).toUpperCase()))]
     }
   },
 
   methods: {
     update_hide_singles: function (e) {
       this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
+    },
+
+    anchor: function (album, index) {
+      return album.name_sort.charAt(0).toUpperCase()
     }
   }
 }

web-src/src/pages/PageArtists.vue

@@ -3,6 +3,9 @@
     <tabs-music></tabs-music>
 
     <content-with-heading>
+      <template slot="options">
+        <index-button-list :index="index_list"></index-button-list>
+      </template>
       <template slot="heading-left">
         <p class="title is-4">Artists</p>
         <p class="heading">{{ artists.total }} artists</p>
@@ -16,7 +19,7 @@
         </a>
       </template>
       <template slot="content">
-        <list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist" v-if="!hide_singles || artist.track_count > (artist.album_count * 2)"></list-item-artist>
+        <list-item-artist v-for="(artist, index) in artists.items" :key="artist.id" :artist="artist" :anchor="anchor(artist, index)" v-if="!hide_singles || artist.track_count > (artist.album_count * 2)"></list-item-artist>
       </template>
     </content-with-heading>
   </div>
@@ -26,6 +29,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
+import IndexButtonList from '@/components/IndexButtonList'
 import ListItemArtist from '@/components/ListItemArtist'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
@@ -43,23 +47,33 @@ const artistsData = {
 export default {
   name: 'PageArtists',
   mixins: [ LoadDataBeforeEnterMixin(artistsData) ],
-  components: { ContentWithHeading, TabsMusic, ListItemArtist },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemArtist },
 
   data () {
     return {
-      artists: {}
+      artists: { items: [] }
     }
   },
 
   computed: {
     hide_singles () {
       return this.$store.state.hide_singles
+    },
+
+    index_list () {
+      return [...new Set(this.artists.items
+        .filter(artist => !this.$store.state.hide_singles || artist.track_count > (artist.album_count * 2))
+        .map(artist => artist.name_sort.charAt(0).toUpperCase()))]
     }
   },
 
   methods: {
     update_hide_singles: function (e) {
       this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
+    },
+
+    anchor: function (artist, index) {
+      return artist.name_sort.charAt(0).toUpperCase()
     }
   }
 }

web-src/src/pages/PageGenres.vue

@@ -3,12 +3,15 @@
     <tabs-music></tabs-music>
 
     <content-with-heading>
+      <template slot="options">
+        <index-button-list :index="index_list"></index-button-list>
+      </template>
       <template slot="heading-left">
         <p class="title is-4">Genres</p>
         <p class="heading">{{ genres.total }} genres</p>
       </template>
       <template slot="content">
-        <list-item-genre v-for="genre in genres.items" :key="genre.name" :genre="genre"></list-item-genre>
+        <list-item-genre v-for="(genre, index) in genres.items" :key="genre.name" :genre="genre" :anchor="anchor(genre, index)"></list-item-genre>
       </template>
     </content-with-heading>
   </div>
@@ -18,6 +21,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
+import IndexButtonList from '@/components/IndexButtonList'
 import ListItemGenre from '@/components/ListItemGenre'
 import webapi from '@/webapi'
 
@@ -34,15 +38,25 @@ const genresData = {
 export default {
   name: 'PageGenres',
   mixins: [ LoadDataBeforeEnterMixin(genresData) ],
-  components: { ContentWithHeading, TabsMusic, ListItemGenre },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemGenre },
 
   data () {
     return {
-      genres: {}
+      genres: { items: [] }
+    }
+  },
+
+  computed: {
+    index_list () {
+      return [...new Set(this.genres.items
+        .map(genre => genre.name.charAt(0).toUpperCase()))]
     }
   },
 
   methods: {
+    anchor: function (genre, index) {
+      return genre.name.charAt(0).toUpperCase()
+    }
   }
 }
 </script>

web-src/src/pages/PageSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- Search field + recent searches -->
-    <section class="section fd-tabs-section">
+    <section class="section fd-remove-padding-bottom">
       <div class="container">
         <div class="columns is-centered">
           <div class="column is-four-fifths">

web-src/src/pages/SpotifyPageSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- Search field + recent searches -->
-    <section class="section fd-tabs-section">
+    <section class="section fd-remove-padding-bottom">
       <div class="container">
         <div class="columns is-centered">
           <div class="column is-four-fifths">

web-src/src/router/index.js

@@ -75,7 +75,7 @@ export const router = new VueRouter({
       path: '/music/artists',
       name: 'Artists',
       component: PageArtists,
-      meta: { show_progress: true }
+      meta: { show_progress: true, has_index: true }
     },
     {
       path: '/music/artists/:artist_id',
@@ -93,7 +93,7 @@ export const router = new VueRouter({
       path: '/music/albums',
       name: 'Albums',
       component: PageAlbums,
-      meta: { show_progress: true }
+      meta: { show_progress: true, has_index: true }
     },
     {
       path: '/music/albums/:album_id',
@@ -105,7 +105,7 @@ export const router = new VueRouter({
       path: '/music/genres',
       name: 'Genres',
       component: PageGenres,
-      meta: { show_progress: true }
+      meta: { show_progress: true, has_index: true }
     },
     {
       path: '/music/genres/:genre',
@@ -201,12 +201,27 @@ export const router = new VueRouter({
     }
   ],
   scrollBehavior (to, from, savedPosition) {
+    // console.log(to.path + '_' + from.path + '__' + to.hash + ' savedPosition:' + savedPosition)
     if (savedPosition) {
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           resolve(savedPosition)
         }, 500)
       })
+    } else if (to.path === from.path && to.hash) {
+      return { selector: to.hash, offset: { x: 0, y: 90 } }
+    } else if (to.hash) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve({ selector: to.hash, offset: { x: 0, y: 90 } })
+        }, 500)
+      })
+    } else if (to.meta.has_index) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve({ selector: '#top', offset: { x: 0, y: 110 } })
+        }, 500)
+      })
     } else {
       return { x: 0, y: 0 }
     }

web-src/src/templates/ContentWithHeading.vue

@@ -1,9 +1,10 @@
 <template>
-  <section class="section">
+  <section class="section fd-content">
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">
-          <nav class="level">
+          <slot name="options"></slot>
+          <nav class="level" id="top">
             <!-- Left side -->
             <div class="level-left">
               <div class="level-item has-text-centered-mobile">