Congegni
/
sintonia
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CC-6085, CC-6101 - uploader styling

This commit is contained in:
Duncan Sommerville 2015-08-27 15:44:59 -04:00
parent 0ebe7a85e1
commit acc4ef0054
4 changed files with 360 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
airtime_mvc/application/views/scripts/plupload/index.phtml
View File

@ -19,16 +19,15 @@
</form> </form>
--> -->
<div id="upload_form" class="lib-content ui-widget ui-widget-content block-shadow padded wide-panel <?php if ($this->quotaLimitReached) { ?> hidden <?php } ?>"> <div id="upload_form" class="lib-content ui-widget ui-widget-content block-shadow padded wide-panel <?php if ($this->quotaLimitReached) { ?> hidden <?php } ?>">
<H2>Upload Audio Files</H2>
<?php <?php
$partitions = Application_Model_Systemstatus::GetDiskInfo(); $partitions = Application_Model_Systemstatus::GetDiskInfo();
$status = new StdClass; $status = new StdClass;
$partitions = $partitions;
$disk = $partitions[0]; $disk = $partitions[0];
$used = $disk->totalSpace-$disk->totalFreeSpace; $used = $disk->totalSpace-$disk->totalFreeSpace;
$total = $disk->totalSpace; $total = $disk->totalSpace;
?> ?>
<div style="height:100%"> <div id="upload_wrapper">
<H2>Upload Audio Files</H2>
<form action="/rest/media" method="post" id="add-media-dropzone" class="dropzone dz-clickable"> <form action="/rest/media" method="post" id="add-media-dropzone" class="dropzone dz-clickable">
<?php echo $this->form->getElement('csrf') ?> <?php echo $this->form->getElement('csrf') ?>
<div class="dz-message"> <div class="dz-message">
@ -44,15 +43,14 @@
    <a id="uploadfiles" href="javascript:;">[Upload files]</a>     <a id="uploadfiles" href="javascript:;">[Upload files]</a>
</div> </div>
--> -->
</div> <div id="uploads_disk_usage">
<div id="uploads_disk_usage"> <div style="padding-bottom: 2px;">Storage</div>
<div style="padding-bottom: 2px;">Storage</div> <div class="disk_usage_progress_bar"></div>
<div class="disk_usage_progress_bar" style="width:98%"></div> <div class="disk_usage_percent_in_use"><?php echo sprintf("%01.1f%% ", $used/$total*100) . _("in use") ?></div>
<div class="disk_usage_percent_in_use" style="width:98%"><?php echo sprintf("%01.1f%% ", $used/$total*100) . _("in use") ?></div> <div class="disk_usage_used" style="width:<?php echo sprintf("%01.1f%%", $used/$total*100) ?>;"></div>
<div class="disk_usage_used" style="width:<?php echo sprintf("%01.1f%%", $used/$total*100) ?>;"></div>
<div style="margin-top: 17px; font-size: 12px;"><?php echo sprintf("%01.1fGB of %01.1fGB", $used/pow(2, 30), $total/pow(2, 30)); ?></div>
<div style="margin-top: 17px; font-size: 12px;"><?php echo sprintf("%01.1fGB of %01.1fGB", $used/pow(2, 30), $total/pow(2, 30)); ?></div>
</div>
</div> </div>
</div> </div>
@ -61,19 +59,17 @@
</div> </div>
<div id="recent_uploads_wrapper" class="lib-content ui-widget ui-widget-content block-shadow wide-panel"> <div id="recent_uploads_wrapper" class="lib-content ui-widget ui-widget-content block-shadow wide-panel">
<div id="recent_uploads" class="outer-datatable-wrapper padded"> <div id="recent_uploads" class="outer-datatable-wrapper padded">
<div id="recent_uploads_filter">
<div id="recent_uploads_filter">
<form> <form>
<input type="radio" name="upload_status" id="upload_status_all" checked></input><label for="upload_status_all"><?php echo _("All")?></label> <input type="radio" name="upload_status" id="upload_status_all" checked /><label for="upload_status_all"><?php echo _("All")?></label>
<input type="radio" name="upload_status" id="upload_status_failed"></input><label for="upload_status_failed"><?php echo _("Failed")?></label> <input type="radio" name="upload_status" id="upload_status_failed" /><label for="upload_status_failed"><?php echo _("Failed")?></label>
<input type="radio" name="upload_status" id="upload_status_pending"></input><label for="upload_status_pending"><?php echo _("Pending")?></label> <input type="radio" name="upload_status" id="upload_status_pending" /><label for="upload_status_pending"><?php echo _("Pending")?></label>
</form> </form>
</div> </div>
<H2><?php echo _("Recent Uploads")?></H2> <H2><?php echo _("Recent Uploads")?></H2>
<div class="dataTables_scrolling padded"> <div class="dataTables_scrolling">
<table id="recent_uploads_table" class="datatable lib-content ui-widget ui-widget-content block-shadow alpha-block " <table id="recent_uploads_table" class="datatable lib-content ui-widget ui-widget-content block-shadow"
cellpadding="0" cellspacing="0"></table> cellpadding="0" cellspacing="0"></table>
</div> </div>
</div> </div>

