enable switching to and from album browser

beetsplug/web/static/beets.css

@@ -57,21 +57,17 @@ body {
 #album-browser {
     margin: 0.35em;
 }
-#album-browser a {
+#album-browser .browseAlbums {
     color: white;
     font-size: 1.5em;
     text-decoration: none;
+    -webkit-appearance: none;
+    font-family: Helvetica, Arial, sans-serif;
+    background: none;
+    border: none;
+    cursor: pointer;
 }
-#album-browser a:link {
-    color: white;
-}
-#album-browser a:visited {
-    color: white;
-}
-#album-browser a:hover {
-    color: lightseagreen;
-}
-#album-browser a:selected {
+#album-browser .browseAlbums:hover {
     color: lightseagreen;
 }
 
@@ -125,7 +121,7 @@ body {
     list-style: none;
     padding: 4px 8px;
     margin: 0;
-    cursor: default;
+    cursor: pointer;
 }
 #entities ul li.selected {
     background: #7abcff;

beetsplug/web/static/beets.js

@@ -166,7 +166,6 @@ var albumCoverLoader = new IntersectionObserver(loadAlbumCovers);
 var BeetsRouter = Backbone.Router.extend({
     routes: {
         "item/query/:query": "itemQuery",
-        "albums": "albumView",
     },
     itemQuery: function(query) {
         var queryURL = query.split(/\s+/).map(encodeURIComponent).join('/');
@@ -179,16 +178,6 @@ var BeetsRouter = Backbone.Router.extend({
             app.showItems(results);
         });
     },
-    albumView: function() {
-        $.getJSON('album?random', function(data) {
-            var models = _.map(
-                data['albums'],
-                function(d) { return new Album(d); }
-            );
-            var results = new Albums(models);
-            app.showAlbums(results);
-        });
-    },
 });
 var router = new BeetsRouter();
 
@@ -281,6 +270,7 @@ var AppView = Backbone.View.extend({
     el: $('body'),
     events: {
         'submit #queryForm': 'querySubmit',
+        'click .browseAlbums': 'showAlbums',
     },
     querySubmit: function(ev) {
         ev.preventDefault();
@@ -307,16 +297,23 @@ var AppView = Backbone.View.extend({
             $('#results').append(view.render().el);
         });
     },
-    showAlbums: function(albums) {
-        $('#main-detail').hide();
-        $('#extra-detail').hide();
-        $('#cover-grid').empty().show();
-        albums.each(function(album) {
-            var view = new AlbumCoverView({model: album});
-            album.entryView = view;
-            var el = view.render().el;
-            $('#cover-grid').append(el);
-            albumCoverLoader.observe(el);
+    showAlbums: function() {
+        $.getJSON('album?random', function(data) {
+            var models = _.map(
+                data['albums'],
+                function(d) { return new Album(d); }
+            );
+            var albums = new Albums(models);
+            $('#main-detail').hide();
+            $('#extra-detail').hide();
+            $('#cover-grid').empty().show();
+            albums.each(function(album) {
+                var view = new AlbumCoverView({model: album});
+                album.entryView = view;
+                var el = view.render().el;
+                $('#cover-grid').append(el);
+                albumCoverLoader.observe(el);
+            });
         });
     },
     selectItem: function(view) {

beetsplug/web/templates/index.html

@@ -30,7 +30,7 @@ <h1>beets</h1>
             </div>
             <div class="headerRight">
                 <div id="album-browser">
-                    <a href="?#albums">&#x25A6;</a>
+                    <button class="browseAlbums">&#x25A6;</a>
                 </div>
             </div>
         </div>