matth
/
daapr
1
0
Fork 0
Code Releases Activity

Maor commit messages...

Browse Source
master
Matthieu Lalonde 12 years ago
parent 4a4bb94047
commit 16f7b0364c
16 changed files with 438 additions and 135 deletions
Show Stats Download Patch File Download Diff File

38
index.html
Unescape View File

@ -48,43 +48,7 @@
</div> </div>
</div> </div>
<div class="ui-layout-west"> <div class="ui-layout-west"></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"></div> <div class="ui-layout-center" class="loading"></div>

26
resources/css/app.css
Unescape View File

@ -184,32 +184,32 @@ body > .ui-layout-center > div {
background: #FFF url(../img/grid3-hrow2.gif) repeat-x; background: #FFF url(../img/grid3-hrow2.gif) repeat-x;
} }
body > .ui-layout-center > div > div.third { body > .ui-layout-center > div > div.ui-layout-north > div.third {
width: 33.3333%; width: 33.3333%;
float: left; float: left;
clear: none; clear: none;
} }
body > .ui-layout-center > div > div.third:first-child { body > .ui-layout-center > div > div.ui-layout-north > div.third:first-child {
clear: left; clear: left;
} }
body > .ui-layout-center > div > div.third:last-child { body > .ui-layout-center > div > div.ui-layout-north > div.third:last-child {
clear: right; clear: right;
} }
body > .ui-layout-center > div > div.third > div.dataTables_wrapper, body > .ui-layout-center > div > div.ui-layout-north > div.third > div.dataTables_wrapper,
body > .ui-layout-center > div > div.third > div.dataTables_wrapper { body > .ui-layout-center > div > div.ui-layout-north > div.third > div.dataTables_wrapper {
border-left: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6;
} }
body > .ui-layout-center > div > div:first-child > div.dataTables_wrapper, body > .ui-layout-center > div > div.ui-layout-north > div.third:first-child > div.dataTables_wrapper,
body > .ui-layout-center > div > div:first-child > div.dataTables_wrapper { body > .ui-layout-center > div > div.ui-layout-north > div.third:first-child > div.dataTables_wrapper {
border-left: none; border-left: none;
padding-left: 1px; padding-left: 1px;
} }
body > .ui-layout-center > div > div.third > div.dataTables_wrapper table td { body > .ui-layout-center > div > div.ui-layout-north > div.third > div.dataTables_wrapper table td {
padding-left: 4px; padding-left: 4px;
} }
@ -355,16 +355,16 @@ div.dataTables_scrollBody table tbody tr:last-child td {
div.dataTables_scrollHead table thead th.center, div.dataTables_scrollHead table thead th.center,
div.dataTables_scrollBody table tbody td.center { div.dataTables_scrollBody table tbody td.center {
text-align: center; text-align: center;
} }body > .ui-layout-center > div > div.ui-layout-north > div.third
table.dataTable tbody tr.selected td, 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,
body > .ui-layout-center > div > div.third > div.dataTables_wrapper table tr.selected td, body > .ui-layout-center > div > div.ui-layout-north > div.third > div.dataTables_wrapper table tr.selected td,
body > .ui-layout-center > div > div.third > div.dataTables_wrapper table tr.selected td.sorting_1, body > .ui-layout-center > div > div.ui-layout-north > div.third > div.dataTables_wrapper table tr.selected td.sorting_1,
body > .ui-layout-center > div > div.third > div.dataTables_wrapper table tr.selected td.sorting_2, body > .ui-layout-center > div > div.ui-layout-north > div.third > div.dataTables_wrapper table tr.selected td.sorting_2,
body > .ui-layout-center > div > div.third > div.dataTables_wrapper table tr.selected td.sorting_3, body > .ui-layout-center > div > div.ui-layout-north > 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,

40
resources/js/app.js
Unescape View File

@ -75,6 +75,10 @@ _
, historyStart: window.history.length , historyStart: window.history.length
, playlist: null
, servers: null
, initialize: function() { , initialize: function() {
_.bindAll(this _.bindAll(this
, "_routerActionAbout" , "_routerActionAbout"
@ -154,10 +158,16 @@ _
el: that.Views.App.Layout.panes.center el: that.Views.App.Layout.panes.center
}); });
that.Views.Main.setView("playlist", new ListView()); that.Views.Playlist = new ListView({
collection: that.playlist
, type: "playlist"
});
that.Views.Main.setView("playlist", that.Views.Playlist);
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();
that.Views.Main.resizeView();
}); });
that.Views.Footer.on("toggle:random", function __fnAppEventTogglerRandom(event) { that.Views.Footer.on("toggle:random", function __fnAppEventTogglerRandom(event) {
@ -170,6 +180,26 @@ _
that.Views.Footer.on("show:about", that.__showModalAbout); that.Views.Footer.on("show:about", that.__showModalAbout);
that.Views.SideBar.on("add:playlist-item", function __fnAppEventPlaylistAddItem(event) {
var listItem = that.servers.get(event.hostname).client.collections.databases[event.dbId].get("dmap_listing").get(event.item).attributes
;
delete listItem._id;
listItem.id = event.hostname + ":" + event.dbId + ":" + event.item;
listItem = _.extend({}, listItem, {
server: event.hostname
, database: event.dbId
});
that.playlist.on("add", function __fnAppSavePlaylistModel(model) {
model.save();
});
that.playlist.add(listItem);
});
that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) { that.Views.App.$el.delegate("div.modal", "hidden", function __fnAppEventRemoveModals(event) {
$(event.target).remove(); $(event.target).remove();
}); });
@ -226,7 +256,13 @@ _
, __fnAppEventClientInitited = function () { , __fnAppEventClientInitited = function () {
client.fetchDatabases(function __fnAppCbFetchDatabases() { client.fetchDatabases(function __fnAppCbFetchDatabases() {
client.fetchDatabase(function __fnAppCbFetchDatabase() { client.fetchDatabase(function __fnAppCbFetchDatabase() {
__fnAppEventClientLoaded(); client.fetchGenres(function __fnAppCbFetchGenres() {
client.fetchArtists(function __fnAppCbFetchArtists() {
client.fetchAlbums(function __fnAppCbFetchAlbums() {
__fnAppEventClientLoaded();
});
});
});
}); });
}); });
}; };

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

@ -18,7 +18,7 @@ define([
var Server = Backbone.Collection.extend({ var Server = Backbone.Collection.extend({
model: ServerModel model: ServerModel
, localStorage: new Backbone.LocalStorage("daap-servers") , localStorage: new Backbone.LocalStorage("local-playlist")
, initialize: function () { , initialize: function () {
//_.bindAll(this, ""); //_.bindAll(this, "");

4
resources/js/libs/utils.js
Unescape View File

@ -34,3 +34,7 @@ function songTimeFormat(v, record)
{ {
return Math.floor(v / 60).toFixed().pad(2, "0") + ":" + (v % 60).toFixed().pad(2, "0"); return Math.floor(v / 60).toFixed().pad(2, "0") + ":" + (v % 60).toFixed().pad(2, "0");
} }
String.prototype.ucfirst = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}

20
resources/js/models/client.js
Unescape View File

@ -71,6 +71,7 @@ define([
} }
} }
// TODO: Many process should be able to set a state at the same time and it will change only when all of them are finoshed
, setState: function (state) { , setState: function (state) {
if (_.isNumber(state)) { if (_.isNumber(state)) {
this.trigger("state", this, state); this.trigger("state", this, state);
@ -302,8 +303,6 @@ define([
this.setState("loading"); this.setState("loading");
that.fetchXHR("/databases", function __fetchDatabasesCallback(content) { that.fetchXHR("/databases", function __fetchDatabasesCallback(content) {
that.setState("loaded");
that.collections.databasesInfo = new DMAPModel(content, { that.collections.databasesInfo = new DMAPModel(content, {
contentCodes: that.collections.contentCodes contentCodes: that.collections.contentCodes
}); });
@ -311,6 +310,8 @@ define([
if (_.isFunction(success)) { if (_.isFunction(success)) {
success(that.collections.databasesInfo); success(that.collections.databasesInfo);
} }
that.setState("loaded");
}, error); }, error);
} }
@ -326,8 +327,6 @@ define([
this.setState("loading"); this.setState("loading");
that.fetchXHR("/databases/" + dbId + "/items", function __fetchDatabaseCallback(content) { that.fetchXHR("/databases/" + dbId + "/items", function __fetchDatabaseCallback(content) {
that.setState("loaded");
that.collections.databases[dbId] = new DMAPModel(content, { that.collections.databases[dbId] = new DMAPModel(content, {
contentCodes: that.collections.contentCodes contentCodes: that.collections.contentCodes
}); });
@ -335,6 +334,8 @@ define([
if (_.isFunction(success)) { if (_.isFunction(success)) {
success(that.collections.databases[dbId]); success(that.collections.databases[dbId]);
} }
that.setState("loaded");
}, error); }, error);
} }
@ -350,8 +351,6 @@ define([
this.setState("loading"); this.setState("loading");
that.fetchXHR("/databases/" + dbId + "/containers", function __fetchPlaylistsCallback(content) { that.fetchXHR("/databases/" + dbId + "/containers", function __fetchPlaylistsCallback(content) {
that.setState("loaded");
that.collections.playlistsInfo = new DMAPModel(content, { that.collections.playlistsInfo = new DMAPModel(content, {
contentCodes: that.collections.contentCodes contentCodes: that.collections.contentCodes
}); });
@ -359,6 +358,8 @@ define([
if (_.isFunction(success)) { if (_.isFunction(success)) {
success(that.collections.playlistsInfo); success(that.collections.playlistsInfo);
} }
that.setState("loaded");
}, error); }, error);
} }
@ -387,8 +388,6 @@ define([
this.setState("loading"); this.setState("loading");
that.fetchXHR(requestUri, function __fetchPlaylistCallback(content) { that.fetchXHR(requestUri, function __fetchPlaylistCallback(content) {
that.setState("loaded");
if (!_.isArray(that.collections.playlists[dbId])) { if (!_.isArray(that.collections.playlists[dbId])) {
that.collections.playlists[dbId] = []; that.collections.playlists[dbId] = [];
} }
@ -400,6 +399,8 @@ define([
if (_.isFunction(success)) { if (_.isFunction(success)) {
success(that.collections.playlists[dbId][playlistId]); success(that.collections.playlists[dbId][playlistId]);
} }
that.setState("loaded");
}, error); }, error);
} }
@ -424,7 +425,6 @@ define([
this.setState("loading"); this.setState("loading");
that.fetchXHR(requestUri, function __fetchBrowseCallback(content) { that.fetchXHR(requestUri, function __fetchBrowseCallback(content) {
that.setState("loaded");
that.collections.browser[type][dbId] = new DMAPModel(content, { that.collections.browser[type][dbId] = new DMAPModel(content, {
contentCodes: that.collections.contentCodes contentCodes: that.collections.contentCodes
@ -433,6 +433,8 @@ define([
if (_.isFunction(success)) { if (_.isFunction(success)) {
success(that.collections.browser[type][dbId]); success(that.collections.browser[type][dbId]);
} }
that.setState("loaded");
}, error); }, error);
} }

0
resources/js/views/browser-items.js
Unescape View File

36
resources/js/views/browser-list.js
Unescape View File

@ -0,0 +1,36 @@
/*jslint laxbreak:true */
/*jslint laxcomma:true */
/*jslint loopfunc:true */
/*jslint strict:true */
/*jslint browser:true */
/*jslint devel:true */
define([
"underscore"
, "jquery"
, "backbone"
, "text!../../templates/client/browser-list.html"
, "jquery-layout"
]
, function (
_
, $
, Backbone
, tmplBrowserList
) {
"use strict";
var BrowserList = Backbone.View.extend({
initialize: function (options) {
var that = this
;
BrowserList.__super__.initialize.apply(that, arguments);
}
});
return BrowserList;
});

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

@ -10,11 +10,9 @@ define([
, "jquery" , "jquery"
, "backbone" , "backbone"
, "views/browser" , "text!../../templates/client/browser-list.html"
, "views/list"
, "text!../../templates/client/browser-layout.html"
// Plugins
, "jquery-layout" , "jquery-layout"
] ]
, function ( , function (
@ -22,28 +20,130 @@ _
, $ , $
, Backbone , Backbone
, BrowserView , tmplBrowserList
, ListView
, tmplBrowserLayout
) { ) {
"use strict"; "use strict";
var Browser = Backbone.View.extend({ var
client: null
defaultDataTableOpts = {
sDom: "TrtS"
, bInfo: false
, bLengthChange: false
, bAutoWidth: false
, bFilter: true
, bSort: false
//, aaSorting: [[0, "asc"]]
//, aaSortingFixed: [[0, "asc"]]
, bDeferRender: true
, bStateSave: false//true
, oLanguage: {
sEmptyTable: "&nbsp;"
, sZeroRecords: "&nbsp;"
}
, oTableTools: {
sRowSelect: "single"
, sSelectedClass: "selected"
, aButtons: []
//, fnRowSelected: function ( node ) {
// console.log( 'The row with ID '+node.id+' was selected', arguments );
//}
//, fnRowDeselected: function ( node ) {
// console.log( 'The row with ID '+node.id+' was deselected', arguments );
//}
}
/*
, aaData: _.map(that.collectionGenres, function (item) {
return [item];
})
*/
, aoColumns: [{
sTitle: "Genres (<span class=\"list-count\">0</span>)"
, sType: "string"
}]
//, fnDrawCallback: function (table) {
// $(table.nTableWrapper).find('span.list-count').text(table.aiDisplay.length);
//}
}
, layout: null , Browser = Backbone.View.extend({
dataTables: {}
, browserView: null , initialize: function (options) {
_.bindAll(this
, "resize"
, "render"
, "show"
, "hide"
);
, listView: null var that = this
;
Browser.__super__.initialize.apply(that, arguments);
that.render();
, initialize: function (client) { return this;
}
, resize: function () {
var that = this var that = this
; ;
Browser.__super__.initialize.apply(that); that.$el.find(".dataTables_scrollBody").height(that.$el.innerHeight() - 20);
that.client = client; //that.$el.find(".dataTables_scrollBody").width(that.$el.innerWidth());
}
, render: function () {
var that = this
;
_.each(that.options.collections, function __fnCbInitBrowserList(collection, name) {
console.log(name);
var tagName = "daap_browse"+name.replace(/s$/, '')+"listing"
, el = $(tmplBrowserList)
, dataTableOpts = _.extend(defaultDataTableOpts, {
sScrollY: (that.$el.innerHeight() - 20)+"px"//that.initialHeight + "px"
, aaData: _.map(collection.get(tagName), function (item) {
return [item];
})
, aoColumns: [{
sTitle: name.ucfirst() + " (<span class=\"list-count\">0</span>)"
, sType: "string"
}]
})
;
that.$el.append(el);
that.dataTables[name] = el.find("table:first").dataTable(dataTableOpts);
});
}
, show: function () {
var that = this
;
that.$el.show();
if (Object.keys(that.dataTables).length === 0) {
that.render();
} else {
_.each(that.dataTables, function __fnCbShowBrowserDataTableDraw(dataTable, name) {
dataTable.fnDraw();
});
}
that.resize();
}
, hide: function() {
this.$el.hide();
} }
}); });

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

@ -44,6 +44,7 @@ _
, initialize: function (options) { , initialize: function (options) {
_.bindAll(this _.bindAll(this
, "_initLayout" , "_initLayout"
, "resize"
, "show" , "show"
, "hide" , "hide"
); );
@ -96,21 +97,42 @@ _
} }
}); });
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 var dbId = that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id
, dbCollection = that.Server.client.collections.databases[dbId].get("dmap_listing") , dbCollection = that.Server.client.collections.databases[dbId].get("dmap_listing")
; ;
that.Views.Browser = new BrowserView({
el: that.Layout.panes.north
, parentEl: that.$el
, collections: {
genres: that.Server.client.collections.browser.genres[dbId]
, artists: that.Server.client.collections.browser.artists[dbId]
, albums: that.Server.client.collections.browser.albums[dbId]
}
});
that.Views.List = new ListView({ that.Views.List = new ListView({
el: that.Layout.panes.center el: that.Layout.panes.center
, parentEl: that.$el
, collection: dbCollection , collection: dbCollection
, type: "client" , type: "client"
, client: {
hostname: that.Server.client.attributes.hostname
, dbId: dbId
}
}); });
} }
, resize: function () {
var that = this
;
setTimeout(function __fnTimeoutClientResizeViews() {
that.Views.List.resize();
that.Views.Browser.resize();
}, 25);
}
, show: function () { , show: function () {
var that = this var that = this
; ;
@ -122,7 +144,8 @@ _
that.Layout.panes.north.show(); that.Layout.panes.north.show();
that.Layout.panes.center.show(); that.Layout.panes.center.show();
that.Views.List.show(); that.Views.List.show();
this.$el.show(); //that.Views.Browser.show();
//this.$el.show();
//console.debug(that.Server.client.collections.databases[that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing")); //console.debug(that.Server.client.collections.databases[that.Server.client.collections.databasesInfo.get("dmap_listing").at(0).id].get("dmap_listing"));
} }
@ -133,7 +156,8 @@ _
that.Layout.panes.north.hide(); that.Layout.panes.north.hide();
that.Layout.panes.center.hide(); that.Layout.panes.center.hide();
that.Views.List.hide(); that.Views.List.hide();
this.$el.hide(); //that.Views.Browser.hide();
//this.$el.hide();
} }
}); });

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

@ -31,7 +31,9 @@ _
"use strict"; "use strict";
var List = Backbone.View.extend({ var List = Backbone.View.extend({
type: "playlist" options: {
type: "playlist"
}
, dataTable: null , dataTable: null
@ -77,10 +79,10 @@ _
/*, sType: "numeric"*/ /*, sType: "numeric"*/
, sWidth: "75px" , sWidth: "75px"
, mRender: function(data, type, full) { , mRender: function(data, type, full) {
if (data == "") { if (data === "") {
return ""; return "";
} else if (full.daap_songtrackcount) { } else if (full.daap_songtrackcount) {
return data + " of " + full.daap_songtrackcount return data + " of " + full.daap_songtrackcount;
} else { } else {
return data; return data;
} }
@ -94,10 +96,10 @@ _
/*, sType: "numeric"*/ /*, sType: "numeric"*/
, sWidth: "50px" , sWidth: "50px"
, mRender: function(data, type, full) { , mRender: function(data, type, full) {
if (data == "") { if (data === "") {
return ""; return "";
} else if (full.daap_songdisccount) { } else if (full.daap_songdisccount) {
return data + " of " + full.daap_songdisccount return data + " of " + full.daap_songdisccount;
} else { } else {
return data; return data;
} }
@ -127,7 +129,7 @@ _
, sWidth: "75px" , sWidth: "75px"
, bVisible: true , bVisible: true
, mRender: function(data, type, full) { , mRender: function(data, type, full) {
if (data != "") { if (data !== "") {
return songMSTimeFormat(data); return songMSTimeFormat(data);
} else { } else {
return data; return data;
@ -178,7 +180,7 @@ _
, render: function(data, full) { , render: function(data, full) {
var value = data; var value = data;
if (data == "") { if (data === "") {
value = "Unknown"; value = "Unknown";
} }
@ -215,7 +217,7 @@ _
, field: "daap_songcompilation" , field: "daap_songcompilation"
, defaults: "No" , defaults: "No"
, render: function (data, full) { , render: function (data, full) {
return (data == 1 ? "Yes" : "No") return (data == 1 ? "Yes" : "No");
} }
} }
, { , {
@ -244,7 +246,7 @@ _
title: "Sample Rate" title: "Sample Rate"
, field: "daap_songsamplerate" , field: "daap_songsamplerate"
, render: function (data, full) { , render: function (data, full) {
if (data != "") { if (data !== "") {
if (data > 1000) { if (data > 1000) {
data = (data / 1000) + "k"; data = (data / 1000) + "k";
} }
@ -295,14 +297,29 @@ _
this.$el.find("tr").draggable(); this.$el.find("tr").draggable();
this.$el.find("td").draggable(); this.$el.find("td").draggable();
if (that.options.type === "playlist") {
that.options.collection.fetch();
}
return this; return this;
} }
, resize: function (height) { , resize: function () {
var that = this var that = this
, parentEl = that.options.parentEl//that.$el.parent()
, parentWidth = parentEl.innerWidth()
, parentHeight = parentEl.innerHeight()
; ;
console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl);
that.$el.find(".dataTables_scrollBody").height(that.$el.innerHeight() - 20); that.$el.find(".dataTables_scrollBody").height(that.$el.innerHeight() - 20);
that.$el.width(parentWidth);
that.$el.find(".dataTables_wrapper").width(parentWidth);
that.$el.find(".dataTables_scrollBody").width(parentWidth);
that.$el.find(".dataTables_scroll").width(parentWidth);
that.$el.find(".dataTables_scrollHeadInner").width(parentWidth);
that.$el.find(".dataTables_scrollHeadInner table").width(parentWidth);
that.$el.parent().find("span[resizer='north']").width(parentWidth);
} }
, render: function () { , render: function () {
@ -341,13 +358,52 @@ _
, sSelectedClass: "selected" , sSelectedClass: "selected"
, aButtons: [] , aButtons: []
} }
/*
, fnCreatedRow: function(nRow, aData, iDataIndex) { , fnCreatedRow: function(nRow, aData, iDataIndex) {
if (that.options.type !== "playlist") {
$(nRow).draggable({
scope: "list-item"
, cursor: "move"
, revert: "invalid"
, containment: "window"
, start: function(event, ui) {
$(this).fadeTo("fast", 0.5);
}
, stop: function(event, ui) {
$(this).fadeTo(0, 1);
}
, helper: function (event) {
var dragEl = $('<div class="drag-table-item"><table></table></div>')
.find("table")
.append(
$(this)
.closest("tr")
.clone()
)
.parent()
;
//console.debug("Extracting draggable", this, dragEl);
return dragEl.prependTo('body').css('zIndex',10000).show();
//return dragEl
// .appendTo("body")
// .css("zIndex", "5000")
// .show();
}
})
.data("hostname", that.options.client.hostname)
.data("dbId", that.options.client.dbId)
.data("item", aData.id)
;
}
// create a view for the row // create a view for the row
var rowModel = that.collection.get(aData.id); //var rowModel = that.collection.get(aData.id);
view.rows.push(new DtRowView({id: aData.id, el: nRow, model: rowModel})); //view.rows.push(new DtRowView({id: aData.id, el: nRow, model: rowModel}));
} }
/*
, fnServerData: function(sSource, aoData, fnCallback, settings) { , fnServerData: function(sSource, aoData, fnCallback, settings) {
// function used to populate the DataTable with the current // function used to populate the DataTable with the current
// content of the collection // content of the collection
@ -398,6 +454,8 @@ _
that.$el.show(); that.$el.show();
that.dataTable.fnDraw();
that.resize(); that.resize();
} }

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

@ -32,6 +32,7 @@ _
, "getView" , "getView"
, "showView" , "showView"
, "hideView" , "hideView"
, "resizeView"
//, "toggleView" //, "toggleView"
, "destroyView" , "destroyView"
); );
@ -56,7 +57,23 @@ _
} }
, showView: function (name) { , showView: function (name) {
var that = this var that = this
, __fnShow = function () {
that.current = name;
console.debug("Show view: "+ name);//, that.$el, that.children[name], that.children[name].$el);
if (that.children[name] && that.children[name].$el) {
if (that.$el.find(that.children[name].$el).length === 0) {
that.$el.append(that.children[name].$el);
}
if (that.children[name].show) {
that.children[name].show();
}
that.children[name].$el.show();
}
}
; ;
if (that.current === name) { if (that.current === name) {
@ -64,25 +81,13 @@ _
} }
if (that.current) { if (that.current) {
that.hideView(that.current); that.hideView(that.current, __fnShow);
} } else {
__fnShow();
that.current = name;
console.debug("Show view: "+ name);//, that.$el, that.children[name], that.children[name].$el);
if (that.children[name] && that.children[name].$el) {
if (that.$el.find(that.children[name].$el).length === 0) {
that.$el.append(that.children[name].$el);
}
if (that.children[name].show) {
that.children[name].show();
} else {
that.children[name].$el.show();
}
} }
} }
, hideView: function (name) {
, hideView: function (name, callback) {
var that = this var that = this
; ;
@ -93,15 +98,26 @@ _
if (that.children[name].hide) { if (that.children[name].hide) {
that.children[name].hide(); that.children[name].hide();
} else {
that.children[name].$el.hide();
} }
that.children[name].$el.hide();
setTimeout(function __fnTimeoutMainViewHide() { setTimeout(function __fnTimeoutMainViewHide() {
that.$el.find(that.children[name].$el).detach(); that.children[name].$el.detach();
return callback && callback();
}, 50); }, 50);
} }
} }
, resizeView: function (name) {
var that = this
;
if (that.current && that.children[that.current].resize) {
that.children[that.current].resize();
}
}
/* /*
, toggleView: function (name) { , toggleView: function (name) {
var that = this var that = this

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

@ -16,8 +16,12 @@ define([
, "collections/server" , "collections/server"
, "text!../../templates/sidebar/layout.html"
, "text!../../templates/sidebar/server-list-item.html" , "text!../../templates/sidebar/server-list-item.html"
, "text!../../templates/sidebar/modal-new-server.html" , "text!../../templates/sidebar/modal-new-server.html"
// Plugins
, "jquery-ui"
] ]
, function ( , function (
_ _
@ -30,6 +34,7 @@ _
, ServerCollection , ServerCollection
, tmplSideBarLayout
, tmplServerListItem , tmplServerListItem
, tmplModalNewServer , tmplModalNewServer
) { ) {
@ -43,7 +48,15 @@ _
, router: null , router: null
, initialize: function (options) { , initialize: function (options) {
_.bindAll(this, "renderServerItem", "_addServerItem", "_routerActionPlaylist", "_routerActionClient"); _.bindAll(this
, "renderServerItem"
, "changeServerItemState"
, "_addServerItem"
, "_routerActionPlaylist"
, "_routerActionClient"
, "_addPlaylistItem"
);
var that = this var that = this
, serverModel = null , serverModel = null
; ;
@ -52,6 +65,8 @@ _
this.servers = options.servers; this.servers = options.servers;
that.$el.html(tmplSideBarLayout);
async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() { async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() {
that.trigger("rendered"); that.trigger("rendered");
@ -75,9 +90,14 @@ _
$(event.target).parents("ul:first").find("> li:first-child").addClass("selected"); $(event.target).parents("ul:first").find("> li:first-child").addClass("selected");
}, 10); }, 10);
}); });
/*
this.$el.find("> ul > li:first").droppable({ $(TableTools.fnGetInstance("DataTables_Table_0").fnGetSelected()).draggable({scope: "list-item",helper: function () { return $('<div class="drag-table-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end().insertBefore("body > .ui-layout-west").appendTo("body");}});
*/
this.$el.find("> ul > li:first > span").droppable({
activeClass: "droppable" activeClass: "droppable"
, scope: "list-item"
, tolerance: "touch" // We really need this cause our items are much bigger than the droppable
, drop: that._addPlaylistItem
}); });
} }
@ -172,6 +192,20 @@ console.log(event);
}); });
} }
, _addPlaylistItem: function (event, ui) {
var that = this
, dropData = $(ui.draggable[0]).data()
, item = _.clone(dropData)
;
if (item.draggable) {
delete item.draggable;
delete item.uiDraggable;
}
that.trigger("add:playlist-item", item);
}
, renderServerItem: function (item) { , renderServerItem: function (item) {
var that = this var that = this
, itemHtml = _.template(tmplServerListItem, { , itemHtml = _.template(tmplServerListItem, {
@ -206,6 +240,7 @@ console.log(event);
} }
event.preventDefault(); event.preventDefault();
return false;
}; };
}(item)); }(item));

3
resources/templates/client/browser-list.html
Unescape View File

@ -0,0 +1,3 @@
<div class="third">
<table cellpadding="0" cellspacing="0" border="0"></table>
</div>

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

@ -1,12 +1,2 @@
<div class="ui-layout-north row-fluid span12"> <div class="ui-layout-north row-fluid span12"></div>
<div class="third">
<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"><tr><td><h1>" + this.type + "</h1></td></tr></table>
</div>
<div class="third">
<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"></div> <div class="ui-layout-center"></div>

35
resources/templates/sidebar/layout.html
Unescape View File

@ -0,0 +1,35 @@
<ul>
<li><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>
Write Preview
Loading…
Cancel
Save