matth
/
daapr
1
0
Fork 0
Code Releases Activity

Start for a client view

Browse Source
master
Matthieu Lalonde 12 years ago committed by xSmurf
parent 54b3b1ca06
commit 66d5e59f8e
13 changed files with 308 additions and 55 deletions
Show Stats Download Patch File Download Diff File

17
index.html
Unescape View File

@ -88,21 +88,8 @@
</div>
</div>
<div class="ui-layout-center" class="loading">
<div class="ui-layout-north row-fluid span12" id="wrapperBrowser">
<div class="third">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableGenres"></table>
</div>
<div class="third">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableArtists"></table>
</div>
<div class="third">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableAlbums"></table>
</div>
</div>
<div class="ui-layout-center" id="wrapperList">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="tableList"></table>
</div>
<div class="ui-layout-center" class="loading" id="wrapperMain">
</div>
<div class="ui-layout-south row-fluid" id="wrapperFooter">

34
resources/css/app.css
Unescape View File

@ -170,43 +170,43 @@ body > .ui-layout-west > #wrapperSideBar ul li {
display: inline-block;
}
div#wrapperBrowser {
div#wrapperMain > div > div:first {
margin: 0;
padding: 0;
background: #FFF url(../img/grid3-hrow2.gif) repeat-x;
}
div#wrapperBrowser > div.third {
div#wrapperMain > div > div:first > div.third {
width: 33.3333%;
float: left;
clear: none;
}
div#wrapperBrowser > div.third:first-child {
div#wrapperMain > div > div:first > div.third:first-child {
clear: left;
}
div#wrapperBrowser > div.third:last-child {
div#wrapperMain > div > div:first > div.third:last-child {
clear: right;
}
div#wrapperBrowser > div.third > div.dataTables_wrapper,
div#wrapperBrowser > div.third > div.dataTables_wrapper {
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper {
border-left: 1px solid #C6C6C6;
}
div#wrapperBrowser > div:first-child > div.dataTables_wrapper,
div#wrapperBrowser > div:first-child > div.dataTables_wrapper {
div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper,
div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper {
border-left: none;
padding-left: 1px;
}
div#wrapperBrowser > div.third > div.dataTables_wrapper table td {
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table td {
padding-left: 4px;
}
div#wrapperBrowser table.dataTable tr td.sorting_1 { background-color: transparent; }
div#wrapperBrowser table.dataTable tr td.sorting_2 { background-color: transparent; }
div#wrapperBrowser table.dataTable tr td.sorting_3 { background-color: transparent; }
div#wrapperMain > div > div:first table.dataTable tr td.sorting_1 { background-color: transparent; }
div#wrapperMain > div > div:first table.dataTable tr td.sorting_2 { background-color: transparent; }
div#wrapperMain > div > div:first table.dataTable tr td.sorting_3 { background-color: transparent; }
div#wrapperList {
@ -335,7 +335,7 @@ div.dataTables_scrollHeadInner th {
border: none;
}
div#wrapperBrowser div.dataTables_scrollHeadInner th {
div#wrapperMain > div > div:first div.dataTables_scrollHeadInner th {
padding-left: 4px;
}
@ -352,10 +352,10 @@ table.dataTable tbody tr.selected td,
table.dataTable tbody tr.selected td.sorting_1,
table.dataTable tbody tr.selected td.sorting_2,
table.dataTable tbody tr.selected td.sorting_3,
div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td,
div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td.sorting_1,
div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td.sorting_2,
div#wrapperBrowser > div.third > div.dataTables_wrapper table tr.selected td.sorting_3,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_1,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_2,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_3,
.dropdown-menu * a:hover,
.dropdown-menu * a:focus,
.dropdown-menu * li:hover,

51
resources/js/app.js
Unescape View File

@ -24,6 +24,9 @@ define([
// , "models/dmap"
, "collections/server"
, "collections/playlist"
, "views/client"
, "text!../templates/app/modal-loading.html"
, "text!../templates/app/modal-login.html"
@ -45,6 +48,9 @@ _
, ClientModel
//, DMAPModel
, ServerCollection
, PlaylistCollection
, ClientView
, tmplModalLoading
, tmplModalLogin
@ -80,6 +86,8 @@ _
this.servers = new ServerCollection();
this.playlist = new PlaylistCollection();
this.servers.on("add", function (server) {
server.save();
});
@ -121,17 +129,25 @@ _
that.Views.App = new AppView();
that.Views.Footer = new FooterView();
that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar() {
that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) {
that.Views.App.toggleSideBar();
});
that.Views.Footer.on("toggle:random", function __fnAppEventTogglerRandom(event) {
// TODO:...
});
that.Views.Footer.on("toggle:repeat", function __fnAppEventTogglerRepeater(event) {
// TODO:...
});
that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) {
$(event.target).remove();
});
Backbone.history.start({
pushState: true
, root: "/"
, root: Config.docRoot
});
// For now let's reset the state when we start up
@ -148,6 +164,7 @@ _
;
that.Views.SideBar.select("> ul > li:first");
that.Views.Main.showView("playlist");
}
, _routerActionClient: function (hostname) {
@ -159,28 +176,48 @@ _
that.Views.SideBar.select(server);
if (client) {
if (client.state < 4) {
var __fnAppEventClientInitited = function () {
client.fetchDatabases(client.fetchDatabase);
};
var __fnAppEventClientLoaded = function () {
if (!that.Views.Main.getView(server.get("hostname"))) {
that.Views.Main.setView(server.client.attributes.hostname, new ClientView(server.client));
}
that.Views.Main.showView(server.get("hostname"));
}
, __fnAppEventClientInitited = function () {
client.fetchDatabases(function __fnAppCbFetchDatabases() {
client.fetchDatabase(function __fnAppCbFetchDatabase() {
__fnAppEventClientLoaded();
});
});
};
if (client.state < 4) {
client.on("inited", __fnAppEventClientInitited);
if (client.state <= 0) {
client.init();
}
} else if (client.state === 4) {
client.fetchDatabases(client.fetchDatabase);
__fnAppEventClientInitited();
} else if (client.state > 4) {
__fnAppEventClientLoaded();
}
}
}
, _routerActionPlaylistItem: function (item) {
var that = this
;
that.Views.SideBar.select("> ul > li:first");
}
, _routerActionServerItem: function (server, item) {
var that = this
;
that.Views.SideBar.select(server);
that.Views.Main.showView(server.get("hostname"));
}
, _serverInit: function(server) {

32
resources/js/collections/playlist.js
Unescape View File

@ -0,0 +1,32 @@
/*jslint laxbreak:true */
/*jslint laxcomma:true */
/*jslint loopfunc:true */
/*jslint strict:true */
/*jslint browser:true */
/*jslint devel:true */
define([
"underscore"
, "backbone"
, "models/server"
, "backbone-localstorage"
]
, function (_, Backbone, ServerModel) {
"use strict";
var Server = Backbone.Collection.extend({
model: ServerModel
, localStorage: new Backbone.LocalStorage("daap-servers")
, initialize: function () {
//_.bindAll(this, "");
return Server.__super__.initialize.call(this, arguments);
}
});
return Server;
});

4
resources/js/config.js
Unescape View File

@ -17,7 +17,7 @@ define([
debug: false
, verbose: false
, docRoot: ""
, docRoot: "/" // TODO: Should addLeadingSlash instead
, daap: {
hostname: "daap.lalonde.me"
@ -35,7 +35,7 @@ define([
, debug: true
, verbose: 6
, docRoot: ""
, docRoot: "/"
, daap: {
hostname: "daap.localhost"

10
resources/js/main.js
Unescape View File

@ -6,7 +6,7 @@ require.config({
shim: {
"jquery-ui": ["jquery"]
, "jquery-event-drag": ["jquery"]
, "jquery-layout": ["jquery"]
, "jquery-layout": ["jquery", "jquery-ui"]
, "datatables": ["jquery"]
, "bootstrap-contextmenu": ["bootstrap"]
@ -43,9 +43,9 @@ require.config({
deps: ["toolbox"]
}
//, "config": {
// exports: "Config"
//}
, "underscore-string": {
deps: ["underscore"]
}
}
, paths: {
@ -59,6 +59,7 @@ require.config({
, "bootstrap-contextmenu": "../vendors/bootstrap/contextmenu/59986df48f/js/bootstrap-contextmenu"
, "underscore": "../vendors/lodash/0.9.0/lodash.underscore.min"
, "underscore-string": "../vendors/lodash/string/2.3.0/underscore.string.min"
, "backbone": "../vendors/backbone/0.9.2/backbone-min"
, "backbone-localstorage": "../vendors/backbone/localstorage/8651291560/backbone.localStorage-min"
@ -68,7 +69,6 @@ require.config({
, "text": "../vendors/require/plugins/text/f5816b565b/text"
, "async": "../vendors/async"
//, "config": "config"
}
, baseUrl: "/resources/js"

4
resources/js/views/app.js
Unescape View File

@ -10,6 +10,8 @@ define([
, "jquery"
, "backbone"
, "jquery-layout"
, "jquery-ui"
]
, function (_, $, Backbone) {
"use strict";
@ -45,6 +47,8 @@ define([
, west: {
size: 150
, closable: true
, fxName: "slider"
// TODO: fx does not work
}
, center: {

52
resources/js/views/browser.js
Unescape View File

@ -0,0 +1,52 @@
/*jslint laxbreak:true */
/*jslint laxcomma:true */
/*jslint loopfunc:true */
/*jslint strict:true */
/*jslint browser:true */
/*jslint devel:true */
define([
"underscore"
, "jquery"
, "backbone"
, "views/browser"
, "views/list"
, "text!../../templates/client/browser-layout.html"
, "jquery-layout"
]
, function (
_
, $
, Backbone
, BrowserView
, ListView
, tmplBrowserLayout
) {
"use strict";
var Browser = Backbone.View.extend({
client: null
, layout: null
, browserView: null
, listView: null
, initialize: function (client) {
var that = this
;
Browser.__super__.initialize.apply(that);
that.client = client;
}
});
return Browser;
});

76
resources/js/views/client.js
Unescape View File

@ -6,15 +6,85 @@
/*jslint devel:true */
define([
"jquery"
"underscore"
, "jquery"
, "backbone"
, "views/browser"
, "views/list"
, "text!../../templates/client/layout.html"
, "jquery-layout"
]
, function ($, Backbone) {
, function (
_
, $
, Backbone
, BrowserView
, ListView
, tmplClientLayout
) {
"use strict";
return Backbone.View.extend({
var Client = Backbone.View.extend({
el: $(tmplClientLayout)
, client: null
, layout: null
, browserView: null
, listView: null
, initialize: function (client) {
var that = this
, container = document.createElement("div")
;
that.el.id = "__view-" + client.attributes.hostname.replace(".", "_");
Client.__super__.initialize.apply(that);
that.client = client;
that.layout = that.$el.find("> div").layout({
defaults: {
closable: false
, resizable: true
, slidable: true
, spacing_open: 5
, spacing_closed: 5
}
, north: {
minSize: 100
, size: 200
, closable: true
}
, center: {
minSize: 200
}
});
that.browserView = new BrowserView({
el: that.layout.panes.north
, client: that.client
});
that.ListView = new ListView({
el: that.layout.panes.center
, client: that.client
});
}
});
return Client;
});
/*

59
resources/js/views/main.js
Unescape View File

@ -5,9 +5,64 @@
/*jslint browser:true */
/*jslint devel:true */
define([
"underscore"
, "jquery"
, "backbone"
, "views/list"
, "views/client"
]
, function () {
, function (
_
, $
, Backbone
, ListView
, ClientView
) {
"use strict";
return function() {};
var Main = Backbone.View.extend({
el: $("div#wrapperMain")
, children: {}
, initialize: function (playlistCollection) {
//this.setView("playlist", new ListView(playlistCollection));
Main.__super__.initialize.apply(this, arguments);
}
, setView: function (name, view) {
console.debug("Set view: "+ name);
this.children[name] = view;
}
, getView: function (name) {
return this.children[name];
}
, showView: function (name) {
console.debug("Show view: "+ name);
if (this.children[name] && this.children[name].$el) {
this.children[name].$el.show();
this.$el.append(this.children[name].$el);
}
}
, hideView: function (name) {
console.debug("Hide view: "+ name);
if (this.children[name] && this.children[name].$el) {
this.children[name].$el.hide();
this.$el.remove(this.children[name].$el);
}
}
, toggleView: function (name) {
if (this.children[name] && this.children[name].$el) {
this.children[name].$el.toggle();
}
}
});
return Main;
});

6
resources/js/views/sidebar.js
Unescape View File

@ -68,8 +68,8 @@ _
that.renderServerItem(server);
});
this.$el.delegate("> ul > li:first-child", "dblclick", function __fnSideBarEventDblclickPlaylist(event) {
Backbone.Router.prototype.navigate("playlist", false);
this.$el.delegate("> ul > li:first-child", "click", function __fnSideBarEventDblclickPlaylist(event) {
Backbone.Router.prototype.navigate("playlist", true);
setTimeout(function __fnSideBarViewTimeoutTogglePlaylistClass() {
that.$el.find("li.selected").removeClass("selected");
@ -204,7 +204,7 @@ console.log(event);
};
}(item));
$item.on("dblclick", function __fnSideBarViewEventDblClickItem(event) {
$item.on("click", function __fnSideBarViewEventDblClickItem(event) {
that.$el.find("li.selected").removeClass("selected");
$item.addClass("selected");
/*

2
resources/templates/app/modal-loading.html
Unescape View File

@ -4,7 +4,7 @@
data-show="true"
tabindex="-1" role="dialog">
<div class="modal-header">
<h4>Loading</h4>
<h4>Loading...</h4>
</div>
<div class="modal-body" style="padding: 10px 10px 0 10px;">
<div class="progress progress-striped">

16
resources/templates/client/layout.html
Unescape View File

@ -0,0 +1,16 @@
<div>
<div class="ui-layout-north row-fluid span12">
<div class="third">
<table cellpadding="0" cellspacing="0" border="0" class="table-genres"></table>
</div>
<div class="third">
<table cellpadding="0" cellspacing="0" border="0" class="table-artists"></table>
</div>
<div class="third">
<table cellpadding="0" cellspacing="0" border="0" class="table-albums"></table>
</div>
</div>
<div class="ui-layout-center">
<table cellpadding="0" cellspacing="0" border="0" class="table-list"></table>
</div>
</div>
Write Preview
Loading…
Cancel
Save