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);
}