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

76
index.html
Unescape View File

@ -49,48 +49,44 @@
</div>
<div class="ui-layout-west">
<div id="wrapperSideBar">
<ul>
<li class="droppable"><span><i class="icon-list"></i>&nbsp;Playlist</span></li>
<li>
<span>
<i class="icon-home"></i>&nbsp;<span>Servers</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-plus-sign"></i></a>
</span>
<ul class="siderbar-server-list">
<!--li>
<span>
<i class="icon-folder-close"></i>&nbsp;<span>Bigthug</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
</span>
</li>
<li>
<span>
<i class="icon-folder-close"></i>&nbsp;<span>WebDevTest</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
</span>
</li>
<li>
<span>
<i class="icon-folder-close"></i>&nbsp;<span>ReallyLongNameWithNoBreaks</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
</span>
</li>
<li>
<span>
<i class="icon-folder-close"></i>&nbsp;<span>Really Long Name Breaks</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
</span>
</li-->
</ul>
</li>
</ul>
</div>
<ul>
<li class="droppable"><span><i class="icon-list"></i>&nbsp;Playlist</span></li>
<li>
<span>
<i class="icon-home"></i>&nbsp;<span>Servers</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-plus-sign"></i></a>
</span>
<ul class="siderbar-server-list">
<!--li>
<span>
<i class="icon-folder-close"></i>&nbsp;<span>Bigthug</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
</span>
</li>
<li>
<span>
<i class="icon-folder-close"></i>&nbsp;<span>WebDevTest</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
</span>
</li>
<li>
<span>
<i class="icon-folder-close"></i>&nbsp;<span>ReallyLongNameWithNoBreaks</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
</span>
</li>
<li>
<span>
<i class="icon-folder-close"></i>&nbsp;<span>Really Long Name Breaks</span>
<a href="javascript:void(0);" class="sidebar-list-action"><i class="icon-minus-sign"></i></a>
</span>
</li-->
</ul>
</li>
</ul>
</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 id="wrapperFooterLeft" class="span4 row-fluid">

101
resources/css/app.css
Unescape View File

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

29
resources/js/app.js
Unescape View File

@ -123,11 +123,26 @@ _
, function __asyncAppDependenciesReady(err, result) {
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.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.App.toggleSideBar();
@ -178,7 +193,11 @@ _
if (client) {
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.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"));

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

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

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

@ -30,28 +30,59 @@ _
"use strict";
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 (client) {
var that = this
, container = document.createElement("div")
, initialize: function (options) {
_.bindAll(this
, "show"
, "hide"
);
var that = this
, 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.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
});
that.client = client;
var dbId = that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id
, dbCollection = that.Server.client.collections.databases[dbId].get("dmap_listing")
;
that.layout = that.$el.find("> div").layout({
that.Views.List = new ListView(dbCollection, {
el: that.Layout.panes.center
, type: "client"
});
*/
}
, show: function () {
var that = this
;
that.Layout = that.$el.layout({
defaults: {
closable: false
, resizable: true
@ -70,16 +101,12 @@ _
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({
el: that.layout.panes.north
, client: that.client
});
that.ListView = new ListView({
el: that.layout.panes.center
, client: that.client
});
, hide: function () {
var that = this
;
}
});

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

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

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

@ -12,7 +12,26 @@ define([
, function ($, Backbone, Bootstrap) {
"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";
var Main = Backbone.View.extend({
el: $("div#wrapperMain")
children: {}
, children: {}
, initialize: function (playlistCollection) {
//this.setView("playlist", new ListView(playlistCollection));
, initialize: function (options) {
_.bindAll(this
, "setView"
, "getView"
, "showView"
, "hideView"
, "toggleView"
, "destroyView"
);
//that.setView("playlist", new ListView(playlistCollection));
Main.__super__.initialize.apply(this, arguments);
console.log(this.el);
}
, setView: function (name, view) {
console.debug("Set view: "+ name);
this.children[name] = view;
var that = this
;
console.debug("Set view: "+ name, view);
that.children[name] = view;
}
, getView: function (name) {
return this.children[name];
var that = this
;
return that.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);
var that = this
;
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) {
var that = this
;
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);
if (that.children[name] && that.children[name].$el) {
if (that.children[name].hide) {
that.children[name].hide();
} else {
that.children[name].$el.hide();
}
setTimeout(function __fnTimeoutMainViewHide() {
that.$el.remove(that.children[name].$el);
}, 50);
}
}
, toggleView: function (name) {
if (this.children[name] && this.children[name].$el) {
this.children[name].$el.toggle();
var that = this
;
if (that.children[name] && that.children[name].$el) {
that.children[name].$el.toggle();
}
}
, destroyView: function (name) {
}
});
return Main;

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

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