From acc4ef0054805c9a9d69ae35a091a472dfda2f64 Mon Sep 17 00:00:00 2001 From: Duncan Sommerville Date: Thu, 27 Aug 2015 15:44:59 -0400 Subject: [PATCH] CC-6085, CC-6101 - uploader styling --- .../views/scripts/plupload/index.phtml | 34 +- airtime_mvc/public/css/addmedia.css | 124 +++-- airtime_mvc/public/css/styles.css | 27 +- .../public/js/airtime/library/plupload.js | 479 +++++++++--------- 4 files changed, 360 insertions(+), 304 deletions(-) diff --git a/airtime_mvc/application/views/scripts/plupload/index.phtml b/airtime_mvc/application/views/scripts/plupload/index.phtml index 24726d58a..a935e8151 100644 --- a/airtime_mvc/application/views/scripts/plupload/index.phtml +++ b/airtime_mvc/application/views/scripts/plupload/index.phtml @@ -19,16 +19,15 @@ -->
-
- -
+
- - - + + +

-
- +
diff --git a/airtime_mvc/public/css/addmedia.css b/airtime_mvc/public/css/addmedia.css index 937081819..64cc4b6c0 100644 --- a/airtime_mvc/public/css/addmedia.css +++ b/airtime_mvc/public/css/addmedia.css @@ -1,5 +1,11 @@ @CHARSET "UTF-8"; +#recent_uploads > .dataTables_scrolling +{ + top: 41px; + bottom: 8px; +} + #recent_uploads_wrapper { position: relative; @@ -10,7 +16,8 @@ #recent_uploads_table { width: 100%; - table-layout: fixed; + border: 0; + /*table-layout: fixed;*/ } #recent_uploads_table_wrapper @@ -18,6 +25,24 @@ position: absolute; left: 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 @@ -28,7 +53,7 @@ table#recent_uploads_table td #recent_uploads_filter { float: right; - margin-top: 10px; + margin-top: 5px; margin-right: 3px; } #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 * { box-sizing: border-box } .dropzone { - min-height: 30%; + flex: 1 100%; + /*min-height: 30%;*/ border: 2px solid rgba(0, 0, 0, 0.3); background: #333; padding: 20px 20px; - max-height: 75%; + /*max-height: 75%;*/ overflow-y: auto; } @@ -288,7 +326,8 @@ table#recent_uploads_table td } .dropzone.dz-started .dz-message { - display: none + margin-bottom: 16px; + /*display: none*/ } .dropzone.dz-drag-hover { @@ -320,23 +359,25 @@ table#recent_uploads_table td .dropzone .dz-preview { position: relative; - display: inline-block; + /* display: inline-block; */ vertical-align: top; - margin: 16px; + margin-bottom: 16px; + width: 100%; } .dropzone .dz-preview:hover { - z-index: 1000 + z-index: 1000; } .dropzone .dz-preview:hover .dz-details { - opacity: 1 + opacity: 1; } .dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 3px; 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 { @@ -356,11 +397,14 @@ table#recent_uploads_table td } .dropzone .dz-preview .dz-remove { - font-size: 14px; + /*font-size: 14px;*/ text-align: center; display: block; cursor: pointer; - border: none + border: none; + color: #efefef; + + float: right; } .dropzone .dz-preview .dz-remove:hover { @@ -380,7 +424,7 @@ table#recent_uploads_table td font-size: 13px; min-width: 100%; max-width: 100%; - padding: 1em 1em; + padding: 1em 1em 0; text-align: left; color: rgba(0, 0, 0, 0.9); /*line-height: 150%*/ @@ -397,8 +441,8 @@ table#recent_uploads_table td } .dropzone .dz-preview .dz-details .dz-filename:hover span { - border: 1px solid rgba(200, 200, 200, 0.8); - background-color: rgba(255, 255, 255, 0.8) + /*border: 1px solid rgba(200, 200, 200, 0.8);*/ + /*background-color: rgba(255, 255, 255, 0.8)*/ } .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 { - border: 1px solid transparent + /*border: 1px solid transparent*/ } .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; border-radius: 3px } @@ -463,7 +508,7 @@ table#recent_uploads_table td z-index: 500; position: absolute; display: block; - top: 50%; + top: 33px; left: 50%; margin-left: -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 { display: block; - width: 54px; - height: 54px + /*width: 54px;*/ + /*height: 54px*/ + width: 27px; + height: 27px } .dropzone .dz-preview.dz-processing .dz-progress { @@ -545,10 +592,9 @@ table#recent_uploads_table td .dropzone .dz-preview .dz-error-message { pointer-events: none; z-index: 1000; - position: absolute; - display: block; + position: relative; display: none; - opacity: 0; + /* opacity: 0; */ -webkit-transition: opacity 0.3s ease; -moz-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; border-radius: 8px; font-size: 13px; - top: 130px; - left: -10px; - width: 140px; + /* top: 130px; */ + top: -27px; + /*left: -10px;*/ + left: 33px; + /* width: 140px; */ background: #be2626; background: linear-gradient(to bottom, #be2626, #a92222); padding: 0.5em 1.2em; - color: white + color: white; } .dropzone .dz-preview .dz-error-message:after { - content: ''; - position: absolute; - top: -6px; - left: 64px; - width: 0; - height: 0; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #be2626 + content: none; + /*content: '';*/ + /*position: absolute;*/ + /*/!*top: -6px;*!/*/ + /*top: 10px;*/ + /*/!*left: 64px;*!/*/ + /*left: -8px;*/ + /*width: 0;*/ + /*height: 0;*/ + /*border-left: 6px solid transparent;*/ + /*border-right: 6px solid transparent;*/ + /*border-bottom: 6px solid #be2626;*/ + /*transform: rotate(-90deg);*/ } diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css index 4d4ed65bb..42fdc87f5 100644 --- a/airtime_mvc/public/css/styles.css +++ b/airtime_mvc/public/css/styles.css @@ -3746,13 +3746,8 @@ hr { } #uploads_disk_usage { - position:absolute; - left: 8px; - right: 8px; - - bottom: 8px; + position: relative; margin-top: 8px; - border-radius: 1px; font-size: 14px; text-align: center; @@ -3760,7 +3755,7 @@ hr { background-color: #242424; border: 1px solid #5b5b5b; color: #ccc; - + flex: 0 0 auto; } #disk_usage { @@ -3778,22 +3773,26 @@ hr { } .disk_usage_progress_bar { - width:118px; - height:13px; - background:#444444; + position: absolute; + left: 4px; + right: 4px; + /* width: 118px; */ + height: 13px; + background: #444444; 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)); - margin: 0 auto; + /* margin: 0 auto; */ z-index: 1; - position:absolute; } .disk_usage_percent_in_use { + position: absolute; + left: 0; + right: 0; color: #fff; font-size: 10px; z-index: 3; - position:absolute; - width: 120px; + /* width: 120px; */ line-height: 13px; } diff --git a/airtime_mvc/public/js/airtime/library/plupload.js b/airtime_mvc/public/js/airtime/library/plupload.js index ea15d7e19..2a5e35158 100644 --- a/airtime_mvc/public/js/airtime/library/plupload.js +++ b/airtime_mvc/public/js/airtime/library/plupload.js @@ -1,265 +1,274 @@ -$(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); - } +$(document).ready(function () { - console.log(acceptedMimeTypes.join()); - Dropzone.options.addMediaDropzone = { - url:'/rest/media', - //clickable: false, - acceptedFiles: acceptedMimeTypes.join() + ",.flac", - init: function () { - this.on("sending", function (file, xhr, data) { - data.append("csrf_token", $("#csrf").val()); - }); + var uploadProgress; + var self = this; + self.uploadFilter = "all"; - this.on("success", function(file, xhr, data) { - //Refresh the upload table: - self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide - //In DataTables 1.10 and greater, we can use .fnAjaxReload() - }); - } - }; + 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); + } - /* - var uploader = new plupload.Uploader({ - 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') - }, + Dropzone.options.addMediaDropzone = { + url: '/rest/media', + //clickable: false, + acceptedFiles: acceptedMimeTypes.join() + ",.flac", + addRemoveLinks: true, + dictRemoveFile: $.i18n._("Remove"), + init: function () { + this.on("sending", function (file, xhr, data) { + data.append("csrf_token", $("#csrf").val()); + }); - init: { - PostInit: function() { - document.getElementById('filelist').innerHTML = ''; + this.on("addedfile", function (file, xhr, data) { + var el = $(file.previewElement); + 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() { - uploader.start(); - return false; - }; - }, + this.on("success", function (file, xhr, data) { + //Refresh the upload table: + 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) { - document.getElementById('filelist').innerHTML += '
' + file.name + ' (' + plupload.formatSize(file.size) + ')
'; - }); - }, + /* + var uploader = new plupload.Uploader({ + 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) { - document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%"; - }, + init: { + PostInit: function() { + document.getElementById('filelist').innerHTML = ''; - Error: function(up, err) { - document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message; - } - } - }); + document.getElementById('uploadfiles').onclick = function() { + uploader.start(); + return false; + }; + }, - uploader.init(); - */ + FilesAdded: function(up, files) { + plupload.each(files, function(file) { + document.getElementById('filelist').innerHTML += '
' + file.name + ' (' + plupload.formatSize(file.size) + ')
'; + }); + }, + + UploadProgress: function(up, file) { + document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%"; + }, + + Error: function(up, err) { + document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message; + } + } + }); + + uploader.init(); + */ - /* - $("#plupload_files").pluploadQueue({ - // General settings - runtimes : 'gears, html5, html4', - url : baseUrl+'rest/media', - //chunk_size : '5mb', //Disabling chunking since we're using the File Upload REST API now - unique_names : 'true', - multiple_queues : 'true', - 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'), - } - }); + /* + $("#plupload_files").pluploadQueue({ + // General settings + runtimes : 'gears, html5, html4', + url : baseUrl+'rest/media', + //chunk_size : '5mb', //Disabling chunking since we're using the File Upload REST API now + unique_names : 'true', + multiple_queues : 'true', + 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'), + } + }); - uploader = $("#plupload_files").pluploadQueue(); + uploader = $("#plupload_files").pluploadQueue(); - uploader.bind('FileUploaded', function(up, file, json) - { - //Refresh the upload table: - self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide - //In DataTables 1.10 and greater, we can use .fnAjaxReload() - }); - - var uploadProgress = false; - - uploader.bind('QueueChanged', function(){ - uploadProgress = (uploader.files.length > 0); - }); - - uploader.bind('UploadComplete', function(){ - uploadProgress = false; - });*/ - - $(window).bind('beforeunload', function(){ - if(uploadProgress){ + uploader.bind('FileUploaded', function(up, file, json) + { + //Refresh the upload table: + self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide + //In DataTables 1.10 and greater, we can use .fnAjaxReload() + }); + + var uploadProgress = false; + + uploader.bind('QueueChanged', function(){ + uploadProgress = (uploader.files.length > 0); + }); + + uploader.bind('UploadComplete', function(){ + uploadProgress = false; + });*/ + + $(window).bind('beforeunload', function () { + 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?"), - "\n", "\n"); - } - }); - - self.renderImportStatus = function ( data, type, full ) { - if (typeof data !== "number") { - console.log("Invalid data type for the import_status."); - return; - } - var statusStr = self.IMPORT_STATUS_CODES.UNKNOWN.message; - var importStatusCode = data; - if (self.IMPORT_STATUS_CODES[importStatusCode]) { - statusStr = self.IMPORT_STATUS_CODES[importStatusCode].message; - }; - + "\n", "\n"); + } + }); + + self.renderImportStatus = function (data, type, full) { + if (typeof data !== "number") { + console.log("Invalid data type for the import_status."); + return; + } + var statusStr = self.IMPORT_STATUS_CODES.UNKNOWN.message; + var importStatusCode = data; + if (self.IMPORT_STATUS_CODES[importStatusCode]) { + statusStr = self.IMPORT_STATUS_CODES[importStatusCode].message; + } + return statusStr; }; - - self.renderFileActions = function ( data, type, full ) { - if (full.import_status == 0) { - return '' + $.i18n._('Delete from Library') + ''; - } else if (full.import_status == 1) { - //No actions for pending files - return $.i18n._('N/A'); - } else { //Failed downloads - return '' + $.i18n._('Clear') + ''; - } - }; - + + self.renderFileActions = function (data, type, full) { + if (full.import_status == 0) { + return '' + $.i18n._('Delete from Library') + ''; + } else if (full.import_status == 1) { + //No actions for pending files + return $.i18n._('N/A'); + } else { //Failed downloads + return '' + $.i18n._('Clear') + ''; + } + }; + $("#recent_uploads_table").on("click", "a.deleteFileAction", function () { - //Grab the file object for the row that was clicked. - // Some tips from the DataTables forums: + //Grab the file object for the row that was clicked. + // Some tips from the DataTables forums: // fnGetData is used to get the object behind the row - you can also use // fnGetPosition if you need to get the index instead - file = $("#recent_uploads_table").dataTable().fnGetData($(this).closest("tr")[0]); - - $.ajax({ - type: 'DELETE', - url: 'rest/media/' + file.id + "?csrf_token=" + $("#csrf").attr('value'), - success: function(resp) { - self.recentUploadsTable.fnDraw(); - }, - error: function() { - alert($.i18n._("Error: The file could not be deleted. Please try again later.")); - } - }); + file = $("#recent_uploads_table").dataTable().fnGetData($(this).closest("tr")[0]); + + $.ajax({ + type: 'DELETE', + url: 'rest/media/' + file.id + "?csrf_token=" + $("#csrf").attr('value'), + success: function (resp) { + self.recentUploadsTable.fnDraw(); + }, + error: function () { + alert($.i18n._("Error: The file could not be deleted. Please try again later.")); + } + }); }); - - self.setupRecentUploadsTable = function() { - recentUploadsTable = $("#recent_uploads_table").dataTable({ + + self.setupRecentUploadsTable = function () { + recentUploadsTable = $("#recent_uploads_table").dataTable({ "bJQueryUI": true, - "bProcessing": false, - "bServerSide": true, - "sAjaxSource": '/Plupload/recent-uploads/format/json', - "sAjaxDataProp": 'files', - "bSearchable": false, - "bInfo": true, - //"sScrollY": "200px", - "bFilter": false, - "bSort": false, - "sDom": '<"H">frtip<"F"l>', - "bPaginate" : true, + "bProcessing": false, + "bServerSide": true, + "sAjaxSource": '/Plupload/recent-uploads/format/json', + "sAjaxDataProp": 'files', + "bSearchable": false, + "bInfo": true, + //"sScrollY": "200px", + "bFilter": false, + "bSort": false, + //"sDom": '<"H">frtip<"F"l>', + "sDom": 'frt<"F"lip>', + "bPaginate": true, "sPaginationType": "full_numbers", "oLanguage": getDatatablesStrings({ "sEmptyTable": $.i18n._("No files have been uploaded yet."), - "sInfoEmpty": $.i18n._("Showing 0 to 0 of 0 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)"), + "sInfoEmpty": $.i18n._("Showing 0 to 0 of 0 uploads"), + "sInfo": $.i18n._("Showing _START_ to _END_ of _TOTAL_ uploads"), + "sInfoFiltered": $.i18n._("(filtered from _MAX_ total uploads)"), }), "aoColumns": [ - { "mData" : "artist_name", "sTitle" : $.i18n._("Creator") }, - { "mData" : "track_title", "sTitle" : $.i18n._("Title") }, - { "mData" : "import_status", "sTitle" : $.i18n._("Import Status"), - "mRender": self.renderImportStatus - }, - { "mData" : "utime", "sTitle" : $.i18n._("Uploaded") }, - { "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 } ); - $.getJSON( sSource, aoData, function (json) { - fnCallback(json); - if (json.files) { - var areAnyFileImportsPending = false; - for (var i = 0; i < json.files.length; i++) { - //console.log(file); - var file = json.files[i]; - if (file.import_status == 1) - { - areAnyFileImportsPending = true; - } - } - if (areAnyFileImportsPending) { - //alert("pending uploads, starting refresh on timer"); - self.startRefreshingRecentUploads(); - } else { - self.stopRefreshingRecentUploads(); - } + {"mData": "artist_name", "sTitle": $.i18n._("Creator")}, + {"mData": "track_title", "sTitle": $.i18n._("Title")}, + { + "mData": "import_status", "sTitle": $.i18n._("Import Status"), + "mRender": self.renderImportStatus + }, + {"mData": "utime", "sTitle": $.i18n._("Uploaded")}, + { + "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}); + $.getJSON(sSource, aoData, function (json) { + fnCallback(json); + if (json.files) { + var areAnyFileImportsPending = false; + for (var i = 0; i < json.files.length; i++) { + //console.log(file); + var file = json.files[i]; + if (file.import_status == 1) { + areAnyFileImportsPending = true; + } + } + if (areAnyFileImportsPending) { + //alert("pending uploads, starting refresh on timer"); + self.startRefreshingRecentUploads(); + } else { + self.stopRefreshingRecentUploads(); + } - // Update usability hint - in common.js - 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(); - }); + // Update usability hint - in common.js + getUsabilityHint(); + } + }); + } + }); - //Create the recent uploads table. - self.recentUploadsTable = self.setupRecentUploadsTable(); + return recentUploadsTable; + }; - //$("#recent_uploads_table.div.fg-toolbar").prepend('Custom tool bar! Text/images etc.'); + 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('Custom tool bar! Text/images etc.'); });