mirror of
https://github.com/SuperBFG7/ympd
synced 2024-12-23 01:20:27 +00:00
added sammy.js app routing
This commit is contained in:
parent
931e975d4e
commit
9a82b44ea9
@ -32,14 +32,14 @@
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">ympd</a>
|
||||
<a class="navbar-brand" href="/">ympd</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
|
||||
<ul id="nav_links" class="nav navbar-nav">
|
||||
<li><a href="#">Playlist</a></li>
|
||||
<li><a href="#browse">Browse database</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li id="nav_playlist"><a href="#">Playlist</a></li>
|
||||
<li id="nav_browse"><a href="#/browse/">Browse database</a></li>
|
||||
<li id="nav_about"><a href="#/about/">About</a></li>
|
||||
</ul>
|
||||
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
@ -146,6 +146,7 @@
|
||||
<script src="js/jquery-1.10.2.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/bootstrap-slider.js"></script>
|
||||
<script src="js/sammy.js"></script>
|
||||
<script src="js/mpd.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
100
htdocs/js/mpd.js
100
htdocs/js/mpd.js
@ -1,34 +1,73 @@
|
||||
var socket;
|
||||
var last_state;
|
||||
var current_app;
|
||||
|
||||
$('#volumeslider').slider().on('slide', function(event) {
|
||||
socket.send("MPD_API_SET_VOLUME,"+event.value);
|
||||
});
|
||||
|
||||
$(window).bind('hashchange', function(e) {
|
||||
$('#nav_links > li').each(function(value) {
|
||||
if(window.location.hash === $(this).children().attr('href'))
|
||||
$(this).addClass('active');
|
||||
else
|
||||
$(this).removeClass('active');
|
||||
$('#nav_links > li').on('click', function(e) {
|
||||
//$('#nav_links > li:contains(' + History.getState().title + ')').removeClass('active');
|
||||
//History.pushState({state:$(this).attr('id')}, $(this).text(), '?' + $(this).attr('id'));
|
||||
});
|
||||
|
||||
switch(window.location.hash) {
|
||||
case "#browse":
|
||||
$('#panel-heading').text("Browse database");
|
||||
socket.send('MPD_API_GET_BROWSE,/');
|
||||
break;
|
||||
case "#about":
|
||||
$('#panel-heading').text("About");
|
||||
break;
|
||||
default:
|
||||
$('#panel-heading').text("Playlist");
|
||||
$('#nav_links > li:first-child').addClass('active');
|
||||
socket.send("MPD_API_GET_PLAYLIST");
|
||||
}
|
||||
var app = $.sammy(function() {
|
||||
this.before('/', function(e, data) {
|
||||
socket.send("MPD_API_GET_TRACK_INFO");
|
||||
});
|
||||
|
||||
this.get('#/', function() {
|
||||
current_app = 'playlist';
|
||||
$('#salamisandwich').find("tr:gt(0)").remove();
|
||||
socket.send("MPD_API_GET_PLAYLIST");
|
||||
$('#panel-heading').text("Playlist");
|
||||
});
|
||||
this.get(/\#\/browse\/(.*)/, function() {
|
||||
current_app = 'browse';
|
||||
$('#salamisandwich').find("tr:gt(0)").remove();
|
||||
var path = this.params['splat'];
|
||||
if(path == '')
|
||||
path = "/";
|
||||
|
||||
socket.send("MPD_API_GET_BROWSE,"+path);
|
||||
$('#panel-heading').text("Browse database: "+path+"");
|
||||
});
|
||||
this.get('#/about', function() {
|
||||
current_app = 'about';
|
||||
$('#panel-heading').text("About");
|
||||
});
|
||||
this.get("/", function(context) {
|
||||
context.redirect("#/");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
/*
|
||||
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
|
||||
|
||||
if(!State.data.state) {
|
||||
//$('#' + State.data).
|
||||
}
|
||||
|
||||
$('#panel-heading').text(State.title);
|
||||
switch(State.data.state) {
|
||||
case "nav_browse":
|
||||
socket.send('MPD_API_GET_BROWSE,/');
|
||||
break;
|
||||
case "nav_about":
|
||||
break;
|
||||
case "nav_playlist":
|
||||
default:
|
||||
|
||||
}
|
||||
$(this).addClass('active');
|
||||
|
||||
console.log(" Browser State: ");
|
||||
console.log(State);
|
||||
socket.send("MPD_API_GET_TRACK_INFO");
|
||||
});
|
||||
*/
|
||||
$(document).ready(function(){
|
||||
webSocketConnect();
|
||||
});
|
||||
@ -45,7 +84,10 @@ function webSocketConnect() {
|
||||
try {
|
||||
socket.onopen = function() {
|
||||
console.log("Connected");
|
||||
$(window).trigger( 'hashchange' );
|
||||
app.run();
|
||||
|
||||
/* Push Initial state on first visit */
|
||||
//$(window).trigger("statechange")
|
||||
}
|
||||
|
||||
socket.onmessage =function got_packet(msg) {
|
||||
@ -55,10 +97,11 @@ function webSocketConnect() {
|
||||
var obj = JSON.parse(msg.data);
|
||||
switch (obj.type) {
|
||||
case "playlist":
|
||||
if(window.location.hash)
|
||||
//if(state.data.state !== 'nav_playlist')
|
||||
// break;
|
||||
if(current_app !== 'playlist')
|
||||
break;
|
||||
|
||||
$('#salamisandwich').find("tr:gt(0)").remove();
|
||||
for (var song in obj.data) {
|
||||
var minutes = Math.floor(obj.data[song].duration / 60);
|
||||
var seconds = obj.data[song].duration - minutes * 60;
|
||||
@ -71,16 +114,18 @@ function webSocketConnect() {
|
||||
}
|
||||
break;
|
||||
case "browse":
|
||||
if(window.location.hash !== '#browse')
|
||||
//if(state.data.state !== 'nav_browse')
|
||||
// break;
|
||||
if(current_app !== 'browse')
|
||||
break;
|
||||
$('#salamisandwich').find("tr:gt(0)").remove();
|
||||
console.log(app);
|
||||
|
||||
for (var item in obj.data) {
|
||||
switch(obj.data[item].type) {
|
||||
case "directory":
|
||||
$('#salamisandwich tr:last').after(
|
||||
"<tr><td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" +
|
||||
"<td><a href=\"#browse\">" + obj.data[item].dir +"</a></td>" +
|
||||
"<td><a href=\"#/browse/"+ obj.data[item].dir +"\">" + obj.data[item].dir +"</a></td>" +
|
||||
"<td></td></tr>");
|
||||
break;
|
||||
case "song":
|
||||
@ -89,7 +134,7 @@ function webSocketConnect() {
|
||||
|
||||
$('#salamisandwich tr:last').after(
|
||||
"<tr><td><span class=\"glyphicon glyphicon-music\"></span></td>" +
|
||||
"<td><a href=\"#browse\">" + obj.data[item].title +"</a></td>" +
|
||||
"<td><a href=\"#\">" + obj.data[item].title +"</a></td>" +
|
||||
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +"</td></tr>");
|
||||
break;
|
||||
case "playlist":
|
||||
@ -97,7 +142,8 @@ function webSocketConnect() {
|
||||
}
|
||||
}
|
||||
$('#salamisandwich td:eq(1)').click(function(){
|
||||
socket.send('MPD_API_GET_BROWSE,'+$(this).text());
|
||||
console.log($(this).children().attr("path"));
|
||||
//socket.send('MPD_API_GET_BROWSE,'+;
|
||||
});
|
||||
|
||||
break;
|
||||
|
2135
htdocs/js/sammy.js
Normal file
2135
htdocs/js/sammy.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -21,6 +21,7 @@ static const struct serveable whitelist[] = {
|
||||
{ "/js/mpd.js", "text/javascript" },
|
||||
{ "/js/jquery-1.10.2.min.js", "text/javascript" },
|
||||
{ "/js/bootstrap-slider.js", "text/javascript" },
|
||||
{ "/js/sammy.js", "text/javascript" },
|
||||
|
||||
{ "/fonts/glyphicons-halflings-regular.woff", "application/x-font-woff"},
|
||||
{ "/fonts/glyphicons-halflings-regular.svg", "image/svg+xml"},
|
||||
|
Loading…
Reference in New Issue
Block a user