You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
408 lines
8.0 KiB
408 lines
8.0 KiB
/*jslint laxbreak:true */
|
|
/*jslint laxcomma:true */
|
|
/*jslint loopfunc:true */
|
|
/*jslint strict:true */
|
|
/*jslint browser:true */
|
|
/*jslint devel:true */
|
|
define([
|
|
"underscore"
|
|
, "jquery"
|
|
, "backbone"
|
|
, "bootstrap"
|
|
|
|
, "text!../../templates/view-list.html"
|
|
|
|
, "jquery-ui"
|
|
, "jquery-event-drag"
|
|
|
|
, "datatables"
|
|
, "dt-scroller"
|
|
, "dt-tabletools"
|
|
, "dt-colreorder"
|
|
]
|
|
, function (
|
|
_
|
|
, $
|
|
, Backbone
|
|
, Bootstrap
|
|
|
|
, tmplListView
|
|
) {
|
|
"use strict";
|
|
|
|
var List = Backbone.View.extend({
|
|
type: "playlist"
|
|
|
|
, dataTable: null
|
|
|
|
, tableSchemaDefaults: {
|
|
|
|
}
|
|
|
|
, tableSchema: [
|
|
{ // Now playing column
|
|
mData: null
|
|
, sTitle: ""
|
|
, sDefaultContent: ""
|
|
, bSortable: false
|
|
, bSearchable: false
|
|
, sWidth: "15px"
|
|
, fnCreatedCell: function(nTd, sData, oData, iRow, iCol) {
|
|
var span = document.createElement("span");
|
|
nTd.appendChild(span);
|
|
}
|
|
}
|
|
, {
|
|
mData: "dmap_itemname"
|
|
, sTitle: "Title"
|
|
, sDefaultContent: "Unknown"
|
|
}
|
|
, {
|
|
mData: "daap_songartist"
|
|
, sTitle: "Artist"
|
|
, sDefaultContent: "Unknown"
|
|
, aDataSort: [2, 6, 3, 5, 4]
|
|
}
|
|
, {
|
|
mData: "daap_songalbum"
|
|
, sTitle: "Album"
|
|
, sDefaultContent: "Unknown"
|
|
, aDataSort: [3, 6, 5, 4]
|
|
}
|
|
, {
|
|
mData: "daap_songtracknumber"
|
|
, sTitle: "Track"
|
|
, sClass: "center"
|
|
, sDefaultContent: ""
|
|
/*, sType: "numeric"*/
|
|
, sWidth: "75px"
|
|
, mRender: function(data, type, full) {
|
|
if (data == "") {
|
|
return "";
|
|
} else if (full.daap_songtrackcount) {
|
|
return data + " of " + full.daap_songtrackcount
|
|
} else {
|
|
return data;
|
|
}
|
|
}
|
|
}
|
|
, {
|
|
mData: "daap_songdiscnumber"
|
|
, sTitle: "Disc"
|
|
, sClass: "center"
|
|
, sDefaultContent: "Unknown"
|
|
/*, sType: "numeric"*/
|
|
, sWidth: "50px"
|
|
, mRender: function(data, type, full) {
|
|
if (data == "") {
|
|
return "";
|
|
} else if (full.daap_songdisccount) {
|
|
return data + " of " + full.daap_songdisccount
|
|
} else {
|
|
return data;
|
|
}
|
|
}
|
|
}
|
|
, {
|
|
mData: "daap_songyear"
|
|
, sTitle: "Year"
|
|
, sClass: "center"
|
|
, sDefaultContent: ""
|
|
, sType: "numeric"
|
|
, sWidth: "50px"
|
|
}
|
|
, {
|
|
mData: "daap_songgenre"
|
|
, sTitle: "Genre"
|
|
, sClass: "center"
|
|
, sDefaultContent: ""
|
|
, bVisible: false
|
|
}
|
|
, {
|
|
mData: "daap_songtime"
|
|
, sTitle: "Time"
|
|
, sClass: "center"
|
|
, sDefaultContent: ""
|
|
/*, sType: "numeric"*/
|
|
, sWidth: "75px"
|
|
, bVisible: true
|
|
, mRender: function(data, type, full) {
|
|
if (data != "") {
|
|
return songMSTimeFormat(data);
|
|
} else {
|
|
return data;
|
|
}
|
|
}
|
|
}
|
|
, {
|
|
mData: "daap_songuserrating"
|
|
, sTitle: "Rating"
|
|
, sClass: "center"
|
|
, sType: "numeric"
|
|
, sDefaultContent: ""
|
|
, bVisible: false
|
|
}
|
|
, {
|
|
mData: "dmap_itemid"
|
|
, sTitle: "ID"
|
|
, sClass: "center"
|
|
, sDefaultContent: ""
|
|
, bVisible: false
|
|
}
|
|
]
|
|
|
|
, detailsFields: [
|
|
{
|
|
title: "Title"
|
|
, field: "dmap_itemname"
|
|
}
|
|
, {
|
|
title: "Artist"
|
|
, field: "daap_songartist"
|
|
}
|
|
, {
|
|
title: "Album"
|
|
, field: "daap_songalbum"
|
|
}
|
|
, {
|
|
title: "Composer"
|
|
, field: "daap_songcomposer"
|
|
}
|
|
, {
|
|
title: "Genre"
|
|
, field: "daap_songgenre"
|
|
}
|
|
, {
|
|
title: "Track Number"
|
|
, field: "daap_songtracknumber"
|
|
, render: function(data, full) {
|
|
var value = data;
|
|
|
|
if (data == "") {
|
|
value = "Unknown";
|
|
}
|
|
|
|
if (typeof full.daap_songtrackcount !== "undefined") {
|
|
value += " of " + full.daap_songtrackcount;
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}
|
|
, {
|
|
title: "Disc Number"
|
|
, field: "daap_songdiscnumber"
|
|
, render: function(data, full) {
|
|
var value = data;
|
|
|
|
if (typeof full.daap_songdisccount !== "undefined") {
|
|
value += " of " + full.daap_songdisccount;
|
|
}
|
|
|
|
return value;
|
|
}
|
|
}
|
|
, {
|
|
title: "Year"
|
|
, field: "daap_songyear"
|
|
}
|
|
, {
|
|
title: "Rating"
|
|
, field: "daap_songuserrating"
|
|
}
|
|
, {
|
|
title: "Compilation"
|
|
, field: "daap_songcompilation"
|
|
, defaults: "No"
|
|
, render: function (data, full) {
|
|
return (data == 1 ? "Yes" : "No")
|
|
}
|
|
}
|
|
, {
|
|
title: "Duration"
|
|
, field: "daap_songtime"
|
|
, render: function (data, full) {
|
|
return songMSTimeFormat(data);
|
|
}
|
|
}
|
|
, {
|
|
title: "BPM"
|
|
, field: "daap_songbeatsperminute"
|
|
}
|
|
, {
|
|
title: "Bit Rate"
|
|
, field: "daap_songbitrate"
|
|
, render: function (data, full) {
|
|
if (data > 0) {
|
|
data += "kbps";
|
|
}
|
|
|
|
return data;
|
|
}
|
|
}
|
|
, {
|
|
title: "Sample Rate"
|
|
, field: "daap_songsamplerate"
|
|
, render: function (data, full) {
|
|
if (data != "") {
|
|
if (data > 1000) {
|
|
data = (data / 1000) + "k";
|
|
}
|
|
|
|
data += "Hz";
|
|
}
|
|
|
|
return data;
|
|
}
|
|
}
|
|
, {
|
|
title: "Date added"
|
|
, field: "daap_songdateadded"
|
|
}
|
|
]
|
|
|
|
, tableSort: []
|
|
|
|
, initialize: function (options) {
|
|
_.bindAll(this
|
|
, "resize"
|
|
, "render"
|
|
, "show"
|
|
, "hide"
|
|
);
|
|
|
|
var that = this
|
|
;
|
|
|
|
if (options && options.el) {
|
|
$(options.el).html(tmplListView);
|
|
} else {
|
|
options = options || {};
|
|
options.el = document.createElement("div");
|
|
|
|
options.el.id = "__view-playlist";
|
|
options.el.className = "playlist-view-container";
|
|
|
|
$(options.el).html(tmplListView);
|
|
|
|
this.el = options.el;
|
|
this.$el = $(this.el);
|
|
}
|
|
|
|
List.__super__.initialize.apply(this, arguments);
|
|
|
|
//this.$el.find("table:first").html("<tr><td><h1>" + this.type + "</h1></td></tr>");
|
|
|
|
return this;
|
|
}
|
|
|
|
, resize: function (height) {
|
|
var that = this
|
|
;
|
|
|
|
that.$el.find(".dataTables_scrollBody").height(that.$el.innerHeight() - 20);
|
|
}
|
|
|
|
, render: function () {
|
|
var that = this
|
|
, initialHeight = that.$el.innerHeight() - 20
|
|
;
|
|
|
|
this.dataTable = this.$el.find("table:first").dataTable({
|
|
sScrollY: initialHeight + "px"
|
|
, sDom: "RTrtS"
|
|
, oColReorder: {
|
|
iFixedColumns: 1
|
|
}
|
|
, bInfo: false
|
|
, bLengthChange: false
|
|
, bAutoWidth: false
|
|
, bFilter: true
|
|
, bDeferRender: true
|
|
, bStateSave: false//true
|
|
, bScrollCollapse: true
|
|
, sHeightMatch: "auto"
|
|
, sEmptyTable: ""
|
|
//, 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
|
|
|
|
, oTableTools: {
|
|
sRowSelect: "single"
|
|
, sSelectedClass: "selected"
|
|
, aButtons: []
|
|
}
|
|
/*
|
|
, fnCreatedRow: function(nRow, aData, iDataIndex) {
|
|
// 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}));
|
|
}
|
|
|
|
, fnServerData: function(sSource, aoData, fnCallback, settings) {
|
|
// function used to populate the DataTable with the current
|
|
// content of the collection
|
|
var populateTable = function()
|
|
{
|
|
// clear out old row views
|
|
var rows = [];
|
|
|
|
// these 'meta' attributes are set by the collection's parse method
|
|
var totalSize = that.collection.meta('totalSize');
|
|
var filteredSize = that.collection.meta('filteredSize');
|
|
|
|
return fnCallback({iTotalRecords: totalSize,
|
|
iTotalDisplayRecords: filteredSize,
|
|
aaData: that.collection.toJSON()});
|
|
};
|
|
|
|
aoData.shift(); // ignore sEcho
|
|
var params = $.param(aoData);
|
|
|
|
if (params != that.constraint)
|
|
{
|
|
// trigger param:change event with new parameters. Pass in
|
|
// populateTable function so fnCallback can be called after
|
|
// the data has been refreshed. Note that we cannot just call
|
|
// <a href="/ref#fnDraw">fnDraw</a> on the collection reset event since closure state
|
|
// in the fnCallback passed to this method would be lost.
|
|
that.trigger("param:change", params, populateTable);
|
|
}
|
|
else
|
|
{
|
|
// no filter change, just populate the table
|
|
populateTable();
|
|
}
|
|
}
|
|
*/
|
|
});
|
|
|
|
}
|
|
|
|
, show: function () {
|
|
var that = this
|
|
;
|
|
|
|
if (!that.dataTable) {
|
|
that.render();
|
|
}
|
|
|
|
that.$el.show();
|
|
}
|
|
|
|
, hide: function () {
|
|
var that = this
|
|
;
|
|
|
|
this.$el.hide();
|
|
}
|
|
});
|
|
|
|
return List;
|
|
}); |