diff --git a/index.html b/index.html
index 3c91c11..1aae1ec 100644
--- a/index.html
+++ b/index.html
@@ -48,43 +48,7 @@
-
-
- - Playlist
- -
-
- Servers
-
-
-
-
-
-
+
diff --git a/resources/css/app.css b/resources/css/app.css
index 8560c88..39fd52e 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -184,32 +184,32 @@ body > .ui-layout-center > div {
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%;
float: left;
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;
}
- body > .ui-layout-center > div > div.third:last-child {
+ body > .ui-layout-center > div > div.ui-layout-north > div.third:last-child {
clear: right;
}
- body > .ui-layout-center > div > 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,
+ body > .ui-layout-center > div > div.ui-layout-north > div.third > div.dataTables_wrapper {
border-left: 1px solid #C6C6C6;
}
- body > .ui-layout-center > div > div: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,
+ body > .ui-layout-center > div > div.ui-layout-north > div.third:first-child > div.dataTables_wrapper {
border-left: none;
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;
}
@@ -355,16 +355,16 @@ div.dataTables_scrollBody table tbody tr:last-child td {
div.dataTables_scrollHead table thead th.center,
div.dataTables_scrollBody table tbody td.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.sorting_1,
table.dataTable tbody tr.selected td.sorting_2,
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.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.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,
+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.ui-layout-north > 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_3,
.dropdown-menu * a:hover,
.dropdown-menu * a:focus,
.dropdown-menu * li:hover,
diff --git a/resources/js/app.js b/resources/js/app.js
index 2c8740a..0fe2e99 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -75,6 +75,10 @@ _
, historyStart: window.history.length
+ , playlist: null
+
+ , servers: null
+
, initialize: function() {
_.bindAll(this
, "_routerActionAbout"
@@ -154,10 +158,16 @@ _
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.App.toggleSideBar();
+ that.Views.Main.resizeView();
});
that.Views.Footer.on("toggle:random", function __fnAppEventTogglerRandom(event) {
@@ -170,6 +180,26 @@ _
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) {
$(event.target).remove();
});
@@ -226,7 +256,13 @@ _
, __fnAppEventClientInitited = function () {
client.fetchDatabases(function __fnAppCbFetchDatabases() {
client.fetchDatabase(function __fnAppCbFetchDatabase() {
- __fnAppEventClientLoaded();
+ client.fetchGenres(function __fnAppCbFetchGenres() {
+ client.fetchArtists(function __fnAppCbFetchArtists() {
+ client.fetchAlbums(function __fnAppCbFetchAlbums() {
+ __fnAppEventClientLoaded();
+ });
+ });
+ });
});
});
};
diff --git a/resources/js/collections/playlist.js b/resources/js/collections/playlist.js
index 43b8b76..e7cdccf 100644
--- a/resources/js/collections/playlist.js
+++ b/resources/js/collections/playlist.js
@@ -18,7 +18,7 @@ define([
var Server = Backbone.Collection.extend({
model: ServerModel
- , localStorage: new Backbone.LocalStorage("daap-servers")
+ , localStorage: new Backbone.LocalStorage("local-playlist")
, initialize: function () {
//_.bindAll(this, "");
diff --git a/resources/js/libs/utils.js b/resources/js/libs/utils.js
index 4047214..2293091 100644
--- a/resources/js/libs/utils.js
+++ b/resources/js/libs/utils.js
@@ -33,4 +33,8 @@ function songMSTimeFormat(v, record)
function songTimeFormat(v, record)
{
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);
}
\ No newline at end of file
diff --git a/resources/js/models/client.js b/resources/js/models/client.js
index 1862ca8..d8e90e7 100644
--- a/resources/js/models/client.js
+++ b/resources/js/models/client.js
@@ -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) {
if (_.isNumber(state)) {
this.trigger("state", this, state);
@@ -302,8 +303,6 @@ define([
this.setState("loading");
that.fetchXHR("/databases", function __fetchDatabasesCallback(content) {
- that.setState("loaded");
-
that.collections.databasesInfo = new DMAPModel(content, {
contentCodes: that.collections.contentCodes
});
@@ -311,6 +310,8 @@ define([
if (_.isFunction(success)) {
success(that.collections.databasesInfo);
}
+
+ that.setState("loaded");
}, error);
}
@@ -326,8 +327,6 @@ define([
this.setState("loading");
that.fetchXHR("/databases/" + dbId + "/items", function __fetchDatabaseCallback(content) {
- that.setState("loaded");
-
that.collections.databases[dbId] = new DMAPModel(content, {
contentCodes: that.collections.contentCodes
});
@@ -335,6 +334,8 @@ define([
if (_.isFunction(success)) {
success(that.collections.databases[dbId]);
}
+
+ that.setState("loaded");
}, error);
}
@@ -350,8 +351,6 @@ define([
this.setState("loading");
that.fetchXHR("/databases/" + dbId + "/containers", function __fetchPlaylistsCallback(content) {
- that.setState("loaded");
-
that.collections.playlistsInfo = new DMAPModel(content, {
contentCodes: that.collections.contentCodes
});
@@ -359,6 +358,8 @@ define([
if (_.isFunction(success)) {
success(that.collections.playlistsInfo);
}
+
+ that.setState("loaded");
}, error);
}
@@ -387,8 +388,6 @@ define([
this.setState("loading");
that.fetchXHR(requestUri, function __fetchPlaylistCallback(content) {
- that.setState("loaded");
-
if (!_.isArray(that.collections.playlists[dbId])) {
that.collections.playlists[dbId] = [];
}
@@ -400,6 +399,8 @@ define([
if (_.isFunction(success)) {
success(that.collections.playlists[dbId][playlistId]);
}
+
+ that.setState("loaded");
}, error);
}
@@ -424,7 +425,6 @@ define([
this.setState("loading");
that.fetchXHR(requestUri, function __fetchBrowseCallback(content) {
- that.setState("loaded");
that.collections.browser[type][dbId] = new DMAPModel(content, {
contentCodes: that.collections.contentCodes
@@ -433,6 +433,8 @@ define([
if (_.isFunction(success)) {
success(that.collections.browser[type][dbId]);
}
+
+ that.setState("loaded");
}, error);
}
diff --git a/resources/js/views/browser-items.js b/resources/js/views/browser-items.js
deleted file mode 100644
index e69de29..0000000
diff --git a/resources/js/views/browser-list.js b/resources/js/views/browser-list.js
new file mode 100644
index 0000000..4b4d64b
--- /dev/null
+++ b/resources/js/views/browser-list.js
@@ -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;
+});
\ No newline at end of file
diff --git a/resources/js/views/browser.js b/resources/js/views/browser.js
index 8119552..f26a598 100644
--- a/resources/js/views/browser.js
+++ b/resources/js/views/browser.js
@@ -10,11 +10,9 @@ define([
, "jquery"
, "backbone"
- , "views/browser"
- , "views/list"
-
- , "text!../../templates/client/browser-layout.html"
+ , "text!../../templates/client/browser-list.html"
+ // Plugins
, "jquery-layout"
]
, function (
@@ -22,28 +20,130 @@ _
, $
, Backbone
-, BrowserView
-, ListView
-
-, tmplBrowserLayout
+, tmplBrowserList
) {
"use strict";
- var Browser = Backbone.View.extend({
- client: null
+ var
+
+ 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: " "
+ , sZeroRecords: " "
+ }
+
+ , 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 (0)"
+ , 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
;
- Browser.__super__.initialize.apply(that);
- that.client = client;
+ that.$el.find(".dataTables_scrollBody").height(that.$el.innerHeight() - 20);
+ //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() + " (0)"
+ , 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();
}
});
diff --git a/resources/js/views/client.js b/resources/js/views/client.js
index 2b6b880..e01a753 100644
--- a/resources/js/views/client.js
+++ b/resources/js/views/client.js
@@ -44,6 +44,7 @@ _
, initialize: function (options) {
_.bindAll(this
, "_initLayout"
+ , "resize"
, "show"
, "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
, 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({
el: that.Layout.panes.center
+ , parentEl: that.$el
, collection: dbCollection
, 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 () {
var that = this
;
@@ -122,7 +144,8 @@ _
that.Layout.panes.north.show();
that.Layout.panes.center.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"));
}
@@ -133,7 +156,8 @@ _
that.Layout.panes.north.hide();
that.Layout.panes.center.hide();
that.Views.List.hide();
- this.$el.hide();
+ //that.Views.Browser.hide();
+ //this.$el.hide();
}
});
diff --git a/resources/js/views/list.js b/resources/js/views/list.js
index ae480ca..2bfc48d 100644
--- a/resources/js/views/list.js
+++ b/resources/js/views/list.js
@@ -31,7 +31,9 @@ _
"use strict";
var List = Backbone.View.extend({
- type: "playlist"
+ options: {
+ type: "playlist"
+ }
, dataTable: null
@@ -77,10 +79,10 @@ _
/*, sType: "numeric"*/
, sWidth: "75px"
, mRender: function(data, type, full) {
- if (data == "") {
+ if (data === "") {
return "";
} else if (full.daap_songtrackcount) {
- return data + " of " + full.daap_songtrackcount
+ return data + " of " + full.daap_songtrackcount;
} else {
return data;
}
@@ -94,10 +96,10 @@ _
/*, sType: "numeric"*/
, sWidth: "50px"
, mRender: function(data, type, full) {
- if (data == "") {
+ if (data === "") {
return "";
} else if (full.daap_songdisccount) {
- return data + " of " + full.daap_songdisccount
+ return data + " of " + full.daap_songdisccount;
} else {
return data;
}
@@ -127,7 +129,7 @@ _
, sWidth: "75px"
, bVisible: true
, mRender: function(data, type, full) {
- if (data != "") {
+ if (data !== "") {
return songMSTimeFormat(data);
} else {
return data;
@@ -178,7 +180,7 @@ _
, render: function(data, full) {
var value = data;
- if (data == "") {
+ if (data === "") {
value = "Unknown";
}
@@ -215,7 +217,7 @@ _
, field: "daap_songcompilation"
, defaults: "No"
, render: function (data, full) {
- return (data == 1 ? "Yes" : "No")
+ return (data == 1 ? "Yes" : "No");
}
}
, {
@@ -244,7 +246,7 @@ _
title: "Sample Rate"
, field: "daap_songsamplerate"
, render: function (data, full) {
- if (data != "") {
+ if (data !== "") {
if (data > 1000) {
data = (data / 1000) + "k";
}
@@ -295,14 +297,29 @@ _
this.$el.find("tr").draggable();
this.$el.find("td").draggable();
+
+ if (that.options.type === "playlist") {
+ that.options.collection.fetch();
+ }
+
return this;
}
- , resize: function (height) {
- var that = this
+ , resize: function () {
+ 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.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 () {
@@ -341,13 +358,52 @@ _
, sSelectedClass: "selected"
, aButtons: []
}
-/*
+
, 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 = $('')
+ .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
- var rowModel = that.collection.get(aData.id);
- view.rows.push(new DtRowView({id: aData.id, el: nRow, model: rowModel}));
+ //var rowModel = that.collection.get(aData.id);
+ //view.rows.push(new DtRowView({id: aData.id, el: nRow, model: rowModel}));
}
-
+/*
, fnServerData: function(sSource, aoData, fnCallback, settings) {
// function used to populate the DataTable with the current
// content of the collection
@@ -398,6 +454,8 @@ _
that.$el.show();
+ that.dataTable.fnDraw();
+
that.resize();
}
diff --git a/resources/js/views/main.js b/resources/js/views/main.js
index 844ccf5..50ce241 100644
--- a/resources/js/views/main.js
+++ b/resources/js/views/main.js
@@ -32,6 +32,7 @@ _
, "getView"
, "showView"
, "hideView"
+ , "resizeView"
//, "toggleView"
, "destroyView"
);
@@ -56,7 +57,23 @@ _
}
, 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) {
@@ -64,25 +81,13 @@ _
}
if (that.current) {
- that.hideView(that.current);
- }
-
- 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();
- }
+ that.hideView(that.current, __fnShow);
+ } else {
+ __fnShow();
}
}
- , hideView: function (name) {
+
+ , hideView: function (name, callback) {
var that = this
;
@@ -93,15 +98,26 @@ _
if (that.children[name].hide) {
that.children[name].hide();
- } else {
- that.children[name].$el.hide();
}
+ that.children[name].$el.hide();
+
setTimeout(function __fnTimeoutMainViewHide() {
- that.$el.find(that.children[name].$el).detach();
+ that.children[name].$el.detach();
+
+ return callback && callback();
}, 50);
}
}
+
+ , resizeView: function (name) {
+ var that = this
+ ;
+
+ if (that.current && that.children[that.current].resize) {
+ that.children[that.current].resize();
+ }
+ }
/*
, toggleView: function (name) {
var that = this
diff --git a/resources/js/views/sidebar.js b/resources/js/views/sidebar.js
index dce461c..8c72e06 100644
--- a/resources/js/views/sidebar.js
+++ b/resources/js/views/sidebar.js
@@ -16,8 +16,12 @@ define([
, "collections/server"
+ , "text!../../templates/sidebar/layout.html"
, "text!../../templates/sidebar/server-list-item.html"
, "text!../../templates/sidebar/modal-new-server.html"
+
+ // Plugins
+ , "jquery-ui"
]
, function (
_
@@ -30,6 +34,7 @@ _
, ServerCollection
+, tmplSideBarLayout
, tmplServerListItem
, tmplModalNewServer
) {
@@ -43,7 +48,15 @@ _
, router: null
, initialize: function (options) {
- _.bindAll(this, "renderServerItem", "_addServerItem", "_routerActionPlaylist", "_routerActionClient");
+ _.bindAll(this
+ , "renderServerItem"
+ , "changeServerItemState"
+ , "_addServerItem"
+ , "_routerActionPlaylist"
+ , "_routerActionClient"
+ , "_addPlaylistItem"
+ );
+
var that = this
, serverModel = null
;
@@ -52,6 +65,8 @@ _
this.servers = options.servers;
+ that.$el.html(tmplSideBarLayout);
+
async.forEach(this.servers, that.renderServerItem, function __fnSideBarViewCbInitialRender() {
that.trigger("rendered");
@@ -75,9 +90,14 @@ _
$(event.target).parents("ul:first").find("> li:first-child").addClass("selected");
}, 10);
});
-
- this.$el.find("> ul > li:first").droppable({
+/*
+$(TableTools.fnGetInstance("DataTables_Table_0").fnGetSelected()).draggable({scope: "list-item",helper: function () { return $('').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"
+ , 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) {
var that = this
, itemHtml = _.template(tmplServerListItem, {
@@ -206,6 +240,7 @@ console.log(event);
}
event.preventDefault();
+ return false;
};
}(item));
diff --git a/resources/templates/client/browser-list.html b/resources/templates/client/browser-list.html
new file mode 100644
index 0000000..b787f20
--- /dev/null
+++ b/resources/templates/client/browser-list.html
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/resources/templates/client/layout.html b/resources/templates/client/layout.html
index dc6b89e..70b448a 100644
--- a/resources/templates/client/layout.html
+++ b/resources/templates/client/layout.html
@@ -1,12 +1,2 @@
-
+
\ No newline at end of file
diff --git a/resources/templates/sidebar/layout.html b/resources/templates/sidebar/layout.html
new file mode 100644
index 0000000..8cb541a
--- /dev/null
+++ b/resources/templates/sidebar/layout.html
@@ -0,0 +1,35 @@
+
+ - Playlist
+ -
+
+ Servers
+
+
+
+
+
\ No newline at end of file