Make directory tracks selectable.

2 files changed, 31 insertions, 8 deletions

diff --git a/static/index.html b/static/index.html
index 8520468..9f9b854 100644
--- a/static/index.html
+++ b/static/index.html
@@ -66,6 +66,7 @@
 				</table>
 			</div>
 			<div id="directory-tab">
+				<input type="button" id="directory-add" value="Add selected" />
 				<table id="directory-table" class="track-table">
 				<thead>
 					<tr>
@@ -74,9 +75,9 @@
 						<th>Album</th>
 					</tr>
 				</thead>
-				<tbody id="directory-list">
-					<tr>
-					</tr>
+				<tbody id="directory-dirs">
+				</tbody>
+				<tbody id="directory-tracks">
 				</tbody>
 				</table>
 			</div>
diff --git a/static/init.js b/static/init.js
index 901aa1a..941d798 100644
--- a/static/init.js
+++ b/static/init.js
@@ -25,8 +25,10 @@ function preload_images() {
 
 function load_directory(dir_id, dir_item) {
 	$.get('/json/list/' + dir_id, function(data) {
-		var dir_list = $('#directory-list');
+		var dir_list = $('#directory-dirs');
+		var track_list = $('#directory-tracks');
 		dir_list.html('');
+		track_list.html('');
 		if(dir_item && dir_item.parent) {
 			dir_list.append($('<tr></tr>').append($('<td></td>').attr('colspan', 3)
 				.append($('<a></a>')
@@ -44,20 +46,33 @@ function load_directory(dir_id, dir_item) {
 			var el = $(templates.directory_item(item));
 			var id = el.attr('id');
 			if(item.type == "track") {
-				$(el, 'a').click(function() {
+				el.data('track', item);
+				// FIXME: This doesn't work with selectable
+				/*$(el, 'a').dblclick(function() {
+					console.log('track: ', item);
 					playlist.add(item);
+					return true;
+				}).click(function() {
 					return false;
-				});
+				});*/
+				track_list.append(el);
 			} else if(item.type == "dir") {
 				$(el).click(function() {
 					load_directory(item.id, item);
 					return false;
 				});
+				dir_list.append(el);
+			}
+		});
+		track_list.selectable({
+			filter: 'tr',
+			stop: function(event, ui) {
+				$('#directory-add').prop('disabled', $(track_list, ' .ui-selected').length == 0);
+				return true;
 			}
-			$(el, 'a').click
-			dir_list.append(el);
 		});
 	});
+	$('#directory-add').prop('disabled', true);
 }
 
 function search_results(data) {
@@ -111,4 +126,11 @@ $(document).ready(function() {
 			playlist.add(track);
 		});
 	}).prop('disabled', true);
+	$('#directory-add').click(function(event) {
+		var tracks = $('#directory-tracks tr.ui-selected');
+		tracks.each(function(i, item) {
+			var track = $(item).data('track');
+			playlist.add(track);
+		});
+	}).prop('disabled', true);
 });