124
airtime_mvc/public/css/addmedia.css
View File

@ -1,5 +1,11 @@
@CHARSET "UTF-8"; @CHARSET "UTF-8";
#recent_uploads > .dataTables_scrolling
{
top: 41px;
bottom: 8px;
}
#recent_uploads_wrapper #recent_uploads_wrapper
{ {
position: relative; position: relative;
@ -10,7 +16,8 @@
#recent_uploads_table #recent_uploads_table
{ {
width: 100%; width: 100%;
table-layout: fixed; border: 0;
/*table-layout: fixed;*/
} }
#recent_uploads_table_wrapper #recent_uploads_table_wrapper
@ -18,6 +25,24 @@
position: absolute; position: absolute;
left: 8px; left: 8px;
right: 8px; right: 8px;
bottom: 0;
top: 0;
border: 1px solid #5b5b5b;
}
#recent_uploads_table_wrapper > .fg-toolbar
{
position: absolute;
left: 0;
right: 0;
bottom: 0;
border: none;
}
#recent_uploads_table_wrapper > .fg-toolbar:after
{
content: none;
} }
table#recent_uploads_table td table#recent_uploads_table td
@ -28,7 +53,7 @@ table#recent_uploads_table td
#recent_uploads_filter #recent_uploads_filter
{ {
float: right; float: right;
margin-top: 10px; margin-top: 5px;
margin-right: 3px; margin-right: 3px;
} }
#recent_uploads_table_length #recent_uploads_table_length
@ -262,16 +287,29 @@ table#recent_uploads_table td
} }
} }
#upload_wrapper {
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;
}
.dropzone, .dropzone * { .dropzone, .dropzone * {
box-sizing: border-box box-sizing: border-box
} }
.dropzone { .dropzone {
min-height: 30%; flex: 1 100%;
/*min-height: 30%;*/
border: 2px solid rgba(0, 0, 0, 0.3); border: 2px solid rgba(0, 0, 0, 0.3);
background: #333; background: #333;
padding: 20px 20px; padding: 20px 20px;
max-height: 75%; /*max-height: 75%;*/
overflow-y: auto; overflow-y: auto;
} }
@ -288,7 +326,8 @@ table#recent_uploads_table td
} }
.dropzone.dz-started .dz-message { .dropzone.dz-started .dz-message {
display: none margin-bottom: 16px;
/*display: none*/
} }
.dropzone.dz-drag-hover { .dropzone.dz-drag-hover {
@ -320,23 +359,25 @@ table#recent_uploads_table td
.dropzone .dz-preview { .dropzone .dz-preview {
position: relative; position: relative;
display: inline-block; /* display: inline-block; */
vertical-align: top; vertical-align: top;
margin: 16px; margin-bottom: 16px;
width: 100%;
} }
.dropzone .dz-preview:hover { .dropzone .dz-preview:hover {
z-index: 1000 z-index: 1000;
} }
.dropzone .dz-preview:hover .dz-details { .dropzone .dz-preview:hover .dz-details {
opacity: 1 opacity: 1;
} }
.dropzone .dz-preview.dz-file-preview .dz-image { .dropzone .dz-preview.dz-file-preview .dz-image {
border-radius: 3px; border-radius: 3px;
background: #444; background: #444;
/*background: linear-gradient(to bottom, #eee, #ddd)*/ /* background: linear-gradient(to bottom, #eee, #ddd); */
width: 100%;
} }
.dropzone .dz-preview.dz-file-preview .dz-details { .dropzone .dz-preview.dz-file-preview .dz-details {
@ -356,11 +397,14 @@ table#recent_uploads_table td
} }
.dropzone .dz-preview .dz-remove { .dropzone .dz-preview .dz-remove {
font-size: 14px; /*font-size: 14px;*/
text-align: center; text-align: center;
display: block; display: block;
cursor: pointer; cursor: pointer;
border: none border: none;
color: #efefef;
float: right;
} }
.dropzone .dz-preview .dz-remove:hover { .dropzone .dz-preview .dz-remove:hover {
@ -380,7 +424,7 @@ table#recent_uploads_table td
font-size: 13px; font-size: 13px;
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;
padding: 1em 1em; padding: 1em 1em 0;
text-align: left; text-align: left;
color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.9);
/*line-height: 150%*/ /*line-height: 150%*/
@ -397,8 +441,8 @@ table#recent_uploads_table td
} }
.dropzone .dz-preview .dz-details .dz-filename:hover span { .dropzone .dz-preview .dz-details .dz-filename:hover span {
border: 1px solid rgba(200, 200, 200, 0.8); /*border: 1px solid rgba(200, 200, 200, 0.8);*/
background-color: rgba(255, 255, 255, 0.8) /*background-color: rgba(255, 255, 255, 0.8)*/
} }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) { .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
@ -407,11 +451,12 @@ table#recent_uploads_table td
} }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent /*border: 1px solid transparent*/
} }
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4); color: #efefef;
/*background-color: rgba(255, 255, 255, 0.4);*/
padding: 0 0.4em; padding: 0 0.4em;
border-radius: 3px border-radius: 3px
} }
@ -463,7 +508,7 @@ table#recent_uploads_table td
z-index: 500; z-index: 500;
position: absolute; position: absolute;
display: block; display: block;
top: 50%; top: 33px;
left: 50%; left: 50%;
margin-left: -27px; margin-left: -27px;
margin-top: -27px margin-top: -27px
@ -471,8 +516,10 @@ table#recent_uploads_table td
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
display: block; display: block;
width: 54px; /*width: 54px;*/
height: 54px /*height: 54px*/
width: 27px;
height: 27px
} }
.dropzone .dz-preview.dz-processing .dz-progress { .dropzone .dz-preview.dz-processing .dz-progress {
@ -545,10 +592,9 @@ table#recent_uploads_table td
.dropzone .dz-preview .dz-error-message { .dropzone .dz-preview .dz-error-message {
pointer-events: none; pointer-events: none;
z-index: 1000; z-index: 1000;
position: absolute; position: relative;
display: block;
display: none; display: none;
opacity: 0; /* opacity: 0; */
-webkit-transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease;
@ -556,23 +602,29 @@ table#recent_uploads_table td
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
border-radius: 8px; border-radius: 8px;
font-size: 13px; font-size: 13px;
top: 130px; /* top: 130px; */
left: -10px; top: -27px;
width: 140px; /*left: -10px;*/
left: 33px;
/* width: 140px; */
background: #be2626; background: #be2626;
background: linear-gradient(to bottom, #be2626, #a92222); background: linear-gradient(to bottom, #be2626, #a92222);
padding: 0.5em 1.2em; padding: 0.5em 1.2em;
color: white color: white;
} }
.dropzone .dz-preview .dz-error-message:after { .dropzone .dz-preview .dz-error-message:after {
content: ''; content: none;
position: absolute; /*content: '';*/
top: -6px; /*position: absolute;*/
left: 64px; /*/!*top: -6px;*!/*/
width: 0; /*top: 10px;*/
height: 0; /*/!*left: 64px;*!/*/
border-left: 6px solid transparent; /*left: -8px;*/
border-right: 6px solid transparent; /*width: 0;*/
border-bottom: 6px solid #be2626 /*height: 0;*/
/*border-left: 6px solid transparent;*/
/*border-right: 6px solid transparent;*/
/*border-bottom: 6px solid #be2626;*/
/*transform: rotate(-90deg);*/
} }

27
airtime_mvc/public/css/styles.css
View File

@ -3746,13 +3746,8 @@ hr {
} }
#uploads_disk_usage { #uploads_disk_usage {
position:absolute; position: relative;
left: 8px;
right: 8px;
bottom: 8px;
margin-top: 8px; margin-top: 8px;
border-radius: 1px; border-radius: 1px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
@ -3760,7 +3755,7 @@ hr {
background-color: #242424; background-color: #242424;
border: 1px solid #5b5b5b; border: 1px solid #5b5b5b;
color: #ccc; color: #ccc;
flex: 0 0 auto;
} }
#disk_usage { #disk_usage {
@ -3778,22 +3773,26 @@ hr {
} }
.disk_usage_progress_bar { .disk_usage_progress_bar {
width:118px; position: absolute;
height:13px; left: 4px;
background:#444444; right: 4px;
/* width: 118px; */
height: 13px;
background: #444444;
background: -moz-linear-gradient(top, #464646 0, #3e3e3e 100%); background: -moz-linear-gradient(top, #464646 0, #3e3e3e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(100%, #464646)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(100%, #464646));
margin: 0 auto; /* margin: 0 auto; */
z-index: 1; z-index: 1;
position:absolute;
} }
.disk_usage_percent_in_use { .disk_usage_percent_in_use {
position: absolute;
left: 0;
right: 0;
color: #fff; color: #fff;
font-size: 10px; font-size: 10px;
z-index: 3; z-index: 3;
position:absolute; /* width: 120px; */
width: 120px;
line-height: 13px; line-height: 13px;
} }

479
airtime_mvc/public/js/airtime/library/plupload.js
View File

@ -1,265 +1,274 @@
$(document).ready(function() { $(document).ready(function () {
var uploader;
var self = this;
self.uploadFilter = "all";
self.IMPORT_STATUS_CODES = {
0 : { message: $.i18n._("Successfully imported")},
1 : { message: $.i18n._("Pending import")},
2 : { message: $.i18n._("Import failed.")},
UNKNOWN : { message: $.i18n._("Unknown")}
};
if (Object.freeze) {
Object.freeze(self.IMPORT_STATUS_CODES);
}
console.log(acceptedMimeTypes.join()); var uploadProgress;
Dropzone.options.addMediaDropzone = { var self = this;
url:'/rest/media', self.uploadFilter = "all";
//clickable: false,
acceptedFiles: acceptedMimeTypes.join() + ",.flac",
init: function () {
this.on("sending", function (file, xhr, data) {
data.append("csrf_token", $("#csrf").val());
});
this.on("success", function(file, xhr, data) { self.IMPORT_STATUS_CODES = {
//Refresh the upload table: 0: {message: $.i18n._("Successfully imported")},
self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide 1: {message: $.i18n._("Pending import")},
//In DataTables 1.10 and greater, we can use .fnAjaxReload() 2: {message: $.i18n._("Import failed.")},
}); UNKNOWN: {message: $.i18n._("Unknown")}
} };
}; if (Object.freeze) {
Object.freeze(self.IMPORT_STATUS_CODES);
}
/* Dropzone.options.addMediaDropzone = {
var uploader = new plupload.Uploader({ url: '/rest/media',
runtimes: 'html5, flash, html4', //clickable: false,
browse_button: 'pickfiles', acceptedFiles: acceptedMimeTypes.join() + ",.flac",
container: $("#container"), addRemoveLinks: true,
url : baseUrl+'rest/media', dictRemoveFile: $.i18n._("Remove"),
filters : [ init: function () {
{title: "Audio Files", extensions: "ogg,mp3,oga,flac,wav,m4a,mp4,opus,aac,oga,mp1,mp2,wma,au"} this.on("sending", function (file, xhr, data) {
], data.append("csrf_token", $("#csrf").val());
multipart_params : { });
"csrf_token" : $("#csrf").attr('value')
},
init: { this.on("addedfile", function (file, xhr, data) {
PostInit: function() { var el = $(file.previewElement);
document.getElementById('filelist').innerHTML = ''; uploadProgress = true;
el.find(".dz-remove").prependTo(el.find(".dz-details"));
el.find(".dz-error-message").appendTo(el.find(".dz-error-mark"));
});
document.getElementById('uploadfiles').onclick = function() { this.on("success", function (file, xhr, data) {
uploader.start(); //Refresh the upload table:
return false; self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide
}; //In DataTables 1.10 and greater, we can use .fnAjaxReload()
}, });
this.on("complete", function() {
uploadProgress = false;
});
}
};
FilesAdded: function(up, files) { /*
plupload.each(files, function(file) { var uploader = new plupload.Uploader({
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>'; runtimes: 'html5, flash, html4',
}); browse_button: 'pickfiles',
}, container: $("#container"),
url : baseUrl+'rest/media',
filters : [
{title: "Audio Files", extensions: "ogg,mp3,oga,flac,wav,m4a,mp4,opus,aac,oga,mp1,mp2,wma,au"}
],
multipart_params : {
"csrf_token" : $("#csrf").attr('value')
},
UploadProgress: function(up, file) { init: {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; PostInit: function() {
}, document.getElementById('filelist').innerHTML = '';
Error: function(up, err) { document.getElementById('uploadfiles').onclick = function() {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message; uploader.start();
} return false;
} };
}); },
uploader.init(); FilesAdded: function(up, files) {
*/ plupload.each(files, function(file) {
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});
},
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
Error: function(up, err) {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
}
}
});
uploader.init();
*/
/* /*
$("#plupload_files").pluploadQueue({ $("#plupload_files").pluploadQueue({
// General settings // General settings
runtimes : 'gears, html5, html4', runtimes : 'gears, html5, html4',
url : baseUrl+'rest/media', url : baseUrl+'rest/media',
//chunk_size : '5mb', //Disabling chunking since we're using the File Upload REST API now //chunk_size : '5mb', //Disabling chunking since we're using the File Upload REST API now
unique_names : 'true', unique_names : 'true',
multiple_queues : 'true', multiple_queues : 'true',
filters : [ filters : [
{title: "Audio Files", extensions: "ogg,mp3,oga,flac,wav,m4a,mp4,opus,aac,oga,mp1,mp2,wma,au"} {title: "Audio Files", extensions: "ogg,mp3,oga,flac,wav,m4a,mp4,opus,aac,oga,mp1,mp2,wma,au"}
], ],
multipart_params : { multipart_params : {
"csrf_token" : $("#csrf").attr('value'), "csrf_token" : $("#csrf").attr('value'),
} }
}); });
uploader = $("#plupload_files").pluploadQueue(); uploader = $("#plupload_files").pluploadQueue();
uploader.bind('FileUploaded', function(up, file, json) uploader.bind('FileUploaded', function(up, file, json)
{ {
//Refresh the upload table: //Refresh the upload table:
self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide
//In DataTables 1.10 and greater, we can use .fnAjaxReload() //In DataTables 1.10 and greater, we can use .fnAjaxReload()
}); });
var uploadProgress = false; var uploadProgress = false;
uploader.bind('QueueChanged', function(){ uploader.bind('QueueChanged', function(){
uploadProgress = (uploader.files.length > 0); uploadProgress = (uploader.files.length > 0);
}); });
uploader.bind('UploadComplete', function(){ uploader.bind('UploadComplete', function(){
uploadProgress = false; uploadProgress = false;
});*/ });*/
$(window).bind('beforeunload', function(){ $(window).bind('beforeunload', function () {
if(uploadProgress){ if (uploadProgress) {
return sprintf($.i18n._("You are currently uploading files. %sGoing to another screen will cancel the upload process. %sAre you sure you want to leave the page?"), return sprintf($.i18n._("You are currently uploading files. %sGoing to another screen will cancel the upload process. %sAre you sure you want to leave the page?"),
"\n", "\n"); "\n", "\n");
} }
}); });
self.renderImportStatus = function ( data, type, full ) { self.renderImportStatus = function (data, type, full) {
if (typeof data !== "number") { if (typeof data !== "number") {
console.log("Invalid data type for the import_status."); console.log("Invalid data type for the import_status.");
return; return;
} }
var statusStr = self.IMPORT_STATUS_CODES.UNKNOWN.message; var statusStr = self.IMPORT_STATUS_CODES.UNKNOWN.message;
var importStatusCode = data; var importStatusCode = data;
if (self.IMPORT_STATUS_CODES[importStatusCode]) { if (self.IMPORT_STATUS_CODES[importStatusCode]) {
statusStr = self.IMPORT_STATUS_CODES[importStatusCode].message; statusStr = self.IMPORT_STATUS_CODES[importStatusCode].message;
}; }
return statusStr; return statusStr;
}; };
self.renderFileActions = function ( data, type, full ) { self.renderFileActions = function (data, type, full) {
if (full.import_status == 0) { if (full.import_status == 0) {
return '<a class="deleteFileAction">' + $.i18n._('Delete from Library') + '</a>'; return '<a class="deleteFileAction">' + $.i18n._('Delete from Library') + '</a>';
} else if (full.import_status == 1) { } else if (full.import_status == 1) {
//No actions for pending files //No actions for pending files
return $.i18n._('N/A'); return $.i18n._('N/A');
} else { //Failed downloads } else { //Failed downloads
return '<a class="deleteFileAction">' + $.i18n._('Clear') + '</a>'; return '<a class="deleteFileAction">' + $.i18n._('Clear') + '</a>';
} }
}; };
$("#recent_uploads_table").on("click", "a.deleteFileAction", function () { $("#recent_uploads_table").on("click", "a.deleteFileAction", function () {
//Grab the file object for the row that was clicked. //Grab the file object for the row that was clicked.
// Some tips from the DataTables forums: // Some tips from the DataTables forums:
// fnGetData is used to get the object behind the row - you can also use // fnGetData is used to get the object behind the row - you can also use
// fnGetPosition if you need to get the index instead // fnGetPosition if you need to get the index instead
file = $("#recent_uploads_table").dataTable().fnGetData($(this).closest("tr")[0]); file = $("#recent_uploads_table").dataTable().fnGetData($(this).closest("tr")[0]);
$.ajax({ $.ajax({
type: 'DELETE', type: 'DELETE',
url: 'rest/media/' + file.id + "?csrf_token=" + $("#csrf").attr('value'), url: 'rest/media/' + file.id + "?csrf_token=" + $("#csrf").attr('value'),
success: function(resp) { success: function (resp) {
self.recentUploadsTable.fnDraw(); self.recentUploadsTable.fnDraw();
}, },
error: function() { error: function () {
alert($.i18n._("Error: The file could not be deleted. Please try again later.")); alert($.i18n._("Error: The file could not be deleted. Please try again later."));
} }
}); });
}); });
self.setupRecentUploadsTable = function() { self.setupRecentUploadsTable = function () {
recentUploadsTable = $("#recent_uploads_table").dataTable({ recentUploadsTable = $("#recent_uploads_table").dataTable({
"bJQueryUI": true, "bJQueryUI": true,
"bProcessing": false, "bProcessing": false,
"bServerSide": true, "bServerSide": true,
"sAjaxSource": '/Plupload/recent-uploads/format/json', "sAjaxSource": '/Plupload/recent-uploads/format/json',
"sAjaxDataProp": 'files', "sAjaxDataProp": 'files',
"bSearchable": false, "bSearchable": false,
"bInfo": true, "bInfo": true,
//"sScrollY": "200px", //"sScrollY": "200px",
"bFilter": false, "bFilter": false,
"bSort": false, "bSort": false,
"sDom": '<"H">frtip<"F"l>', //"sDom": '<"H">frtip<"F"l>',
"bPaginate" : true, "sDom": 'frt<"F"lip>',
"bPaginate": true,
"sPaginationType": "full_numbers", "sPaginationType": "full_numbers",
"oLanguage": getDatatablesStrings({ "oLanguage": getDatatablesStrings({
"sEmptyTable": $.i18n._("No files have been uploaded yet."), "sEmptyTable": $.i18n._("No files have been uploaded yet."),
"sInfoEmpty": $.i18n._("Showing 0 to 0 of 0 uploads"), "sInfoEmpty": $.i18n._("Showing 0 to 0 of 0 uploads"),
"sInfo": $.i18n._("Showing _START_ to _END_ of _TOTAL_ uploads"), "sInfo": $.i18n._("Showing _START_ to _END_ of _TOTAL_ uploads"),
"sInfoEmpty": $.i18n._("Showing 0 to 0 of 0 uploads"), "sInfoFiltered": $.i18n._("(filtered from _MAX_ total uploads)"),
"sInfoFiltered": $.i18n._("(filtered from _MAX_ total uploads)"),
}), }),
"aoColumns": [ "aoColumns": [
{ "mData" : "artist_name", "sTitle" : $.i18n._("Creator") }, {"mData": "artist_name", "sTitle": $.i18n._("Creator")},
{ "mData" : "track_title", "sTitle" : $.i18n._("Title") }, {"mData": "track_title", "sTitle": $.i18n._("Title")},
{ "mData" : "import_status", "sTitle" : $.i18n._("Import Status"), {
"mRender": self.renderImportStatus "mData": "import_status", "sTitle": $.i18n._("Import Status"),
}, "mRender": self.renderImportStatus
{ "mData" : "utime", "sTitle" : $.i18n._("Uploaded") }, },
{ "mData" : "id", "sTitle" : $.i18n._("Actions"), {"mData": "utime", "sTitle": $.i18n._("Uploaded")},
"mRender": self.renderFileActions {
} "mData": "id", "sTitle": $.i18n._("Actions"),
], "mRender": self.renderFileActions
"fnServerData": function ( sSource, aoData, fnCallback ) { }
/* Add some extra data to the sender */ ],
aoData.push( { "name": "uploadFilter", "value": self.uploadFilter } ); "fnServerData": function (sSource, aoData, fnCallback) {
$.getJSON( sSource, aoData, function (json) { /* Add some extra data to the sender */
fnCallback(json); aoData.push({"name": "uploadFilter", "value": self.uploadFilter});
if (json.files) { $.getJSON(sSource, aoData, function (json) {
var areAnyFileImportsPending = false; fnCallback(json);
for (var i = 0; i < json.files.length; i++) { if (json.files) {
//console.log(file); var areAnyFileImportsPending = false;
var file = json.files[i]; for (var i = 0; i < json.files.length; i++) {
if (file.import_status == 1) //console.log(file);
{ var file = json.files[i];
areAnyFileImportsPending = true; if (file.import_status == 1) {
} areAnyFileImportsPending = true;
} }
if (areAnyFileImportsPending) { }
//alert("pending uploads, starting refresh on timer"); if (areAnyFileImportsPending) {
self.startRefreshingRecentUploads(); //alert("pending uploads, starting refresh on timer");
} else { self.startRefreshingRecentUploads();
self.stopRefreshingRecentUploads(); } else {
} self.stopRefreshingRecentUploads();
}
// Update usability hint - in common.js // Update usability hint - in common.js
getUsabilityHint(); getUsabilityHint();
} }
} ); });
} }
}); });
return recentUploadsTable;
};
self.startRefreshingRecentUploads = function()
{
if (self.isRecentUploadsRefreshTimerActive()) { //Prevent multiple timers from running
return;
}
self.recentUploadsRefreshTimer = setInterval("self.recentUploadsTable.fnDraw()", 3000);
};
self.isRecentUploadsRefreshTimerActive = function()
{
return (self.recentUploadsRefreshTimer != null);
};
self.stopRefreshingRecentUploads = function()
{
clearInterval(self.recentUploadsRefreshTimer);
self.recentUploadsRefreshTimer = null;
};
$("#upload_status_all").click(function() {
self.uploadFilter = "all";
self.recentUploadsTable.fnDraw();
});
$("#upload_status_pending").click(function() {
self.uploadFilter = "pending";
self.recentUploadsTable.fnDraw();
});
$("#upload_status_failed").click(function() {
self.uploadFilter = "failed";
self.recentUploadsTable.fnDraw();
});
//Create the recent uploads table. return recentUploadsTable;
self.recentUploadsTable = self.setupRecentUploadsTable(); };
//$("#recent_uploads_table.div.fg-toolbar").prepend('<b>Custom tool bar! Text/images etc.</b>'); self.startRefreshingRecentUploads = function () {
if (self.isRecentUploadsRefreshTimerActive()) { //Prevent multiple timers from running
return;
}
self.recentUploadsRefreshTimer = setInterval("self.recentUploadsTable.fnDraw()", 3000);
};
self.isRecentUploadsRefreshTimerActive = function () {
return (self.recentUploadsRefreshTimer != null);
};
self.stopRefreshingRecentUploads = function () {
clearInterval(self.recentUploadsRefreshTimer);
self.recentUploadsRefreshTimer = null;
};
$("#upload_status_all").click(function () {
self.uploadFilter = "all";
self.recentUploadsTable.fnDraw();
});
$("#upload_status_pending").click(function () {
self.uploadFilter = "pending";
self.recentUploadsTable.fnDraw();
});
$("#upload_status_failed").click(function () {
self.uploadFilter = "failed";
self.recentUploadsTable.fnDraw();
});
//Create the recent uploads table.
self.recentUploadsTable = self.setupRecentUploadsTable();
//$("#recent_uploads_table.div.fg-toolbar").prepend('<b>Custom tool bar! Text/images etc.</b>');
}); });