Merge branch 'Superduper-Progressbar-branch-thingie' of https://github.com/luckydonald/core into luckydonald-Superduper-Progressbar-branch-thingie
This commit is contained in:
Vincent Petry
commit
5f6fb45704
|
|
@ -67,7 +67,15 @@ table td.filename .nametext .innernametext {
|
|||
}
|
||||
|
||||
/* shorten elements for mobile */
|
||||
#uploadprogressbar {
|
||||
#uploadprogressbar, #uploadprogressbar .label.inner {
|
||||
width: 50px;
|
||||
}
|
||||
/* hide desktop-only parts */
|
||||
#uploadprogressbar .desktop {
|
||||
display: none !important;
|
||||
}
|
||||
#uploadprogressbar .mobile {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -47,7 +47,39 @@
|
|||
width: 200px;
|
||||
height: 36px;
|
||||
display:inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
#uploadprogressbar .label {
|
||||
top: 6px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
}
|
||||
#uploadprogressbar .label.inner {
|
||||
color:white;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 200px;
|
||||
}
|
||||
#uploadprogressbar .label.outer {
|
||||
position: relative;
|
||||
color: black;
|
||||
}
|
||||
#uploadprogressbar .desktop {
|
||||
display: block;
|
||||
}
|
||||
#uploadprogressbar .mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#uploadprogressbar + stop {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -557,7 +557,16 @@ OC.Upload = {
|
|||
window.file_upload_param = fileupload;
|
||||
|
||||
if (supportAjaxUploadWithProgress()) {
|
||||
|
||||
//remaining time
|
||||
var lastUpdate = new Date().getMilliseconds();
|
||||
var lastSize = 0;
|
||||
var bufferSize = 20;
|
||||
var buffer = [];
|
||||
var bufferIndex = 0;
|
||||
var bufferTotal = 0;
|
||||
for(var i = 0; i < bufferSize;i++){
|
||||
buffer[i] = 0;
|
||||
}
|
||||
// add progress handlers
|
||||
fileupload.on('fileuploadadd', function(e, data) {
|
||||
OC.Upload.log('progress handle fileuploadadd', e, data);
|
||||
|
|
@ -570,7 +579,15 @@ OC.Upload = {
|
|||
fileupload.on('fileuploadstart', function(e, data) {
|
||||
OC.Upload.log('progress handle fileuploadstart', e, data);
|
||||
$('#uploadprogresswrapper .stop').show();
|
||||
$('#uploadprogresswrapper .label').show();
|
||||
$('#uploadprogressbar').progressbar({value: 0});
|
||||
$('#uploadprogressbar .ui-progressbar-value').
|
||||
html('<em class="label inner"><span class="desktop">'
|
||||
+ t('files', 'Uploading...')
|
||||
+ '</span><span class="mobile">'
|
||||
+ t('files', '...')
|
||||
+ '</span></em>');
|
||||
$('#uploadprogressbar').tipsy({gravity:'n', fade:true, live:true});
|
||||
OC.Upload._showProgressBar();
|
||||
});
|
||||
fileupload.on('fileuploadprogress', function(e, data) {
|
||||
|
|
@ -580,11 +597,67 @@ OC.Upload = {
|
|||
fileupload.on('fileuploadprogressall', function(e, data) {
|
||||
OC.Upload.log('progress handle fileuploadprogressall', e, data);
|
||||
var progress = (data.loaded / data.total) * 100;
|
||||
var thisUpdate = new Date().getMilliseconds();
|
||||
var diffUpdate = (thisUpdate - lastUpdate)/1000; // eg. 2s
|
||||
lastUpdate = thisUpdate;
|
||||
var diffSize = data.loaded - lastSize;
|
||||
lastSize = data.loaded;
|
||||
diffSize = diffSize / diffUpdate; // apply timing factor, eg. 1mb/2s = 0.5mb/s
|
||||
var remainingSeconds = ((data.total - data.loaded) / diffSize);
|
||||
if(remainingSeconds >= 0) {
|
||||
bufferTotal = bufferTotal - (buffer[bufferIndex]) + remainingSeconds;
|
||||
buffer[bufferIndex] = remainingSeconds; //buffer to make it smoother
|
||||
bufferIndex = (bufferIndex + 1) % bufferSize;
|
||||
}
|
||||
var smoothRemainingSeconds = (bufferTotal / bufferSize); //seconds
|
||||
var date = new Date(smoothRemainingSeconds * 1000);
|
||||
var timeStringDesktop = "";
|
||||
var timeStringMobile = "";
|
||||
if(date.getUTCHours() > 0){
|
||||
timeStringDesktop = t('files', '{hours}:{minutes}:{seconds} hour{plural_s} left' , {
|
||||
hours:date.getUTCHours(),
|
||||
minutes: ('0' + date.getUTCMinutes()).slice(-2),
|
||||
seconds: ('0' + date.getUTCSeconds()).slice(-2),
|
||||
plural_s: ( smoothRemainingSeconds === 3600 ? "": "s") // 1 hour = 1*60m*60s = 3600s
|
||||
});
|
||||
timeStringMobile = t('files', '{hours}:{minutes}h' , {
|
||||
hours:date.getUTCHours(),
|
||||
minutes: ('0' + date.getUTCMinutes()).slice(-2),
|
||||
seconds: ('0' + date.getUTCSeconds()).slice(-2)
|
||||
});
|
||||
} else if(date.getUTCMinutes() > 0){
|
||||
timeStringDesktop = t('files', '{minutes}:{seconds} minute{plural_s} left' , {
|
||||
minutes: date.getUTCMinutes(),
|
||||
seconds: ('0' + date.getUTCSeconds()).slice(-2),
|
||||
plural_s: (smoothRemainingSeconds === 60 ? "": "s") // 1 minute = 1*60s = 60s
|
||||
});
|
||||
timeStringMobile = t('files', '{minutes}:{seconds}m' , {
|
||||
minutes: date.getUTCMinutes(),
|
||||
seconds: ('0' + date.getUTCSeconds()).slice(-2)
|
||||
});
|
||||
} else if(date.getUTCSeconds() > 0){
|
||||
timeStringDesktop = t('files', '{seconds} second{plural_s} left' , {
|
||||
seconds: date.getUTCSeconds(),
|
||||
plural_s: (smoothRemainingSeconds === 1 ? "": "s") // 1 second = 1s = 1s
|
||||
});
|
||||
timeStringMobile = t('files', '{seconds}s' , {seconds: date.getUTCSeconds()});
|
||||
} else {
|
||||
timeStringDesktop = t('files', 'Any moment now...');
|
||||
timeStringMobile = t('files', 'Soon...');
|
||||
}
|
||||
$('#uploadprogressbar .label .mobile').text(timeStringMobile);
|
||||
$('#uploadprogressbar .label .desktop').text(timeStringDesktop);
|
||||
$('#uploadprogressbar').attr('original-title',
|
||||
t('files', '{loadedSize} of {totalSize} ({bitrate})' , {
|
||||
loadedSize: humanFileSize(data.loaded),
|
||||
totalSize: humanFileSize(data.total),
|
||||
bitrate: humanFileSize(data.bitrate) + '/s'
|
||||
})
|
||||
);
|
||||
$('#uploadprogressbar').progressbar('value', progress);
|
||||
});
|
||||
fileupload.on('fileuploadstop', function(e, data) {
|
||||
OC.Upload.log('progress handle fileuploadstop', e, data);
|
||||
|
||||
OC.Upload._hideProgressBar();
|
||||
});
|
||||
fileupload.on('fileuploadfail', function(e, data) {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<div id="controls">
|
||||
<div class="actions creatable hidden">
|
||||
<div id="uploadprogresswrapper">
|
||||
<div id="uploadprogressbar"></div>
|
||||
<button class="stop icon-close" style="display:none">
|
||||
<span class="hidden-visually">
|
||||
<?php p($l->t('Cancel upload'))?>
|
||||
</span>
|
||||
</button>
|
||||
<div id="uploadprogressbar">
|
||||
<em class="label outer" style="display:none"><span class="desktop"><?php p($l->t('Uploading...'));?></span><span class="mobile"><?php p($l->t('...'));?></span></em>
|
||||
</div>
|
||||
<input type="button" class="stop icon-close" style="display:none" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="file_action_panel"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue