matth
/
daapr
1
0
Fork 0
Code Releases Activity

Towards client panel

Browse Source
master
Matthieu Lalonde 12 years ago committed by xSmurf
parent 66d5e59f8e
commit 5219fbe781
10 changed files with 267 additions and 153 deletions
Show Stats Download Patch File Download Diff File

6
index.html
Unescape View File

@ -49,7 +49,6 @@
</div> </div>
<div class="ui-layout-west"> <div class="ui-layout-west">
<div id="wrapperSideBar">
<ul> <ul>
<li class="droppable"><span><i class="icon-list"></i>&nbsp;Playlist</span></li> <li class="droppable"><span><i class="icon-list"></i>&nbsp;Playlist</span></li>
<li> <li>
@ -86,11 +85,8 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div class="ui-layout-center" class="loading" id="wrapperMain">
</div> <div class="ui-layout-center" class="loading"></div>
<div class="ui-layout-south row-fluid" id="wrapperFooter"> <div class="ui-layout-south row-fluid" id="wrapperFooter">
<div id="wrapperFooterLeft" class="span4 row-fluid"> <div id="wrapperFooterLeft" class="span4 row-fluid">

91
resources/css/app.css
Unescape View File

@ -13,6 +13,7 @@ body {
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* /*
body.loading > * { body.loading > * {
display: none; display: none;
@ -31,7 +32,7 @@ body.loading > * {
.ui-layout-resizer { .ui-layout-resizer {
background: url('../img/viewport_background.png') repeat-x !important; background: url('../img/viewport_background.png') repeat-x !important;
cursor: row-resize !important;; cursor: row-resize !important;
} }
.ui-layout-toggler { .ui-layout-toggler {
@ -91,7 +92,7 @@ div#wrapperPlayer {
line-height: 21px; line-height: 21px;
} }
body > .ui-layout-west #wrapperSideBar { body > .ui-layout-west {
margin: 0; margin: 0;
padding: 0; padding: 0;
min-width: 100px; min-width: 100px;
@ -102,20 +103,20 @@ body > .ui-layout-west #wrapperSideBar {
height: 100%; height: 100%;
} }
body > .ui-layout-west > #wrapperSideBar ul, body > .ui-layout-west > ul,
body > .ui-layout-west > #wrapperSideBar ul li { body > .ui-layout-west > ul li {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
list-style-type: none; list-style-type: none;
} }
body > .ui-layout-west > #wrapperSideBar ul li { body > .ui-layout-west > ul li {
vertical-align: bottom; vertical-align: bottom;
margin-bottom: 5px; margin-bottom: 5px;
} }
body > .ui-layout-west > #wrapperSideBar ul li > span { body > .ui-layout-west > ul li > span {
display: block; display: block;
line-height: 16px; line-height: 16px;
height: 16px; height: 16px;
@ -124,7 +125,7 @@ body > .ui-layout-west > #wrapperSideBar ul li {
padding-left: 5px; padding-left: 5px;
} }
body > .ui-layout-west > #wrapperSideBar ul li > span > span { body > .ui-layout-west > ul li > span > span {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 16px; height: 16px;
@ -135,11 +136,11 @@ body > .ui-layout-west > #wrapperSideBar ul li {
vertical-align: middle; vertical-align: middle;
} }
body > .ui-layout-west > #wrapperSideBar ul li > span:hover { body > .ui-layout-west > ul li > span:hover {
color: #000; color: #000;
} }
body > .ui-layout-west > #wrapperSideBar ul li.selected > span { body > .ui-layout-west > ul li.selected > span {
color: #FFF; color: #FFF;
background-color: #4966B1;/* Old browsers */ background-color: #4966B1;/* Old browsers */
background: -moz-linear-gradient(top, #6086e5 0%, #6086e5 39%, #4966b1 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, #6086e5 0%, #6086e5 39%, #4966b1 100%); /* FF3.6+ */
@ -151,72 +152,80 @@ body > .ui-layout-west > #wrapperSideBar ul li {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */
} }
body > .ui-layout-west > #wrapperSideBar > ul > li:last-child > span:hover { body > .ui-layout-west > ul > li:last-child > span:hover {
background-color: transparent; background-color: transparent;
background: transparent; background: transparent;
color: #333; color: #333;
} }
body > .ui-layout-west > #wrapperSideBar ul li ul { body > .ui-layout-west > ul li ul {
margin-left: 10px; margin-left: 10px;
} }
body > .ui-layout-west > #wrapperSideBar ul li .sidebar-list-action { body > .ui-layout-west > ul li .sidebar-list-action {
display: none; display: none;
height: 14px; height: 14px;
} }
body > .ui-layout-west > #wrapperSideBar ul li > span:hover > .sidebar-list-action { body > .ui-layout-west > ul li > span:hover > .sidebar-list-action {
display: inline-block; display: inline-block;
} }
div#wrapperMain > div > div:first { body > .ui-layout-center > div {
height: 100%;
width: 100%;
overflow: hidden;
display: block;
}
body > .ui-layout-center > div > div:first {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #FFF url(../img/grid3-hrow2.gif) repeat-x; background: #FFF url(../img/grid3-hrow2.gif) repeat-x;
} }
div#wrapperMain > div > div:first > div.third {
body > .ui-layout-center > div > div:first > div.third {
width: 33.3333%; width: 33.3333%;
float: left; float: left;
clear: none; clear: none;
} }
div#wrapperMain > div > div:first > div.third:first-child { body > .ui-layout-center > div > div:first > div.third:first-child {
clear: left; clear: left;
} }
div#wrapperMain > div > div:first > div.third:last-child { body > .ui-layout-center > div > div:first > div.third:last-child {
clear: right; clear: right;
} }
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper, body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper { body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper {
border-left: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6;
} }
div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper, body > .ui-layout-center > div > div:first > div:first-child > div.dataTables_wrapper,
div#wrapperMain > div > div:first > div:first-child > div.dataTables_wrapper { body > .ui-layout-center > div > div:first > div:first-child > div.dataTables_wrapper {
border-left: none; border-left: none;
padding-left: 1px; padding-left: 1px;
} }
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table td { body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table td {
padding-left: 4px; padding-left: 4px;
} }
div#wrapperMain > div > div:first table.dataTable tr td.sorting_1 { background-color: transparent; } body > .ui-layout-center > 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; } body > .ui-layout-center > 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; } body > .ui-layout-center > div > div:first table.dataTable tr td.sorting_3 { background-color: transparent; }
div#wrapperList { .ui-layout-center .client-view-container {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
background: #FFF url(../img/grid3-hrow2.gif) repeat-x; background: #FFF url(../img/grid3-hrow2.gif) repeat-x;
} }
div#wrapperList table#tableList { .ui-layout-center .client-view-container table.table-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
@ -237,14 +246,14 @@ div#wrapperList {
} }
/* /*
div#wrapperList table#tableList tr td { .ui-layout-center .client-view-container table.table-list tr td {
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 20%; max-width: 20%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
*/ */
div#wrapperFooter { body > .ui-layout-south {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: url('../img/viewport_background.png') repeat-x left bottom; background: url('../img/viewport_background.png') repeat-x left bottom;
@ -252,21 +261,21 @@ div#wrapperFooter {
height: 30px; height: 30px;
line-height: 25px; line-height: 25px;
} }
div#wrapperFooter .btn-inverse { body > .ui-layout-south .btn-inverse {
line-height: 12px; line-height: 12px;
} }
div#wrapperFooter > div#wrapperFooterRight { body > .ui-layout-south > div#wrapperFooterRight {
text-align: right; text-align: right;
padding-right: 10px; padding-right: 10px;
padding-top: 3px; padding-top: 3px;
} }
div#wrapperFooter > div#wrapperFooterRight div.btn-group { body > .ui-layout-south > div#wrapperFooterRight div.btn-group {
height: 25px; height: 25px;
} }
div#wrapperFooter > div#wrapperFooterLeft { body > .ui-layout-south > div#wrapperFooterLeft {
text-align: left; text-align: left;
padding-left: 10px; padding-left: 10px;
padding-top: 2px; padding-top: 2px;
@ -335,7 +344,7 @@ div.dataTables_scrollHeadInner th {
border: none; border: none;
} }
div#wrapperMain > div > div:first div.dataTables_scrollHeadInner th { body > .ui-layout-center > div > div:first div.dataTables_scrollHeadInner th {
padding-left: 4px; padding-left: 4px;
} }
@ -352,10 +361,10 @@ table.dataTable tbody tr.selected td,
table.dataTable tbody tr.selected td.sorting_1, table.dataTable tbody tr.selected td.sorting_1,
table.dataTable tbody tr.selected td.sorting_2, table.dataTable tbody tr.selected td.sorting_2,
table.dataTable tbody tr.selected td.sorting_3, table.dataTable tbody tr.selected td.sorting_3,
div#wrapperMain > div > div:first > div.third > div.dataTables_wrapper table tr.selected td, body > .ui-layout-center > 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, body > .ui-layout-center > 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, body > .ui-layout-center > 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, body > .ui-layout-center > div > div:first > div.third > div.dataTables_wrapper table tr.selected td.sorting_3,
.dropdown-menu * a:hover, .dropdown-menu * a:hover,
.dropdown-menu * a:focus, .dropdown-menu * a:focus,
.dropdown-menu * li:hover, .dropdown-menu * li:hover,
@ -380,10 +389,10 @@ div#wrapperPlayer {
height: 50px; height: 50px;
} }
div#wrapperFooter, body > .ui-layout-south,
table.dataTable tr td, table.dataTable tr td,
table.dataTable tr th, table.dataTable tr th,
div#wrapperSideBar, body > .ui-layout-west,
div#wrapperPlayer { div#wrapperPlayer {
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;

29
resources/js/app.js
Unescape View File

@ -123,11 +123,26 @@ _
, function __asyncAppDependenciesReady(err, result) { , function __asyncAppDependenciesReady(err, result) {
that.Views = {}; that.Views = {};
that.Views.SideBar = new SideBarView(that.servers);
that.Views.Player = new PlayerView();
that.Views.Main = new MainView();
that.Views.App = new AppView(); that.Views.App = new AppView();
that.Views.Footer = new FooterView();
that.Views.SideBar = new SideBarView({
el: that.Views.App.Layout.panes.west
, servers: that.servers
});
that.Views.Player = new PlayerView({
el: that.Views.App.Layout.panes.north
});
that.Views.Footer = new FooterView({
el: that.Views.App.Layout.panes.south
});
that.Views.Main = new MainView({
el: that.Views.App.Layout.panes.center
});
// TODO: Add playlist view here
that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) { that.Views.Footer.on("toggle:sidebar", function __fnAppEventTogglerSiderBar(event) {
that.Views.App.toggleSideBar(); that.Views.App.toggleSideBar();
@ -178,7 +193,11 @@ _
if (client) { if (client) {
var __fnAppEventClientLoaded = function () { var __fnAppEventClientLoaded = function () {
if (!that.Views.Main.getView(server.get("hostname"))) { if (!that.Views.Main.getView(server.get("hostname"))) {
that.Views.Main.setView(server.client.attributes.hostname, new ClientView(server.client)); that.Views.Main.setView(server.client.attributes.hostname, new ClientView({
/*el: that.Views.App.Layout.panes.center
, */server: server
, aoppendEl: that.Views.App.Layout.panes.center
}));
} }
that.Views.Main.showView(server.get("hostname")); that.Views.Main.showView(server.get("hostname"));

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

@ -19,7 +19,7 @@ define([
return Backbone.View.extend({ return Backbone.View.extend({
el: $("body") el: $("body")
, layout: null , Layout: null
, layoutItems: null , layoutItems: null
, events: { , events: {
@ -30,7 +30,7 @@ define([
var that = this; var that = this;
that.layout = that.$el.layout({ that.Layout = that.$el.layout({
//applyDefaultStyles: true //applyDefaultStyles: true
defaults: { defaults: {
closable: false closable: false
@ -62,7 +62,7 @@ define([
} }
, toggleSideBar: function () { , toggleSideBar: function () {
this.layout.toggle("west"); this.Layout.toggle("west");
} }
}); });
}); });

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

@ -30,28 +30,59 @@ _
"use strict"; "use strict";
var Client = Backbone.View.extend({ var Client = Backbone.View.extend({
el: $(tmplClientLayout) id: null
, client: null , el: $(tmplClientLayout)
, layout: null , Server: null
, browserView: null , Layout: null
, listView: null , Views: {}
, initialize: function (options) {
_.bindAll(this
, "show"
, "hide"
);
, initialize: function (client) {
var that = this var that = this
, container = document.createElement("div") , appendEl = options.appendEl
; ;
that.el.id = "__view-" + client.attributes.hostname.replace(".", "_");
Client.__super__.initialize.apply(that); that.Server = options.server;
delete options.server;
delete options.appendEl;
Client.__super__.initialize.apply(that, arguments);
that.client = client; that.el.id = "__view-" + that.Server.client.attributes.hostname.replace(".", "_");
that.id = that.Server.client.attributes.hostname;
/*
that.Views.Browser = new BrowserView(that.Client, {
el: that.Layout.panes.north
});
var dbId = that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id
, dbCollection = that.Server.client.collections.databases[dbId].get("dmap_listing")
;
that.Views.List = new ListView(dbCollection, {
el: that.Layout.panes.center
, type: "client"
});
*/
}
that.layout = that.$el.find("> div").layout({ , show: function () {
var that = this
;
that.Layout = that.$el.layout({
defaults: { defaults: {
closable: false closable: false
, resizable: true , resizable: true
@ -70,16 +101,12 @@ _
minSize: 200 minSize: 200
} }
}); });
//console.debug(that.Server.client.collections.databases[that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing"));
}
that.browserView = new BrowserView({ , hide: function () {
el: that.layout.panes.north var that = this
, client: that.client ;
});
that.ListView = new ListView({
el: that.layout.panes.center
, client: that.client
});
} }
}); });

12
resources/js/views/footer.js
Unescape View File

@ -15,17 +15,17 @@ define([
, function (_, $, Backbone, Bootstrap, tmplModalAbout) { , function (_, $, Backbone, Bootstrap, tmplModalAbout) {
"use strict"; "use strict";
var View = Backbone.View.extend({ var Footer = Backbone.View.extend({
el: $("div#wrapperFooter") events: {
, events: {
"click button[data-target='modalAboutDaapr']": "_buttonAboutClick" "click button[data-target='modalAboutDaapr']": "_buttonAboutClick"
} }
, initialize: function () { , initialize: function (options) {
var that = this var that = this
; ;
Footer.__super__.initialize.apply(that, arguments);
that.$el.delegate("button[data-toggle='side-bar']", "click", function (event) { that.$el.delegate("button[data-toggle='side-bar']", "click", function (event) {
that.trigger("toggle:sidebar"); that.trigger("toggle:sidebar");
@ -48,5 +48,5 @@ define([
} }
}); });
return View; return Footer;
}); });

21
resources/js/views/list.js
Unescape View File

@ -12,7 +12,26 @@ define([
, function ($, Backbone, Bootstrap) { , function ($, Backbone, Bootstrap) {
"use strict"; "use strict";
return Backbone.View.extend({ var List = Backbone.View.extend({
el: $("table")
, type: "playlist"
, initialize: function (collection, options) {
this.$el = $(options.el).find("table:first");
this.type = options.type || "playlist";
List.__super__.initialize.apply(this, arguments);
this.$el.html("<tr><td><h1>" + this.type + "</h1></td></tr>");
return this;
}
, render: function () {
return this.$el;
}
}); });
return List;
}); });

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

@ -23,45 +23,88 @@ _
"use strict"; "use strict";
var Main = Backbone.View.extend({ var Main = Backbone.View.extend({
el: $("div#wrapperMain") children: {}
, children: {} , initialize: function (options) {
_.bindAll(this
, initialize: function (playlistCollection) { , "setView"
//this.setView("playlist", new ListView(playlistCollection)); , "getView"
, "showView"
, "hideView"
, "toggleView"
, "destroyView"
);
//that.setView("playlist", new ListView(playlistCollection));
Main.__super__.initialize.apply(this, arguments); Main.__super__.initialize.apply(this, arguments);
console.log(this.el);
} }
, setView: function (name, view) { , setView: function (name, view) {
console.debug("Set view: "+ name); var that = this
this.children[name] = view; ;
console.debug("Set view: "+ name, view);
that.children[name] = view;
} }
, getView: function (name) { , getView: function (name) {
return this.children[name]; var that = this
;
return that.children[name];
} }
, showView: function (name) { , showView: function (name) {
console.debug("Show view: "+ name); var that = this
if (this.children[name] && this.children[name].$el) { ;
this.children[name].$el.show();
this.$el.append(this.children[name].$el); console.debug("Show view: "+ name, that.$el, that.children[name], that.children[name].$el);
if (that.children[name] && that.children[name].$el) {
that.$el.append(that.children[name].$el);
if (that.children[name].show) {
setTimeout(function __fnTimeoutMainViewShow() {
that.children[name].show();
}, 50);
} else {
setTimeout(function __fnTimeoutMainViewShow() {
that.children[name].$el.show();
}, 50);
}
} }
} }
, hideView: function (name) { , hideView: function (name) {
var that = this
;
console.debug("Hide view: "+ name); console.debug("Hide view: "+ name);
if (this.children[name] && this.children[name].$el) { if (that.children[name] && that.children[name].$el) {
this.children[name].$el.hide(); if (that.children[name].hide) {
this.$el.remove(this.children[name].$el); that.children[name].hide();
} else {
that.children[name].$el.hide();
}
setTimeout(function __fnTimeoutMainViewHide() {
that.$el.remove(that.children[name].$el);
}, 50);
} }
} }
, toggleView: function (name) { , toggleView: function (name) {
if (this.children[name] && this.children[name].$el) { var that = this
this.children[name].$el.toggle(); ;
if (that.children[name] && that.children[name].$el) {
that.children[name].$el.toggle();
} }
} }
, destroyView: function (name) {
}
}); });
return Main; return Main;

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

@ -35,23 +35,22 @@ _
) { ) {
"use strict"; "use strict";
return Backbone.View.extend({ var SideBar = Backbone.View.extend({
el: $("div#wrapperSideBar") events: {
, elServerList: $("div#wrapperSideBar ul.siderbar-server-list")
, events: {
"click > ul > li:last-child > span > a.sidebar-list-action": "_addServerItem" "click > ul > li:last-child > span > a.sidebar-list-action": "_addServerItem"
} }
, router: null , router: null
, initialize: function (servers) { , initialize: function (options) {
_.bindAll(this, "renderServerItem", "_addServerItem", "_routerActionPlaylist", "_routerActionClient"); _.bindAll(this, "renderServerItem", "_addServerItem", "_routerActionPlaylist", "_routerActionClient");
var that = this var that = this
, serverModel = null , serverModel = null
; ;
this.servers = servers; SideBar.__super__.initialize.apply(that, arguments);
this.servers = options.servers;
async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() { async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() {
that.trigger("rendered"); that.trigger("rendered");
@ -178,7 +177,7 @@ console.log(event);
, $item = $(itemHtml) , $item = $(itemHtml)
; ;
this.elServerList.append($item); this.$el.find("ul:first > li > ul.siderbar-server-list").append($item);
item.on("change", function __fnSideBarViewClientItemChanged(event) { item.on("change", function __fnSideBarViewClientItemChanged(event) {
if (event.get("name")) { if (event.get("name")) {
@ -250,4 +249,6 @@ console.log(event);
$glyph.addClass(newClass); $glyph.addClass(newClass);
} }
}); });
return SideBar;
}); });

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

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