harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

re-implement progress-bar to work with all browsers

Browse Source
This commit is contained in:
Mario Vavti 2016-07-28 16:35:27 +02:00
parent fc105cf141
commit 500ee4c1bf
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
view/css/mod_cloud.css
View File

@ -47,3 +47,10 @@
opacity: 0.5; opacity: 0.5;
box-shadow: inset 0 0px 7px #5cb85c; box-shadow: inset 0 0px 7px #5cb85c;
} }
.upload-progress-bar {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOM2RFTDwAE2QHxFMHIIwAAAABJRU5ErkJggg==') repeat-y;
background-size: 3px;
padding: 0px !important;
height: 3px;
}

13
view/js/mod_cloud.js
View File

@ -88,11 +88,14 @@ function UploadFileSelectHandler(e) {
function prepareHtml(f, i) { function prepareHtml(f, i) {
$("#cloud-index tr:nth-child(2)").after( $("#cloud-index tr:nth-child(2)").after(
'<tr class=\"new-upload\">' + '<tr class="new-upload">' +
'<td><i class=\"fa ' + getIconFromType(f.type) + '\" title=\"' + f.type + '\"></i></td>' + '<td><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
'<td>' + f.name + '</td>' + '<td>' + f.name + '</td>' +
'<td id=\"upload-progress-' + i + '\"></td><td></td><td></td><td></td><td></td>' + '<td id="upload-progress-' + i + '"></td><td></td><td></td><td></td><td></td>' +
'<td class=\"hidden-xs\">' + formatSizeUnits(f.size) + '</td><td class=\"hidden-xs\"></td>' + '<td class="hidden-xs">' + formatSizeUnits(f.size) + '</td><td class="hidden-xs"></td>' +
'</tr>' +
'<tr class="new-upload">' +
'<td id="upload-progress-bar-' + i + '" colspan="9" class="upload-progress-bar"></td>' +
'</tr>' '</tr>'
); );
} }
@ -166,7 +169,7 @@ function UploadFile(file, idx) {
var total = e.totalSize || e.total; var total = e.totalSize || e.total;
// Dynamically update the percentage complete displayed in the file upload list // Dynamically update the percentage complete displayed in the file upload list
$('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%'); $('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
$('#new-upload-' + idx).css('background-size', Math.round(done / total * 100) + '%'); $('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%');
}); });
xhr.addEventListener('load', function (e) { xhr.addEventListener('load', function (e) {