diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index 8931c92..9615cc2 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -21,6 +21,10 @@ body {
margin-top: 2px;
}
+#breadcrump > li > a{
+ cursor: pointer;
+}
+
#counter {
font-size: 24px;
margin-top: -6px;
@@ -99,3 +103,11 @@ button {
text-align:left;
width:2.8em;
}
+
+#filter > a.active {
+ font-weight: bold;
+ pointer-events: none;
+ cursor: default;
+ text-decoration: none;
+ color: black;
+}
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index ce2fd8e..84a083b 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -21,7 +21,7 @@ var last_state;
var last_outputs;
var current_app;
var pagination = 0;
-var browsepath;
+var browsepath = "";
var lastSongTitle = "";
var current_song = new Object();
var MAX_ELEMENTS_PER_PAGE = 512;
@@ -29,7 +29,7 @@ var dirble_selected_cat = "";
var dirble_catid = "";
var dirble_page = 1;
var isTouch = Modernizr.touch ? 1 : 0;
-var filter = undefined;
+var filter = "";
var dirble_api_token = "";
var dirble_stations = false;
@@ -67,7 +67,7 @@ var app = $.sammy(function() {
browsepath = this.params['splat'][1];
pagination = parseInt(this.params['splat'][0]);
current_app = 'browse';
- $('#breadcrump').removeClass('hide').empty().append("
root");
+ $('#breadcrump').removeClass('hide').empty().append("root");
$('#filter').removeClass('hide');
$('#salamisandwich').removeClass('hide').find("tr:gt(0)").remove();
$('#dirble_panel').addClass('hide');
@@ -92,7 +92,7 @@ var app = $.sammy(function() {
}
full_path = full_path + chunk;
- $('#breadcrump').append(""+chunk+"");
+ $('#breadcrump').append(""+chunk+"");
full_path += "/";
});
$('#browse').addClass('active');
@@ -313,13 +313,13 @@ function webSocketConnect() {
switch(obj.data[item].type) {
case 'directory':
var clazz = 'dir';
- if (filter !== undefined) {
+ if (filter !== "") {
var first = obj.data[item].dir[0];
- if (filter === "#" && isNaN(first)) {
+ if (filter === "num" && isNaN(first)) {
clazz += ' hide';
} else if (filter >= "A" && filter <= "Z" && first.toUpperCase() !== filter) {
clazz += ' hide';
- } else if (filter === "||") {
+ } else if (filter === "plist") {
clazz += ' hide';
}
}
@@ -332,7 +332,7 @@ function webSocketConnect() {
break;
case 'playlist':
var clazz = 'plist';
- if (filter !== "||") {
+ if ( (filter !== "") && (filter !== "plist") ) {
clazz += ' hide';
}
$('#salamisandwich > tbody').append(
@@ -414,7 +414,9 @@ function webSocketConnect() {
pagination = 0;
browsepath = $(this).attr("uri");
$("#browse > a").attr("href", '#/browse/'+pagination+'/'+browsepath);
+ $('#filter > a').attr("href", '#/browse/'+pagination+'/'+browsepath);
app.setLocation('#/browse/'+pagination+'/'+browsepath);
+ set_filter('');
break;
case 'song':
socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri")));
@@ -436,6 +438,17 @@ function webSocketConnect() {
}
});
+ $('#breadcrump > li > a').on({
+ click: function() {
+ pagination = 0;
+ browsepath = $(this).attr("uri");
+ $("#browse > a").attr("href", '#/browse/'+pagination+'/'+browsepath);
+ $('#filter > a').attr("href", '#/browse/'+pagination+'/'+browsepath);
+ app.setLocation('#/browse/'+pagination+'/'+browsepath);
+ set_filter('');
+ }
+ });
+
break;
case 'state':
updatePlayIcon(obj.data.state);
@@ -1060,53 +1073,45 @@ function dirble_load_stations() {
function set_filter (c) {
filter = c;
+ $('#filter > a').removeClass('active');
+ $('#f' + c).addClass('active');
- $.each($('#salamisandwich > tbody > tr.dir'), function(i, line) {
- var first = $(line).attr('uri')[0];
+ if (filter === "") {
+ $('#salamisandwich > tbody > tr').removeClass('hide');
+ } else if (filter === "plist") {
+ $('#salamisandwich > tbody > tr.dir').addClass('hide');
+ $('#salamisandwich > tbody > tr.song').addClass('hide');
+ $('#salamisandwich > tbody > tr.plist').removeClass('hide');
+ } else {
+ $('#salamisandwich > tbody > tr.plist').addClass('hide');
+ $.each($('#salamisandwich > tbody > tr.dir'), function(i, line) {
+ var first = basename($(line).attr('uri'))[0];
- if (filter === undefined) {
- $(line).removeClass('hide');
- }
-
- else if (filter === "#") {
- if (!isNaN(first)) {
- $(line).removeClass('hide');
- } else {
- $(line).addClass('hide');
- }
- }
-
- else if (filter >= "A" && filter <= "Z") {
- if (first.toUpperCase() === filter) {
- $(line).removeClass('hide');
- } else {
- $(line).addClass('hide');
- }
- }
-
- else if (filter === "||") {
- $(line).addClass('hide');
- }
- });
-
- $.each($('#salamisandwich > tbody > tr.plist'), function(i, line) {
- if (filter === undefined) {
- $(line).removeClass('hide');
- } else if (filter === "||") {
- $(line).removeClass('hide');
- } else {
- $(line).addClass('hide');
- }
- });
+ if (filter === "num") {
+ if (!isNaN(first)) {
+ $(line).removeClass('hide');
+ } else {
+ $(line).addClass('hide');
+ }
+ } else if (filter >= "A" && filter <= "Z") {
+ if (first.toUpperCase() === filter) {
+ $(line).removeClass('hide');
+ } else {
+ $(line).addClass('hide');
+ }
+ }
+ });
+ }
}
function add_filter () {
- $('#filter').append(' #');
+ $('#filter').append(' All');
+ $('#filter').append(' #');
for (i = 65; i <= 90; i++) {
var c = String.fromCharCode(i);
- $('#filter').append(' ' + c + '');
+ $('#filter').append(' ' + c + '');
}
- $('#filter').append(' ');
+ $('#filter').append(' ');
}