From 39bc55c93f6ab5f0481bc4808c5bae9a25f856da Mon Sep 17 00:00:00 2001 From: Matthieu Lalonde Date: Thu, 8 Nov 2012 15:03:20 -0500 Subject: [PATCH] Added playlist --- index.html | 2 ++ resources/css/app.css | 5 ++++ resources/js/app.js | 11 ++++++++- resources/js/main.js | 2 ++ resources/js/views/list.js | 50 ++++++++++++++++++++++++++------------ 5 files changed, 54 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 1aae1ec..5a9a0a2 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,8 @@ @import "/resources/vendors/bootstrap/2.1.1/css/bootstrap.min.css"; + @import "/resources/vendors/jquery/datatables/1.9.4/extras/ColReorder/media/css/ColReorder.css"; + @import "/resources/css/datatables.css"; @import "/resources/css/app.css"; @import "/resources/css/player.css"; diff --git a/resources/css/app.css b/resources/css/app.css index 050018b..3b8cca4 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -371,6 +371,7 @@ div#wrapperPlayer { } table.dataTable tbody tr.selected td, +div.drag-table-item table 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, @@ -397,6 +398,10 @@ body > .ui-layout-center > div > div.ui-layout-north > div.third > div.dataTable filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */ } +div.drag-table-item { + opacity: 0.8; +} + div#wrapperPlayer { background: url('../img/viewport_background.png') repeat-x; height: 50px; diff --git a/resources/js/app.js b/resources/js/app.js index 0fe2e99..a1e2a5b 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -70,7 +70,7 @@ _ , "servers/:server": "_routerActionClient" , "playlist/:item": "_routerActionPlaylistItem" , ":server/items/:item": "_routerActionServerItem" - //"*actions": "defaultRoute" // matches http://example.com/#anything-here + , "*actions": "_routerDefaultAction" // matches http://example.com/#anything-here } , historyStart: window.history.length @@ -86,6 +86,7 @@ _ , "_routerActionClient" , "_routerActionItem" , "_routerActionServerItem" + , "_routerDefaultAction" , "_serverInit" @@ -191,6 +192,7 @@ _ listItem = _.extend({}, listItem, { server: event.hostname , database: event.dbId + , order: new Date().toString() }); that.playlist.on("add", function __fnAppSavePlaylistModel(model) { @@ -218,6 +220,13 @@ _ return this; } + , _routerDefaultAction: function () { + var that = this + ; + + Backbone.Router.prototype.navigate("playlist", true); + } + , _routerActionAbout: function () { var that = this ; diff --git a/resources/js/main.js b/resources/js/main.js index 44e3fbe..60484b5 100644 --- a/resources/js/main.js +++ b/resources/js/main.js @@ -7,6 +7,7 @@ require.config({ "jquery-ui": ["jquery"] , "jquery-event-drag": ["jquery"] , "jquery-layout": ["jquery", "jquery-ui"] + , "jquery-clone-styles": ["jquery"] , "datatables": ["jquery"] @@ -62,6 +63,7 @@ require.config({ , "jquery-ui": "../vendors/jquery/ui/1.9.0/jquery-ui-all" , "jquery-event-drag": "../vendors/jquery/event-drag/2.2/jquery.event.drag" , "jquery-layout": "../vendors/jquery/layout/1.2.0/jquery.layout.min" + , "jquery-clone-styles": "../vendors/jquery/cloneStyles" , "datatables": "../vendors/jquery/datatables/1.9.4/media/js/jquery.dataTables.min" , "dt-scroller": "../vendors/jquery/datatables/1.9.4/extras/Scroller/media/js/dataTables.scroller.min" diff --git a/resources/js/views/list.js b/resources/js/views/list.js index 2bfc48d..1627ef2 100644 --- a/resources/js/views/list.js +++ b/resources/js/views/list.js @@ -14,6 +14,7 @@ define([ , "jquery-ui" , "jquery-event-drag" + , "jquery-clone-styles" , "datatables" , "dt-scroller" @@ -293,21 +294,22 @@ _ List.__super__.initialize.apply(this, arguments); - //this.$el.find("table:first").html("

" + this.type + "

"); - - this.$el.find("tr").draggable(); - this.$el.find("td").draggable(); - - if (that.options.type === "playlist") { + if (that.options.type === "playlist" && that.options.collection) { that.options.collection.fetch(); + that.options.collection.on("add", function __fnPlaylistAddRow(model) { + if (that.dataTable) { + that.dataTable.fnAddData(model.toJSON(), that.$el.is(":visible")); + } + }); } return this; } + // FIXME: Sometimes the parent element's size is 0 and resizing fails. , resize: function () { var that = this - , parentEl = that.options.parentEl//that.$el.parent() + , parentEl = that.options.parentEl || that.$el.parent() , parentWidth = parentEl.innerWidth() , parentHeight = parentEl.innerHeight() ; @@ -325,9 +327,7 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl , render: function () { var that = this , initialHeight = that.$el.innerHeight() - 20 - ; - - this.dataTable = this.$el.find("table:first").dataTable({ + , dataTableOpts = { sScrollY: initialHeight + "px" , sDom: "RTrtS" , oColReorder: { @@ -346,9 +346,6 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl //, bProcessing: true //, bServerSide: true - // Default sorting order - , aaSorting: [[2, "asc"], [6, "asc"], [3, "asc"], [5, "asc"], [4, "asc"]] - , aaData: that.collection.toJSON() , aoColumns: that.tableSchema @@ -382,6 +379,8 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl $(this) .closest("tr") .clone() + .css($(this).getStyleObject()) + .addClass("selected") ) .parent() ; @@ -403,8 +402,11 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl //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) { + console.log(sSource, aoData, fnCallback, settings); + } +/* // function used to populate the DataTable with the current // content of the collection var populateTable = function() @@ -440,7 +442,25 @@ console.log(parentWidth, that.$el.innerWidth(), parentHeight, that.$el, parentEl } } */ - }); + } + ; + + // Default sorting order + if (that.options.type !== "playlist") { + dataTableOpts.aaSorting = [[2, "asc"], [6, "asc"], [3, "asc"], [5, "asc"], [4, "asc"]]; + } else { + var schemaLastItem = (that.tableSchema.length - 1); + dataTableOpts.aaSorting = [[schemaLastItem, "asc"]]; + that.tableSchema[schemaLastItem].mData = "order"; + + for (var i = 0; i < schemaLastItem; i++) { + that.tableSchema[i].bSortable = false; + } + + dataTableOpts.aoColumns = that.tableSchema; + } + + this.dataTable = this.$el.find("table:first").dataTable(dataTableOpts); }