From 1134dc1efa6a4326424cf7b1271cb4465afb712d Mon Sep 17 00:00:00 2001 From: Jon Bergli Heier Date: Wed, 19 Dec 2012 23:20:21 +0100 Subject: 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. --- db.py | 5 +++- static/init.js | 73 +++++++++++++++++++++++++++++++++++++---------------- static/playlist.js | 8 ++++++ static/templates.js | 4 +-- 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('{{trackname}}{{metadata.artist}}{{metadata.album}}'); + this.track_item = Handlebars.compile('{{trackname}}{{metadata.artist}}{{metadata.album}}'); // The playlist automatically adds a tr tag. - this.playlist_item = Handlebars.compile('{{trackname}}{{metadata.artist}}{{metadata.album}}Delete'); + this.playlist_item = Handlebars.compile('{{trackname}}{{metadata.artist}}{{metadata.album}}Delete'); this.albums_item = Handlebars.compile('
{{name}} by {{artist.name}}
{{name}}
'); this.album_tab = Handlebars.compile('
Loading...
'); this.album_tabli = Handlebars.compile('
  • Album: {{album.name}} Remove tab
    • '); -- cgit v1.2.3