Allow double clicking on selectable items.

Track items can still be selected by single clicking, this is now done
manually. Double clicking will add the track to the playlist. Single
clicking on album names will open an album view for that album.

4 files changed, 65 insertions, 25 deletions

diff --git a/db.py b/db.py
index 57e30c0..e680448 100644
--- a/db.py
+++ b/db.py
@@ -196,7 +196,10 @@ class Track(Base):
 		if self.artist:
 			metadata['artist'] = self.artist.name
 		if self.album:
-			metadata['album'] = self.album.name
+			metadata.update({
+				'album': self.album.name,
+				'album_id': self.album.id,
+			})
 		return metadata
 
 	def dict(self):
diff --git a/static/init.js b/static/init.js
index c8c1ad3..117e8d9 100644
--- a/static/init.js
+++ b/static/init.js
@@ -42,19 +42,32 @@ function load_directory(dir_id, dir_item) {
 				))
 			);
 		}
+		// FIXME: Lots of duplicate code in here.
 		$.each(data, function(i, item) {
-			var el = $(templates.directory_item(item));
+			var el = $(templates.track_item(item));
 			var id = el.attr('id');
 			if(item.type == "track") {
 				el.data('track', item);
-				// FIXME: This doesn't work with selectable
-				/*$(el, 'a').dblclick(function() {
-					console.log('track: ', item);
+				$(el, 'a.play').dblclick(function() {
+					console.log('track dblclick:', item);
 					playlist.add(item);
 					return true;
-				}).click(function() {
+				}).click(function(event) {
+					// TODO: Check that doing this doesn't cause any weird bugs with selectable.
+					if(!event.ctrlKey)
+						track_list.find('.ui-selected').removeClass('ui-selected');
+					$(el).addClass('ui-selected');
+					$('#directory-add').prop('disabled', track_list.find('.ui-selected').length == 0);
 					return false;
-				});*/
+				});
+				$(el, 'a.album').click(function() {
+					var album = {
+						id: item.metadata.album_id,
+						name: item.metadata.album
+					};
+					show_album(album);
+					return false;
+				});
 				track_list.append(el);
 			} else if(item.type == "dir") {
 				$(el).click(function() {
@@ -66,6 +79,7 @@ function load_directory(dir_id, dir_item) {
 		});
 		track_list.selectable({
 			filter: 'tr',
+			distance: 5,
 			stop: function(event, ui) {
 				$('#directory-add').prop('disabled', track_list.find('.ui-selected').length == 0);
 				return true;
@@ -79,25 +93,40 @@ function set_tracks(container, select, click) {
 	return (function(tracks) {
 		container.empty();
 		$.each(tracks, function(i, track) {
-			var el = $(templates.directory_item(track));
+			var el = $(templates.track_item(track));
 			el.data('track', track);
-			if(click !== undefined) {
-				el.find('a').click(function(event) {
-					click(event, track);
-				});
-			}
+			el.find('a.track').dblclick(function() {
+				playlist.add(track);
+				return true;
+			}).click(function(event) {
+				if(click !== undefined)
+					return click(event, track);
+				// TODO: Check that doing this doesn't cause any weird bugs with selectable.
+				if(!event.ctrlKey)
+					container.find('.ui-selected').removeClass('ui-selected');
+				$(el).addClass('ui-selected');
+				select.prop('disabled', container.find('.ui-selected').length == 0);
+				return false;
+			});
+			el.find('a.album').click(function(event) {
+				var album = {
+					id: track.metadata.album_id,
+					name: track.metadata.album
+				};
+				show_album(album);
+				return false;
+			});
 			container.append(el);
 		});
-		if(select !== undefined) {
-			container.selectable({
-				filter: 'tr',
-				stop: function(event, ui) {
-					select.prop('disabled', $(container, ' .ui-selected').length == 0);
-					return true;
-				}
-			});
-			select.prop('disabled', true);
-		}
+		container.selectable({
+			filter: 'tr',
+			distance: 5,
+			stop: function(event, ui) {
+				select.prop('disabled', $(container, '.ui-selected').length == 0);
+				return true;
+			}
+		});
+		select.prop('disabled', true);
 	});
 }
 
diff --git a/static/playlist.js b/static/playlist.js
index 70149b3..bd323d3 100644
--- a/static/playlist.js
+++ b/static/playlist.js
@@ -24,6 +24,14 @@ $(function(){
 				playsound(model);
 				return false;
 			});
+			$('a.album', this.el).click(function() {
+				var album = {
+					id: model.attributes.metadata.album_id,
+					name: model.attributes.metadata.album
+				};
+				show_album(album);
+				return false;
+			});
 			$('a.delete', this.el).click(function() {
 				items.remove(model);
 				playlist.hintnext();
diff --git a/static/templates.js b/static/templates.js
index 67be2e0..fa2a240 100644
--- a/static/templates.js
+++ b/static/templates.js
@@ -10,9 +10,9 @@ Handlebars.registerHelper('trackname', function() {
 });
 
 var templates = new (function Templates() {
-	this.directory_item = Handlebars.compile('<tr id="{{type}}-{{id}}"><td><a href="#" class="{{type}}{{#unless cache}} nocache{{/unless}}">{{trackname}}</a></td><td>{{metadata.artist}}</td><td>{{metadata.album}}</td></tr>');
+	this.track_item = Handlebars.compile('<tr id="{{type}}-{{id}}"><td><a href="#" class="{{type}}{{#unless cache}} nocache{{/unless}}">{{trackname}}</a></td><td>{{metadata.artist}}</td><td><a href="#" class="album">{{metadata.album}}</a></td></tr>');
 	// The playlist automatically adds a tr tag.
-	this.playlist_item = Handlebars.compile('<td><a href="#" class="play">{{trackname}}</a></td><td><a href="#">{{metadata.artist}}</a></td><td><a href="#">{{metadata.album}}</a></td><td class="track-buttons"><a href="#" class="delete"><img src="/static/icons/delete.png" alt="Delete" title="Delete" /></a></td>');
+	this.playlist_item = Handlebars.compile('<td><a href="#" class="play">{{trackname}}</a></td><td><a href="#" class="artist">{{metadata.artist}}</a></td><td><a href="#" class="album">{{metadata.album}}</a></td><td class="track-buttons"><a href="#" class="delete"><img src="/static/icons/delete.png" alt="Delete" title="Delete" /></a></td>');
 	this.albums_item = Handlebars.compile('<div class="album-tile" id="albums-album-{{id}}"><a href="#album-tab-{{id}}" title="{{name}} by {{artist.name}}"><img src="/album-cover/{{id}}.jpg" alt="{{name}} by {{artist.name}}" /><br /><span class="album-name">{{name}}</span></div>');
 	this.album_tab = Handlebars.compile('<div id="album-tab-{{id}}"><input type="button" value="Add selected" /><table id="album-tab-{{id}}-table" class="track-table"><tbody><tr><td><img src="/static/icons/loading.gif" alt="Loading..." /></td></tr></tbody></table></div>');
 	this.album_tabli = Handlebars.compile('<li><a href="{{tabid}}">Album: {{album.name}}</a> <span class="ui-icon ui-icon-close">Remove tab</span></li>');