From 16f7b0364c66757aab4be1b121e916c5577d11fb Mon Sep 17 00:00:00 2001 From: Matthieu Lalonde Date: Thu, 8 Nov 2012 13:37:31 -0500 Subject: [PATCH] Maor commit messages... --- index.html | 38 +----- resources/css/app.css | 26 ++-- resources/js/app.js | 40 +++++- resources/js/collections/playlist.js | 2 +- resources/js/libs/utils.js | 4 + resources/js/models/client.js | 20 +-- resources/js/views/browser-items.js | 0 resources/js/views/browser-list.js | 36 +++++ resources/js/views/browser.js | 132 ++++++++++++++++--- resources/js/views/client.js | 36 ++++- resources/js/views/list.js | 90 ++++++++++--- resources/js/views/main.js | 58 +++++--- resources/js/views/sidebar.js | 41 +++++- resources/templates/client/browser-list.html | 3 + resources/templates/client/layout.html | 12 +- resources/templates/sidebar/layout.html | 35 +++++ 16 files changed, 438 insertions(+), 135 deletions(-) delete mode 100644 resources/js/views/browser-items.js create mode 100644 resources/js/views/browser-list.js create mode 100644 resources/templates/client/browser-list.html create mode 100644 resources/templates/sidebar/layout.html diff --git a/index.html b/index.html index 3c91c11..1aae1ec 100644 --- a/index.html +++ b/index.html @@ -48,43 +48,7 @@ -
- -
+
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 @@ -
-
-

" + this.type + "

-
-
-

" + this.type + "

-
-
-

" + this.type + "

-
-
+
\ 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 @@ + \ No newline at end of file